diff --git a/addons/web/static/src/js/libs/jquery.js b/addons/web/static/src/js/libs/jquery.js
index 77aa9e63c3d2643e7ac532d14e7b5408ee261c32..1a33d43c2e5fb2c447104d00e98dc371d1841bf4 100644
--- a/addons/web/static/src/js/libs/jquery.js
+++ b/addons/web/static/src/js/libs/jquery.js
@@ -17,6 +17,9 @@ $.extend($.expr[':'], {
containsExact: function (element, index, matches){
return $.trim(element.innerHTML) === matches[3];
},
+ containsExactText: function (element, index, matches) {
+ return element.innerText.trim() === matches[3].trim();
+ },
/**
* Note all escaped characters need to be double escaped inside of the
* expression, so "\(" needs to be "\\("
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 28a885fbfcef587e5364a6873d09b2b3b23e97b4..6eabaf1f5425ba3f88d40b00505e1a905e82d6d2 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -109,6 +109,7 @@ function createPropertyProxy(obj, propertyName, value) {
* user values.
*/
const UserValueWidget = Widget.extend({
+ className: 'o_we_user_value_widget',
custom_events: {
'user_value_change': '_onUserValueNotification',
'user_value_preview': '_onUserValueNotification',
@@ -132,6 +133,8 @@ const UserValueWidget = Widget.extend({
_makeDescriptive: function () {
const $el = this._super(...arguments);
_addTitleAndAllowedAttributes($el[0], this.title, this.options);
+ this.containerEl = document.createElement('div');
+ $el.append(this.containerEl);
return $el;
},
@@ -471,7 +474,7 @@ const ButtonUserValueWidget = UserValueWidget.extend({
*/
start: function (parent, title, options) {
if (this.options && this.options.childNodes) {
- this.options.childNodes.forEach(node => this.el.appendChild(node));
+ this.options.childNodes.forEach(node => this.containerEl.appendChild(node));
}
return this._super(...arguments);
@@ -529,7 +532,7 @@ const CheckboxUserValueWidget = ButtonUserValueWidget.extend({
*/
start: function () {
const checkboxEl = document.createElement('we-checkbox');
- this.el.appendChild(checkboxEl);
+ this.containerEl.appendChild(checkboxEl);
return this._super(...arguments);
},
@@ -546,17 +549,17 @@ const SelectUserValueWidget = UserValueWidget.extend({
*/
start: function () {
if (this.options && this.options.valueEl) {
- this.el.appendChild(this.options.valueEl);
+ this.containerEl.appendChild(this.options.valueEl);
}
this.menuTogglerEl = document.createElement('we-toggler');
- this.el.appendChild(this.menuTogglerEl);
+ this.containerEl.appendChild(this.menuTogglerEl);
this.menuEl = document.createElement('we-select-menu');
if (this.options && this.options.childNodes) {
this.options.childNodes.forEach(node => this.menuEl.appendChild(node));
}
- this.el.appendChild(this.menuEl);
+ this.containerEl.appendChild(this.menuEl);
return this._super(...arguments);
},
@@ -661,11 +664,11 @@ const InputUserValueWidget = UserValueWidget.extend({
this.inputEl = document.createElement('input');
this.inputEl.setAttribute('type', 'text');
- this.el.appendChild(this.inputEl);
+ this.containerEl.appendChild(this.inputEl);
var unitEl = document.createElement('span');
unitEl.textContent = unit;
- this.el.appendChild(unitEl);
+ this.containerEl.appendChild(unitEl);
return this._super(...arguments);
},
@@ -825,7 +828,7 @@ const MultiUserValueWidget = UserValueWidget.extend({
* @override
*/
start: function () {
- this.el.appendChild(_buildRowElement('', this.options));
+ this.containerEl.appendChild(_buildRowElement('', this.options));
return this._super(...arguments);
},
@@ -865,6 +868,7 @@ const MultiUserValueWidget = UserValueWidget.extend({
});
const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
+ className: (ButtonUserValueWidget.prototype.className || '') + ' o_we_so_color_palette',
custom_events: {
'color_picked': '_onColorPicked',
'color_hover': '_onColorHovered',
@@ -872,15 +876,6 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
'color_reset': '_onColorReset',
},
- /**
- * @override
- */
- init: function () {
- this._super(...arguments);
- if (!this.title) {
- this.title = ' ';
- }
- },
/**
* @override
*/
@@ -888,13 +883,12 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
const _super = this._super.bind(this);
const args = arguments;
- this.el.classList.add('o_we_so_color_palette');
-
// Pre-instanciate the color palette widget
await this._renderColorPalette();
// Build the select element with a custom span to hold the color preview
this.colorPreviewEl = document.createElement('span');
+ this.colorPreviewEl.classList.add('o_we_color_preview');
this.options.childNodes = [this.colorPalette.el];
this.options.valueEl = this.colorPreviewEl;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 162a58fd4960197b7a65636a7e9136b88b479a52..782d7a703274b2e3bda51e6a565a171cdbf0692c 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -176,6 +176,16 @@ body.editor_enable.editor_has_snippets {
> .o_we_customize_panel {
+ @mixin we-icon-button($icon, $color: null) {
+ @extend %we-icon-button;
+ padding-right: 0.5em + 1em + 0.5em;
+
+ &::after {
+ content: $icon;
+ color: $color;
+ }
+ }
+
we-button, we-toggler {
flex: 1 1 auto;
cursor: pointer;
@@ -216,32 +226,25 @@ body.editor_enable.editor_has_snippets {
}
}
}
-
- we-title {
- text-transform: capitalize;
+ we-toggler {
+ @include we-icon-button('\f107');
}
-
%we-icon-button {
position: relative;
&::after {
- position: absolute;
+ @include o-position-absolute(50%, 0.5em);
+ transform: translateY(-50%);
width: 1em;
- right: 0.5em;
text-align: center;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
}
- @mixin we-icon-button($icon, $color: null) {
- @extend %we-icon-button;
- padding-right: 0.5em + 1em + 0.5em;
-
- &::after {
- content: $icon;
- color: $color;
- }
+ we-title {
+ display: block;
+ text-transform: capitalize;
}
we-customizeblock-options {
@@ -283,177 +286,184 @@ body.editor_enable.editor_has_snippets {
margin-top: 0.5em;
}
- we-button {
- &.active {
- @include we-icon-button('\f00c', $o-we-color-success);
- }
+ .dropdown-menu {
+ // FIXME temporary fix for m2o option for example
+ position: static !important;
+ }
+ }
+
+ //----------------------------------------------------------------------
+ // User Value Widgets
+ //----------------------------------------------------------------------
+
+ .o_we_user_value_widget {
+ flex: 1 1 auto;
+ display: block;
+
+ > div {
+ display: flex;
+ align-items: baseline;
}
- .o_we_checkbox_wrapper.active {
+ }
+
+ // Buttons
+ we-button.o_we_user_value_widget.active {
+ @include we-icon-button('\f00c', $o-we-color-success);
+ }
+
+ // Checkboxes
+ .o_we_checkbox_wrapper.o_we_user_value_widget {
+ @extend .o_we_inline;
+ flex: 0 0 auto;
+ padding: 0;
+ border: none;
+ background-color: transparent;
+ color: inherit;
+
+ we-checkbox {
+ flex: 0 0 auto;
+ display: block;
+ width: 1em;
+ height: 1em;
+ margin-left: auto;
+ border: 1px solid var(--o-we-bg-color-dark);
+ border-radius: 0;
+ background-color: var(--o-we-bg-color-dark);
+ }
+
+ &.active {
padding-right: 0;
&::after {
right: 0;
}
}
- we-toggler {
- @include we-icon-button('\f107');
- }
+ }
- we-select {
- flex: 1 1 auto;
- position: relative;
- display: flex;
- flex-flow: row wrap;
- align-items: center;
+ // Selects
+ we-select.o_we_user_value_widget {
+ position: relative;
- we-toggler {
- flex: 0 0 100%;
+ we-toggler {
+ flex: 0 0 100%;
+
+ &.active {
+ background-color: transparent;
+ border-color: var(--o-we-color);
- &.active {
- background-color: transparent;
- border-color: var(--o-we-color);
+ + we-select-menu {
+ display: block;
}
}
- we-select-menu {
- @include o-position-absolute(100%, 0, auto, 0);
- display: none;
- z-index: $zindex-dropdown;
- border: 1px solid var(--o-we-color);
- border-top-style: none;
- background-color: var(--o-we-bg-color-dark);
- }
}
+ we-select-menu {
+ @include o-position-absolute(100%, 0, auto, 0);
+ display: none;
+ z-index: $zindex-dropdown;
+ border: 1px solid var(--o-we-color);
+ border-top-style: none;
+ background-color: var(--o-we-bg-color-dark);
+ }
+ }
- we-toggler.active {
+ // Inputs
+ we-input.o_we_user_value_widget {
- + we-select-menu {
- display: block;
- }
+ input {
+ flex: 1 1 auto;
+ width: 0;
+ min-width: 1.5em;
+ margin: 0 2px 0 0;
+ padding: 0 2px;
+ border: none;
+ border-radius: 0;
+ background-color: var(--o-we-bg-color-dark);
+ color: var(--o-we-color);
+ text-align: right;
}
+ span {
+ flex: 0 0 auto;
+ }
+ }
- .o_we_checkbox_wrapper {
- display: flex;
- align-items: center;
- padding: 0;
- border: none;
- background-color: transparent;
- color: inherit;
+ // Color Pickers
+ .o_we_so_color_palette.o_we_user_value_widget {
+ @extend .o_we_inline;
+ flex: 0 0 auto;
- > we-title {
- flex: 1 1 auto;
- min-width: 0;
- @include o-text-overflow(block);
- }
- > we-checkbox {
- flex: 0 0 auto;
- display: block;
- width: 1em;
- height: 1em;
- margin-left: auto;
- border: 1px solid var(--o-we-bg-color-dark);
- border-radius: 0;
- background-color: var(--o-we-bg-color-dark);
- }
+ .o_we_color_preview {
+ @include o-alpha-button-preview;
+ display: block;
+ flex: 0 0 auto;
+ width: 1em;
+ height: 1em;
+ margin-left: auto;
+ border: 1px solid white;
}
+ we-toggler {
+ display: none;
+ }
+ we-select-menu {
+ border-top-style: solid;
+ }
+ }
- we-input {
- flex: 1 1 auto;
+ //----------------------------------------------------------------------
+ // Layout Utils
+ //----------------------------------------------------------------------
+
+ we-row {
+ position: relative;
+ flex: 1 1 auto;
+ display: block;
+
+ > div {
display: flex;
- flex-wrap: wrap;
align-items: center;
- > we-title {
- min-width: 100%;
- }
- > input {
- flex: 1 1 auto;
- width: 0;
- min-width: 1.5em;
- margin: 0 2px 0 0;
- padding: 0 2px;
- border: none;
- border-radius: 0;
- background-color: var(--o-we-bg-color-dark);
- color: var(--o-we-color);
- text-align: right;
- }
- > span {
- flex: 0 0 auto;
+ > * + * {
+ margin-left: 0.5em;
}
}
- we-row {
- position: relative;
- display: block;
-
- > div {
- flex: 1 1 auto;
- display: flex;
- align-items: center;
-
- > * + * {
- margin-left: 0.5em;
- }
- }
-
- we-select {
- position: static;
- }
+ we-select.o_we_user_value_widget {
+ position: static;
}
+ }
- .o_we_inline {
+ .o_we_inline {
+ &, &.o_we_user_value_widget {
display: flex;
align-items: center;
> we-title {
+ @include o-text-overflow();
min-width: 60%;
margin-right: 5%;
}
- }
-
- .dropdown-menu {
- // FIXME temporary fix for m2o option for example
- position: static !important;
+ > div {
+ flex: 1 1 auto;
+ }
}
}
- // Specific options
+ //----------------------------------------------------------------------
+ // Specific Options
+ //----------------------------------------------------------------------
+
.snippet-option-background {
[data-background=""] {
color: $o-we-color-danger;
}
[data-choose-image="true"] {
- display: flex;
- align-items: center;
-
- > span {
+ span {
@include o-text-overflow();
}
- > .fa, > .fas, > .fab, > .far {
+ .fa, .fas, .fab, .far {
margin-left: auto;
}
}
}
-
- .o_we_so_color_palette {
- flex: 0 0 auto;
-
- we-title + span {
- @include o-alpha-button-preview;
- display: block;
- flex: 0 0 auto;
- width: 1em;
- height: 1em;
- margin-left: auto;
- border: 1px solid white;
- }
- we-toggler {
- display: none;
- }
- we-select-menu {
- border-top-style: solid;
- }
- }
}
}
diff --git a/addons/website_blog/static/src/js/tours/website_blog.js b/addons/website_blog/static/src/js/tours/website_blog.js
index ce35f60f40a932403d463ad2ba0848abb9830ec5..9ad5c8e9de9716950da4d6a93e9f85f70e56f1c7 100644
--- a/addons/website_blog/static/src/js/tours/website_blog.js
+++ b/addons/website_blog/static/src/js/tours/website_blog.js
@@ -23,7 +23,7 @@ odoo.define("website_blog.tour", function (require) {
position: "top",
run: "text",
}, {
- trigger: "we-button:containsExact(" + _t("Change Cover") + "):visible",
+ trigger: "we-button:containsExactText(" + _t("Change Cover") + ")",
extra_trigger: "#wrap div[data-oe-expression=\"blog_post.name\"]:not(:containsExact(\"\"))",
content: _t("Set a blog post <b>cover</b>."),
position: "right",