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

[IMP] website, *: review the 'options' tab of editor panel

Browse Source 
*: 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
This commit is contained in:
qsm-odoo
2020-08-06 09:42:48 +00:00
parent 88fa6f774b
commit 6a258db1e9
4 changed files with 128 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
-12
View File
@@ -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');
addons/website/static/src/js/editor/snippets.editor.js
+23 -8
View File
@@ -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({
addons/website/static/src/js/editor/snippets.options.js
+64 -57
View File
@@ -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
*/
addons/website/views/snippets/snippets.xml
+41 -33
View File
@@ -713,17 +713,14 @@
</div>
<!-- Theme options -->
<div data-js="SwitchTheme" data-selector="theme" data-no-check="true">
<we-button class="o_we_primary_btn" data-switch-theme="" data-no-preview="true">Switch Theme</we-button>
</div>
<div data-js="Theme" data-selector="theme" data-no-check="true">
<div data-js="ThemeColors" data-selector="theme-colors" data-no-check="true">
<we-alert class="o_old_color_system_warning d-none">
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.
</we-alert>
<we-row string="Theme colors" class="o_we_fw">
<we-row>
<we-colorpicker data-name="color_1_opt" title="Primary"
data-customize-website-color="" data-color="o-color-1"
data-use-css-color="true"/>
@@ -739,36 +736,16 @@
<we-select data-icon="fa-lightbulb-o" data-variable="color-palettes-number"/>
</we-row>
<div class="o_color_combinations_edition"/>
<we-row string="Status Colors">
<we-colorpicker title="Success" data-customize-website-color="" data-color-type="theme" data-color="success"/>
<we-colorpicker title="Info" data-customize-website-color="" data-color-type="theme" data-color="info"/>
<we-colorpicker title="Warning" data-customize-website-color="" data-color-type="theme" data-color="warning"/>
<we-colorpicker title="Error" data-customize-website-color="" data-color-type="theme" data-color="danger"/>
</we-row>
<we-row string="Typography">
<we-fontfamilypicker data-variable="font"/>
<we-input data-customize-website-variable="null" data-variable="font-size-base" data-unit="px" data-save-unit="rem"/>
</we-row>
<we-select string="Links Underline" data-variable="link-underline">
<we-button data-customize-website-variable="'never'">Never</we-button>
<we-button data-customize-website-variable="'hover'">On Hover</we-button>
<we-button data-customize-website-variable="'always'">Always</we-button>
</we-select>
<we-fontfamilypicker string="Headings" data-variable="headings-font"/>
<we-fontfamilypicker string="Buttons Font" data-variable="buttons-font"/>
<we-select string="Main Buttons" data-variable="btn-primary-outline">
<we-button data-customize-website-variable="false">Fill</we-button>
<we-button data-customize-website-variable="true">Outline</we-button>
</we-select>
<we-select string="Buttons" data-variable="btn-secondary-outline">
<we-button data-customize-website-variable="false">Fill</we-button>
<we-button data-customize-website-variable="true">Outline</we-button>
</we-select>
</div>
<div data-js="OptionsTab" data-selector="theme-options" data-no-check="true">
<we-checkbox string="Show Header"
data-customize-website-views="website.option_layout_hide_header|"
data-reload="/"/>
<we-select string="Layout">
<we-button data-customize-website-views="" data-name="layout_full_opt">Full</we-button>
<we-button data-customize-website-views="website.option_layout_boxed_variables" id="option_layout_boxed">Boxed</we-button>
</we-select>
<we-row string="Background" data-no-preview="true">
<we-row string="⌙ Background" data-no-preview="true">
<we-colorpicker data-dependencies="!layout_full_opt"
data-customize-website-color=""
data-color="body"/>
@@ -785,13 +762,44 @@
<!-- Hidden imagepicker enabled by above button-group -->
<we-imagepicker data-name="body_bg_image_opt" data-customize-body-bg=""/>
</we-row>
<we-checkbox string="Show Header" data-customize-website-views="website.option_layout_hide_header|" data-reload="/"/>
<we-input string="Font size"
data-customize-website-variable="null"
data-variable="font-size-base"
data-unit="px"
data-save-unit="rem"/>
<we-fontfamilypicker string="Font family" data-variable="font"/>
<we-fontfamilypicker string="⌙ Headings" data-variable="headings-font"/>
<we-fontfamilypicker string="⌙ Buttons" data-variable="buttons-font"/>
<we-select string="Main Buttons" data-variable="btn-primary-outline">
<we-button data-customize-website-variable="false">Fill</we-button>
<we-button data-customize-website-variable="true">Outline</we-button>
</we-select>
<we-select string="Buttons" data-variable="btn-secondary-outline">
<we-button data-customize-website-variable="false">Fill</we-button>
<we-button data-customize-website-variable="true">Outline</we-button>
</we-select>
<we-select string="Link Style" data-variable="link-underline">
<we-button data-customize-website-variable="'never'">Normal</we-button>
<we-button data-customize-website-variable="'hover'">Underline On Hover</we-button>
<we-button data-customize-website-variable="'always'">Always Underlined</we-button>
</we-select>
<we-row string="Status Colors">
<we-colorpicker title="Success" data-customize-website-color="" data-color-type="theme" data-color="success"/>
<we-colorpicker title="Info" data-customize-website-color="" data-color-type="theme" data-color="info"/>
<we-colorpicker title="Warning" data-customize-website-color="" data-color-type="theme" data-color="warning"/>
<we-colorpicker title="Error" data-customize-website-color="" data-color-type="theme" data-color="danger"/>
</we-row>
</div>
<div data-js="OptionsTab" data-selector="website-settings" data-no-check="true">
<we-row string="Theme">
<we-button data-switch-theme="" data-no-preview="true">Switch Theme</we-button>
</we-row>
<we-row string="Code Injection" title="Enter code that will be added into every page of your site">
<we-button data-no-preview="true" data-open-custom-code-dialog="head">&amp;lt;head&amp;gt;</we-button>
<we-button data-no-preview="true" data-open-custom-code-dialog="footer">&amp;lt;/body&amp;gt;</we-button>
</we-row>
<we-row string="Google Map">
<we-button data-configure-api-key="" data-no-preview="true">API key</we-button>
<we-button data-configure-api-key="" data-no-preview="true">Custom Key</we-button>
</we-row>
</div>
</template>