[IMP] website: move device visibility options onto visibility options

Before this commit the Device visibility option was on its own row
inside the options panel.

This commit moves the buttons of the Device visibility option before
the dropdown inside the main row of the Visibility option.

task-2900730

closes odoo/odoo#102154

X-original-commit: 82000acfb6f8c7884994135413dcddac5441f8b4
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Benoit Socias
2022-10-05 03:23:21 +02:00
parent f317dd5bcb
commit cbe58fd16f
2 changed files with 25 additions and 16 deletions
@@ -2910,7 +2910,7 @@ options.registry.ScrollButton = options.Class.extend({
},
});
options.registry.ConditionalVisibility = options.Class.extend({
options.registry.ConditionalVisibility = options.registry.DeviceVisibility.extend({
/**
* @constructor
*/
@@ -2942,6 +2942,7 @@ options.registry.ConditionalVisibility = options.Class.extend({
* @override
*/
async onTargetHide() {
await this._super(...arguments);
if (this.$target[0].classList.contains('o_snippet_invisible')) {
this.$target[0].classList.add('o_conditional_hidden');
}
@@ -2950,12 +2951,14 @@ options.registry.ConditionalVisibility = options.Class.extend({
* @override
*/
async onTargetShow() {
await this._super(...arguments);
this.$target[0].classList.remove('o_conditional_hidden');
},
/**
* @override
*/
cleanForSave() {
async cleanForSave() {
await this._super(...arguments);
// Kinda hacky: the snippet is forced hidden via onTargetHide on save
// but should be marked as visible as when entering edit mode later, the
// snippet will be shown naturally (as the CSS rules won't apply).
+20 -14
View File
@@ -1210,13 +1210,26 @@
</we-select>
</div>
<t t-set="_device_visibility_widgets">
<we-button class="o_we_device" data-toggle-device-visibility="no_desktop" title="Show/Hide on Desktop"
data-no-preview="true"
data-img="/website/static/src/img/snippets_options/desktop_invisible.svg"
/>
<we-button class="o_we_device" data-toggle-device-visibility="no_mobile" title="Show/Hide on Mobile"
data-no-preview="true"
data-img="/website/static/src/img/snippets_options/mobile_invisible.svg"
/>
</t>
<div data-js="ConditionalVisibility" data-selector="section">
<t t-set="current_website" t-value="request.env['website'].get_current_website()"/>
<we-collapse>
<we-select string="Visibility" data-attribute-name="visibility" data-no-preview="true">
<we-button data-select-data-attribute="">Always visible</we-button>
<we-button data-select-data-attribute="conditional" data-select-class="o_snippet_invisible" data-name="visibility_conditional">Conditionally</we-button>
</we-select>
<we-row string="Visibility">
<t t-out="_device_visibility_widgets"/>
<we-select data-attribute-name="visibility" data-no-preview="true">
<we-button data-select-data-attribute="">No condition</we-button>
<we-button data-select-data-attribute="conditional" data-select-class="o_snippet_invisible" data-name="visibility_conditional">Conditionally</we-button>
</we-select>
</we-row>
<t t-if="request.geoip.get('country_code')">
<t t-call="website.snippet_options_conditional_visibility">
@@ -1280,17 +1293,10 @@
</div>
<!-- Mobile/Desktop display options -->
<div data-js="DeviceVisibility" data-selector="section, section .row > div"
<div data-js="DeviceVisibility" data-selector="section .row > div"
data-exclude=".s_col_no_resize.row > div, .s_masonry_block .s_col_no_resize">
<we-row string="Device">
<we-button class="o_we_device" data-toggle-device-visibility="no_desktop" title="Show/Hide on Desktop"
data-no-preview="true"
data-img="/website/static/src/img/snippets_options/desktop_invisible.svg"
/>
<we-button class="o_we_device" data-toggle-device-visibility="no_mobile" title="Show/Hide on Mobile"
data-no-preview="true"
data-img="/website/static/src/img/snippets_options/mobile_invisible.svg"
/>
<we-row string="Visibility">
<t t-out="_device_visibility_widgets"/>
</we-row>
</div>