From d23a9c1954a79c4a9b49ad1319f4cf30514a9230 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Wed, 8 Jul 2020 15:47:01 +0000 Subject: [PATCH] [IMP] web_editor, *: introduce new "button group" editor widget *: website, website_form Basically work just as a we-select but with a different design. Part of https://github.com/odoo/odoo/pull/53930 task-2157252 --- .../static/src/js/editor/snippets.editor.js | 2 +- .../static/src/js/editor/snippets.options.js | 116 ++++++++++-------- .../static/src/scss/web_editor.variables.scss | 3 + .../static/src/scss/wysiwyg_snippets.scss | 35 +++++- addons/web_editor/static/src/xml/snippets.xml | 4 +- .../snippets_options/content_width_full.svg | 9 ++ .../snippets_options/content_width_normal.svg | 9 ++ .../snippets_options/content_width_small.svg | 9 ++ .../src/img/snippets_options/height_auto.svg | 9 ++ .../src/img/snippets_options/height_full.svg | 9 ++ .../src/img/snippets_options/height_half.svg | 9 ++ addons/website/views/snippets/s_hr.xml | 10 +- .../website/views/snippets/s_media_list.xml | 18 +-- .../views/snippets/s_table_of_content.xml | 10 +- addons/website/views/snippets/s_tabs.xml | 14 +-- .../views/snippets/s_text_highlight.xml | 10 +- addons/website/views/snippets/snippets.xml | 65 ++++++---- .../src/snippets/s_website_form/options.js | 4 +- 18 files changed, 230 insertions(+), 115 deletions(-) create mode 100644 addons/website/static/src/img/snippets_options/content_width_full.svg create mode 100644 addons/website/static/src/img/snippets_options/content_width_normal.svg create mode 100644 addons/website/static/src/img/snippets_options/content_width_small.svg create mode 100644 addons/website/static/src/img/snippets_options/height_auto.svg create mode 100644 addons/website/static/src/img/snippets_options/height_full.svg create mode 100644 addons/website/static/src/img/snippets_options/height_half.svg diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index 12a21bde93a..2ac2a13a88c 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -457,7 +457,7 @@ var SnippetEditor = Widget.extend({ var $optionsSection = $(core.qweb.render('web_editor.customize_block_options_section', { name: this.getName(), })).data('editor', this); - const $optionsSectionBtnGroup = $optionsSection.find('we-button-group'); + const $optionsSectionBtnGroup = $optionsSection.find('we-top-button-group'); $optionsSectionBtnGroup.contents().each((i, node) => { if (node.nodeType === Node.TEXT_NODE) { node.parentNode.removeChild(node); 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 fcd5b4a4ea1..cc0a154a08d 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -677,7 +677,63 @@ const CheckboxUserValueWidget = ButtonUserValueWidget.extend({ }, }); -const SelectUserValueWidget = UserValueWidget.extend({ +const BaseSelectionUserValueWidget = UserValueWidget.extend({ + /** + * @override + */ + async start() { + await this._super(...arguments); + + this.menuEl = document.createElement('we-selection-items'); + if (this.options && this.options.childNodes) { + this.options.childNodes.forEach(node => this.menuEl.appendChild(node)); + } + this.containerEl.appendChild(this.menuEl); + }, + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @override + */ + getValue(methodName) { + let activeWidget = this._userValueWidgets.find(widget => widget.isPreviewed()); + if (!activeWidget) { + activeWidget = this._userValueWidgets.find(widget => widget.isActive()); + } + if (activeWidget) { + return activeWidget.getActiveValue(methodName); + } + return this._super(...arguments); + }, + /** + * @override + */ + isContainer() { + return true; + }, + /** + * @override + */ + setValue(value, methodName) { + this._userValueWidgets.forEach(widget => { + widget.setValue('__NULL__', methodName); + }); + for (const widget of [...this._userValueWidgets].reverse()) { + widget.setValue(value, methodName); + if (widget.isActive()) { + // Only one select item can be true at a time, we consider the + // last one if multiple would be active. + return; + } + } + this._super(...arguments); + }, +}); + +const SelectUserValueWidget = BaseSelectionUserValueWidget.extend({ tagName: 'we-select', events: { 'click': '_onClick', @@ -686,9 +742,11 @@ const SelectUserValueWidget = UserValueWidget.extend({ /** * @override */ - start: function () { + async start() { + await this._super(...arguments); + if (this.options && this.options.valueEl) { - this.containerEl.appendChild(this.options.valueEl); + this.containerEl.insertBefore(this.options.valueEl, this.menuEl); } this.menuTogglerEl = document.createElement('we-toggler'); @@ -699,15 +757,7 @@ const SelectUserValueWidget = UserValueWidget.extend({ iconEl.classList.add('fa', 'fa-fw', this.icon); this.menuTogglerEl.appendChild(iconEl); } - 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.containerEl.appendChild(this.menuEl); - - return this._super(...arguments); + this.containerEl.insertBefore(this.menuTogglerEl, this.menuEl); }, //-------------------------------------------------------------------------- @@ -721,25 +771,6 @@ const SelectUserValueWidget = UserValueWidget.extend({ this._super(...arguments); this.menuTogglerEl.classList.remove('active'); }, - /** - * @override - */ - getValue: function (methodName) { - let activeWidget = this._userValueWidgets.find(widget => widget.isPreviewed()); - if (!activeWidget) { - activeWidget = this._userValueWidgets.find(widget => widget.isActive()); - } - if (activeWidget) { - return activeWidget.getActiveValue(methodName); - } - return this._super(...arguments); - }, - /** - * @override - */ - isContainer: function () { - return true; - }, /** * @override */ @@ -753,23 +784,6 @@ const SelectUserValueWidget = UserValueWidget.extend({ this._super(...arguments); this.menuTogglerEl.classList.add('active'); }, - /** - * @override - */ - setValue: function (value, methodName) { - this._userValueWidgets.forEach(widget => { - widget.setValue('__NULL__', methodName); - }); - for (const widget of [...this._userValueWidgets].reverse()) { - widget.setValue(value, methodName); - if (widget.isActive()) { - // Only one select item can be true at a time, we consider the - // last one if multiple would be active. - return; - } - } - this._super(...arguments); - }, //-------------------------------------------------------------------------- // Private @@ -834,6 +848,10 @@ const SelectUserValueWidget = UserValueWidget.extend({ }, }); +const ButtonGroupUserValueWidget = BaseSelectionUserValueWidget.extend({ + tagName: 'we-button-group', +}); + const InputUserValueWidget = UserValueWidget.extend({ tagName: 'we-input', events: { @@ -1545,11 +1563,11 @@ const RangeUserValueWidget = UserValueWidget.extend({ }, }); - const userValueWidgetsRegistry = { 'we-button': ButtonUserValueWidget, 'we-checkbox': CheckboxUserValueWidget, 'we-select': SelectUserValueWidget, + 'we-button-group': ButtonGroupUserValueWidget, 'we-input': InputUserValueWidget, 'we-multi': MultiUserValueWidget, 'we-colorpicker': ColorpickerUserValueWidget, diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index f031e0c8a50..cf4b8b3b7eb 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -156,6 +156,9 @@ $o-we-sidebar-content-field-input-font-family: monospace !default; $o-we-sidebar-content-field-input-unit-font-size: 9px !default; $o-we-sidebar-content-field-input-border-color: $o-we-accent !default; +// This value allows 5 fa icons (fit one row exactly with this) +$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing * 1.5 !default; + $o-we-sidebar-content-field-progress-height: 3px !default; $o-we-sidebar-content-field-progress-control-height: 7px !default; $o-we-sidebar-content-field-progress-color: $o-we-fg-darker !default; diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index 19705bbed7a..28cff34a1de 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -372,7 +372,7 @@ body.editor_enable.editor_has_snippets { line-height: $o-we-sidebar-content-main-title-height - $o-we-sidebar-content-main-title-border-width; } - > we-button-group { + > we-top-button-group { flex: 0 0 auto; display: block; margin-left: auto; @@ -499,6 +499,13 @@ body.editor_enable.editor_has_snippets { } } + // Selection (select and button groups) + we-selection-items { + .o_we_user_value_widget { + margin-top: 0; + } + } + // Selects we-select.o_we_user_value_widget { position: relative; @@ -507,7 +514,7 @@ body.editor_enable.editor_has_snippets { @include large-component(); } - we-select-menu { + we-selection-items { @include o-position-absolute(100%, 0, auto, 0); z-index: $zindex-dropdown; max-height: 600px; @@ -520,7 +527,6 @@ body.editor_enable.editor_has_snippets { we-button { @include we-icon-button('', $align: left); // Always a padding on the left - margin-top: 0; border: none; background: none; background-clip: padding-box; @@ -547,6 +553,29 @@ body.editor_enable.editor_has_snippets { } } + // Button groups + we-button-group.o_we_user_value_widget { + we-selection-items { + display: flex; + max-width: 100%; + + we-button { + padding: 0 $o-we-sidebar-content-field-button-group-button-spacing; + + &.active { + padding-left: $o-we-sidebar-content-field-button-group-button-spacing; + + &::after { + display: none; + } + } + + we-button { + border-left: none; + } + } + } + } + // Inputs we-input.o_we_user_value_widget { diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml index 226d4403eea..d86725ac16e 100644 --- a/addons/web_editor/static/src/xml/snippets.xml +++ b/addons/web_editor/static/src/xml/snippets.xml @@ -23,14 +23,14 @@ - + - + diff --git a/addons/website/static/src/img/snippets_options/content_width_full.svg b/addons/website/static/src/img/snippets_options/content_width_full.svg new file mode 100644 index 00000000000..77697264955 --- /dev/null +++ b/addons/website/static/src/img/snippets_options/content_width_full.svg @@ -0,0 +1,9 @@ + + + content_width_full + + + + + + \ No newline at end of file diff --git a/addons/website/static/src/img/snippets_options/content_width_normal.svg b/addons/website/static/src/img/snippets_options/content_width_normal.svg new file mode 100644 index 00000000000..2b53da35ff0 --- /dev/null +++ b/addons/website/static/src/img/snippets_options/content_width_normal.svg @@ -0,0 +1,9 @@ + + + content_width_normal + + + + + + \ No newline at end of file diff --git a/addons/website/static/src/img/snippets_options/content_width_small.svg b/addons/website/static/src/img/snippets_options/content_width_small.svg new file mode 100644 index 00000000000..9f9944bf899 --- /dev/null +++ b/addons/website/static/src/img/snippets_options/content_width_small.svg @@ -0,0 +1,9 @@ + + + content_width_small + + + + + + \ No newline at end of file diff --git a/addons/website/static/src/img/snippets_options/height_auto.svg b/addons/website/static/src/img/snippets_options/height_auto.svg new file mode 100644 index 00000000000..e52219eaf94 --- /dev/null +++ b/addons/website/static/src/img/snippets_options/height_auto.svg @@ -0,0 +1,9 @@ + + + height_auto + + + + + + \ No newline at end of file diff --git a/addons/website/static/src/img/snippets_options/height_full.svg b/addons/website/static/src/img/snippets_options/height_full.svg new file mode 100644 index 00000000000..5a972b11fef --- /dev/null +++ b/addons/website/static/src/img/snippets_options/height_full.svg @@ -0,0 +1,9 @@ + + + height_full + + + + + + \ No newline at end of file diff --git a/addons/website/static/src/img/snippets_options/height_half.svg b/addons/website/static/src/img/snippets_options/height_half.svg new file mode 100644 index 00000000000..30c355f5f4c --- /dev/null +++ b/addons/website/static/src/img/snippets_options/height_half.svg @@ -0,0 +1,9 @@ + + + height_half + + + + + + \ No newline at end of file diff --git a/addons/website/views/snippets/s_hr.xml b/addons/website/views/snippets/s_hr.xml index 7a6c50f16e1..878ca7435ad 100644 --- a/addons/website/views/snippets/s_hr.xml +++ b/addons/website/views/snippets/s_hr.xml @@ -31,11 +31,11 @@ 75% 100% - - Left - Center - Right - + + + + + diff --git a/addons/website/views/snippets/s_media_list.xml b/addons/website/views/snippets/s_media_list.xml index 23d39921c29..1427895a117 100644 --- a/addons/website/views/snippets/s_media_list.xml +++ b/addons/website/views/snippets/s_media_list.xml @@ -60,17 +60,17 @@
- - Left - Right - + + + + - - Top - Middle - Bottom - + + + + +
diff --git a/addons/website/views/snippets/s_table_of_content.xml b/addons/website/views/snippets/s_table_of_content.xml index aaedae3a5c8..288493da2aa 100644 --- a/addons/website/views/snippets/s_table_of_content.xml +++ b/addons/website/views/snippets/s_table_of_content.xml @@ -54,11 +54,11 @@
- - Left - Right - Top - + + + + +
diff --git a/addons/website/views/snippets/s_tabs.xml b/addons/website/views/snippets/s_tabs.xml index 39621e86ed7..3f551ad4b40 100644 --- a/addons/website/views/snippets/s_tabs.xml +++ b/addons/website/views/snippets/s_tabs.xml @@ -102,13 +102,13 @@ Justified - - No Slide Effect - Slide Up - Slide Down - Slide Left - Slide Right - + + + + + + +
diff --git a/addons/website/views/snippets/s_text_highlight.xml b/addons/website/views/snippets/s_text_highlight.xml index 07fe1d99ee9..e6dc9c81d43 100644 --- a/addons/website/views/snippets/s_text_highlight.xml +++ b/addons/website/views/snippets/s_text_highlight.xml @@ -22,11 +22,11 @@
- - Left - Center - Right - + + + + +
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index 691a5247db8..eff13410034 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -184,11 +184,11 @@
- - Left - Center - Right - + + + + +
@@ -201,11 +201,11 @@
- - Left - Center - Right - + + + + +
@@ -628,20 +628,32 @@
- - Full - Regular - Small - + + + + +
- - Fit content - Half screen - Full screen - + + + + +
@@ -666,13 +678,12 @@
- - Top - Middle - Bottom - - Equal height - + + + + + +
diff --git a/addons/website_form/static/src/snippets/s_website_form/options.js b/addons/website_form/static/src/snippets/s_website_form/options.js index 173a1aa8dab..80aa99e025b 100644 --- a/addons/website_form/static/src/snippets/s_website_form/options.js +++ b/addons/website_form/static/src/snippets/s_website_form/options.js @@ -1012,7 +1012,7 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({ const togglerEl = document.createElement('we-toggler'); togglerEl.textContent = addItemTitle; addItemButton.appendChild(togglerEl); - const selectMenuEl = document.createElement('we-select-menu'); + const selectMenuEl = document.createElement('we-selection-items'); addItemButton.appendChild(selectMenuEl); this._loadListDropdown(selectMenuEl); } @@ -1035,7 +1035,7 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({ * @param {HTMLElement} selectMenu */ _loadListDropdown: function (selectMenu) { - selectMenu = selectMenu || this.el.querySelector('we-list we-select-menu'); + selectMenu = selectMenu || this.el.querySelector('we-list we-selection-items'); if (selectMenu) { selectMenu.innerHTML = ''; const field = Object.assign({}, this.fields[this._getFieldName()]);