diff options
20 files changed, 859 insertions, 576 deletions
diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss index a9c84da00f0..5ca2d758931 100644 --- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss +++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss @@ -12,15 +12,15 @@ height: $o-we-toolbar-height; line-height: $o-we-toolbar-height; border-radius: 0; - background-color: $o-we-bg-color; - color: $o-we-color; + background-color: $o-we-sidebar-bg; + color: #212629; display: flex; justify-content: center; align-items: center; box-shadow: none !important; &:hover, &:focus, &:active { - color: $o-we-color-light; + color: #4e525b; } i { @@ -30,7 +30,7 @@ &.show > a { color: white; - background-color: $o-we-color; + background-color: #212629; } .dropdown-menu { @@ -42,7 +42,7 @@ margin: 0; border-radius: 0; overflow: auto; - background-color: $o-we-bg-color; + background-color: $o-we-sidebar-bg; z-index: 1050; &.show { @@ -71,7 +71,7 @@ &:hover { - background-color: $o-we-bg-color; + background-color: $o-we-sidebar-bg; .o_thumb { border: 1px solid black; @@ -80,7 +80,7 @@ &.selected .o_thumb { border: 2px solid $o-brand-odoo; - background-color: $o-we-bg-color; + background-color: $o-we-sidebar-bg; } } } @@ -113,7 +113,7 @@ body.o_force_mail_theme_choice { .o_thumb { display: none; padding-top: 107%; - border: 1px solid $o-we-color-light; + border: 1px solid #4e525b; border-top: 1px solid $o-we-border-color; box-shadow: 0 5px 10px rgba(black, 0.8); will-change: transform; @@ -135,7 +135,7 @@ body.o_force_mail_theme_choice { } &:hover { - background-color: $o-we-color; + background-color: #212629; .o_thumb { box-shadow: 0 5px 30px 1px rgba(black, 0.6); @@ -202,7 +202,7 @@ body.editor_enable.o_basic_theme.o_in_iframe { @media (max-width: map-get($grid-breakpoints, 'lg')) { width: auto; margin-left: $o-we-sidebar-width; - } + } } :root { diff --git a/addons/web/static/src/scss/layout_boxed.scss b/addons/web/static/src/scss/layout_boxed.scss index 76d68c79ab3..94c243777d9 100644 --- a/addons/web/static/src/scss/layout_boxed.scss +++ b/addons/web/static/src/scss/layout_boxed.scss @@ -8,7 +8,7 @@ max-height: 100px; } h4 { - color: $o-we-color-text-normal; + color: #999999; font-weight: 700; text-transform: uppercase; } @@ -102,7 +102,7 @@ } &.o_total strong { color: white; - } + } } } } 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 f40490dbc86..12a21bde93a 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -834,6 +834,7 @@ var SnippetsMenu = Widget.extend({ 'block_preview_overlays': '_onBlockPreviewOverlays', 'unblock_preview_overlays': '_onUnblockPreviewOverlays', 'user_value_widget_opening': '_onUserValueWidgetOpening', + 'user_value_widget_closing': '_onUserValueWidgetClosing', 'reload_snippet_template': '_onReloadSnippetTemplate', }, // enum of the SnippetsMenu's tabs. @@ -1838,7 +1839,7 @@ var SnippetsMenu = Widget.extend({ stop: function (ev, ui) { $toInsert.removeClass('oe_snippet_body'); - if (!dropped && ui.position.top > 3 && ui.position.left + 50 > self.$el.outerWidth()) { + if (!dropped && ui.position.top > 3 && ui.position.left > self.el.getBoundingClientRect().right) { var $el = $.nearest({x: ui.position.left, y: ui.position.top}, '.oe_drop_zone', {container: document.body}).first(); if ($el.length) { $el.after($toInsert); @@ -2276,10 +2277,18 @@ var SnippetsMenu = Widget.extend({ }, /** * Called when an user value widget is being opened -> close all the other - * user value widgets of all editors. + * user value widgets of all editors + add backdrop. */ _onUserValueWidgetOpening: function () { this._closeWidgets(); + this.el.classList.add('o_we_backdrop'); + }, + /** + * Called when an user value widget is being closed -> rely on the fact only + * one widget can be opened at a time: remove the backdrop. + */ + _onUserValueWidgetClosing: function () { + this.el.classList.remove('o_we_backdrop'); }, }); 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 3c2bcb2b22e..d6fd28e7ed0 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -161,6 +161,8 @@ const UserValueWidget = Widget.extend({ * Closes the widget (only meaningful for widgets that can be closed). */ close: function () { + this.trigger_up('user_value_widget_closing'); + this.el.classList.remove('o_we_widget_opened'); this._userValueWidgets.forEach(widget => widget.close()); }, /** @@ -380,6 +382,13 @@ const UserValueWidget = Widget.extend({ this.trigger_up('user_value_update', data); }, /** + * Opens the widget (only meaningful for widgets that can be opened). + */ + open() { + this.trigger_up('user_value_widget_opening'); + this.el.classList.add('o_we_widget_opened'); + }, + /** * Adds the given widget to the known list of user value sub-widgets (useful * for container widgets). * @@ -699,6 +708,13 @@ const SelectUserValueWidget = UserValueWidget.extend({ /** * @override */ + open() { + this._super(...arguments); + this.menuTogglerEl.classList.add('active'); + }, + /** + * @override + */ setValue: function (value, methodName) { this._userValueWidgets.forEach(widget => { widget.setValue('__NULL__', methodName); @@ -751,8 +767,7 @@ const SelectUserValueWidget = UserValueWidget.extend({ } if (!this.menuTogglerEl.classList.contains('active')) { - this.trigger_up('user_value_widget_opening'); - this.menuTogglerEl.classList.add('active'); + this.open(); } else { this.close(); } @@ -966,7 +981,9 @@ const MultiUserValueWidget = UserValueWidget.extend({ * @override */ start: function () { - this.containerEl.appendChild(_buildRowElement('', this.options)); + if (this.options && this.options.childNodes) { + this.options.childNodes.forEach(node => this.containerEl.appendChild(node)); + } return this._super(...arguments); }, @@ -1330,7 +1347,8 @@ const DatetimePickerUserValueWidget = InputUserValueWidget.extend({ await this._super(...arguments); const datetimePickerId = _.uniqueId('datetimepicker'); - this.inputEl.setAttribute('class', 'datetimepicker-input mx-0 text-left'); + this.el.classList.add('o_we_large_input'); + this.inputEl.classList.add('datetimepicker-input', 'mx-0', 'text-left'); this.inputEl.setAttribute('id', datetimePickerId); this.inputEl.setAttribute('data-target', '#' + datetimePickerId); @@ -1443,7 +1461,6 @@ const RangeUserValueWidget = UserValueWidget.extend({ await this._super(...arguments); this.input = document.createElement('input'); this.input.type = "range"; - this.input.className = "custom-range"; this.containerEl.appendChild(this.input); }, diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss index 39923c9c670..b2fb1ef821e 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -390,7 +390,7 @@ a.o_underline { background-color: lighten($o-we-ace-color, 10%); .o_ace_editor_resource_info { - color: $o-we-color-text-lighter; + color: #ebecee; } } 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 21ce8c9fe8d..f031e0c8a50 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -2,69 +2,182 @@ /// This files regroups the variables and mixins which are specific to the editor. /// -$o-support-13-0-color-system: false !default; +//------------------------------------------------------------------------------ +// Odoo Editor UI +//------------------------------------------------------------------------------ -$o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default; +$o-we-bg-darkest: #000000 !default; +$o-we-bg-darker: #141217 !default; +$o-we-bg-dark: #191922 !default; +$o-we-bg-light: #23232D !default; +$o-we-bg-lighter: #32323D !default; + +$o-we-fg-darker: #808080 !default; +$o-we-fg-dark: #C6C6C6 !default; +$o-we-fg-light: #D9D9D9 !default; +$o-we-fg-lighter: #FFFFFF !default; -$o-we-font-size: 13px; -$o-we-line-height: 1.5; -$o-we-bg-color: #F7F7F7 !default; -$o-we-bg-color-dark: #a7a7a7 !default; -$o-we-color: #212629 !default; -$o-we-border-width: 1px !default; -$o-we-border-color: rgba(0, 0, 0, 0.125) !default; -$o-we-dropdown-bg-color: #FFFFFF; -$o-we-dropdown-color: inherit; - -$o-we-color-dark: #2c2c36 !default; -$o-we-color-darker: darken($o-we-color-dark, 2%) !default; -$o-we-color-divider: #33363e !default; -$o-we-color-light: #4e525b !default; -$o-we-color-normal: #3D4047 !default; -$o-we-color-text-normal: #999999 !default; -$o-we-color-text-light: #d4d5d7 !default; -$o-we-color-text-lighter: #ebecee !default; $o-we-color-danger: #e6586c !default; $o-we-color-warning: #f0ad4e !default; $o-we-color-success: #40ad67 !default; $o-we-color-info: #6999a8 !default; -$o-we-sidebar-width: 230px !default; +$o-we-bg: $o-we-bg-light !default; +$o-we-color: $o-we-fg-light !default; +$o-we-font-size: 13px !default; +$o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default; +$o-we-accent: #00ABC1 !default; +$o-we-border-width: 1px !default; +$o-we-border-color: $o-we-bg-light !default; + +$o-we-ace-color: #2F3129 !default; $o-we-handles-offset-to-hide: 10000px !default; $o-we-handles-btn-size: 18px !default; -$o-we-handles-accent-color: #00e2ff !default; +$o-we-handles-accent-color: $o-we-accent !default; $o-we-handles-accent-color-preview: $o-enterprise-color !default; $o-we-handle-edge-size: 8px !default; $o-we-handle-border-width: 2px !default; -// Transitions -$o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1) !default; - -// Editor $o-we-dropzone-size: 30px !default; // $grid-gutter-width (todo: allow to use the variable) $o-we-dropzone-border-width: 2px !default; $o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default; -$o-we-ace-color: #2F3129 !default; - -$o-we-switch-size: 2ex !default; -$o-we-switch-inactive-color: $o-we-bg-color !default; - -// Checklist -$o-checklist-margin-left: 20px; -$o-checklist-checkmark-width: 2px; -$o-checklist-before-size: 13px; - -$o-we-toolbar-height: 32px; +// Translations +$o-we-content-to-translate-color: rgb(255, 255, 90) !default; +$o-we-translated-content-color: rgb(120, 215, 110) !default; -// ============ 'Preview' component Mixins =============== -// Create a "preview" work-area to edit/customize specific elements +$o-we-toolbar-height: 32px !default; + +$o-we-item-border-width: 1px !default; +$o-we-item-border-color: $o-we-bg-darkest !default; +$o-we-item-border-radius: 1px !default; +$o-we-item-clickable-bg: linear-gradient($o-we-bg-light, $o-we-bg-darker) !default; +$o-we-item-pressed-bg: linear-gradient($o-we-bg-darkest, $o-we-bg-darker) !default; +$o-we-item-pressed-color: $o-we-fg-light !default; + +$o-we-dropdown-spacing: 5px !default; +$o-we-dropdown-bg: $o-we-bg-darker !default; +$o-we-dropdown-border-width: 1px !default; +$o-we-dropdown-border-color: $o-we-bg-darkest !default; +$o-we-dropdown-shadow: 0 2px 8px 0 rgba(black, 0.5) !default; +$o-we-dropdown-item-height: 30px !default; +$o-we-dropdown-item-spacing: 1px !default; +$o-we-dropdown-item-bg: $o-we-bg-light !default; +$o-we-dropdown-item-color: $o-we-fg-dark !default; +$o-we-dropdown-item-active-color: $o-we-fg-light !default; + +$o-we-sidebar-bg: $o-we-bg !default; +$o-we-sidebar-color: $o-we-color !default; +$o-we-sidebar-font-size: 11px !default; +$o-we-sidebar-border-width: $o-we-border-width !default; +$o-we-sidebar-border-color: $o-we-border-color !default; +$o-we-sidebar-width: $o-we-sidebar-border-width + 270px !default; + +$o-we-sidebar-top-height: 26px !default; + +$o-we-sidebar-tabs-border-width: $o-we-sidebar-border-width !default; +$o-we-sidebar-tabs-border-color: $o-we-sidebar-border-color !default; +$o-we-sidebar-tabs-height: $o-we-sidebar-tabs-border-width + 29px !default; +$o-we-sidebar-tabs-bg: $o-we-bg-darker !default; +$o-we-sidebar-tabs-color: $o-we-sidebar-color !default; +$o-we-sidebar-tabs-disabled-color: $o-we-fg-darker !default; +$o-we-sidebar-tabs-active-border-width: 2px !default; +$o-we-sidebar-tabs-active-border-color: $o-we-accent !default; +$o-we-sidebar-tabs-active-color: $o-we-fg-lighter !default; + +$o-we-sidebar-blocks-content-bg: $o-we-bg-dark !default; +$o-we-sidebar-blocks-content-spacing: 10px !default; +$o-we-sidebar-blocks-content-snippet-spacing: 2px !default; +$o-we-sidebar-blocks-content-snippet-bg: $o-we-bg-lighter !default; + +$o-we-sidebar-content-highlight-bar-width: 2px !default; +$o-we-sidebar-content-highlight-bar-color: $o-we-accent !default; + +$o-we-sidebar-content-gutter-item-indent: 5px !default; +$o-we-sidebar-content-indent: $o-we-sidebar-content-gutter-item-indent + $o-we-sidebar-content-highlight-bar-width + 12px !default; +$o-we-sidebar-content-backdrop-bg: rgba(black, 0.5) !important; + +$o-we-sidebar-content-main-title-border-width: 1px !default; +$o-we-sidebar-content-main-title-border-color: $o-we-bg-light !default; +$o-we-sidebar-content-main-title-height: 32px !default; +$o-we-sidebar-content-main-title-shadow-start: rgba(black, 0.7); +$o-we-sidebar-content-main-title-shadow: linear-gradient($o-we-sidebar-content-main-title-shadow-start, rgba(black, 0)) !default; +$o-we-sidebar-content-main-title-color: $o-we-fg-lighter !default; +$o-we-sidebar-content-main-title-font-size: 13px !default; +$o-we-sidebar-content-main-title-margin-bottom: 2px !default; + +$o-we-sidebar-content-block-spacing: 10px !default; + +$o-we-sidebar-content-fold-block-bg: $o-we-bg-dark !default; +$o-we-sidebar-content-fold-block-inner-spacing: $o-we-sidebar-content-block-spacing !default; + +$o-we-sidebar-content-field-spacing: 5px !default; +$o-we-sidebar-content-field-color: $o-we-fg-dark !default; +$o-we-sidebar-content-field-control-item-color: $o-we-fg-darker !default; +$o-we-sidebar-content-field-control-item-size: 1em !default; +$o-we-sidebar-content-field-control-item-spacing: 0.5em !default; +$o-we-sidebar-content-field-label-spacing: 4px !default; +$o-we-sidebar-content-field-label-width: $o-we-sidebar-content-field-label-spacing + 102px !default; +$o-we-sidebar-content-field-multi-spacing: $o-we-sidebar-content-field-label-spacing !default; +$o-we-sidebar-content-field-height: 22px !default; + +$o-we-sidebar-content-field-border-width: $o-we-item-border-width !default; +$o-we-sidebar-content-field-border-color:$o-we-item-border-color !default; +$o-we-sidebar-content-field-border-radius: $o-we-item-border-radius !default; +$o-we-sidebar-content-field-disabled-color: $o-we-sidebar-content-field-control-item-color !default; +$o-we-sidebar-content-field-clickable-bg: $o-we-item-clickable-bg !default; +$o-we-sidebar-content-field-clickable-spacing: $o-we-sidebar-content-field-label-spacing !default; +$o-we-sidebar-content-field-pressed-bg: $o-we-item-pressed-bg !default; +$o-we-sidebar-content-field-pressed-color: $o-we-item-pressed-color !default; + +$o-we-sidebar-content-field-dropdown-spacing: $o-we-dropdown-spacing !default; +$o-we-sidebar-content-field-dropdown-bg: $o-we-dropdown-bg !default; +$o-we-sidebar-content-field-dropdown-border-width: $o-we-dropdown-border-width !default; +$o-we-sidebar-content-field-dropdown-border-color: $o-we-dropdown-border-color !default; +$o-we-sidebar-content-field-dropdown-shadow: $o-we-dropdown-shadow !default; +$o-we-sidebar-content-field-dropdown-item-height: $o-we-dropdown-item-height !default; +$o-we-sidebar-content-field-dropdown-item-spacing: $o-we-dropdown-item-spacing !default; +$o-we-sidebar-content-field-dropdown-item-bg: $o-we-dropdown-item-bg !default; +$o-we-sidebar-content-field-dropdown-item-color: $o-we-dropdown-item-color !default; +$o-we-sidebar-content-field-dropdown-item-active-color: $o-we-dropdown-item-active-color !default; + +$o-we-sidebar-content-field-colorpicker-size: 20px !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-light !important; +$o-we-sidebar-content-field-colorpicker-dropdown-color: $o-we-fg-light !important; +$o-we-sidebar-content-field-colorpicker-dropdown-active-color: $o-we-fg-lighter !important; +$o-we-sidebar-content-field-colorpicker-cc-width: 208px !important; +$o-we-sidebar-content-field-colorpicker-cc-height: 26px !important; + +$o-we-sidebar-content-field-input-max-width: 60px !default; +$o-we-sidebar-content-field-input-bg: $o-we-bg-darker !default; +$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; + +$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; +$o-we-sidebar-content-field-progress-active-color: $o-we-accent !default; + +$o-we-sidebar-content-field-toggle-width: 20px !default; +$o-we-sidebar-content-field-toggle-height: 12px !default; +$o-we-sidebar-content-field-toggle-bg: $o-we-fg-darker !default; +$o-we-sidebar-content-field-toggle-active-bg: $o-we-accent !default; +$o-we-sidebar-content-field-toggle-control-width: 11px !default; +$o-we-sidebar-content-field-toggle-control-height: $o-we-sidebar-content-field-toggle-height - 2px !default; +$o-we-sidebar-content-field-toggle-control-bg: $o-we-fg-lighter !default; +$o-we-sidebar-content-field-toggle-control-shadow: 0 2px 3px 0 $o-we-bg-darkest !default; + +//------------------------------------------------------------------------------ +// Preview component Mixins +//------------------------------------------------------------------------------ @mixin o-we-preview-box($color-text: white) { border-top: 1px solid black; border-bottom: 1px solid white; - background-image: linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker); + background-image: linear-gradient(-150deg, $o-we-bg-light, $o-we-bg-dark); color: $color-text; } @@ -76,17 +189,18 @@ $o-we-toolbar-height: 32px; box-shadow: 0 0 15px 2px #000; } -// ============ Preservation mixins =============== -// Used to preserve web_editor and website UI from themes customizations +//------------------------------------------------------------------------------ +// Mixins to shield UI from themed bootstrap +//------------------------------------------------------------------------------ @mixin o-w-preserve-base { font-size: $o-we-font-size; font-family: $o-we-font-family; line-height: 1.5; - color: $o-we-color-divider; + color: #33363e; .text-muted { - color: $o-we-color-text-normal !important; + color: #999999 !important; } } @@ -94,7 +208,7 @@ $o-we-toolbar-height: 32px; h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: $o-we-font-family; line-height: 1.5; - color: $o-we-color-dark; + color: $o-we-bg-light; font-weight: bold; } h1, .h1 { @@ -141,7 +255,7 @@ $o-we-toolbar-height: 32px; padding: 6px 12px; font-size: 14px; line-height: 1.5; - border: 1px solid $o-we-color-text-light; + border: 1px solid #d4d5d7; color: #555; background-color: #fff; border-radius: 0; @@ -172,10 +286,9 @@ $o-we-toolbar-height: 32px; } @mixin o-w-preserve-modals { - .modal-content { border-radius: 0; - background-color: $o-we-bg-color; + background-color: white; .modal-header { border-bottom-color: #e9ecef; @@ -201,7 +314,7 @@ $o-we-toolbar-height: 32px; > li { > a { line-height: 1.5; - color: $o-we-color-light; + color: #4e525b; &:hover { border-color: #dee2e6; @@ -209,8 +322,8 @@ $o-we-toolbar-height: 32px; &.active { &, &:hover, &:focus { - color: $o-we-color-normal; - background-color: $o-we-bg-color; + color: #3D4047; + background-color: white; border-color: #dee2e6 #dee2e6 #FFFFFF; } } @@ -231,11 +344,11 @@ $o-we-toolbar-height: 32px; color: white; } &.btn-secondary { - @include button-variant($o-we-bg-color, $o-we-bg-color); + @include button-variant(white, white); color: $o-brand-primary; } &.btn-link { - @include button-variant($o-we-bg-color, $o-we-bg-color); + @include button-variant(white, white); color: $o-brand-primary; } &.btn-success { @@ -248,11 +361,11 @@ $o-we-toolbar-height: 32px; } &.btn-warning { @include button-variant($o-we-color-warning, $o-we-color-warning); - color: $o-we-color-divider; + color: #33363e; } &.btn-danger { @include button-variant($o-we-color-danger, $o-we-color-danger); - color: $o-we-color-divider; + color: #33363e; } } } @@ -261,8 +374,8 @@ $o-we-toolbar-height: 32px; .card { padding: 19px; margin-bottom: 20px; - background-color: $o-we-bg-color; - border: 1px solid darken($o-we-bg-color, 5%); + background-color: white; + border: 1px solid darken(white, 5%); border-radius: 0; box-shadow: none; } @@ -286,6 +399,17 @@ $o-we-toolbar-height: 32px; } } +//------------------------------------------------------------------------------ +// Edited content +//------------------------------------------------------------------------------ + +$o-support-13-0-color-system: false !default; + +$o-checklist-margin-left: 20px; +$o-checklist-checkmark-width: 2px; +$o-checklist-before-size: 13px; + + // Edition colors // Note: the "base" palettes contain all possible keys a palette should or @@ -416,10 +540,6 @@ $o-color-combinations-presets: ( ) !default; $o-color-combinations-preset-number: 1; -// Translations -$o-we-content-to-translate-color: rgb(255, 255, 90) !default; -$o-we-translated-content-color: rgb(120, 215, 110) !default; - // We allow snippets to be colored and elements like card and columns to be // colored as well. We need components targeted by those colored classes to // use the deepest coloring element config. We only allow here for this to diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss index d5f3b759fb7..d76b7f4b648 100644 --- a/addons/web_editor/static/src/scss/wysiwyg.scss +++ b/addons/web_editor/static/src/scss/wysiwyg.scss @@ -5,18 +5,6 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; // external assets bundle can influence it without duplicating the css. :root { @include print-variable('o-we-toolbar-height', $o-we-toolbar-height); - - @include print-variable('o-we-bg-color', $o-we-bg-color); - @include print-variable('o-we-bg-color-dark', $o-we-bg-color-dark); - @include print-variable('o-we-color', $o-we-color); - @include print-variable('o-we-color-accent', $o-we-color); - - @include print-variable('o-we-dropdown-bg-color', $o-we-dropdown-bg-color); - @include print-variable('o-we-dropdown-color', $o-we-dropdown-color); - - @include print-variable('o-we-snippets-bg-color', $o-we-bg-color); - @include print-variable('o-we-snippets-bg-info', $o-we-color-info); - @include print-variable('o-we-snippets-color', $o-we-color); } // EDITOR TOP BAR AND POPOVER @@ -24,6 +12,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; max-width: 350px; left: 50% !important; transform: translate(-50%, 0); + .popover-body { white-space: normal; } @@ -31,6 +20,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; .editor_enable { padding-top: var(--o-we-toolbar-height) !important; + .note-popover .popover .popover-body { height: var(--o-we-toolbar-height); } @@ -44,7 +34,8 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; position: fixed; z-index: $o-we-zindex; height: var(--o-we-toolbar-height); - background-color: var(--o-we-bg-color); + background-color: $o-we-bg; + transition: transform 400ms ease 0s; // For fullscreen .note-popover .popover { top: 0 !important; @@ -69,7 +60,8 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; .panel-heading.note-toolbar { padding-bottom: 0; border-bottom: $o-we-border-width solid $o-we-border-color; - background-color: var(--o-we-bg-color); + background-color: $o-we-bg; + color: $o-we-color; font-family: $o-we-font-family; // Main layout of buttons @@ -89,20 +81,13 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; // Active buttons and opened dropdowns .btn { padding: 0.5em 0.75em !important; - border-left: 1px solid transparent; - border-right: 1px solid transparent; - color: var(--o-we-color); + border-left: $o-we-item-border-width solid $o-we-item-border-color; + border-right: $o-we-item-border-width solid $o-we-item-border-color; + background: $o-we-sidebar-content-field-clickable-bg; + color: inherit; font-size: $o-we-font-size !important; - &.active { - background-color: var(--o-we-bg-color-dark); - color: var(--o-we-color-accent); - } - - &:hover { - color: var(--o-we-color-accent); - } - + &.active, &:focus, &:active, &:focus:active { @extend %we-active-button; } @@ -115,24 +100,20 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; content: ''; @include o-position-absolute(100%, $o-we-border-width, auto, $o-we-border-width); height: $o-we-border-width; - background-color: var(--o-we-dropdown-bg-color); } } %we-active-button { - border-left-color: $o-we-border-color; - border-right-color: $o-we-border-color; - background: var(--o-we-dropdown-bg-color); + background: $o-we-sidebar-content-field-pressed-bg; + color: $o-we-sidebar-content-field-pressed-color; box-shadow: none !important; outline: none !important; } .dropdown-menu { - margin-top: 0; - border: $o-we-border-width solid $o-we-border-color; - border-top-color: transparent; - border-radius: 0; - background-color: var(--o-we-dropdown-bg-color); - color: var(--o-we-dropdown-color); - box-shadow: none; + margin-top: $o-we-dropdown-spacing; + 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; } .dropdown-menu.show { // To overcome .note-XXX .dropdown-menu rules min-width: 0; @@ -141,14 +122,47 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; display: block; max-width: none; overflow: visible; - color: var(--o-we-color); + 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; + } - &:hover { - background-color: var(--o-we-bg-color) !important; - color: var(--o-we-color-accent) !important; + &.active { + color: $o-we-dropdown-item-active-color; + } + } + li > .dropdown-item { + border-top: $o-we-dropdown-item-spacing solid transparent; + } + .note-style { + .dropdown-item { > * { - color: inherit !important; + display: inline;; + } + &, > * { + line-height: 2; + } + &[data-value="blockquote"] { + padding-top: 0.5em; + padding-bottom: 0.5em; + + > * { + display: block; + } } } } @@ -159,7 +173,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; max-width: 150px; } .note-color-palette div .note-color-btn { - border-color: var(--o-we-dropdown-bg-color); + border-color: $o-we-dropdown-bg; } .note-custom-color-palette .note-color-row { height: auto!important; @@ -169,7 +183,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; width: 20px; padding: 0; margin: 0; - border: 1px solid var(--o-we-dropdown-bg-color); + border: 1px solid $o-we-dropdown-bg; } } } @@ -457,13 +471,9 @@ img::selection { button:not(.btn), label { margin: 0; border: none; - border-right: 1px solid var(--o-we-bg-color-dark); - background-color: var(--o-we-bg-color); - color: var(--o-we-color); - - &:hover { - background-color: var(--o-we-bg-color-dark); - } + border-right: 1px solid $o-we-bg; + background-color: $o-we-bg; + color: $o-we-color; &:first-child { border-top-left-radius: 0.25rem; diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index da7caa44c5f..f803ea557aa 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -47,52 +47,99 @@ body.editor_enable.editor_has_snippets { } } } + + +.oe_snippet { + // No root because can be drag and drop (and the helper is in the body) + position: relative; + z-index: $o-we-zindex; + width: 100px; + background-color: $o-we-sidebar-blocks-content-snippet-bg; + + &.ui-draggable-dragging { + transform: rotate(3deg); + box-shadow: 0 5px 25px -10px black; + transition: transform 0.3s, box-shadow 0.3s; + } + + > :not(.oe_snippet_thumbnail) { + display: none !important; + } + + .oe_snippet_thumbnail { + width: 100%; + + .oe_snippet_thumbnail_img { + width: 100%; + height: 0; + padding-bottom: 75%; + background-size: cover; + background-position: center center; + text-align: center; + overflow: hidden; + } + + img.oe_snippet_thumbnail_img { + height: auto; + padding-bottom: 0; + } + } + + .oe_snippet_thumbnail_title { + display: none; + } +} + // SNIPPET PANEL #oe_snippets { @include o-w-preserve-btn; - @include o-position-absolute(0, auto, 0, -$o-we-sidebar-width); + @include o-position-absolute(var(--o-we-toolbar-height), auto, 0, 0); position: fixed; z-index: $o-we-zindex; display: flex; flex-flow: column nowrap; width: $o-we-sidebar-width; - border-right: $o-we-border-width solid $o-we-border-color; - background-color: var(--o-we-snippets-bg-color); - color: var(--o-we-snippets-color); - box-shadow: 0px 10px 10px -10px black inset; - font-family: Roboto, $font-family-sans-serif; - font-size: $o-we-font-size; - line-height: $o-we-line-height; + border-right: $o-we-sidebar-border-width solid $o-we-sidebar-border-color; + background-color: $o-we-sidebar-bg; + color: $o-we-sidebar-color; + font-family: $o-we-font-family; + font-size: $o-we-sidebar-font-size; + font-weight: 700; + line-height: 1; - transition: left 400ms $o-we-md-ease 0s; + transition: transform 400ms ease 0s; // Also for fullscreen + transform: translateX(-100%); &.o_loaded { - left: 0 !important; + transform: none; } #snippets_menu { flex: 0 0 auto; display: flex; - height: var(--o-we-toolbar-height); - background: var(--o-we-bg-color); - color: var(--o-we-color); - font-family: $o-we-font-family; + height: $o-we-sidebar-tabs-height; + border-bottom: $o-we-sidebar-tabs-border-width solid $o-we-sidebar-tabs-border-color; + background: $o-we-sidebar-tabs-bg; + color: $o-we-sidebar-tabs-color; > button { flex: 1 1 auto; border: none; background: transparent; color: inherit; + font-weight: inherit; // Don't know why but does not work without it @include o-text-overflow(); - &.active { - background: var(--o-we-snippets-bg-color); - color: var(--o-we-snippets-color); + &:disabled { + color: $o-we-sidebar-tabs-disabled-color; } + &.active, &:focus, &:active, &:focus:active { + border-bottom: $o-we-sidebar-tabs-active-border-width solid $o-we-sidebar-tabs-active-border-color; + color: $o-we-sidebar-tabs-active-color; outline: none; } } @@ -104,60 +151,49 @@ body.editor_enable.editor_has_snippets { overflow: auto; } - .o_panel_header { - display: flex; - align-items: center; - justify-content: center; - padding: 3%; - color: inherit; - margin-bottom: 3%; - - i { - margin-right: 5px; + > #o_scroll { + background-color: $o-we-sidebar-blocks-content-bg; + padding: 0 $o-we-sidebar-blocks-content-spacing; + + .o_panel, .o_panel_header { + padding: $o-we-sidebar-blocks-content-spacing 0; } - } - > #o_scroll { .o_panel_body { - &:after { - content: " "; + margin-left: -$o-we-sidebar-blocks-content-snippet-spacing; + + &::after { + content: ""; display: table; - clear: both; + clear: left; } - .oe_snippet { + > .oe_snippet { float: left; - width: 45.5%; - margin: 0 0 6% 3%; - box-shadow: none; - background-color: transparent; + width: percentage(1 / 3); + background-clip: padding-box; + border-left: $o-we-sidebar-blocks-content-snippet-spacing solid transparent; + margin-bottom: $o-we-sidebar-blocks-content-snippet-spacing; user-select: none; cursor: pointer; cursor: copy; cursor: grab; - .oe_snippet_thumbnail { - .oe_snippet_thumbnail_img { - border: none; - } - - .oe_snippet_thumbnail_title { - border: none; - padding: 5px 0; - } + &:nth-child(3n+1) { + clear: left; + } - &:hover .oe_snippet_thumbnail_img { - transition: transform 200ms ease 0s; - transform: scale(1.05); - } + .oe_snippet_thumbnail_title { + display: block; + padding: $o-we-sidebar-blocks-content-spacing / 2; + text-align: center; } &.o_disabled { .oe_snippet_thumbnail { background-color: rgba(255, 0, 0, 0.75); } - .oe_snippet_thumbnail_img { opacity: 0.8; } @@ -167,20 +203,14 @@ body.editor_enable.editor_has_snippets { .oe_snippet_thumbnail_img { opacity: 0.5; } - .btn.o_install_btn { display: none; @include o-position-absolute($top: 16px); } - &:hover .btn.o_install_btn { display: block; } } - - &:nth-child(2n + 1) { - clear: left; - } } } #snippet_custom .oe_snippet .oe_snippet_thumbnail { @@ -213,39 +243,51 @@ body.editor_enable.editor_has_snippets { } > .o_we_customize_panel { + position: relative; - @mixin we-icon-button($icon, $color: null) { + @mixin we-icon-button($icon, $color: $o-we-sidebar-content-field-control-item-color, $align: right) { @extend %we-icon-button; - padding-right: 0.5em + 1em + 0.5em; + padding-#{$align}: 2 * $o-we-sidebar-content-field-control-item-spacing + $o-we-sidebar-content-field-control-item-size; &::after { content: $icon; color: $color; + + @if $align == left { + right: auto; + left: $o-we-sidebar-content-field-control-item-spacing; + } } } - we-button, we-toggler { + @mixin large-component() { flex: 1 1 auto; + width: $o-we-sidebar-width / 2; // TODO maybe there is a better way to implement this + } + + we-button, we-toggler { cursor: pointer; @include o-text-overflow(block); - padding: 0.1em 0.4em; - margin: 0; - border: 1px solid var(--o-we-bg-color-dark); - border-radius: 0; - background-color: var(--o-we-bg-color-dark); - color: var(--o-we-color); - line-height: 1.5; - white-space: nowrap; + padding: 0 $o-we-sidebar-content-field-clickable-spacing; + border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color; + border-radius: $o-we-sidebar-content-field-border-radius; + background: $o-we-sidebar-content-field-clickable-bg; + color: $o-we-sidebar-content-field-color; + line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width; text-align: left; - &.fa, &.fas, &.fab, &.far { - flex: 0 0 auto; + &.active { + background: $o-we-sidebar-content-field-pressed-bg; + color: $o-we-sidebar-content-field-pressed-color; + } + + &.fa { display: inline-block; - margin: 0 0 0 0.3em; + margin: 0 0 0 $o-we-sidebar-content-field-multi-spacing; padding: 0; border: none; - background-color: transparent; - color: var(--o-we-snippets-color); + background: none; + color: inherit; text-align: center; &.fa-times, &.fa-minus { @@ -267,6 +309,7 @@ body.editor_enable.editor_has_snippets { &.o_we_primary_btn { display: inline-flex !important; width: auto; + background: none; background-color: $o-brand-primary; color: white; @@ -276,30 +319,25 @@ body.editor_enable.editor_has_snippets { } } we-toggler { - @include we-icon-button('\f107'); + @include we-icon-button('\f0d7'); + * { display: none !important; - margin-top: -1px !important; - background-color: rgba(0, 0, 0, 0.3); + border: $o-we-sidebar-content-field-dropdown-border-width solid $o-we-sidebar-content-field-dropdown-border-color; + background-color: $o-we-sidebar-content-field-dropdown-bg; + box-shadow: $o-we-sidebar-content-field-dropdown-shadow; } - &.active { - &::after { - content: '\f106'; - } - - + * { - display: block !important; - } + &.active + * { + display: block !important; } } %we-icon-button { position: relative; &::after { - @include o-position-absolute(50%, 0.5em); + @include o-position-absolute(50%, $o-we-sidebar-content-field-control-item-spacing); transform: translateY(-50%); - width: 1em; + width: $o-we-sidebar-content-field-control-item-size; text-align: center; font-family: FontAwesome; } @@ -313,25 +351,32 @@ body.editor_enable.editor_has_snippets { we-customizeblock-options { position: relative; display: block; - padding: 1em; - color: var(--o-we-snippets-color); - - &:nth-child(2n) { - background-color: rgba(0, 0, 0, 0.1); + padding: 0 $o-we-sidebar-content-block-spacing $o-we-sidebar-content-block-spacing $o-we-sidebar-content-indent; + border-top: $o-we-sidebar-content-main-title-border-width solid $o-we-sidebar-content-main-title-border-color; + background-image: $o-we-sidebar-content-main-title-shadow; + background-size: 100% ($o-we-sidebar-content-main-title-height / 2); + background-repeat: no-repeat; + + &:first-child { + border-top-color: $o-we-sidebar-content-main-title-shadow-start; } > we-title { display: flex; align-items: center; - margin-bottom: 0.5em; - text-transform: uppercase; - font-weight: bold; - color: inherit !important; + margin-bottom: $o-we-sidebar-content-main-title-margin-bottom - $o-we-sidebar-content-field-spacing; + + > span { + color: $o-we-sidebar-content-main-title-color !important; + font-size: $o-we-sidebar-content-main-title-font-size; + line-height: $o-we-sidebar-content-main-title-height - $o-we-sidebar-content-main-title-border-width; + } > we-button-group { flex: 0 0 auto; display: block; margin-left: auto; + color: $o-we-sidebar-content-field-control-item-color; text-align: center; > we-customizeblock-option { @@ -347,24 +392,18 @@ body.editor_enable.editor_has_snippets { position: relative; display: block; - > *, > div > * { - display: block; - margin-top: 0.5em; - } - .dropdown-menu { // FIXME temporary fix for m2o option for example position: static !important; } > we-alert { - background-color: var(--o-we-snippets-bg-info); + background-color: $o-we-color-info; display: block; - margin: -.5em; - padding: .5em; + padding: $o-we-sidebar-content-field-label-spacing; we-title { - margin-bottom: 0.5em; + margin-bottom: $o-we-sidebar-content-field-label-spacing; text-transform: uppercase; font-weight: bold; } @@ -384,53 +423,74 @@ body.editor_enable.editor_has_snippets { //---------------------------------------------------------------------- .o_we_user_value_widget { - flex: 1 1 auto; - min-width: 0; @extend %o-we-inline; + margin-top: $o-we-sidebar-content-field-spacing; > div { display: flex; - align-items: baseline; - justify-content: flex-end; + align-items: center; + min-height: $o-we-sidebar-content-field-height; } } // Buttons we-button.o_we_user_value_widget { + > div { + // Needed otherwise cannot work because of flex display + @include o-text-overflow(block); + min-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width; + line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width; + } &.active { - @include we-icon-button('\f00c', $o-we-color-success); + @include we-icon-button('\f00c', $align: left); } - - > div { - justify-content: flex-start; + &.fa > div { + display: none; } } // Checkboxes .o_we_checkbox_wrapper.o_we_user_value_widget { - @extend .o_we_force_inline; - flex: 0 0 auto; padding: 0; border: none; - background-color: transparent; - color: inherit; + background: none; + + > div { + display: flex; + min-height: $o-we-sidebar-content-field-height; + line-height: $o-we-sidebar-content-field-height; + } we-checkbox { flex: 0 0 auto; - display: block; - width: 1em; - height: 1em; - margin-left: auto; - border: 1px solid var(--o-we-bg-color-dark); - border-radius: 0; - background-color: var(--o-we-bg-color-dark); + display: flex; + align-items: center; + width: $o-we-sidebar-content-field-toggle-width; + height: $o-we-sidebar-content-field-toggle-height; + background-color: $o-we-sidebar-content-field-toggle-bg; + border-radius: 10rem; + + &::after { + content: ""; + display: block; + width: $o-we-sidebar-content-field-toggle-control-width; + height: $o-we-sidebar-content-field-toggle-control-height; + border-radius: 10rem; + background-color: $o-we-sidebar-content-field-toggle-control-bg; + box-shadow: $o-we-sidebar-content-field-toggle-control-shadow; + } } &.active { - padding-right: 0; + padding-left: 0; + + we-checkbox { + background-color: $o-we-sidebar-content-field-toggle-active-bg; + justify-content: flex-end; + } &::after { - right: 0; + display: none; } } } @@ -439,67 +499,119 @@ body.editor_enable.editor_has_snippets { we-select.o_we_user_value_widget { position: relative; - we-toggler { - flex: 0 0 100%; - - &.active { - background-color: transparent; - border-color: var(--o-we-color); - } + &:not(.o_we_icon_select) we-toggler { + @include large-component(); } + we-select-menu { @include o-position-absolute(100%, 0, auto, 0); z-index: $zindex-dropdown; - border: 1px solid var(--o-we-color); - background-color: var(--o-we-bg-color-dark); max-height: 600px; overflow-y: auto; - } + margin-top: $o-we-sidebar-content-field-dropdown-spacing !important; - &.o_we_icon_select { - flex: 0 0 auto; + > we-title { + line-height: $o-we-sidebar-content-field-dropdown-item-height; + } + + 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; + background-color: $o-we-sidebar-content-field-dropdown-item-bg; + color: $o-we-sidebar-content-field-dropdown-item-color; + + > div { + line-height: $o-we-sidebar-content-field-dropdown-item-height; + } + + &:not(.d-none) ~ we-button { + // 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-sidebar-content-field-dropdown-item-spacing solid transparent; + } + + &.active { + color: $o-we-sidebar-content-field-dropdown-item-active-color; + } + } } } // Inputs we-input.o_we_user_value_widget { + > div { + flex: 0 1 auto; + width: $o-we-sidebar-content-field-input-max-width; + border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color; + border-radius: $o-we-sidebar-content-field-border-radius; + background-color: $o-we-sidebar-content-field-input-bg; + + &:focus-within { + border-color: $o-we-sidebar-content-field-input-border-color; + } + } + + &.o_we_large_input > div { + flex: 1 1 auto; + } + input { + box-sizing: content-box; flex: 1 1 auto; width: 0; - min-width: 1.5em; - margin: 0 2px 0 0; - padding: 0 2px; + min-width: 2ch; + height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width; + padding: 0 $o-we-sidebar-content-field-clickable-spacing; border: none; border-radius: 0; - background-color: var(--o-we-bg-color-dark); - color: var(--o-we-color); + background-color: transparent; + color: inherit; + font-family: $o-we-sidebar-content-field-input-font-family; + + &::placeholder { + color: $o-we-sidebar-content-field-control-item-color; + } + &:focus { + outline: none; + } } span { flex: 0 0 auto; + padding-right: $o-we-sidebar-content-field-label-spacing; + font-size: $o-we-sidebar-content-field-input-unit-font-size; + color: $o-we-sidebar-content-field-control-item-color; } } // Color Pickers .o_we_so_color_palette.o_we_user_value_widget { - @extend .o_we_force_inline; - flex: 0 0 auto; .o_we_color_preview { @extend %o-preview-alpha-background; - display: block; flex: 0 0 auto; - width: 1em; - height: 1em; - margin-left: auto; - border: 1px solid white; + display: block; + width: $o-we-sidebar-content-field-colorpicker-size; + height: $o-we-sidebar-content-field-colorpicker-size; + border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color; + border-radius: 10rem; + + &::after { + box-shadow: $o-we-sidebar-content-field-colorpicker-shadow; + } } we-toggler { display: none; } } - // Chart Snippet + // Matrix (e.g. Chart Snippet) we-matrix { overflow-y: auto; @@ -511,7 +623,7 @@ body.editor_enable.editor_has_snippets { text-align: center; we-button { display: inline-block; - color: white; + color: inherit; height: 100%; &.o_we_matrix_remove_col, &.o_we_matrix_remove_row { @@ -519,9 +631,9 @@ body.editor_enable.editor_has_snippets { } } input { - border: 1px solid var(--o-we-bg-color-dark); - background-color: var(--o-we-bg-color-dark); - color: var(--o-we-color); + border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color; + background-color: $o-we-sidebar-content-field-input-bg; + color: inherit; font-size: 12px; width: 100%; } @@ -540,20 +652,129 @@ body.editor_enable.editor_has_snippets { } } - we-multi we-row > div { - flex-wrap: wrap; + // Progress bar widget + we-range.o_we_user_value_widget { - we-select .o_we_user_value_widget > div > we-select-menu { - top: 0; - } - we-row { - flex-basis: 100%; + input[type="range"] { + @include large-component(); + height: $o-we-sidebar-content-field-height; + padding: 0; + background-color: transparent; + appearance: none; + + &:focus { + outline: none; + + &::-webkit-slider-thumb { box-shadow: none; } + &::-moz-range-thumb { box-shadow: none; } + &::-ms-thumb { box-shadow: none; } + } + &::-moz-focus-outer { + border: 0; + } + &::-webkit-slider-thumb { + width: $o-we-sidebar-content-field-progress-control-height; + height: $o-we-sidebar-content-field-progress-control-height; + margin-top: ($o-we-sidebar-content-field-progress-height - $o-we-sidebar-content-field-progress-control-height) / 2; + border: none; + border-radius: 10rem; + background-color: $o-we-sidebar-content-field-progress-active-color; + box-shadow: none; + appearance: none; + + &:active { + background-color: $o-we-sidebar-content-field-progress-active-color; + } + } + &::-webkit-slider-runnable-track { + width: 100%; + height: $o-we-sidebar-content-field-progress-height; + cursor: pointer; + // Unfortunately, Chrome does not support customizing the lower part of the track + background-color: $o-we-sidebar-content-field-progress-color; + border-color: transparent; + border-radius: 10rem; + box-shadow: none; + + position: relative; + // z-index: 1000; + } + &::-moz-range-thumb { + width: $o-we-sidebar-content-field-progress-control-height; + height: $o-we-sidebar-content-field-progress-control-height; + border: none; + border-radius: 10rem; + background-color: $o-we-sidebar-content-field-progress-active-color; + box-shadow: none; + appearance: none; + + &:active { + background-color: $o-we-sidebar-content-field-progress-active-color; + } + } + &::-moz-range-track { + width: 100%; + height: $o-we-sidebar-content-field-progress-height; + cursor: pointer; + background-color: $o-we-sidebar-content-field-progress-color; + border-color: transparent; + border-radius: 10rem; + box-shadow: none; + } + &::-moz-range-progress { + background-color: $o-we-sidebar-content-field-progress-active-color; + height: $o-we-sidebar-content-field-progress-height; + border-color: transparent; + border-radius: 10rem; + } + &::-ms-thumb { + width: $o-we-sidebar-content-field-progress-control-height; + height: $o-we-sidebar-content-field-progress-control-height; + margin-top: 0; + margin-right: 0; + margin-left: 0; + border: none; + border-radius: 10rem; + background-color: $o-we-sidebar-content-field-progress-active-color; + box-shadow: none; + appearance: none; + + &:active { + background-color: $o-we-sidebar-content-field-progress-active-color; + } + } + &::-ms-track { + width: 100%; + height: $o-we-sidebar-content-field-progress-height; + cursor: pointer; + background-color: transparent; + border-color: transparent; + border-width: $o-we-sidebar-content-field-progress-control-height / 2; + box-shadow: none; + } + &::-ms-fill-lower { + background-color: $o-we-sidebar-content-field-progress-active-color; + border-radius: 10rem; + @include border-radius($custom-range-track-border-radius); + } + &::-ms-fill-upper { + background-color: $o-we-sidebar-content-field-progress-color; + border-radius: 10rem; + } } } - we-range input { - flex-grow: 1; - width: 1px; + // Multi widgets + we-multi.o_we_user_value_widget { + margin-top: 0; + + > div { + flex-flow: row wrap; + + > * { + flex: 1 1 auto; // Needed for colorpicker... + } + } } //---------------------------------------------------------------------- @@ -562,17 +783,25 @@ body.editor_enable.editor_has_snippets { we-row { position: relative; - flex: 1 1 auto; - min-width: 0; @extend %o-we-inline; + margin-top: $o-we-sidebar-content-field-spacing; + + .o_we_user_value_widget { + margin-top: 0; + min-width: 4em; // Ideally rely on actual natural min-width, but does not work... + } + we-button, .o_we_so_color_palette { + &.o_we_user_value_widget { + min-width: auto; // ... except for these ones + } + } > div { display: flex; align-items: center; - justify-content: flex-end; - > * + * { - margin-left: 0.5em; + > :not(.d-none) ~ * { + margin-left: $o-we-sidebar-content-field-multi-spacing; } } @@ -581,27 +810,31 @@ body.editor_enable.editor_has_snippets { } } - %o-we-inline:not(.o_we_fw) { + %o-we-inline { display: flex; flex-flow: row wrap; - align-items: center; > we-title { - @include o-text-overflow(); - max-width: 95%; - min-width: 30%; - margin-right: 5%; + width: 100%; } > div { - flex: 1 1 auto; - min-width: 30%; + flex: 0 1 auto; + min-width: 0; + margin-top: $o-we-sidebar-content-field-spacing; } - &.o_we_force_inline { + &:not(.o_we_fw) { flex-flow: row nowrap; + align-items: center; + > we-title { + flex: 0 0 auto; + @include o-text-overflow(); + width: $o-we-sidebar-content-field-label-width; + padding-right: $o-we-sidebar-content-field-label-spacing; + } > div { - min-width: 0; + margin-top: 0; } } } @@ -611,67 +844,35 @@ body.editor_enable.editor_has_snippets { flex: 0 0 auto; max-height: 220px; overflow-y: auto; - background-color: var(--o-we-bg-color); - border-top: 2px solid; + padding: $o-we-sidebar-blocks-content-spacing; + background-color: $o-we-sidebar-blocks-content-bg; + border-top: $o-we-sidebar-tabs-border-width solid $o-we-sidebar-tabs-border-color; + + .o_panel_header { + padding: $o-we-sidebar-content-field-spacing 0; + } .o_we_invisible_entry { - padding: 0.5rem; + padding: $o-we-sidebar-content-field-spacing $o-we-sidebar-content-field-clickable-spacing; cursor: pointer; &:hover { - background-color: var(--o-we-snippets-bg-color); + background-color: $o-we-sidebar-bg; } } } -} - -.oe_snippet { - // No root because can be drag and drop (and the helper is in the body) - position: relative; - z-index: $o-we-zindex; - width: 100px; - background-color: var(--o-we-snippets-bg-color); - color: var(--o-we-snippets-color); - - &.ui-draggable-dragging { - transform: rotate(3deg); - box-shadow: 0 5px 25px -10px black; - transition: transform 0.3s, box-shadow 0.3s; - } - - > :not(.oe_snippet_thumbnail) { - display: none !important; - } - - .oe_snippet_thumbnail { - width: 100%; - - .oe_snippet_thumbnail_img { - width: 100%; - height: 0; - border: $o-we-border-width solid $o-we-border-color; - padding-bottom: 75%; - background-size: cover; - background-position: center center; - text-align: center; - overflow: hidden; - } - img.oe_snippet_thumbnail_img { - height: auto; - padding-bottom: 0; - } - - .oe_snippet_thumbnail_title { + &.o_we_backdrop { + > .o_we_customize_panel::after { + content: ""; + @include o-position-absolute(0, 0, 0, 0); display: block; - padding: 5px; - font-size: 12px; - font-weight: 300; - text-shadow: none; + pointer-events: none; + background: $o-we-sidebar-content-backdrop-bg; } - &:hover .oe_snippet_thumbnail_title { - color: var(--o-we-color-accent); + .o_we_widget_opened { + z-index: $zindex-dropdown; } } } @@ -701,27 +902,34 @@ 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; + .d-flex .btn.o_we_colorpicker_switch_pane_btn { - font-size: 0.8em !important; + color: inherit !important; + font-size: inherit !important; + font-weight: inherit !important; &.active { - border-bottom: 1px solid $o-we-handles-accent-color !important; + color: $o-we-sidebar-content-field-colorpicker-dropdown-active-color; + border-bottom: $o-we-sidebar-tabs-active-border-width solid $o-we-sidebar-tabs-active-border-color; } - + .o_colorpicker_reset { - border: 1px solid var(--o-we-color) !important; - border-radius: 2px !important; - font-size: 0.8em !important; - padding: 0 2px !important; + padding: 0 $o-we-sidebar-content-field-clickable-spacing !important; + border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color !important; + border-radius: $o-we-sidebar-content-field-border-radius !important; + background: $o-we-sidebar-content-field-clickable-bg !important; + line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width !important; + color: inherit !important; + font-size: inherit !important; + font-weight: inherit !important; align-self: center; } - &:focus { box-shadow: none; } } .o_colorpicker_sections { - font-size: 14px; .o_we_color_btn, .o_we_color_combination_btn { float: left; @@ -729,7 +937,7 @@ body.editor_enable.editor_has_snippets { padding-top: percentage(1 / 8); margin: 0; border: none; - box-shadow: inset 0 0 0 1px var(--o-we-bg-color-dark); + box-shadow: inset 0 0 0 1px $o-we-sidebar-content-field-colorpicker-dropdown-bg; &.o_colorpicker_reset { background-color: transparent; @@ -752,23 +960,27 @@ body.editor_enable.editor_has_snippets { padding: 0; margin: 0; background-clip: padding-box; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; + border-top: $o-we-sidebar-content-field-spacing solid transparent; + border-bottom: $o-we-sidebar-content-field-spacing solid transparent; > .o_we_cc_preview_wrapper { - padding: 8px; + padding: $o-we-sidebar-content-field-clickable-spacing; } + .o_we_color_combination_btn { - margin-top: -4px; + margin-top: -$o-we-sidebar-content-field-spacing; } } .o_colorpicker_section { + padding-top: $o-we-sidebar-content-field-spacing; - > :first-child { - margin: 4px 0; + &::after { + content: ""; + display: table; + clear: both; } + .o_we_color_btn { position: relative; @@ -798,30 +1010,6 @@ body.editor_enable.editor_has_snippets { } } } - - .note-palette-title { - padding: 10px 0 10px 10px; - font-weight: bold; - } - - .palette-reset { - @include o-position-absolute(0, 0); - margin: 0; - padding: 5px 10px 0; - - .note-color-reset { - font-size: 20px !important; - color: desaturate(rgba($o-we-color-danger, 0.6), 40%); - margin: 1px 0 0; - padding: 0; - cursor: pointer; - - &:hover { - background: transparent !important; - color: $o-we-color-danger; - } - } - } } // DROPZONES @@ -1016,9 +1204,9 @@ body.editor_enable.editor_has_snippets { > * { margin: 0 2px; - border: 1px solid $o-we-color-text-normal; + border: 1px solid #999999; border-radius: 20%; - color: $o-we-color-text-normal; + color: #999999; opacity: 0.5; transition: opacity 400ms ease 0s; cursor: pointer; diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js index 24b950afc8c..ca231278fd1 100644 --- a/addons/website/static/src/js/editor/snippets.editor.js +++ b/addons/website/static/src/js/editor/snippets.editor.js @@ -1,6 +1,7 @@ odoo.define('website.snippet.editor', function (require) { 'use strict'; +const {_t} = require('web.core'); const weSnippetEditor = require('web_editor.snippet.editor'); const wSnippetOptions = require('website.editor.snippets.options'); @@ -64,7 +65,7 @@ weSnippetEditor.Class.include({ if (!this.fakeThemeEl) { this.fakeThemeEl = document.createElement('theme'); - this.fakeThemeEl.dataset.name = ""; + this.fakeThemeEl.dataset.name = _t("General Options"); this.el.appendChild(this.fakeThemeEl); } diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 189497b738d..0626c0fba11 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -33,7 +33,8 @@ const UrlPickerUserValueWidget = InputUserValueWidget.extend({ linkButton.classList.add('o_we_redirect_to', 'fa', 'fa-fw', 'fa-external-link'); linkButton.title = _t("Redirect to URL in a new tab"); this.containerEl.appendChild(linkButton); - $(this.inputEl).addClass('text-left'); + this.el.classList.add('o_we_large_input'); + this.inputEl.classList.add('text-left'); wUtils.autocompleteWithPages(this, $(this.inputEl)); }, @@ -590,6 +591,33 @@ options.registry.background.include({ }, }); +options.registry.SwitchTheme = options.Class.extend({ + isTopOption: true, + + //-------------------------------------------------------------------------- + // Options + //-------------------------------------------------------------------------- + + /** + * @see this.selectClass for parameters + */ + switchTheme: async function (previewMode, widgetValue, params) { + const save = await new Promise(resolve => { + Dialog.confirm(this, _t("Changing theme requires to leave the editor. This will save all your changes, are you sure you want to proceed? Be careful that changing the theme will reset all your color customizations."), { + confirm_callback: () => resolve(true), + cancel_callback: () => resolve(false), + }); + }); + if (!save) { + return; + } + this.trigger_up('request_save', { + reload: false, + onSuccess: () => window.location.href = '/web#action=website.theme_install_kanban_action', + }); + }, +}); + options.registry.Theme = options.Class.extend({ events: { 'click .o_color_combinations_edition we-toggler': '_onCCTogglerClick', @@ -725,24 +753,6 @@ options.registry.Theme = options.Class.extend({ dialog.open(); }); }, - /** - * @see this.selectClass for parameters - */ - switchTheme: async function (previewMode, widgetValue, params) { - const save = await new Promise(resolve => { - Dialog.confirm(this, _t("Changing theme requires to leave the editor. This will save all your changes, are you sure you want to proceed? Be careful that changing the theme will reset all your color customizations."), { - confirm_callback: () => resolve(true), - cancel_callback: () => resolve(false), - }); - }); - if (!save) { - return; - } - this.trigger_up('request_save', { - reload: false, - onSuccess: () => window.location.href = '/web#action=website.theme_install_kanban_action', - }); - }, //-------------------------------------------------------------------------- // Private diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss index b916b232a85..1a4acd4aac9 100644 --- a/addons/website/static/src/scss/website.edit_mode.scss +++ b/addons/website/static/src/scss/website.edit_mode.scss @@ -2,10 +2,10 @@ $-editor-messages-margin-x: 2%; %o-editor-messages { width: 100% - $-editor-messages-margin-x * 2; // Need to be forced here to avoid flickering margin: 20px $-editor-messages-margin-x; - border: 2px dashed $o-we-color-text-normal; + border: 2px dashed #999999; padding: 112px 0px; text-align: center; - color: $o-we-color-text-normal; + color: #999999; &:before { content: attr(data-editor-message); diff --git a/addons/website/static/src/scss/website.editor.ui.scss b/addons/website/static/src/scss/website.editor.ui.scss index de2b602cd21..d004626b03b 100644 --- a/addons/website/static/src/scss/website.editor.ui.scss +++ b/addons/website/static/src/scss/website.editor.ui.scss @@ -19,13 +19,15 @@ } // INPUTS +$o-we-switch-size: 2ex !default; +$o-we-switch-inactive-color: #F7F7F7 !default; .o_switch { display: flex; align-items: center; font-weight: normal; cursor: pointer; - >input { + > input { display: none; + span { @@ -36,18 +38,18 @@ width: $o-we-switch-size * 1.8; margin-right: 0.5em; display: inline-block; - transition: all 0.3s $o-we-md-ease; + transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); &:after { content: ""; - background: $o-we-bg-color; + background: white; display: block; width: $o-we-switch-size - 0.2; height: $o-we-switch-size - 0.2; margin-top: 0.1ex; margin-left: 0.1ex; border-radius: 100rem; - transition: all 0.3s $o-we-md-ease; + transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); box-shadow: 0 1px 1px darken($o-we-switch-inactive-color, 35%), inset 0 0 0 1px lighten($o-we-switch-inactive-color, 10%); } } diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss index 539a1c3860f..882529d7ac6 100644 --- a/addons/website/static/src/scss/website.ui.scss +++ b/addons/website/static/src/scss/website.ui.scss @@ -8,7 +8,7 @@ body { // Set frontend direction that will be flipped with // rtlcss for right-to-left text direction. direction: ltr; - transition: padding 0.35s; + transition: padding 400ms ease 0s; } body.o_connected_user { padding-top: $o-navbar-height!important; @@ -29,9 +29,6 @@ body.o_connected_user { } } } -#oe_main_menu_navbar, #web_editor-top-edit, #oe_snippets { - transition: transform 0.35s !important; -} // MAIN MENU STYLE (added above navbar.scss) #oe_main_menu_navbar { @@ -39,9 +36,10 @@ body.o_connected_user { @include o-position-absolute(0, 0, auto, 0); position: fixed; z-index: $zindex-modal - 10; - font-family: $o-we-font-family; font-size: 14px; + transition: transform 400ms ease 0s; // For fullscreen + a:hover, a:focus { text-decoration: none; } @@ -164,7 +162,7 @@ body .modal { } } .close { - color: $o-we-color-light; + color: #4e525b; } } diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss index ac02704f523..90be93c7f79 100644 --- a/addons/website/static/src/scss/website.wysiwyg.scss +++ b/addons/website/static/src/scss/website.wysiwyg.scss @@ -10,16 +10,6 @@ // Override css variables to influence the default style of the editor // without duplicating the css. @include print-variable('o-we-toolbar-height', $o-navbar-height); - @include print-variable('o-we-bg-color', $o-we-color-dark); - @include print-variable('o-we-bg-color-dark', $o-we-color-darker); - @include print-variable('o-we-color', $o-we-color-text-normal); - @include print-variable('o-we-color-accent', $o-we-color-text-light); - - @include print-variable('o-we-dropdown-bg-color', $o-we-color-darker); - @include print-variable('o-we-dropdown-color', $o-we-color-text-normal); - - @include print-variable('o-we-snippets-bg-color', $o-we-color-normal); - @include print-variable('o-we-snippets-color', $o-we-color-text-light); // Need info about the color of each color palette @for $index from 1 through length($o-color-palettes) - 1 { // Not the user one @@ -30,63 +20,48 @@ } // EDITOR TOP BAR AND POPOVER -#web_editor-top-edit { - form.navbar-form { - @include o-position-absolute(0, 0, 0, auto); - z-index: $zindex-popover + 5; - height: $o-navbar-height; - margin: 0; - padding: 0; - transition: right 0.4s $o-we-md-ease 0s; - border-left: 1px solid $o-we-color-divider; - - .btn-group { - height: 100%; - } +#web_editor-top-edit .o_we_website_top_actions { + @include o-position-absolute($top: 0, $left: 0); + z-index: $zindex-popover + 5; + display: flex; + width: $o-we-sidebar-width; + height: $o-we-sidebar-top-height; + background-color: $o-we-sidebar-tabs-bg; + + .btn-group, .btn { + height: 100%; + } - .btn { - height: 100%; - margin: 0; - padding: 10px; - line-height: 1.2; - font-size: 13px; - font-family: $o-we-font-family; - - transition: all 0.3s ease 0s; - border: none; - border-radius: 0; - - .fa { - margin-right: $grid-gutter-width/4; - - &.fa-times { - color: $o-we-color-danger; - } - } - - &.btn-primary { - @include button-variant($o-brand-odoo, $o-brand-odoo); - } - - &.btn-secondary { - @include button-variant($o-we-color-dark, $o-we-color-dark); - - &:hover { - background: rgba(black, 0.5); - } - } - - &:focus, - &:active, - &:focus:active { - outline: none; - } - } + .btn { + border: none; + border-radius: 0; + font-size: $o-we-sidebar-font-size; + font-weight: 700; + line-height: 1; - .dropdown-menu { - left: auto; - right: 0; + &.btn-primary { + @include button-variant($o-brand-primary, $o-brand-primary); } + &.btn-secondary { + @include button-variant($o-we-sidebar-tabs-bg, $o-we-sidebar-tabs-bg); + } + &:focus, &:active, &:focus:active { + outline: none; + box-shadow: none; + } + } + + .dropdown-menu { + left: auto; + right: 0; + } +} + +#oe_snippets { + top: $o-we-sidebar-top-height; + + .o_color_combinations_edition { + margin-top: $o-we-sidebar-content-field-spacing; } } @@ -128,73 +103,25 @@ $i: 1; border-top: 1px solid currentColor !important; } -$palette-size: 10em; -.o_palette_color_preview { - flex: 0 0 auto; - display: inline-block; - width: $palette-size / 3; - height: 1.35em; - margin: 4px 0; - transition: width 150ms ease 0s; - - &:nth-child(4), &:nth-child(5) { - width: 0; +#oe_snippets > .o_we_customize_panel .o_we_user_value_widget.o_palette_color_preview_button { + > div { + display: flex; + flex: 1 1 auto; + align-items: stretch; } -} -.o_palette_color_preview_button:hover .o_palette_color_preview { - width: $palette-size / 5; -} - -// SNIPPET OPTIONS -.colorpicker { - .o_colorpicker_sections { - .note-color-palette > div { - color: $o-we-color-text-light; - } - } - - .o_colorpicker_section { - &:after { - content: ""; - display: table; - clear: both; - } - - > .o_we_color_btn { - - &:hover, - &.selected { - box-shadow: 0px 0px 2px 2px $o-we-color-light; - } - - &[data-event="foreColor"] { - background-color: $o-we-color-normal; - - &:before { - background-color: rgba(white, 0.3); - } - } - } - } - - .note-palette-title, a, button:not(.o_we_color_combination_btn) { - - &, &:hover { - color: $o-we-color-text-light; - } + .o_palette_color_preview { + flex: 1 0 0; + margin: 1px 0; + transition: flex 150ms ease 0s; } - - .palette-reset { - .note-color-reset { - color: desaturate(rgba($o-we-color-danger, 0.6), 40%); - - &:hover { - color: $o-we-color-danger; - } + &:not(:hover) .o_palette_color_preview { + &:nth-child(4), &:nth-child(5) { + flex: 0 0 0; } } } +// SNIPPET OPTIONS we-collapse { position: relative; padding: 0.3em 0.3em 0.3em 1em; diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml index 998c60f4963..bea9661aa21 100644 --- a/addons/website/static/src/xml/website.editor.xml +++ b/addons/website/static/src/xml/website.editor.xml @@ -13,9 +13,9 @@ <!-- Editor top bar which contains the summernote tools and save/discard buttons --> <t t-name="website.editorbar"> <div id="web_editor-top-edit"> - <form class="navbar-form text-muted"> - <button type="button" class="btn btn-secondary" data-action="cancel" accesskey="j"><i class="fa fa-times"/> Discard</button> - <button type="button" class="btn btn-primary" data-action="save" accesskey="s"><i class="fa fa-floppy-o"/> Save</button> + <form class="o_we_website_top_actions"> + <button type="button" class="btn btn-primary" data-action="save" accesskey="s">Save</button> + <button type="button" class="btn btn-secondary" data-action="cancel" accesskey="j">Discard</button> </form> </div> </t> diff --git a/addons/website/views/snippets/s_facebook_page.xml b/addons/website/views/snippets/s_facebook_page.xml index e603b28e9b0..c7b772de867 100644 --- a/addons/website/views/snippets/s_facebook_page.xml +++ b/addons/website/views/snippets/s_facebook_page.xml @@ -10,7 +10,7 @@ <template id="s_facebook_page_options" inherit_id="website.snippet_options"> <xpath expr="." position="inside"> <div string="Page URL" data-js="facebookPage" data-selector=".o_facebook_page"> - <we-input data-page-url="https://www.facebook.com/Odoo" data-no-preview="true"/> + <we-input class="o_we_large_input" data-page-url="https://www.facebook.com/Odoo" data-no-preview="true"/> <we-checkbox string="Cover Photo" data-option-name="show_cover" data-toggle-option="true" data-no-preview="true"/> <we-checkbox string="Timeline" data-option-name="tab.timeline" data-toggle-option="true" data-no-preview="true"/> <we-checkbox string="Events" data-option-name="tab.events" data-toggle-option="true" data-no-preview="true"/> diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index e76a8fce6ac..691a5247db8 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -146,15 +146,13 @@ <we-button data-set-shadow="inset" data-name="shadow_inset_opt">Inset</we-button> </we-select> <we-multi data-css-property="box-shadow" data-dependencies="shadow_active_opt, shadow_inset_opt"> - <we-colorpicker class="w-100 my-1" string="Color" data-select-style="" data-css-compatible=""/> - <we-row class="my-1"> - <we-input string="X" data-select-style="" data-unit="px"/> - <we-input string="Y" data-select-style="" data-unit="px"/> - </we-row> - <we-row class="my-1"> - <we-input string="Blur" data-select-style="" data-unit="px"/> - <we-input string="Spread" data-select-style="" data-unit="px"/> + <we-colorpicker string="Color" data-select-style="" data-css-compatible=""/> + <we-row string="Offset (X, Y)"> + <we-input data-select-style="" data-unit="px"/> + <we-input data-select-style="" data-unit="px"/> </we-row> + <we-input string="Blur" data-select-style="" data-unit="px"/> + <we-input string="Spread" data-select-style="" data-unit="px"/> <!-- Inset parameter always hidden (as controlled above) but needed --> <!-- for the we-multi widget to work properly. --> <we-checkbox data-name="fake_inset_shadow_opt" data-select-style="inset"/> @@ -687,8 +685,10 @@ </div> <!-- Theme options --> - <div data-js="Theme" data-selector="theme" data-no-check="true"> + <div data-js="SwitchTheme" data-selector="theme" data-no-check="true"> <we-button class="o_we_primary_btn" data-switch-theme="" data-no-preview="true">Switch Theme</we-button> + </div> + <div data-js="Theme" data-selector="theme" data-no-check="true"> <we-alert class="o_old_color_system_warning d-none"> It appears your website is still using the old color system of Odoo 13.0 in some places. We made sure it is still working but @@ -708,7 +708,7 @@ data-use-css-color="true"/> <we-colorpicker data-customize-website-color="" data-color="o-color-5" data-use-css-color="true"/> - <we-select class="ml-auto" data-icon="fa-lightbulb-o" data-variable="color-palettes-number"/> + <we-select data-icon="fa-lightbulb-o" data-variable="color-palettes-number"/> </we-row> <div class="o_color_combinations_edition"/> <we-row string="Status Colors"> 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 7338d64981b..173a1aa8dab 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 @@ -597,6 +597,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({ inputEl.dataset.fieldName = field.name; inputEl.dataset.addActionField = ''; inputEl.setAttribute('string', field.string); + inputEl.classList.add('o_we_large_input'); return inputEl; }, /** diff --git a/addons/website_form/views/snippets/s_website_form.xml b/addons/website_form/views/snippets/s_website_form.xml index 4b3d9c9a790..2f9e343e681 100644 --- a/addons/website_form/views/snippets/s_website_form.xml +++ b/addons/website_form/views/snippets/s_website_form.xml @@ -92,14 +92,14 @@ <we-button data-multi-checkbox-display="horizontal">Horizontal</we-button> <we-button data-multi-checkbox-display="vertical">Vertical</we-button> </we-select> - <we-input string="Label Name" data-set-label-text=""/> + <we-input string="Label Name" class="o_we_large_input" data-set-label-text=""/> <we-select string="Label Position" data-no-preview="true"> <we-button data-select-label-position="none">None</we-button> <we-button data-select-label-position="top">Top</we-button> <we-button data-select-label-position="left">Left</we-button> <we-button data-select-label-position="right">Right</we-button> </we-select> - <we-input string="Input Placeholder" data-name="placeholder_opt" data-set-placeholder=""/> + <we-input string="Input Placeholder" class="o_we_large_input" data-name="placeholder_opt" data-set-placeholder=""/> <we-checkbox string="Required" data-name="required_opt" data-no-preview="true" data-toggle-required="s_website_form_required"/> <we-checkbox string="Hidden" data-name="hidden_opt" data-no-preview="true" diff --git a/addons/website_sale/views/snippets.xml b/addons/website_sale/views/snippets.xml index 0e957d9ecec..2a273b045ad 100644 --- a/addons/website_sale/views/snippets.xml +++ b/addons/website_sale/views/snippets.xml @@ -72,7 +72,7 @@ </we-row> <div class="d-none" data-name="ribbon_customize_opt"> <we-row string="Ribbon"> - <we-input data-set-ribbon-html="" data-apply-to=".o_wsale_ribbon_dummy" data-no-preview="true"/> + <we-input data-set-ribbon-html="" class="o_we_large_input" data-apply-to=".o_wsale_ribbon_dummy" data-no-preview="true"/> <we-button class="fa fa-check" data-save-ribbon="" title="Validate" data-no-preview="true"/> <we-button class="fa fa-trash" data-delete-ribbon="" title="Delete" data-no-preview="true"/> </we-row> |