diff options
Diffstat (limited to 'addons/web_editor/static/src')
4 files changed, 71 insertions, 73 deletions
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 e5c1108695c..83ec0c58530 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -1351,13 +1351,15 @@ const MediapickerUserValueWidget = UserValueWidget.extend({ */ async start() { await this._super(...arguments); + const iconEl = document.createElement('i'); if (this.options.dataAttributes.buttonStyle) { - const iconEl = document.createElement('i'); iconEl.classList.add('fa', 'fa-fw', 'fa-camera'); - this.containerEl.appendChild(iconEl); } else { - this.el.classList.add('fa', 'fa-fw', 'fa-edit'); + iconEl.classList.add('fa', 'fa-fw', 'fa-refresh', 'mr-1'); + this.el.classList.add('o_we_no_toggle'); + this.containerEl.textContent = _t("Replace media"); } + $(this.containerEl).prepend(iconEl); }, //-------------------------------------------------------------------------- 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 73247077c8b..ca8f9e6a080 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -50,14 +50,14 @@ $o-we-translated-content-color: rgb(120, 215, 110) !default; $o-we-toolbar-height: 32px !default; -$o-we-item-spacing: 7px !default; +$o-we-item-spacing: 8px !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-border-radius: 2px !default; $o-we-item-clickable-bg: $o-we-bg-lightest!default; $o-we-item-clickable-color: $o-we-fg-light!default; $o-we-item-clickable-hover-bg: $o-we-bg-dark!default; -$o-we-item-pressed-bg: $o-we-bg-darker !default; +$o-we-item-pressed-bg: $o-we-bg-light !default; $o-we-item-pressed-color: $o-we-fg-lighter !default; $o-we-item-standup-color-light: $o-we-fg-lighter; @@ -109,6 +109,7 @@ $o-we-sidebar-content-gutter-item-indent: 5px !default; $o-we-sidebar-content-padding-base: 10px !default; $o-we-sidebar-content-indent: $o-we-sidebar-content-gutter-item-indent + $o-we-sidebar-content-padding-base !default; $o-we-sidebar-content-backdrop-bg: rgba(black, 0.2) !default; +$o-we-sidebar-content-available-room: $o-we-sidebar-width - $o-we-sidebar-content-padding-base - $o-we-sidebar-content-indent !default; $o-we-sidebar-content-main-title-height: 32px !default; $o-we-sidebar-content-main-title-color: $o-we-fg-lighter !default; @@ -125,8 +126,9 @@ $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: 6px !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-label-width: $o-we-sidebar-content-available-room * .4 !default; +$o-we-sidebar-content-field-multi-spacing: $o-we-sidebar-content-field-label-spacing * .5 !default; $o-we-sidebar-content-field-height: 22px !default; $o-we-sidebar-content-field-border-width: $o-we-item-border-width !default; @@ -163,13 +165,12 @@ $o-we-sidebar-content-field-colorpicker-cc-width: 208px !default; $o-we-sidebar-content-field-colorpicker-cc-height: 26px !default; $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-bg: $o-we-bg-light !default; $o-we-sidebar-content-field-input-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $o-we-sidebar-content-field-input-unit-font-size: 11px !default; $o-we-sidebar-content-field-input-border-color: $o-we-accent !default; -// This value allows 5 fa icons (fit one row exactly with this) -$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing * 1.2 !default; +$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing; $o-we-sidebar-content-field-progress-height: 4px !default; $o-we-sidebar-content-field-progress-control-height: 10px !default; diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index a1c884afbdc..e79f8013ad0 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -116,16 +116,9 @@ body.editor_enable.editor_has_snippets { &[disabled] { opacity: .5; } -} - -%we-generic-link { - color: $o-we-sidebar-content-field-color; - @include we-svg-icon(); - @extend %we-generic-clickable; &:not([disabled]) { - &.active, &:hover { - @include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75); + &.active:not(.o_we_no_toggle), &:hover { color: $o-we-sidebar-content-field-pressed-color; } @@ -135,7 +128,12 @@ body.editor_enable.editor_has_snippets { 'warning': $o-we-color-warning, 'danger': $o-we-color-danger, ); + @each $name, $color in $-hover-colors { + &.o_we_text_#{$name} { + color: $color; + } + &.o_we_hover_#{$name}:hover { color: $color; } @@ -143,6 +141,18 @@ body.editor_enable.editor_has_snippets { } } +%we-generic-link { + color: $o-we-sidebar-content-field-color; + @include we-svg-icon(); + @extend %we-generic-clickable; + + &:not([disabled]) { + &.active, &:hover { + @include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75); + } + } +} + %we-generic-button { @extend %we-generic-clickable; @include o-text-overflow(block); @@ -151,17 +161,15 @@ body.editor_enable.editor_has_snippets { padding: 0 $o-we-sidebar-content-field-button-group-button-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; + background-color: $o-we-sidebar-content-field-clickable-bg; color: $o-we-sidebar-content-field-clickable-color; - &:not([disabled]):hover { + &:not([disabled]):hover, &.active:not(.o_we_no_toggle) { @include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75); - color: $o-we-sidebar-content-field-pressed-color; } - &.active { - background: $o-we-sidebar-content-field-pressed-bg; - color: $o-we-sidebar-content-field-pressed-color; + &.active:not(.o_we_no_toggle) { + background-color: $o-we-sidebar-content-field-pressed-bg; } } @@ -171,7 +179,7 @@ body.editor_enable.editor_has_snippets { flex: 1 1 auto; justify-content: center; border: none; - background: transparent; + background-color: transparent; color: inherit; font-weight: normal; @@ -214,7 +222,7 @@ body.editor_enable.editor_has_snippets { #snippets_menu { flex: 0 0 auto; display: flex; - background: $o-we-sidebar-tabs-bg; + background-color: $o-we-sidebar-tabs-bg; box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2); color: $o-we-sidebar-tabs-color; @@ -228,6 +236,7 @@ body.editor_enable.editor_has_snippets { position: relative; width: 100%; padding: $o-we-sidebar-blocks-content-spacing; + background-color: $o-we-bg-lighter; .o_snippet_search_filter_input { width: 100%; @@ -366,38 +375,24 @@ body.editor_enable.editor_has_snippets { @mixin large-component() { flex: 1 1 auto; - width: ($o-we-sidebar-width - $o-we-sidebar-content-padding-base - $o-we-sidebar-content-indent) * 0.5; + width: $o-we-sidebar-content-available-room * .6; } we-button, we-toggler { @extend %we-generic-button; - text-align: left; - - &.fa { - display: inline-block; - padding: 0; - border: none; - background: none; - text-align: center; - - &.fa-times, &.fa-minus { - color: $o-we-color-danger; - } - &.fa-plus { - color: $o-we-color-success; - } - - &.active { - padding: 0; + } - &::after { - display: none; - } - } - } + we-button.o_we_link { + @extend %we-generic-link; + margin-top: 0; + border: 0; + padding: 0; + background: 0; } + we-toggler { @include we-icon-button('\f0d7'); + text-align: left; + * { display: none !important; @@ -407,7 +402,6 @@ body.editor_enable.editor_has_snippets { } &.active { @include we-icon-button('\f0d8'); - + * { display: block !important; } @@ -434,7 +428,7 @@ body.editor_enable.editor_has_snippets { position: relative; display: block; padding: 0 $o-we-sidebar-content-padding-base $o-we-sidebar-content-block-spacing * 1.5 $o-we-sidebar-content-indent; - background: $o-we-bg-lighter; + background-color: $o-we-bg-lighter; box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, 0.8); > we-title { @@ -442,7 +436,7 @@ body.editor_enable.editor_has_snippets { align-items: center; margin: 0 (-$o-we-sidebar-content-padding-base) 0 (-$o-we-sidebar-content-indent); padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent; - background: $o-we-bg-light; + background-color: $o-we-bg-light; box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2), $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, .5); font-size: $o-we-sidebar-content-main-title-font-size; @@ -453,7 +447,7 @@ body.editor_enable.editor_has_snippets { > we-top-button-group { flex: 0 0 auto; - display: block; + display: flex; margin-left: auto; font-size: .9em; @@ -461,20 +455,13 @@ body.editor_enable.editor_has_snippets { font-size: 1.2em; } - > * { + we-button { margin-left: $o-we-sidebar-content-field-multi-spacing; - } - > we-customizeblock-option { - &, .fa { - display: inline-block !important; - } - .fa { - margin: 0; - } - } + padding: 0 $o-we-sidebar-content-field-multi-spacing; - .fa { - @extend %we-generic-link; + &.fa { + margin-left: $o-we-sidebar-content-field-label-spacing; + } } } } @@ -548,7 +535,7 @@ body.editor_enable.editor_has_snippets { } // Checkboxes - .o_we_checkbox_wrapper.o_we_user_value_widget { + we-button.o_we_checkbox_wrapper.o_we_user_value_widget { padding: 0; border: none; background: none; @@ -621,6 +608,10 @@ body.editor_enable.editor_has_snippets { border-right-width: ($o-we-item-spacing - 1px); } } + &:not(.o_we_so_color_palette) + we-button:not(:hover) { + background: none; + } + we-selection-items { @include o-position-absolute(100%, 0, auto, 0); z-index: $zindex-dropdown; @@ -725,8 +716,8 @@ body.editor_enable.editor_has_snippets { we-button { display: flex; justify-content: center; - flex: 0 1 percentage(1/3); - padding: 0 2px; + flex: 0 1 percentage(1/4); + padding: ($o-we-sidebar-content-field-button-group-button-spacing / 4) ($o-we-sidebar-content-field-button-group-button-spacing / 3); text-align: center; } } @@ -744,6 +735,10 @@ body.editor_enable.editor_has_snippets { &:focus-within { border-color: $o-we-sidebar-content-field-input-border-color; } + + > we-button { // for input-group + border: none; + } } &.o_we_large_input > div { @@ -862,7 +857,7 @@ body.editor_enable.editor_has_snippets { input[type="range"] { @include large-component(); height: $o-we-sidebar-content-field-height; - padding: 0; + padding: 0 $o-we-item-border-width 0 0; background-color: transparent; appearance: none; diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml index f2eaf597fcd..673ba9ea5f6 100644 --- a/addons/web_editor/static/src/xml/snippets.xml +++ b/addons/web_editor/static/src/xml/snippets.xml @@ -24,10 +24,10 @@ <we-title> <span t-esc="name"/> <we-top-button-group> - <we-button class="fa fa-fw fa-clone oe_snippet_clone o_we_hover_success" + <we-button class="fa fa-fw fa-clone oe_snippet_clone o_we_link o_we_hover_success" title="Duplicate Container" aria-label="Duplicate Container"/> - <we-button class="fa fa-fw fa-trash oe_snippet_remove o_we_hover_danger" + <we-button class="fa fa-fw fa-trash oe_snippet_remove o_we_link o_we_hover_danger" title="Remove Block" aria-label="Remove Block"/> </we-top-button-group> |