-
+
-
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 @@