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 c4f02c4c2cd..0b6f6719293 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -648,6 +648,25 @@ const ButtonUserValueWidget = UserValueWidget.extend({
return this._super(...arguments);
},
+ /**
+ * @override
+ */
+ async willStart() {
+ await this._super(...arguments);
+ if (this.options.dataAttributes.activeImg) {
+ this.activeImgEl = await _buildImgElement(this.options.dataAttributes.activeImg);
+ }
+ },
+ /**
+ * @override
+ */
+ _makeDescriptive() {
+ const $el = this._super(...arguments);
+ if (this.activeImgEl) {
+ this.containerEl.appendChild(this.activeImgEl);
+ }
+ return $el;
+ },
//--------------------------------------------------------------------------
// Public
@@ -690,6 +709,10 @@ const ButtonUserValueWidget = UserValueWidget.extend({
}
active = (this.getActiveValue(methodName) === value);
}
+ if (this.imgEl && this.activeImgEl) {
+ this.imgEl.classList.toggle('d-none', active);
+ this.activeImgEl.classList.toggle('d-none', !active);
+ }
this.el.classList.toggle('active', active);
},
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 19627e8e17c..af8bca875b7 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -238,6 +238,7 @@ body.editor_enable.editor_has_snippets {
&.o_we_bg_#{$name} {
color: white;
background-color: $color;
+
&:hover {
background-color: darken($color, 7.5%);
}
@@ -637,7 +638,7 @@ body.editor_enable.editor_has_snippets {
margin-left: $o-we-sidebar-content-field-multi-spacing;
padding: 0 $o-we-sidebar-content-field-multi-spacing;
- &.fa {
+ &.fa, &[data-img] {
margin-left: $o-we-sidebar-content-field-label-spacing;
}
}
@@ -1535,7 +1536,7 @@ body.editor_enable.editor_has_snippets {
}
}
}
- }
+ }
.o_we_color_btn, .o_we_color_combination_btn {
float: left;
diff --git a/addons/website/static/src/img/snippets_options/mobile_invisible.svg b/addons/website/static/src/img/snippets_options/mobile_invisible.svg
new file mode 100644
index 00000000000..187770e3dd4
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/mobile_invisible.svg
@@ -0,0 +1,7 @@
+
+
diff --git a/addons/website/static/src/img/snippets_options/mobile_visible.svg b/addons/website/static/src/img/snippets_options/mobile_visible.svg
new file mode 100644
index 00000000000..6b1888f9c75
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/mobile_visible.svg
@@ -0,0 +1,10 @@
+
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index f9961bb3b2e..20c8204acfc 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1971,6 +1971,20 @@ options.registry.topMenuColor = options.Class.extend({
* Manage the visibility of snippets on mobile.
*/
options.registry.MobileVisibility = options.Class.extend({
+ isTopOption: true,
+
+ //--------------------------------------------------------------------------
+ // Public
+ //--------------------------------------------------------------------------
+
+ /**
+ * @override
+ */
+ async updateUI() {
+ await this._super(...arguments);
+ const $button = this.$el.find('we-button');
+ $button.attr('title', $button.hasClass('active') ? _t("Visible on mobile") : _t("Hidden on mobile"));
+ },
//--------------------------------------------------------------------------
// Options
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 32c86a63d89..63a69ad882d 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -133,6 +133,33 @@ $i: 1;
}
}
+ we-button.o_we_mobile {
+ > div {
+ // FIXME maybe there is some refactoring to do so that all SVG icons
+ // can be properly aligned with extra CSS rules...
+ display: flex;
+ align-items: center;
+
+ svg {
+ width: 15px;
+ fill: $o-we-color-danger;
+ margin-bottom: 0;
+ margin-left: -3px;
+
+ &:hover {
+ fill: darken($o-we-color-danger, 7.5%);
+ }
+ }
+ }
+ &.active > div > svg {
+ fill: $o-we-sidebar-content-field-color;
+
+ &:hover {
+ fill: $o-we-sidebar-content-field-pressed-color;
+ }
+ }
+ }
+
//----------------------------------------------------------------------
// 'Options' Tab Specific Components
//----------------------------------------------------------------------
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 2a6024edfd8..1b9de311adf 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -485,9 +485,11 @@
-
-
+