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

[REF] web_editor, *: review how html properties are printed (scss)

Browse Source 
*: website

Make sure strings are printed quoted and null values are not printed.

Part of https://github.com/odoo/odoo/pull/54065
task-2291398
This commit is contained in:
qsm-odoo
2020-07-09 18:09:59 +00:00
parent ec026e76ca
commit 3a34e39caa
8 changed files with 81 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+1 -1
View File
@@ -176,7 +176,7 @@ const ColorPaletteWidget = Widget.extend({
},
});
this.style.getPropertyValue(`--custom-colors`).trim().split(' ').forEach(v => {
const color = this.style.getPropertyValue(`--${v}`).trim();
const color = this.style.getPropertyValue(`--${v.substring(1, v.length - 1)}`).trim();
if (ColorpickerWidget.isCSSColor(color)) {
this._addCustomColor(existingColors, color);
}
addons/web_editor/static/src/scss/web_editor.common.scss
+13 -13
View File
@@ -4,7 +4,7 @@
:root {
@each $color, $value in $grays {
--#{$color}: #{$value};
@include print-variable($color, $value);
}
// Most of the keys of the color combination color should be null. We have
@@ -19,45 +19,45 @@
$-h6: color('o-cc#{$index}-h6') or $-h5;
@if not color('o-cc#{$index}-text') {
--o-cc#{$index}-text: #{$-text};
@include print-variable('o-cc#{$index}-text', $-text);
}
@if not color('o-cc#{$index}-headings') {
--o-cc#{$index}-headings: #{$-headings};
@include print-variable('o-cc#{$index}-headings', $-headings);
}
@if not color('o-cc#{$index}-h2') {
--o-cc#{$index}-h2: #{$-h2};
@include print-variable('o-cc#{$index}-h2', $-h2);
}
@if not color('o-cc#{$index}-h3') {
--o-cc#{$index}-h3: #{$-h3};
@include print-variable('o-cc#{$index}-h3', $-h3);
}
@if not color('o-cc#{$index}-h4') {
--o-cc#{$index}-h4: #{$-h4};
@include print-variable('o-cc#{$index}-h4', $-h4);
}
@if not color('o-cc#{$index}-h5') {
--o-cc#{$index}-h5: #{$-h5};
@include print-variable('o-cc#{$index}-h5', $-h5);
}
@if not color('o-cc#{$index}-h6') {
--o-cc#{$index}-h6: #{$-h6};
@include print-variable('o-cc#{$index}-h6', $-h6);
}
@if not color('o-cc#{$index}-link') {
--o-cc#{$index}-link: #{theme-color('primary')};
@include print-variable('o-cc#{$index}-link', theme-color('primary'));
}
$-btn-primary: color('o-cc#{$index}-btn-primary');
@if not $-btn-primary {
--o-cc#{$index}-btn-primary: #{theme-color('primary')};
@include print-variable('o-cc#{$index}-btn-primary', theme-color('primary'));
}
@if not color('o-cc#{$index}-btn-primary-border') {
--o-cc#{$index}-btn-primary-border: #{$-btn-primary or theme-color('primary')};
@include print-variable('o-cc#{$index}-btn-primary-border', $-btn-primary or theme-color('primary'));
}
$-btn-secondary: color('o-cc#{$index}-btn-secondary');
@if not $-btn-secondary {
--o-cc#{$index}-btn-secondary: #{theme-color('secondary')};
@include print-variable('o-cc#{$index}-btn-secondary', theme-color('secondary'));
}
@if not color('o-cc#{$index}-btn-secondary-border') {
--o-cc#{$index}-btn-secondary-border: #{$-btn-secondary or theme-color('secondary')};
@include print-variable('o-cc#{$index}-btn-secondary-border', $-btn-secondary or theme-color('secondary'));
}
}
}
addons/web_editor/static/src/scss/web_editor.variables.scss
+15
View File
@@ -440,3 +440,18 @@ $o-color-extras-nesting-selector: '&, .o_colored_level &';
@include o-bg-color(o-color($-related-color), $background: $background, $important: false);
}
}
// Print a document property the right way (depending on the type of the printed
// variable).
@mixin print-variable($key, $value) {
@if $value != null {
$-type: type-of($value);
@if $-type == 'string' {
--#{$key}: '#{$value}';
} @else if $-type == 'list' {
--#{$key}: #{inspect($value)};
} @else {
--#{$key}: #{$value};
}
}
}
addons/web_editor/static/src/scss/wysiwyg.scss
+10 -10
View File
@@ -4,19 +4,19 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
// 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 {
--o-we-toolbar-height: #{$o-we-toolbar-height};
@include print-variable('o-we-toolbar-height', $o-we-toolbar-height);
--o-we-bg-color: #{$o-we-bg-color};
--o-we-bg-color-dark: #{$o-we-bg-color-dark};
--o-we-color: #{$o-we-color};
--o-we-color-accent: #{$o-we-color};
@include print-variable('o-we-bg-color', $o-we-bg-color);
@include print-variable('o-we-bg-color-dark', $o-we-bg-color-dark);
@include print-variable('o-we-color', $o-we-color);
@include print-variable('o-we-color-accent', $o-we-color);
--o-we-dropdown-bg-color: #{$o-we-dropdown-bg-color};
--o-we-dropdown-color: #{$o-we-dropdown-color};
@include print-variable('o-we-dropdown-bg-color', $o-we-dropdown-bg-color);
@include print-variable('o-we-dropdown-color', $o-we-dropdown-color);
--o-we-snippets-bg-color: #{$o-we-bg-color};
--o-we-snippets-bg-info: #{$o-we-color-info};
--o-we-snippets-color: #{$o-we-color};
@include print-variable('o-we-snippets-bg-color', $o-we-bg-color);
@include print-variable('o-we-snippets-bg-info', $o-we-color-info);
@include print-variable('o-we-snippets-color', $o-we-color);
}
// EDITOR TOP BAR AND POPOVER
addons/website/static/src/js/editor/snippets.options.js
+1
View File
@@ -80,6 +80,7 @@ const FontFamilyPickerUserValueWidget = SelectUserValueWidget.extend({
this.nbFonts = parseInt(style.getPropertyValue('--number-of-fonts'));
const googleFontsProperty = style.getPropertyValue('--google-fonts').trim();
this.googleFonts = googleFontsProperty ? googleFontsProperty.split(/\s*,\s*/g) : [];
this.googleFonts = this.googleFonts.map(font => font.substring(1, font.length - 1)); // Unquote
await this._super(...arguments);
addons/website/static/src/scss/website.scss
+13 -13
View File
@@ -25,38 +25,38 @@ $-font-numbers: (
// customized by themes, the user or anything else (so there is no file to
// parse to get them). Those will be printed here as CSS variables.
--support-13-0-color-system: #{$o-support-13-0-color-system};
--has-customized-13-0-color-system: #{$o-has-customized-13-0-color-system};
@include print-variable('support-13-0-color-system', $o-support-13-0-color-system);
@include print-variable('has-customized-13-0-color-system', $o-has-customized-13-0-color-system);
// 1) Handle default values
--header-font-size: #{$font-size-base};
@include print-variable('header-font-size', $font-size-base);
// 2) The values in the $theme-colors map are already printed by Bootstrap.
// 3) The values in the $colors map are also printed by Bootstrap.
// 4) The Odoo values map, $o-website-values, must be printed.
@each $key, $value in o-map-omit($o-website-values) {
--#{$key}: #{$value};
@each $key, $value in $o-website-values {
@include print-variable($key, $value);
}
// 5) Use final value used by the theme
--body: #{$body-bg};
@include print-variable('body', $body-bg);
--logo-height: #{$o-theme-navbar-logo-height};
--fixed-logo-height: #{$o-theme-navbar-fixed-logo-height};
--number-of-fonts: #{length($o-theme-fonts)};
@include print-variable('logo-height', $o-theme-navbar-logo-height);
@include print-variable('fixed-logo-height', $o-theme-navbar-fixed-logo-height);
@include print-variable('number-of-fonts', length($o-theme-fonts));
--number-of-color-palettes: #{length($o-color-palettes) - 1}; // -1 since the last one is the user customized one
--color-palettes-number: #{$o-original-color-palette-number};
--has-customized-colors: #{$o-has-customized-colors};
@include print-variable('number-of-color-palettes', length($o-color-palettes) - 1); // -1 since the last one is the user customized one
@include print-variable('color-palettes-number', $o-original-color-palette-number);
@include print-variable('has-customized-colors', $o-has-customized-colors);
// 6) Get list of colorpalette custom colors
$custom-colors: ();
@each $key, $value in $o-color-palette {
$custom-colors: append($custom-colors, $key);
}
--custom-colors: #{$custom-colors};
@include print-variable('custom-colors', $custom-colors);
}
#wrapwrap {
addons/website/static/src/scss/website.wysiwyg.scss
+12 -12
View File
@@ -6,24 +6,24 @@
}
:root {
// Override css variables to influence the default style of the editor without
// duplicating the css.
--o-we-toolbar-height: #{$o-navbar-height};
--o-we-bg-color: #{$o-we-color-dark};
--o-we-bg-color-dark: #{$o-we-color-darker};
--o-we-color: #{$o-we-color-text-normal};
--o-we-color-accent: #{$o-we-color-text-light};
// Override css variables to influence the default style of the editor
// without duplicating the css.
@include print-variable('o-we-toolbar-height', $o-navbar-height);
@include print-variable('o-we-bg-color', $o-we-color-dark);
@include print-variable('o-we-bg-color-dark', $o-we-color-darker);
@include print-variable('o-we-color', $o-we-color-text-normal);
@include print-variable('o-we-color-accent', $o-we-color-text-light);
--o-we-dropdown-bg-color: #{$o-we-color-darker};
--o-we-dropdown-color: #{$o-we-color-text-normal};
@include print-variable('o-we-dropdown-bg-color', $o-we-color-darker);
@include print-variable('o-we-dropdown-color', $o-we-color-text-normal);
--o-we-snippets-bg-color: #{$o-we-color-normal};
--o-we-snippets-color: #{$o-we-color-text-light};
@include print-variable('o-we-snippets-bg-color', $o-we-color-normal);
@include print-variable('o-we-snippets-color', $o-we-color-text-light);
// Need info about the color of each color palette
@for $index from 1 through length($o-color-palettes) - 1 { // Not the user one
@each $name, $color in nth($o-color-palettes, $index) {
--o-palette-#{$index}-#{$name}: #{$color};
@include print-variable('o-palette-#{$index}-#{$name}', $color);
}
}
}
addons/website/views/snippets/snippets.xml
+16 -16
View File
@@ -448,27 +448,27 @@
<we-button id="option_template_header_logo_menu"
data-name="header_logo_menu_opt"
data-customize-website-views=""
data-customize-website-variable="logo_menu"
data-customize-website-variable="'logo_menu'"
string="Logo - Menu"/>
<we-button id="option_template_header_hamburger_logo_centered"
data-name="header_hamburger_logo_centered_opt"
data-customize-website-views="website.template_header_hamburger, website.template_header_hamburger_left"
data-customize-website-variable="hamburger_logo"
data-customize-website-variable="'hamburger_logo'"
string="Hamburger - Logo"/>
<we-button id="option_template_header_logo_menu_below"
data-name="header_logo_menu_below_opt"
data-customize-website-views=""
data-customize-website-variable="logo_menu_below"
data-customize-website-variable="'logo_menu_below'"
string="Logo (Top) - Menu"/>
<we-button id="option_template_header_menu_logo_below"
data-name="header_menu_logo_below_opt"
data-customize-website-views=""
data-customize-website-variable="menu_logo_below"
data-customize-website-variable="'menu_logo_below'"
string="Menu - Logo (Bottom)"/>
<we-button id="option_template_header_logo_hamburger"
data-name="header_logo_hamburger_opt"
data-customize-website-views="website.template_header_hamburger, website.template_header_navbar_text_center"
data-customize-website-variable="logo_hamburger"
data-customize-website-variable="'logo_hamburger'"
string="Logo - Hamburger (cover)"/>
</we-select>
<we-select id="header_effect_list" string="Effect">
@@ -538,27 +538,27 @@
<we-select string="Footer Template" data-variable="footer-template" data-reload="/">
<we-button id="option_template_footer_products_contacts_about_us"
data-customize-website-views="website.footer_custom"
data-customize-website-variable="products_contacts_about_us"
data-customize-website-variable="'products_contacts_about_us'"
string="Products - Contacts - About us"/>
<we-button id="option_template_footer_logo_about_us_below"
data-customize-website-views="website.template_footer_logo_about_us_below"
data-customize-website-variable="logo_about_us_below"
data-customize-website-variable="'logo_about_us_below'"
string="Logo - About us"/>
<we-button id="option_template_footer_links_address_logo"
data-customize-website-views="website.template_footer_links_address_logo"
data-customize-website-variable="links_address_logo"
data-customize-website-variable="'links_address_logo'"
string="Links - Address - Logo"/>
<we-button id="option_template_footer_name_logo_links_about_us"
data-customize-website-views="website.template_footer_name_logo_links_about_us"
data-customize-website-variable="name_logo_links_about_us"
data-customize-website-variable="'name_logo_links_about_us'"
string="Name - Logo - Links - About us"/>
<we-button id="option_template_footer_logo_only"
data-customize-website-views="website.template_footer_logo_only"
data-customize-website-variable="logo_only"
data-customize-website-variable="'logo_only'"
string="Logo only"/>
<we-button id="option_template_footer_address_logo"
data-customize-website-views="website.template_footer_address_logo"
data-customize-website-variable="address_logo"
data-customize-website-variable="'address_logo'"
string="Address - Logo"/>
</we-select>
<we-select string="Slideout Effect" data-variable="footer-effect" data-reload="/">
@@ -567,10 +567,10 @@
data-customize-website-variable=""/>
<we-button string="Slide Hover"
data-customize-website-views="website.template_footer_slideout"
data-customize-website-variable="slideout_slide_hover"/>
data-customize-website-variable="'slideout_slide_hover'"/>
<we-button string="Shadow"
data-customize-website-views="website.template_footer_slideout"
data-customize-website-variable="slideout_shadow"/>
data-customize-website-variable="'slideout_shadow'"/>
</we-select>
<we-checkbox string="Copyright"
data-customize-website-views="website.footer_no_copyright|"
@@ -732,9 +732,9 @@
<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-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-number"/>
<we-fontfamilypicker string="Buttons Font" data-variable="buttons-font-number"/>