pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] web_editor, *: review editor toolbar design

Browse Source 
*: web, website

This commit redesigns the editor toolbar improving its visual appearance
and introducing substantial changes wherever it is rendered.

== "Into-sidebar" design
The grid layout has been refined, improving its components allocation.
For the sake of visual simplification, "list-type" buttons have been
unwrapped from their original dropdown. For the same reason the button
to create a new table has been removed (users will have to use the
command-bar to create a new table).
Table's options have been moved to a section "ad-hoc", visible only when
a table is selected.

== Floating design (backend only)
The toolbar is now white to match the command-bar design.
In order to simplify frontend inheritance, the floating toolbar now uses
grid layout.

== Colorpicker
The generic code necessary for each design has been moved from
'wysiwyg_snippets.scss' to 'wysiwyg.scss'.
The style is now controlled by css variables allowing to customize
critical design properties without the need of SCSS overrides.
By default the design is white(-ish) to match the floating toolbar,
while in 'wysiwyg_snippets.scss' the variables are customized to get the
typical sidebar's dark feel.

Note: despite the task main objective was just to improve/fix the
design, this aimed to simplify design inheritance and reduce the css
too. While inheritance has been improved reducing the amount of
overrides, the attempt to reduce the css partially failed (in the final
lines count must be considered that a new sidebar section has been
created).
The reason is that we currently suffer from a deep and complicated
inheritance structure for this component. The xml template uses default
bootstrap classes that are styled differently depending if loaded in a
community or enterprise environment. This approach leads to overrides
that must cover all the scenarios while further customization must be
taken in account too 'cause the toolbar can be rendered into the sidebar
with a totally different design.

A possible solution would be to detach from bootstrap directly in the
lib using custom classes names, and then @​extend these classes
differently according to the current environment but probably not a good
idea as we want the toolbar to use bootstrap for in-website editors (so
they can match the theme correctly) but this has to be reviewed as well
anyway. To be checked.

Part of https://github.com/odoo/odoo/pull/73565
task-2496339

closes odoo/odoo#73565

Signed-off-by: Antoine Guenet <Zinston@users.noreply.github.com>
This commit is contained in:
stefanorigano (SRI)
2021-08-31 10:00:46 +00:00
parent 7c1c6ecc52
commit 9337562cca
10 changed files with 599 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/legacy/scss/colorpicker.scss
-2
View File
@@ -25,8 +25,6 @@
}
.o_slider_pointer, .o_opacity_pointer, .o_picker_pointer, .o_color_preview {
box-shadow: inset 0 0 0 1px rgba(white, 0.9);
}
.o_slider_pointer, .o_opacity_pointer, .o_picker_pointer, .o_color_preview, .o_hex_div, .o_rgba_div {
border: 1px solid black;
}
.o_color_picker_inputs {
addons/web/static/src/legacy/xml/colorpicker.xml
+8 -8
View File
@@ -16,25 +16,25 @@
</div>
<div t-if="widget.options.colorPreview" class="o_color_preview mb-1 w-100 p-2"/>
<div class="o_color_picker_inputs d-flex justify-content-between mb-2">
<t t-set="input_classes" t-value="'p-0 border-0 text-center text-monospace bg-transparent text-white'" />
<t t-set="input_classes" t-value="'p-0 border-0 text-center text-monospace bg-transparent'" />
<div class="o_hex_div bg-black-50 px-1 d-flex align-items-baseline">
<div class="o_hex_div px-1 d-flex align-items-baseline">
<input type="text" t-attf-class="o_hex_input {{input_classes}}" data-color-method="hex" size="1"/>
<span class="flex-grow-0 ml-1 text-white-50">hex</span>
<label class="flex-grow-0 ml-1 mb-0">hex</label>
</div>
<div class="o_rgba_div bg-black-50 px-1 d-flex align-items-baseline">
<div class="o_rgba_div px-1 d-flex align-items-baseline">
<input type="text" t-attf-class="o_red_input {{input_classes}}" data-color-method="rgb" size="1"/>
<input type="text" t-attf-class="o_green_input {{input_classes}}" data-color-method="rgb" size="1"/>
<input type="text" t-attf-class="o_blue_input mr-0 {{input_classes}}" data-color-method="rgb" size="1"/>
<t t-if="!widget.options.noTransparency">
<input type="text" t-attf-class="o_opacity_input {{input_classes}}" data-color-method="opacity" size="1"/>
<span class="flex-grow-0 ml-1 text-white-50">
<label class="flex-grow-0 ml-1 mb-0">
RGBA
</span>
</label>
</t>
<span t-else="" class="flex-grow-0 ml-1 text-white-50">
<label t-else="" class="flex-grow-0 ml-1 mb-0">
RGB
</span>
</label>
</div>
</div>
</div>
addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
+20 -14
View File
@@ -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');
addons/web_editor/static/src/js/editor/snippets.editor.js
+21
View File
@@ -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 = $('<WE-CUSTOMIZEBLOCK-OPTIONS id="o_we_editor_toolbar_container"/>');
const $title = $("<we-title><span>" + titleText + "</span></we-title>");
$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.
addons/web_editor/static/src/scss/web_editor.variables.scss
+2 -2
View File
@@ -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;
addons/web_editor/static/src/scss/wysiwyg.scss
+322 -63
View File
@@ -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
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+152 -203
View File
@@ -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;
}
}
}
}
}
}
addons/web_editor/static/src/xml/editor.xml
+68 -18
View File
@@ -55,7 +55,7 @@
<div id="colorInputButtonGroup" class="btn-group">
<div class="colorpicker-group note-fore-color-preview" data-name="color">
<div class="btn color-button dropdown-toggle editor-ignore"
<div id="oe-text-color" class="btn color-button dropdown-toggle editor-ignore"
data-toggle="dropdown" title="Font Color" tabindex="-1"
data-original-title="Font Color">
<i class="fa fa-font color-indicator fore-color"></i>
@@ -65,7 +65,7 @@
</ul>
</div>
<div class="colorpicker-group note-back-color-preview" data-name="color">
<button type="button" class="btn dropdown-toggle editor-ignore"
<button id="oe-fore-color" type="button" class="btn dropdown-toggle editor-ignore"
data-toggle="dropdown" title="Background Color" tabindex="-1"
data-original-title="Background Color">
<i class="fa fa-paint-brush color-indicator hilite-color"></i>
@@ -106,25 +106,21 @@
</button>
<div class="dropdown-menu">
<div class="btn-group">
<div class="btn" id="justifyLeft" data-call='justifyLeft'><i class="fa fa-align-left fa-fw btn"></i></div>
<div class="btn" id="justifyCenter" data-call='justifyCenter'><i class="fa fa-align-center fa-fw btn"></i></div>
<div class="btn" id="justifyRight" data-call='justifyRight'><i class="fa fa-align-right fa-fw btn"></i></div>
<div class="btn" id="justifyFull" data-call='justifyFull'><i class="fa fa-align-justify fa-fw btn"></i></div>
<div class="btn" id="justifyLeft" data-call='justifyLeft'><i class="fa fa-align-left fa-fw"></i></div>
<div class="btn" id="justifyCenter" data-call='justifyCenter'><i class="fa fa-align-center fa-fw"></i></div>
<div class="btn" id="justifyRight" data-call='justifyRight'><i class="fa fa-align-right fa-fw"></i></div>
<div class="btn" id="justifyFull" data-call='justifyFull'><i class="fa fa-align-justify fa-fw"></i></div>
</div>
</div>
</div>
<div id="list" class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle"
data-toggle="dropdown" title="Toggle List" tabindex="-1"
data-original-title="List" aria-expanded="false">
<i id="justifyDropdownButton" class="fa fa-list-ul fa-fw"></i>
</button>
<div class="dropdown-menu">
<div class="btn-group">
<div id="unordered" data-call="toggleList" data-arg1="UL" title="Toggle unordered list" class="fa fa-list-ul fa-fw btn"></div>
<div id="ordered" data-call="toggleList" data-arg1="OL" title="Toggle ordered list" class="fa fa-list-ol fa-fw btn"></div>
<div id="checklist" data-call="toggleList" data-arg1="CL" title="Toggle checklist" class="fa fa-tasks fa-fw btn"></div>
<div id="list" class="btn-group">
<div data-call="toggleList" data-arg1="UL" title="Toggle unordered list" class="oe-toggle-unordered fa fa-list-ul fa-fw btn"></div>
<div data-call="toggleList" data-arg1="OL" title="Toggle ordered list" class="oe-toggle-ordered fa fa-list-ol fa-fw btn"></div>
<div data-call="toggleList" data-arg1="CL" title="Toggle checklist" class="oe-toggle-checklist btn fa-fw">
<div class="small">
<div class="fa fa-square-o d-block small"/>
<div class="fa fa-check-square d-block small"/>
</div>
</div>
</div>
@@ -199,8 +195,10 @@
<div id="image-crop" title="Crop Image" class="btn fa fa-crop editor-ignore"></div>
<div id="image-transform" class="btn editor-ignore fa fa-object-ungroup"
title="Transform the picture (click twice to reset transformation)"></div>
<span class="oe-toolbar-separator d-flex"/>
<div id="media-replace" title="Replace media" class="btn o_we_bg_brand_primary editor-ignore">Replace</div>
<div id="image-delete" class="btn editor-ignore fa fa-trash-o" title="Remove (DELETE)"></div>
<span class="oe-toolbar-separator d-flex"/>
<div id="image-delete" class="btn btn-link text-danger editor-ignore fa fa-trash" title="Remove (DELETE)"></div>
</div>
<div id="fa-resize" class="btn-group only_fa">
@@ -217,6 +215,58 @@
</div>
</t>
<t t-name="web_editor.toolbar.table-options">
<we-customizeblock-options id="o-we-editor-table-container">
<we-title>
<span>Table Options</span>
<div id="oe-table-delete-table" data-call="deleteTable" class="o_we_hover_danger">
<i class="fa fa-trash"/>
</div>
</we-title>
<div id="oe-table-options">
<div class="oe-table-row">
<span class="oe-table-label">Add Column</span>
<div class="w-100">
<div class="oe-table-selection btn-group w-100">
<button class="btn w-50" data-call="addColumnLeft">
<i class="small fa fa-fw fa-step-backward"/> Left
</button>
<button class="btn w-50" data-call="addColumnRight">
Right <i class="small fa fa-fw fa-step-forward"/>
</button>
</div>
</div>
</div>
<div class="oe-table-row">
<span class="oe-table-label">Add Row</span>
<div class="w-100">
<div class="oe-table-selection btn-group w-100">
<button class="btn w-50" data-call="addRowAbove">
<i class="small fa fa-fw fa-step-backward fa-rotate-90"/> Above
</button>
<button class="btn w-50" data-call="addRowBelow">
Below <i class="small fa fa-fw fa-step-forward fa-rotate-90"/>
</button>
</div>
</div>
</div>
<div class="oe-table-row mt-3">
<span class="oe-table-label">Remove Current</span>
<div class="w-100">
<div class="oe-table-selection btn-group w-100">
<button class="btn w-50" data-call="removeColumn">
<i class="small fa fa-fw fa-columns"/> Column
</button>
<button class="btn w-50" data-call="removeRow">
<i class="small fa fa-fw fa-bars"/> Row
</button>
</div>
</div>
</div>
</div>
</we-customizeblock-options>
</t>
<!--=================-->
<!-- Snippet options -->
<!--=================-->
addons/web_editor/static/src/xml/snippets.xml
+5 -5
View File
@@ -58,12 +58,12 @@
</button>
<t t-if="widget.resetButton">
<t t-set="trash_title"><t t-if="widget.withCombinations">None</t><t t-else="">Reset</t></t>
<button type="button" class="my-1 ml-auto o_we_color_btn o_colorpicker_reset" t-att-title="trash_title">
<button type="button" class="my-1 ml-5 py-0 o_we_color_btn o_colorpicker_reset" t-att-title="trash_title">
<i class="fa fa-trash"/>
</button>
</t>
</div>
<div class="o_colorpicker_sections pt-2 px-2 pb-3 bg-black-25" data-color-tab="color-combinations">
<div class="o_colorpicker_sections pt-2 px-2 pb-3" data-color-tab="color-combinations">
<!-- List all Presets -->
<t t-foreach="5" t-as="i">
<t t-call="web_editor.colorpalette.combination.btn">
@@ -71,9 +71,9 @@
</t>
</t>
</div>
<div class="o_colorpicker_sections py-3 px-2 bg-black-25" data-color-tab="theme-colors"/>
<div class="o_colorpicker_sections py-3 px-2 bg-black-25" data-color-tab="custom-colors"/>
<div class="o_colorpicker_sections py-3 px-2 bg-black-25" data-color-tab="gradients"/>
<div class="o_colorpicker_sections py-3 px-2" data-color-tab="theme-colors"/>
<div class="o_colorpicker_sections py-3 px-2" data-color-tab="custom-colors"/>
<div class="o_colorpicker_sections py-3 px-2" data-color-tab="gradients"/>
</div>
<t t-name="web_editor.colorpalette.combination.btn">
<button type="button" class="o_we_color_btn o_we_color_combination_btn"
addons/website/static/tests/tours/snippet_empty_parent_autoremove.js
+1 -1
View File
@@ -7,7 +7,7 @@ const wTourUtils = require('website.tour_utils');
function removeSelectedBlock() {
return {
content: "Remove selected block",
trigger: '#oe_snippets we-customizeblock-options:nth-last-child(2) .oe_snippet_remove',
trigger: '#oe_snippets we-customizeblock-options:nth-last-child(3) .oe_snippet_remove',
};
}