[IMP] website, *: improve the UI of the mobile visibility option
*: web_editor Adding the option to show/hide on mobile at snippet level + review the UI (now a top action button). task-2431659 closes odoo/odoo#65013 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Oussama MESSAOUDI
committed by
qsm-odoo
qsm-odoo
parent
13dd40ea55
commit
91703b9ff5
@@ -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);
|
||||
},
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg viewBox="0 0 566.93 566.93" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect transform="translate(283.46 -117.41) rotate(45)" x="255.56" y="-16.93" width="55.81" height="600.8"
|
||||
rx="25.61"/>
|
||||
<path d="m395.46 399.46a12 12 0 0 1-12 12h-128.4l-115.68 115.69a47.8 47.8 0 0 0 32.08 12.31h224a48 48 0 0 0 48-48v-268.4l-48 48zm-112 108a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/>
|
||||
<path d="m171.46 87.46a12 12 0 0 1 12-12h200a11.89 11.89 0 0 1 6.48 1.93l37.61-37.61a47.82 47.82 0 0 0-32.09-12.32h-224a48 48 0 0 0-48 48v268.41l48-48z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 589 B |
@@ -0,0 +1,10 @@
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566.93 566.93">
|
||||
<defs>
|
||||
<clipPath id="clip-path">
|
||||
<rect x="123.46" y="27.46" width="320" height="512" fill="none"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g clip-path="url(#clip-path)">
|
||||
<path d="M395.46,27.46h-224a48,48,0,0,0-48,48v416a48,48,0,0,0,48,48h224a48,48,0,0,0,48-48v-416a48,48,0,0,0-48-48m-112,480a32,32,0,1,1,32-32,32,32,0,0,1-32,32m112-108a12,12,0,0,1-12,12h-200a12,12,0,0,1-12-12v-312a12,12,0,0,1,12-12h200a12,12,0,0,1,12,12Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 583 B |
@@ -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
|
||||
|
||||
@@ -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
|
||||
//----------------------------------------------------------------------
|
||||
|
||||
@@ -485,9 +485,11 @@
|
||||
</div>
|
||||
|
||||
<!-- Mobile display options -->
|
||||
<div data-js="MobileVisibility" data-selector="section .row > div"
|
||||
<div data-js="MobileVisibility" data-selector="section, section .row > div"
|
||||
data-exclude=".s_col_no_resize.row > div">
|
||||
<we-checkbox string="Shown On Mobile" data-show-on-mobile="true" data-no-preview="true"/>
|
||||
<we-button class="o_we_link o_we_mobile" data-show-on-mobile="true" data-no-preview="true"
|
||||
data-img="/website/static/src/img/snippets_options/mobile_invisible.svg"
|
||||
data-active-img="/website/static/src/img/snippets_options/mobile_visible.svg"/>
|
||||
</div>
|
||||
|
||||
<div data-js="sizing_y"
|
||||
|
||||
Reference in New Issue
Block a user