From f37e089c8aacffa93cd564d0928059f59248d933 Mon Sep 17 00:00:00 2001 From: "Morgane (morm)" Date: Mon, 26 Dec 2022 11:01:05 +0000 Subject: [PATCH] [IMP] web_editor: floating bar and commandbar scss review Prior to this commit, there were functional issues for the floating toolbar and design issues for the Powerbox in the web editor. This commit fixes those issues, like alignement for the icons in the list of the commandbar, box shadows, and the responsiveness of the floating toolbar on mobile. In commit [1], the toolbar dropdown had the display static added, but it causes problems to the responsiveness. This commit put the display back to dynamic on the dropdown and so, fixes the dropdown not showing on mobile because of the overflow-x on auto. The dynamic state also allows the dropdown to change direction (dropdown to dropup) when there's not enough space for the content of the dropdown. Would be nice to have : use display state on the all the editor toolbars (frontend and backend) to modify the layout of the toolbar for mobile, for a better behavior and design (ex: the different lists in a dropdown). For now, it's just a horizontal scroll. [1]: 459d4e27a860f3f0308ee0984de6f789baa65424 task-3087826 Part-of: odoo/odoo#110161 --- .../static/src/core/notebook/notebook.scss | 9 +++ .../odoo-editor/src/powerbox/Powerbox.js | 14 ++--- .../src/js/editor/odoo-editor/src/style.scss | 58 +++++++------------ .../static/src/scss/wysiwyg.dark.scss | 8 +++ .../web_editor/static/src/scss/wysiwyg.scss | 34 +++++++---- addons/web_editor/static/src/xml/editor.xml | 7 ++- 6 files changed, 73 insertions(+), 57 deletions(-) diff --git a/addons/web/static/src/core/notebook/notebook.scss b/addons/web/static/src/core/notebook/notebook.scss index be5f880f02f..f6df01d3254 100644 --- a/addons/web/static/src/core/notebook/notebook.scss +++ b/addons/web/static/src/core/notebook/notebook.scss @@ -74,4 +74,13 @@ } } } + + @include media-breakpoint-down(lg) { + .o_notebook_content .oe-toolbar { + @include o-position-sticky($top: 0px); + margin-left: var(--notebook-margin-x, $o-horizontal-padding); + margin-right: var(--notebook-margin-x, $o-horizontal-padding); + width: auto; + } + } } diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/powerbox/Powerbox.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/powerbox/Powerbox.js index 1ab71bd229a..00a284c39c0 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/powerbox/Powerbox.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/powerbox/Powerbox.js @@ -42,11 +42,11 @@ export class Powerbox { // Draw the powerbox. this.el = document.createElement('div'); - this.el.className = 'oe-powerbox-wrapper'; + this.el.className = 'oe-powerbox-wrapper position-absolute overflow-hidden'; this.el.style.display = 'none'; document.body.append(this.el); this._mainWrapperElement = document.createElement('div'); - this._mainWrapperElement.className = 'oe-powerbox-mainWrapper'; + this._mainWrapperElement.className = 'oe-powerbox-mainWrapper flex-skrink-1 overflow-auto py-2'; this.el.append(this._mainWrapperElement); this.el.addEventListener('mousedown', ev => ev.stopPropagation()); @@ -175,19 +175,19 @@ export class Powerbox { for (const [category, categoryCommands] of this._groupCommands(commands, categories)) { const categoryWrapperEl = parser.parseFromString(`
-
+
`, 'text/html').body.firstChild; this._mainWrapperElement.append(categoryWrapperEl); categoryWrapperEl.firstElementChild.innerText = category; for (const command of categoryCommands) { const commandElWrapper = document.createElement('div'); - commandElWrapper.className = 'oe-powerbox-commandWrapper'; + commandElWrapper.className = 'oe-powerbox-commandWrapper d-flex align-items-center px-3 py-2 cursor-pointer'; commandElWrapper.classList.toggle('active', this._context.selectedCommand === command); commandElWrapper.replaceChildren(...parser.parseFromString(` -
- +
+
-
+
`, 'text/html').body.children); diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss index 2a9bf83bb58..a86ac1ad363 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss @@ -105,7 +105,6 @@ padding-right: 5px; background: #222222; color: white; - border-radius: 8px; .toolbar-bottom::before { content: ''; @@ -264,35 +263,44 @@ .oe-tablepicker-size { color: white; } -@media only screen and (max-width: 767px) { + +@include media-breakpoint-down(md) { .oe-toolbar { position: relative; + overflow-x: auto; visibility: visible; - width: 100%; + width: auto; + height: auto; + border-bottom: 1px solid $border-color; border-radius: 0; background-color: white; - + box-shadow: none; + .btn { color: black; + padding: 3px 4px !important; + } + + .dropdown-menu { + position: fixed !important; } } } +@include media-breakpoint-up(md) { + .oe-toolbar.oe-floating{ + box-shadow: $box-shadow; + } +} /* Content styling */ .oe-powerbox-wrapper { - position: absolute; z-index: $zindex-modal; - border: black; background: var(--oePowerbox__wrapper-bg, $o-white); color: $o-main-text-color; max-height: 40vh; box-sizing: border-box; - max-width: 100%; - box-shadow: 0px 3px 18px rgba(0, 0, 0, .23); - border-radius: 4px; - overflow: hidden; - display: flex; + box-shadow: $box-shadow; ::-webkit-scrollbar { background: transparent; @@ -308,45 +316,24 @@ background: var(--oePowerbox__ScrollbarTrack-background-color, #EDECE9); } } -.oe-powerbox-mainWrapper { - flex: 1 1 auto; - overflow: auto; - padding: 5px 0; - overscroll-behavior: contain; -} .oe-powerbox-category, .oe-powerbox-noResult { - margin: 10px; color: var(--oePowerbox__category-color, $o-gray-600); font-size: 11px; } -.oe-powerbox-category { - text-transform: uppercase; - margin: 5px 12px; -} .oe-powerbox-noResult { display: none; } .oe-powerbox-commandWrapper { - display: flex; - padding: 6px 12px; - cursor: pointer; - &.active { background: var(--oePowerbox__commandName-bg, $o-gray-100); } } i.oe-powerbox-commandImg { - display: flex; - height: 30px; - width: 30px; - align-items: center; - justify-content: center; + height: 35px; + width: 35px; background: var(--oePowerbox__commandImg-bg, $o-gray-100); color: var(--oePowerbox__commandImg-color, $o-gray-800); - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 7px; - font-size: 15px; } .oe-powerbox-commandName { font-size: 13px; @@ -356,9 +343,6 @@ i.oe-powerbox-commandImg { color: var(--oePowerbox__commandDescription-color, $o-main-color-muted); font-size: 12px; } -.oe-powerbox-commandRightCol { - margin: 0 10px; -} /* Command hints */ diff --git a/addons/web_editor/static/src/scss/wysiwyg.dark.scss b/addons/web_editor/static/src/scss/wysiwyg.dark.scss index d32fab262d6..0bf6f91f140 100644 --- a/addons/web_editor/static/src/scss/wysiwyg.dark.scss +++ b/addons/web_editor/static/src/scss/wysiwyg.dark.scss @@ -15,3 +15,11 @@ .o_link_dialog_preview { --o-link-dialog-preview-border: #{$border-width} solid #{$border-color}; } + +.o_colorpicker_sections, .o_we_color_btn { + --bg: #{$o-gray-200}; +} + +.o_custom_gradient_btn { + --o-we-toolbar-border: #{$o-gray-800}; +} diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss index ddbad87772c..9b7e6f4e5f3 100644 --- a/addons/web_editor/static/src/scss/wysiwyg.scss +++ b/addons/web_editor/static/src/scss/wysiwyg.scss @@ -133,6 +133,12 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; } .o_colorpicker_section { + &.o_custom_gradient_editor{ + .o_custom_gradient_btn{ + border: 1px solid var(--o-we-toolbar-border); + } + } + &::after { content: ""; display: table; @@ -154,7 +160,8 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; // Toolbar - Generic rules shared among backend & frontend .oe-toolbar { - display: grid; + display: flex; + align-items: center; .btn { display: flex; @@ -182,16 +189,11 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; // Floating Toolbar .oe-toolbar.oe-floating { - gap: 0 $o-we-sidebar-content-field-control-item-spacing * .7; - grid-auto-flow: column; + gap: $o-we-sidebar-content-field-control-item-spacing * .7; align-items: stretch; - height: auto; min-height: $o-we-toolbar-height; - max-width: none; - border-radius: $o-we-item-border-radius; padding: 0 $o-we-sidebar-content-field-control-item-spacing; background-color: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg}); - box-shadow: 0 0 4px rgba(#000, .1), 0 4px 18px rgba(#000, .25); color: var(--o-we-toolbar-color-text, #{$o-we-toolbar-color-text}); font-family: $o-we-font-family; @@ -276,7 +278,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; overflow: visible; border-top: 1px solid var(--o-we-toolbar-border, #{$o-we-toolbar-border}); background-color: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg}); - box-shadow: 0 18px 18px rgba(#000, .23); + box-shadow: $box-shadow; @include border-top-radius(0); @include border-bottom-radius($o-we-item-border-radius); @@ -375,7 +377,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; .colorpicker { background: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg}); - box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.2); + box-shadow: $box-shadow; } .o_image_alt { @@ -384,6 +386,12 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; } } +// Toolbar in Sidebar (website editor, mass mailing) +#oe_snippets > .o_we_customize_panel .oe-toolbar { + display: grid; + align-items: stretch; +} + // Floating Table Picker .oe-tablepicker-wrapper .oe-tablepicker { .oe-tablepicker-cell { @@ -403,7 +411,8 @@ body:not(.editor_has_snippets) { z-index: 1056; } } -@media only screen and (max-width: 767px) { + +@include media-breakpoint-down(md) { .oe-toolbar { background-color: white; @@ -665,7 +674,12 @@ img.o_we_selected_image { // Prevent the edited link from being deselected when clicking between // buttons in the popover user-select: none; + box-shadow: $box-shadow; + border-color: rgba(0,0,0,0.025); + .popover-arrow::before { + border-right-color: rgba(0, 0, 0, 0.05); + } // As the popover is displayed both in the frontend and the backend, // the font styles need to be uniformized. font-size: 12px; diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml index 8421b03c821..9087ed3de0a 100644 --- a/addons/web_editor/static/src/xml/editor.xml +++ b/addons/web_editor/static/src/xml/editor.xml @@ -9,7 +9,7 @@