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

[IMP] web_editor, *: review 'colorPalette' editor UI

Browse Source 
*: website, mass_mailing

Part of https://github.com/odoo/odoo/pull/38959
maintask-2066614
task-2087383

Co-authored-by: fja-odoo <fja@odoo.com>
This commit is contained in:
qsm-odoo
2019-11-18 09:56:40 +00:00
co-authored by fja-odoo
parent 22c5fc5dd2
commit ea994b0cbb
6 changed files with 78 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mass_mailing/views/snippets_themes.xml
+2 -7
View File
@@ -807,13 +807,8 @@
data-selector=".note-editable > div:not(.o_layout), .note-editable .oe_structure > div, td, th"
data-exclude=".o_mail_no_resize, .o_mail_no_options"/>
<div data-js="colorpicker"
<div data-js="colorpicker" string="Background Color"
data-selector=".note-editable > div:not(.o_layout), .note-editable .oe_structure > div, td, th"
data-exclude=".o_mail_no_colorpicker, .o_mail_no_options">
<we-collapse-area>
<we-toggler>Background Color</we-toggler>
<we-collapse/>
</we-collapse-area>
</div>
data-exclude=".o_mail_no_colorpicker, .o_mail_no_options"/>
</template>
</odoo>
addons/web_editor/static/src/js/editor/snippets.options.js
+40 -12
View File
@@ -4,7 +4,6 @@ odoo.define('web_editor.snippets.options', function (require) {
var core = require('web.core');
var ColorPaletteWidget = require('web_editor.ColorPalette').ColorPaletteWidget;
var Dialog = require('web.Dialog');
var rte = require('web_editor.rte');
var Widget = require('web.Widget');
var weWidgets = require('wysiwyg.widgets');
@@ -858,11 +857,16 @@ var SnippetOption = Widget.extend({
* @param {string} [title]
* @param {Object} [options] - @see this.buildElement
* @param {HTMLElement[]} [options.childNodes]
* @param {HTMLElement} [options.valueEl]
* @returns {HTMLElement}
*/
buildSelectElement: function (title, options) {
const selectEl = SnippetOption.prototype.buildElement('we-select', title, options);
if (options && options.valueEl) {
selectEl.appendChild(options.valueEl);
}
const menuTogglerEl = document.createElement('we-toggler');
selectEl.appendChild(menuTogglerEl);
@@ -1148,22 +1152,25 @@ registry['sizing_y'] = registry.sizing.extend({
registry.colorpicker = SnippetOption.extend({
xmlDependencies: ['/web_editor/static/src/xml/snippets.xml'],
custom_events: {
color_picked: '_onColorPicked',
custom_color_picked: '_onCustomColor',
color_hover: '_onColorHovered',
color_leave: '_onColorLeft',
color_reset: '_onColorReset',
'color_picked': '_onColorPicked',
'custom_color_picked': '_onCustomColor',
'color_hover': '_onColorHovered',
'color_leave': '_onColorLeft',
'color_reset': '_onColorReset',
},
/**
* @override
*/
start: function () {
start: async function () {
const _super = this._super.bind(this);
const args = arguments;
// Pre-instanciate the color palette widget
const options = {
selectedColor: this.$target.css('background-color'),
targetClasses: [...this.$target[0].classList],
};
const proms = [this._super(...arguments)];
if (this.data.paletteExclude) {
options.excluded = this.data.paletteExclude.replace(/ /g, '').split(',');
}
@@ -1171,11 +1178,23 @@ registry.colorpicker = SnippetOption.extend({
options.colorPrefix = this.data.colorPrefix;
}
this.colorPalette = new ColorPaletteWidget(this, options);
proms.push(this.colorPalette.appendTo(this.$el.find('we-collapse')));
await this.colorPalette.appendTo(document.createDocumentFragment());
return Promise.all(proms);
// Build the select element with a custom span to hold the color preview
this.colorPreviewEl = document.createElement('span');
const selectEl = this.buildSelectElement(this.data.string, {
classes: ['o_we_so_color_palette'],
childNodes: [this.colorPalette.el],
valueEl: this.colorPreviewEl,
});
// Replace the colorpicker UI with the select element
this.$el.empty().append(selectEl);
return _super(...args);
},
/**
* @override
*/
onFocus: function () {
this.colorPalette.reloadColorPalette();
},
@@ -1199,6 +1218,13 @@ registry.colorpicker = SnippetOption.extend({
this.$target.css('background-color', cssColor);
}
},
/**
* @override
*/
_updateUI: function () {
this._super.apply(this, arguments);
this.colorPreviewEl.style.backgroundColor = this.$target.css('background-color');
},
//--------------------------------------------------------------------------
// Handlers
@@ -1211,6 +1237,7 @@ registry.colorpicker = SnippetOption.extend({
* @param {Event} ev
*/
_onColorPicked: function () {
this._updateUI();
this.$target.closest('.o_editable').trigger('content_changed');
this.$target.trigger('background-color-event', false);
},
@@ -1249,7 +1276,8 @@ registry.colorpicker = SnippetOption.extend({
* @private
*/
_onColorReset: function () {
this._targetColorChange('');
this._changeTargetColor('');
this._updateUI();
this.$target.trigger('content_changed');
},
});
addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
-1
View File
@@ -65,7 +65,6 @@ const ColorPaletteWidget = Widget.extend({
await templatePromise;
return res;
},
/**
* @override
*/
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+19 -6
View File
@@ -414,6 +414,24 @@ body.editor_enable.editor_has_snippets {
}
}
}
.o_we_so_color_palette {
we-title + span {
@include o-alpha-button-preview;
display: block;
flex: 0 0 auto;
width: 1em;
height: 1em;
margin-left: auto;
border: 1px solid white;
}
we-toggler {
display: none;
}
we-select-menu {
border-top-style: solid;
}
}
}
}
@@ -473,7 +491,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-snippets-bg-color);
box-shadow: inset 0 0 0 1px var(--o-we-bg-color-dark);
}
.o_colorpicker_section {
@@ -488,11 +506,6 @@ body.editor_enable.editor_has_snippets {
border-radius: 50%;
}
&:hover,
&.selected {
box-shadow: inset 0 0 1px 1px var(--o-we-snippets-bg-color);
}
&.selected::before {
@include o-position-absolute(0, 0, 0, 0);
content: "\f00c" !important;
addons/web_editor/static/tests/test_utils.js
+2 -12
View File
@@ -78,12 +78,7 @@ MockServer.include({
' <div data-js="content" data-selector=".s_hr, .test_option_all" ' +
'data-drop-in=".note-editable" data-drop-near="p, h1, h2, h3, blockquote, .s_hr"></div>' +
' <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"></div>' +
' <div data-js="colorpicker" data-selector=".test_option_all">' +
' <we-collapse-area>' +
' <we-toggler>Background Color</we-toggler>' +
' <we-collapse/>' +
' </we-collapse-area>' +
' </div>' +
' <div data-js="colorpicker" string="Background Color" data-selector=".test_option_all"></div>' +
' <div data-js="background" data-selector=".test_option_all">' +
' <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
' </div>' +
@@ -250,12 +245,7 @@ function wysiwygData(data) {
' <div data-js="content" data-selector=".s_hr, .test_option_all" ' +
'data-drop-in=".note-editable" data-drop-near="p, h1, h2, h3, blockquote, .s_hr"></div>' +
' <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"></div>' +
' <div data-js="colorpicker" data-selector=".test_option_all">' +
' <we-collapse-area>' +
' <we-toggler>Background Color</we-toggler>' +
' <we-collapse/>' +
' </we-collapse-area>' +
' </div>' +
' <div data-js="colorpicker" string="Background Color" data-selector=".test_option_all"></div>' +
' <div data-js="background" data-selector=".test_option_all">' +
' <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
' </div>' +
addons/website/views/snippets.xml
+15 -55
View File
@@ -982,46 +982,25 @@
<t t-call="web_editor.snippet_options"/>
<!-- COLOR | .s_three_columns | .s_comparisons -->
<div data-js="colorpicker"
<div data-js="colorpicker" string="Color"
data-selector=".s_three_columns .row > div, .s_comparisons .row > div, .s_tabs .row > div"
data-target=".card">
<we-collapse-area>
<we-toggler>Color</we-toggler>
<we-collapse/>
</we-collapse-area>
</div>
data-target=".card"/>
<!-- COLOR | .s_hr -->
<div data-js="colorpicker"
<div data-js="colorpicker" string="Color"
data-selector=".s_hr"
data-target="hr"
data-color-prefix="border-"
data-palette-exclude="transparent_grayscale, common, custom">
<we-collapse-area>
<we-toggler>Color</we-toggler>
<we-collapse/>
</we-collapse-area>
</div>
data-palette-exclude="transparent_grayscale, common, custom"/>
<!-- COLOR | .s_cards -->
<div data-js="colorpicker"
data-selector=".s_card, .accordion .card">
<we-collapse-area>
<we-toggler>Color</we-toggler>
<we-collapse/>
</we-collapse-area>
</div>
<div data-js="colorpicker" string="Color"
data-selector=".s_card, .accordion .card"/>
<!-- COLOR | .s_alert -->
<div data-js="colorpicker"
<div data-js="colorpicker" string="Color"
data-selector=".s_alert"
data-color-prefix="alert-">
<we-collapse-area>
<we-toggler>Color</we-toggler>
<we-collapse/>
</we-collapse-area>
</div>
data-color-prefix="alert-"/>
<!-- STYLES | .s_title -->
<div data-selector=".s_title" data-target="[class*='s_title_']">
@@ -1263,36 +1242,21 @@
</div>
<!-- Color | Section -->
<div id="so_main_colorpicker"
<div id="so_main_colorpicker" string="Background Color"
data-js="colorpicker"
data-selector="section, .carousel-item"
data-exclude=".parallax, .o_gallery .carousel-item">
<we-collapse-area>
<we-toggler>Background Color</we-toggler>
<we-collapse/>
</we-collapse-area>
</div>
data-exclude=".parallax, .o_gallery .carousel-item"/>
<!-- FILTER | .s_parallax -->
<div data-js="colorpicker"
<div data-js="colorpicker" string="Filter"
data-selector=".parallax"
data-palette-exclude="common, theme, custom"
data-palette-default="transparent_grayscale">
<we-collapse-area>
<we-toggler>Filter</we-toggler>
<we-collapse/>
</we-collapse-area>
</div>
data-palette-default="transparent_grayscale"/>
<!-- Color | Columns -->
<div data-js="colorpicker"
<div data-js="colorpicker" string="Background Color"
data-selector="section .row > div"
data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
<we-collapse-area>
<we-toggler>Background Color</we-toggler>
<we-collapse/>
</we-collapse-area>
</div>
data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div"/>
<div data-selector="section .row > div"
data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
@@ -1340,15 +1304,11 @@
<we-checkbox string="Transparent" data-transparent="true" data-no-preview="true"/>
</div>
<div data-js="topMenuColor"
<div data-js="topMenuColor" string="Background Color"
data-selector="[data-main-object^='website.page('] #wrapwrap > header"
data-palette-exclude="theme,common, custom"
data-palette-default="transparent_grayscale"
data-no-check="true">
<we-collapse-area>
<we-toggler>Background Color</we-toggler>
<div class="dropdown-menu"/>
</we-collapse-area>
</div>
<!-- Anchor Name -->