From 9337562ccaa06f3dc37b1c3b616191179e48d64c Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Mon, 19 Jul 2021 09:36:01 +0000 Subject: [PATCH] [REF] web_editor, *: review editor toolbar design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit *: web, website This commit redesigns the editor toolbar improving its visual appearance and introducing substantial changes wherever it is rendered. == "Into-sidebar" design The grid layout has been refined, improving its components allocation. For the sake of visual simplification, "list-type" buttons have been unwrapped from their original dropdown. For the same reason the button to create a new table has been removed (users will have to use the command-bar to create a new table). Table's options have been moved to a section "ad-hoc", visible only when a table is selected. == Floating design (backend only) The toolbar is now white to match the command-bar design. In order to simplify frontend inheritance, the floating toolbar now uses grid layout. == Colorpicker The generic code necessary for each design has been moved from 'wysiwyg_snippets.scss' to 'wysiwyg.scss'. The style is now controlled by css variables allowing to customize critical design properties without the need of SCSS overrides. By default the design is white(-ish) to match the floating toolbar, while in 'wysiwyg_snippets.scss' the variables are customized to get the typical sidebar's dark feel. Note: despite the task main objective was just to improve/fix the design, this aimed to simplify design inheritance and reduce the css too. While inheritance has been improved reducing the amount of overrides, the attempt to reduce the css partially failed (in the final lines count must be considered that a new sidebar section has been created). The reason is that we currently suffer from a deep and complicated inheritance structure for this component. The xml template uses default bootstrap classes that are styled differently depending if loaded in a community or enterprise environment. This approach leads to overrides that must cover all the scenarios while further customization must be taken in account too 'cause the toolbar can be rendered into the sidebar with a totally different design. A possible solution would be to detach from bootstrap directly in the lib using custom classes names, and then @​extend these classes differently according to the current environment but probably not a good idea as we want the toolbar to use bootstrap for in-website editors (so they can match the theme correctly) but this has to be reviewed as well anyway. To be checked. Part of https://github.com/odoo/odoo/pull/73565 task-2496339 closes odoo/odoo#73565 Signed-off-by: Antoine Guenet --- .../static/src/legacy/scss/colorpicker.scss | 2 - .../web/static/src/legacy/xml/colorpicker.xml | 16 +- .../static/lib/odoo-editor/src/OdooEditor.js | 34 +- .../static/src/js/editor/snippets.editor.js | 21 + .../static/src/scss/web_editor.variables.scss | 4 +- .../web_editor/static/src/scss/wysiwyg.scss | 385 +++++++++++++++--- .../static/src/scss/wysiwyg_snippets.scss | 355 +++++++--------- addons/web_editor/static/src/xml/editor.xml | 86 +++- addons/web_editor/static/src/xml/snippets.xml | 10 +- .../tours/snippet_empty_parent_autoremove.js | 2 +- 10 files changed, 599 insertions(+), 316 deletions(-) diff --git a/addons/web/static/src/legacy/scss/colorpicker.scss b/addons/web/static/src/legacy/scss/colorpicker.scss index ae618504a0c..2da0fa6f04c 100644 --- a/addons/web/static/src/legacy/scss/colorpicker.scss +++ b/addons/web/static/src/legacy/scss/colorpicker.scss @@ -25,8 +25,6 @@ } .o_slider_pointer, .o_opacity_pointer, .o_picker_pointer, .o_color_preview { box-shadow: inset 0 0 0 1px rgba(white, 0.9); - } - .o_slider_pointer, .o_opacity_pointer, .o_picker_pointer, .o_color_preview, .o_hex_div, .o_rgba_div { border: 1px solid black; } .o_color_picker_inputs { diff --git a/addons/web/static/src/legacy/xml/colorpicker.xml b/addons/web/static/src/legacy/xml/colorpicker.xml index 23b35846bcf..d908cee8306 100644 --- a/addons/web/static/src/legacy/xml/colorpicker.xml +++ b/addons/web/static/src/legacy/xml/colorpicker.xml @@ -16,25 +16,25 @@
- + -
+
- hex +
-
+
- + + - + +
diff --git a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js index 39a8c41c240..9a96784de16 100644 --- a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js +++ b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js @@ -256,7 +256,7 @@ export class OdooEditor extends EventTarget { if (this.options.toolbar) { this.toolbar = this.options.toolbar; - this._bindToolbar(); + this.bindExecCommand(this.toolbar); // Ensure anchors in the toolbar don't trigger a hash change. const toolbarAnchors = this.toolbar.querySelectorAll('a'); toolbarAnchors.forEach(a => a.addEventListener('click', e => e.preventDefault())); @@ -869,6 +869,25 @@ export class OdooEditor extends EventTarget { return this._applyCommand(...args); } + /** + * Find all descendants of `element` with a `data-call` attribute and bind + * them on mousedown to the execution of the command matching that + * attribute. + */ + bindExecCommand(element) { + for (const buttonEl of element.querySelectorAll('[data-call]')) { + buttonEl.addEventListener('mousedown', ev => { + const sel = this.document.getSelection(); + if (sel.anchorNode && ancestors(sel.anchorNode).includes(this.editable)) { + this.execCommand(buttonEl.dataset.call, buttonEl.dataset.arg1); + + ev.preventDefault(); + this._updateToolbar(); + } + }); + } + } + //-------------------------------------------------------------------------- // Private //-------------------------------------------------------------------------- @@ -2345,19 +2364,6 @@ export class OdooEditor extends EventTarget { this.historyStep(); } - _bindToolbar() { - for (const buttonEl of this.toolbar.querySelectorAll('[data-call]')) { - buttonEl.addEventListener('mousedown', ev => { - const sel = this.document.getSelection(); - if (sel.anchorNode && ancestors(sel.anchorNode).includes(this.editable)) { - this.execCommand(buttonEl.dataset.call, buttonEl.dataset.arg1); - - ev.preventDefault(); - this._updateToolbar(); - } - }); - } - } _onTabulationInTable(ev) { const sel = this.document.getSelection(); const closestTable = closestElement(sel.anchorNode, 'table'); 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 3c7c7dc7d2f..0a4a459151c 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -10,6 +10,7 @@ var options = require('web_editor.snippets.options'); const {ColorPaletteWidget} = require('web_editor.ColorPalette'); const SmoothScrollOnDrag = require('web/static/src/js/core/smooth_scroll_on_drag.js'); const {getCSSVariableValue} = require('web_editor.utils'); +const QWeb = core.qweb; var _t = core._t; @@ -3112,12 +3113,24 @@ var SnippetsMenu = Widget.extend({ this.options.wysiwyg.toolbar.el.classList.remove('oe-floating'); + // Create toolbar custom container. const $customizeBlock = $(''); const $title = $("" + titleText + ""); $customizeBlock.append($title); $customizeBlock.append(this.options.wysiwyg.toolbar.$el); $(this.customizePanel).append($customizeBlock); + + // Create table-options custom container. + const $customizeTableBlock = $(QWeb.render('web_editor.toolbar.table-options')); + this.options.wysiwyg.odooEditor.bindExecCommand($customizeTableBlock[0]); + + $(this.customizePanel).append($customizeTableBlock); + + this._$removeFormatButton = this._$removeFormatButton || this.options.wysiwyg.toolbar.$el.find('#removeFormat'); + $title.append(this._$removeFormatButton); + this.options.wysiwyg.toolbar.$el.find('#table').remove(); + this._checkEditorToolbarVisibility(); }, /** @@ -3125,6 +3138,7 @@ var SnippetsMenu = Widget.extend({ */ _checkEditorToolbarVisibility: function (e) { const $toolbarContainer = this.$('#o_we_editor_toolbar_container'); + const $toolbarTableContainer = this.$('#o-we-editor-table-container'); const docSelection = document.getSelection(); const $currentSelectionTarget = docSelection && docSelection.rangeCount > 0 ? $(docSelection.getRangeAt(0).commonAncestorContainer) : $(); // Do not toggle visibility if the target is inside the toolbar ( eg. during link edition). @@ -3147,6 +3161,13 @@ var SnippetsMenu = Widget.extend({ } else { $toolbarContainer.show(); } + + const isInsideTD = !!( + range && + $(range.startContainer).closest('.o_editable td').length && + $(range.endContainer).closest('.o_editable td').length + ); + $toolbarTableContainer.toggleClass('d-none', !isInsideTD); }, /** * On click on discard button. 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 91f12e6b63c..a9b088a1e6f 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -48,7 +48,7 @@ $o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default $o-we-content-to-translate-color: rgb(255, 255, 90) !default; $o-we-translated-content-color: rgb(120, 215, 110) !default; -$o-we-toolbar-height: 32px !default; +$o-we-toolbar-height: 40px !default; $o-we-item-spacing: 8px !default; $o-we-item-border-width: 1px !default; @@ -159,7 +159,7 @@ $o-we-sidebar-content-field-dropdown-grid-item-width: 80px !default; $o-we-sidebar-content-field-colorpicker-size: 20px !default; $o-we-sidebar-content-field-colorpicker-size-large: 26px !default; $o-we-sidebar-content-field-colorpicker-shadow: inset 0 0 0 1px rgba(white, 0.5) !default; -$o-we-sidebar-content-field-colorpicker-dropdown-bg: $o-we-bg-lightest !default; +$o-we-sidebar-content-field-colorpicker-dropdown-bg: $o-we-bg-lighter !default; $o-we-sidebar-content-field-colorpicker-dropdown-color: $o-we-fg-light !default; $o-we-sidebar-content-field-colorpicker-dropdown-active-color: $o-we-fg-lighter !default; $o-we-sidebar-content-field-colorpicker-cc-width: 208px !default; diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss index c6547519c2d..438f95a881d 100644 --- a/addons/web_editor/static/src/scss/wysiwyg.scss +++ b/addons/web_editor/static/src/scss/wysiwyg.scss @@ -1,6 +1,19 @@ $o-we-overlay-zindex: ($zindex-fixed + $zindex-modal-backdrop) / 2 !default; $o-we-zindex: $o-we-overlay-zindex + 1 !default; +// Floating Toolbar Variables +$o-we-toolbar-entries-gap: $o-we-sidebar-content-field-control-item-spacing * .7; +$o-we-toolbar-entries-border-width: 1px; +$o-we-toolbar-entries-padding: $o-we-sidebar-content-padding-base * .7; + +$o-we-toolbar-bg: #FFF; +$o-we-toolbar-bg-active: rgba($o-we-fg-light, .2); +$o-we-toolbar-border: $o-we-fg-light; +$o-we-toolbar-color-text: $o-we-bg-light; +$o-we-toolbar-color-accent: #018597; +$o-we-toolbar-color-clickable: $o-we-bg-lightest; +$o-we-toolbar-color-clickable-active: $o-we-bg-darkest; + // Use css variables to control the default style of the editor so that an // external assets bundle can influence it without duplicating the css. :root { @@ -29,61 +42,263 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; padding: 0; } +// Colorpicker - Generic rules shared among backend & frontend +.colorpicker { + + // Controll the design using css variables. These values can be customized + // in any bundle/layout avoiding the need to override. + --bg: #{$o-we-toolbar-bg}; + --text-rgb: #{red($o-we-toolbar-color-text)}, #{green($o-we-toolbar-color-text)}, #{blue($o-we-toolbar-color-text)}; + --border-rgb: var(--text-rgb); + + --tab-border-top: transparent; + --tab-border-bottom: #{$o-we-toolbar-border}; + + --btn-color-active: inset 0 0 0 2px #{$o-we-accent}, + inset 0 0 0 3px var(--bg), + inset 0 0 0 4px rgba(var(--border-rgb), .5); + + &, input { + color: rgba(var(--text-rgb), 1); + } + + label { + color: rgba(var(--text-rgb), .5); + } + + button { + outline: none; + } + + .o_we_colorpicker_switch_panel { + font-size: $o-we-font-size; + border-bottom: 1px solid var(--tab-border-bottom); + box-shadow: inset 0 1px 0 var(--tab-border-top); + } + + .o_we_colorpicker_switch_pane_btn { + flex: 0 0 auto; + } + + .o_colorpicker_reset { + max-width: 40%; + } + + .o_colorpicker_sections { + background: var(--bg); + + > * { + padding-top: $o-we-sidebar-content-field-spacing; + + &:first-child { + padding-top: 0; + } + } + + .o_colorpicker_widget { + .o_hex_div, .o_rgba_div { + &:focus-within { + border-color: $o-we-sidebar-content-field-input-border-color; + } + } + .o_color_picker_inputs { + input, input:focus { + border: none; + outline: none; + } + } + } + + .o_we_color_btn, .o_color_pick_area, .o_color_slider, .o_opacity_slider:before, .o_hex_div, .o_rgba_div { + box-shadow: inset 0 0 0 1px rgba(var(--border-rgb), .5); + } + + .o_we_color_btn { + position: relative; + float: left; + width: percentage(1 / 8); + padding-top: percentage(1 / 10); + margin: 0; + border: 1px solid var(--bg); + + &.o_colorpicker_reset { + background-color: transparent; + + &::before { + @include o-position-absolute(0, 0, 0, 0); + font-family: FontAwesome !important; + content: "\f00d" !important;// fa-times + display: flex; + justify-content: center; + align-items: center; + color: $o-we-color-danger; + } + } + + &.selected { + box-shadow: var(--btn-color-active); + } + + &.o_btn_transparent::before { + background-color: transparent; + } + } + + .o_colorpicker_section { + &::after { + content: ""; + display: table; + clear: both; + } + + &[data-name="transparent_grayscale"], &[data-name="theme"], &[data-name="reset"], &[data-name="custom"] { + .o_we_color_btn { + @extend %o-preview-alpha-background; + + &::before, &::after { + box-shadow: inherit; + } + } + } + } + } +} + // Toolbar - Generic rules shared among backend & frontend .oe-toolbar { + display: grid; + .btn { display: flex; align-items: center; justify-content: center; } + + .colorpicker-menu { + height: auto!important; + box-sizing: content-box; + min-height: fit-content; + } + + .dropdown-item { + &.active, &.selected { + &:not(.o_dropdown_item_active_noarrow):before { + transform: translate(-1.5em, 0); + height: 100%; + display: flex; + align-items: center; + } + } + } } // Floating Toolbar .oe-toolbar.oe-floating { - padding-bottom: 0; - border-bottom: $o-we-border-width solid $o-we-fg-light; - background-color: $o-we-bg; - color: $o-we-color; + gap: 0 $o-we-sidebar-content-field-control-item-spacing * .7; + grid-auto-flow: column; + 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: $o-we-toolbar-bg; + box-shadow: 0 0 4px rgba(#000, .1), 0 4px 18px rgba(#000, .25); + color: $o-we-toolbar-color-text; font-family: $o-we-font-family; + &.toolbar-bottom:before { + border-bottom-color: $o-we-toolbar-bg; + } + + &:not(.toolbar-bottom):before { + border-top-color: $o-we-toolbar-bg; + } + &.noarrow::before { display: none; } + > .btn-group:not(.d-none) ~ .btn-group:not(.d-none), .oe-toolbar-separator { + &:before { + content: ""; + width: $o-we-toolbar-entries-border-width; + margin-right: calc(#{$o-we-toolbar-entries-gap} - #{$o-we-toolbar-entries-border-width}); + background: $o-we-toolbar-border; + transform: scaleY(.6) + } + + // Adjust dropdown-menu position, but not when already handled in js + .dropdown-menu:not([x-placement]) { + margin-left: $o-we-toolbar-entries-gap; + } + } + // Main layout of buttons - .btn-group, .btn { - width: auto !important; - margin-top: 0; - margin-bottom: 0; - background: transparent; + .btn, .dropdown-item { + padding: ($o-we-toolbar-entries-padding * .5) $o-we-toolbar-entries-padding; + color: $o-we-toolbar-color-clickable; + + &:hover:not(.active) { + color: $o-we-toolbar-color-clickable-active; + background-color: transparent; + } + + &.active { + background: $o-we-toolbar-bg-active; + box-shadow: inset 0 0 3px rgba($o-we-toolbar-bg-active, .5); + } + } + + .btn { border: none; border-radius: 0; - } - .btn-secondary { - color: inherit; - } - .btn-group.show { - > .btn { - @extend %we-active-button; - } - &::after { - content: ''; - @include o-position-absolute(100%, $o-we-border-width, auto, $o-we-border-width); - height: $o-we-border-width; + background: transparent; + font-weight: 400; + + &.active { + color: $o-we-toolbar-color-accent; } } - %we-active-button { - background: $o-we-sidebar-content-field-pressed-bg; - color: $o-we-sidebar-content-field-pressed-color; - box-shadow: none !important; - outline: none !important; + + > .btn-group { + > .btn, > .colorpicker-group { + margin: 4px auto; + padding-top: 0; + padding-bottom: 0; + } } + + .show > .btn { + &, &:hover, &:focus { + color: $o-we-toolbar-color-clickable-active; + } + } + + .dropdown-toggle::after { + @include o-caret-down(); + margin-left: .3em + } + .dropdown-menu { - margin-top: $o-we-dropdown-spacing; + margin: 0; + border: 0; padding: 0; - border: $o-we-dropdown-border-width solid $o-we-dropdown-border-color; - background-color: $o-we-dropdown-bg; - box-shadow: $o-we-dropdown-shadow; + max-height: none; + overflow: visible; + border-top: 1px solid $o-we-toolbar-border; + background-color: $o-we-toolbar-bg; + box-shadow: 0 18px 18px rgba(#000, .23); + @include border-top-radius(0); + @include border-bottom-radius($o-we-item-border-radius); + + &.show { // To overcome .note-XXX .dropdown-menu rules + min-width: 0; + } + + &:not(.colorpicker-menu) > li:last-child { + margin-bottom: 1em; + } &.colorpicker-menu { margin-top: 0; @@ -91,43 +306,41 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; min-width: 222px !important; } } - .dropdown-toggle::after { - display: none; - } - .dropdown-menu.show { // To overcome .note-XXX .dropdown-menu rules - min-width: 0; - } - .dropdown-item { // To overcome wysiwyg rules breaking this in iframes - display: block; - max-width: none; - overflow: visible; - margin-top: 0; - padding: 0 1em; - border: none; - background: none; - background-clip: padding-box; - background-color: $o-we-dropdown-item-bg; - color: $o-we-dropdown-item-color; - line-height: $o-we-dropdown-item-height; - &:not(.d-none) ~ .dropdown-item { - // Use a border-top instead of a margin-top as when the - // mouse goes from one select button to another, the - // option preview should switch from the first button's - // option to the second one without reset to selected - // state in between. - border-top: $o-we-dropdown-item-spacing solid transparent; + .dropdown-item { // To overcome wysiwyg rules breaking this in iframes + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0 $o-we-dropdown-item-height * .8; + min-height: $o-we-dropdown-item-height; + + > * { + color: inherit; } &.active { - color: $o-we-dropdown-item-active-color; + &, &:hover, &:focus { + color: $o-we-bg-darker; + + &:before { + top: 0; + transform: translate($o-we-dropdown-item-height * -.5, 0); + line-height: $o-we-dropdown-item-height; + } + } } } - li > .dropdown-item { - border-top: $o-we-dropdown-item-spacing solid transparent; - } // Specific elements + #decoration { + #removeFormat { + display: none; + } + .active ~ #removeFormat { + display: flex; + } + } + #colorInputButtonGroup { label:last-of-type .btn { margin: 0 1px 0 -1px; @@ -138,18 +351,64 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; left: -52px; } } - .oe-tablepicker { - margin: 1px 2px -8px 2px !important; - .oe-tablepicker-cell { - width: 5px !important; + .colorpicker-group { + .dropdown-toggle::after { + display: none; + } + + .colorpicker-menu { + bottom: 100%; + } + + .o_we_colorpicker_switch_panel button { + @extend .btn; + margin-bottom: -1px; + + &.active { + border-bottom: 1px solid $o-we-toolbar-color-accent; + background: none; + box-shadow: none; + color: $o-we-toolbar-color-clickable-active; + } + + &.o_colorpicker_reset { + background: $o-brand-primary; + + &, &:hover { + color: color-yiq($o-brand-primary); + } + + &:hover { + background: darken($o-brand-primary, 5%); + } + } } } + + .colorpicker { + background: $o-we-toolbar-bg; + box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.2); + } + .o_image_alt { @include o-text-overflow(); max-width: 150px; } } + +// Floating Table Picker +.oe-tablepicker-wrapper .oe-tablepicker { + .oe-tablepicker-cell { + border-radius: 0; + + &.active { + background: $o-we-toolbar-color-accent; + } + } +} + + body:not(.editor_has_snippets) { .oe-toolbar { // Bootstrap sets .modal z-index at 1050. Ensure toolbar is visible in diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index aaf7ebca26c..d71b02d1ea0 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -483,26 +483,41 @@ body.editor_enable.editor_has_snippets { width: $o-we-sidebar-content-available-room * .6; } - we-button, we-toggler, .oe-toolbar .btn { + we-button, we-toggler { @extend %we-generic-button; } + #removeFormat, #oe-table-delete-table { + @extend %we-generic-link; + } + .oe-toolbar { position: relative; - border: none; - border-radius: unset; background: transparent; - margin-top: 10px; - padding: 0 8px 0 13px; - display: grid; - grid-template-columns: repeat(5, minmax(0, 1fr)); + margin-top: $o-we-sidebar-content-field-spacing; + padding: 0 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent; + grid-template-areas: "typo typo style colors" "size align list link" "options options options options"; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: minmax($o-we-sidebar-content-field-height, auto) minmax($o-we-sidebar-content-field-height, auto) auto ; + row-gap: $o-we-sidebar-content-field-spacing; + column-gap: $o-we-sidebar-content-field-multi-spacing; width: 100%; + &::before { + display: none; // remove ballon + } + + .btn { + @extend %we-generic-button; + display: flex; + padding-top: $o-we-sidebar-content-field-height * .12; + padding-bottom: $o-we-sidebar-content-field-height * .12; + } + we-customizeblock-option { - color: #D9D9D9; - padding: 0; - /* Ensure an extra option in the toolbar takes its whole width. */ - grid-column-end: span 5; + grid-area: options; + padding-left: 0; + padding-right: 0; we-title { &.o_short_title { @@ -545,120 +560,126 @@ body.editor_enable.editor_has_snippets { input::placeholder { font-style: italic; } - } - &::before { - border: none !important; - } - .btn-group { - margin: 0 2px 5px 2px; - - label { - margin: 0; - } - - .btn { - color: white; - box-sizing: border-box; - padding: 2px 6px 2px 6px !important; - height: 100%; - - &:focus, &:active, &:focus:active { - background-color: black; - } - - &.color-button { - padding-top: 0 !important; - } - - .color-indicator { - border-bottom: 3px solid; - - &.fore-color { - border-color: var(--fore-color); - } - &.hilite-color { - border-color: var(--hilite-color); - } - } + we-input, we-input div, we-input input { + width: 100% !important; } } - .dropdown-menu { - .btn-group { - margin: 0; - } - .dropdown-item, .dropdown-item > * { - line-height: 34px !important; - } - .oe-tablepicker { - margin-top: 2px; - .oe-tablepicker-row { - line-height: normal; - - .oe-tablepicker-cell { - display: inline-block !important; - width: 15px !important; - height: 15px !important; - background-color: white !important; - margin-bottom: 0 !important; - - &.active { - background: #01bad2 !important; - } - } - } - } - } - we-input, we-input div, we-input input { - width: 100% !important; - } - #decoration { - grid-column-end: span 4; - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - } #colorInputButtonGroup { - grid-column-end: span 2; - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - #table { - grid-column-end: span 2; - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - #link { - grid-column-end: span 3; - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - #media-description { - grid-column-end: span 2; - } - #image-shape { - grid-column-end: span 4; - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - #image-width { - grid-column-end: span 5; - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - #image-edit { - grid-column-end: span 3; - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-area: colors; - #media-replace { - grid-column-end: span 2; + .dropdown-toggle:after { + display: none; // remove ballon + } + + .colorpicker-group { + display: flex; + align-items: stretch; + position: initial; + } + + #oe-text-color { + border-right:0; + @include border-right-radius(0); + } + + #oe-fore-color { + @include border-left-radius(0); } } - #fa-resize { - grid-column-end: span 5; - display: grid; - grid-template-columns: repeat(5, minmax(0, 1fr)); + + .btn + .btn { + @include border-left-radius(0); + } + + .btn-group > .btn:not(:last-of-type) { + @include border-right-radius(0); + } + + #list { + grid-area: list; + } + + #link { + grid-area: link; + + #unlink { + display: none; + } + } + + #font-size { + grid-area: size; + } + + #decoration { + grid-area: style; + } + + #style { + grid-area: typo; + + .dropdown-toggle { + justify-content: space-between; + + span { + color: white; + + pre, blockquote { + padding: 0; + border: 0; + color: inherit; + } + } + + } + } + + #justify { + grid-area: align; + + .dropdown-menu { + padding: 0; + + .btn { + padding:$o-we-sidebar-content-field-height * .3 $o-we-sidebar-content-field-height * .5; + border-width: 0; + + &:hover { + z-index: 0; + } + + + .btn { + border-left-width: 1px; + } + } + } + } + + .dropdown-menu.colorpicker-menu { + left: auto; + right: 0; + border: $o-we-sidebar-content-field-dropdown-border-width solid $o-we-sidebar-content-field-dropdown-border-color; + border-radius: $o-we-item-border-radius; + padding: 0; + } + } + // END toolbar + + #oe-table-options { + @extend we-customizeblock-option; + + .btn { + @extend %we-generic-button; + } + + .oe-table-row { + @extend we-row; + } + + .oe-table-label { + @extend we-title; } } @@ -1650,69 +1671,28 @@ body.editor_enable.editor_has_snippets { } // SNIPPET OPTIONS -.colorpicker { - background-color: $o-we-sidebar-content-field-colorpicker-dropdown-bg; - color: $o-we-sidebar-content-field-colorpicker-dropdown-color; +#oe_snippets .colorpicker { + $-wb-txt: $o-we-sidebar-content-field-colorpicker-dropdown-color; + + --bg: #{$o-we-sidebar-content-field-colorpicker-dropdown-bg}; + --text-rgb: #{red($-wb-txt)}, #{green($-wb-txt)}, #{blue($-wb-txt)}; + --border-rgb: var(--text-rgb); + + --tab-border-top: rgba(255, 255, 255, .2); + --tab-border-bottom: #{$o-we-bg-dark}; + + --btn-color-active: inset 0 0 0 1px #{$o-we-sidebar-content-field-colorpicker-dropdown-bg}, + inset 0 0 0 3px #{$o-we-accent}, + inset 0 0 0 4px white; - .o_we_colorpicker_switch_panel { - font-size: $o-we-font-size; - border-bottom: 1px solid $o-we-bg-dark; - box-shadow: inset 0 1px 0 rgba(white, .2); - } .o_we_colorpicker_switch_pane_btn { @extend %we-generic-tab-button; - flex: 0 0 auto; } .o_colorpicker_reset { - max-width: 40%; @extend %we-generic-button; } + .o_colorpicker_sections { - > * { - padding-top: $o-we-sidebar-content-field-spacing; - &:first-child { - padding-top: 0; - } - } - - .o_colorpicker_widget { - .o_hex_div, .o_rgba_div { - &:focus-within { - border-color: $o-we-sidebar-content-field-input-border-color; - } - } - .o_color_picker_inputs { - input { - border: none; - &:focus { - outline: none; - } - } - } - } - - .o_we_color_btn, .o_we_color_combination_btn { - float: left; - width: percentage(1 / 8); - padding-top: percentage(1 / 10); - margin: 0; - border: 1px solid $o-we-sidebar-content-field-colorpicker-dropdown-bg; - box-shadow: $o-we-sidebar-content-field-colorpicker-shadow; - - &.o_colorpicker_reset { - background-color: transparent; - - &::before { - @include o-position-absolute(0, 0, 0, 0); - font-family: FontAwesome !important; - content: "\f00d" !important;// fa-times - display: flex; - justify-content: center; - align-items: center; - color: $o-we-color-danger; - } - } - } .o_we_color_combination_btn { float: none; width: 100%; @@ -1751,37 +1731,6 @@ body.editor_enable.editor_has_snippets { bottom: -1px; } } - .o_colorpicker_section { - &::after { - content: ""; - display: table; - clear: both; - } - - .o_we_color_btn { - position: relative; - - &.selected { - box-shadow: inset 0 0 0 1px $o-we-sidebar-content-field-colorpicker-dropdown-bg, - inset 0 0 0 3px $o-we-accent, - inset 0 0 0 4px white; - } - - &.o_btn_transparent::before { - background-color: transparent; - } - } - - &[data-name="transparent_grayscale"], &[data-name="theme"], &[data-name="reset"], &[data-name="custom"] { - .o_we_color_btn { - @extend %o-preview-alpha-background; - - &::before, &::after { - box-shadow: inherit; - } - } - } - } } } diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml index f712df8418b..2617844e9f7 100644 --- a/addons/web_editor/static/src/xml/editor.xml +++ b/addons/web_editor/static/src/xml/editor.xml @@ -55,7 +55,7 @@
-
@@ -65,7 +65,7 @@
-
-
-
-
-
+
+
+
+
-