From 6a258db1e96ec05d53744cebfb2a884ae712d69d Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Thu, 6 Aug 2020 09:06:06 +0000 Subject: [PATCH] [IMP] website, *: review the 'options' tab of editor panel *: web_editor This will more probably change again in the future but this is a first step towards a hierarchized 'options' tab for the editor panel. Part of https://github.com/odoo/odoo/pull/55529 --- .../static/src/scss/wysiwyg_snippets.scss | 12 -- .../static/src/js/editor/snippets.editor.js | 31 +++-- .../static/src/js/editor/snippets.options.js | 121 +++++++++--------- addons/website/views/snippets/snippets.xml | 74 ++++++----- 4 files changed, 128 insertions(+), 110 deletions(-) diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index eb462326d6e..f0dc92373d3 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -312,18 +312,6 @@ 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; - - &, & > div { - justify-content: center; - } - } } we-toggler { @include we-icon-button('\f0d7'); diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js index 8e48424b853..98c2b13ed34 100644 --- a/addons/website/static/src/js/editor/snippets.editor.js +++ b/addons/website/static/src/js/editor/snippets.editor.js @@ -1,7 +1,7 @@ odoo.define('website.snippet.editor', function (require) { 'use strict'; -const {qweb, _t} = require('web.core'); +const {qweb, _t, _lt} = require('web.core'); const Dialog = require('web.Dialog'); const weSnippetEditor = require('web_editor.snippet.editor'); const wSnippetOptions = require('website.editor.snippets.options'); @@ -21,6 +21,11 @@ weSnippetEditor.Class.include({ tabs: _.extend({}, weSnippetEditor.Class.prototype.tabs, { THEME: 'theme', }), + optionsTabStructure: [ + ['theme-colors', _lt("Theme Colors")], + ['theme-options', _lt("Theme Options")], + ['website-settings', _lt("Website Settings")], + ], //-------------------------------------------------------------------------- // Private @@ -150,10 +155,20 @@ weSnippetEditor.Class.include({ this._addTabLoading(this.tabs.THEME); await new Promise(resolve => setTimeout(() => resolve())); // Needed to force the loading to appear... to review with new design - if (!this.fakeThemeEl) { - this.fakeThemeEl = document.createElement('theme'); - this.fakeThemeEl.dataset.name = _t("General Options"); - this.el.appendChild(this.fakeThemeEl); + if (!this.topFakeOptionEl) { + let el; + for (const [elementName, title] of this.optionsTabStructure) { + const newEl = document.createElement(elementName); + newEl.dataset.name = title; + if (el) { + el.appendChild(newEl); + } else { + this.topFakeOptionEl = newEl; + } + el = newEl; + } + this.bottomFakeOptionEl = el; + this.el.appendChild(this.topFakeOptionEl); } // Need all of this in that order so that: @@ -161,9 +176,9 @@ weSnippetEditor.Class.include({ // called each time. // - the element is hidden afterwards so it does not take space in the // DOM, same as the overlay which may make a scrollbar appear. - this.fakeThemeEl.classList.remove('d-none'); - const editor = await this._activateSnippet($(this.fakeThemeEl)); - this.fakeThemeEl.classList.add('d-none'); + this.topFakeOptionEl.classList.remove('d-none'); + const editor = await this._activateSnippet($(this.bottomFakeOptionEl)); + this.topFakeOptionEl.classList.add('d-none'); editor.toggleOverlay(false); this._updateLeftPanelContent({ diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index b0ed3242090..e91d9d88877 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -710,61 +710,7 @@ options.registry.BackgroundOptimize.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', - // FIXME investigate why using 'click' does not work *anymore* but those - // foldable areas will be made more robust and standard with the new UI. - 'mouseup .o_cc_subheadings_toggler_icon': '_onCCHeadingsTogglerClick', - }, - - /** - * @override - */ - start: async function () { - // Checks for support of the old color system - const style = window.getComputedStyle(document.documentElement); - const supportOldColorSystem = weUtils.getCSSVariableValue('support-13-0-color-system', style) === 'true'; - const hasCustomizedOldColorSystem = weUtils.getCSSVariableValue('has-customized-13-0-color-system', style) === 'true'; - this._showOldColorSystemWarning = supportOldColorSystem && hasCustomizedOldColorSystem; - - return this._super(...arguments); - }, - /** - * @override - */ - updateUIVisibility: async function () { - await this._super(...arguments); - const oldColorSystemEl = this.el.querySelector('.o_old_color_system_warning'); - oldColorSystemEl.classList.toggle('d-none', !this._showOldColorSystemWarning); - }, +options.registry.OptionsTab = options.Class.extend({ //-------------------------------------------------------------------------- // Options @@ -786,7 +732,7 @@ options.registry.Theme = options.Class.extend({ * @todo use scss customization instead (like for user colors) * @see this.selectClass for parameters */ - customizeBodyBg: async function (previewMode, widgetValue, params) { + async customizeBodyBg(previewMode, widgetValue, params) { const xmlID = 'website.option_custom_body_image'; if (widgetValue) { await this._rpc({ @@ -810,6 +756,9 @@ options.registry.Theme = options.Class.extend({ await this._reloadBundles(); }, + /** + * @see this.selectClass for parameters + */ async enableImagepicker(previewMode, widgetValue, params) { if (widgetValue) { // TODO improve: here we make a hack so that a hidden imagepicker @@ -892,6 +841,24 @@ options.registry.Theme = options.Class.extend({ dialog.open(); }); }, + /** + * @see this.selectClass for parameters + */ + async switchTheme(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 @@ -919,7 +886,7 @@ options.registry.Theme = options.Class.extend({ /** * @override */ - _computeWidgetState: async function (methodName, params) { + async _computeWidgetState(methodName, params) { if (methodName === 'customizeBodyBg') { const bgURL = $('#wrapwrap').css('background-image'); const srcValueWrapper = /url\(['"]*|['"]*\)|^none$/g; @@ -964,6 +931,46 @@ options.registry.Theme = options.Class.extend({ }); return aceEditor; }, +}); + +options.registry.ThemeColors = options.registry.OptionsTab.extend({ + events: Object.assign({}, options.registry.OptionsTab.prototype.events, { + 'click .o_color_combinations_edition we-toggler': '_onCCTogglerClick', + // FIXME investigate why using 'click' does not work *anymore* but those + // foldable areas will be made more robust and standard with the new UI. + 'mouseup .o_cc_subheadings_toggler_icon': '_onCCHeadingsTogglerClick', + }), + + /** + * @override + */ + async start() { + // Checks for support of the old color system + const style = window.getComputedStyle(document.documentElement); + const supportOldColorSystem = weUtils.getCSSVariableValue('support-13-0-color-system', style) === 'true'; + const hasCustomizedOldColorSystem = weUtils.getCSSVariableValue('has-customized-13-0-color-system', style) === 'true'; + this._showOldColorSystemWarning = supportOldColorSystem && hasCustomizedOldColorSystem; + + return this._super(...arguments); + }, + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @override + */ + async updateUIVisibility() { + await this._super(...arguments); + const oldColorSystemEl = this.el.querySelector('.o_old_color_system_warning'); + oldColorSystemEl.classList.toggle('d-none', !this._showOldColorSystemWarning); + }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + /** * @override */ diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index afef588cd38..73e6813a47b 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -713,17 +713,14 @@ -
- Switch Theme -
-
+
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 we recommend you to try to use the new color system, which is still customizable. - + @@ -739,36 +736,16 @@
- - - - - - - - - - - - Never - On Hover - Always - - - - - Fill - Outline - - - Fill - Outline - +
+
+ Full Boxed - + @@ -785,13 +762,44 @@ - + + + + + + Fill + Outline + + + Fill + Outline + + + Normal + Underline On Hover + Always Underlined + + + + + + + +
+
+ + Switch Theme + <head> </body> - API key + Custom Key