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

[IMP] website, *: allow presets user edition

Browse Source 
*: web, web_editor

Now, the user can edit each individual component of each color preset
thanks to the third tab of the left panel. The edition of the first
preset is the same as the others for the users but it is actually
also used for "no-preset" areas, meaning that they impact the whole
website by default (*without impacting the other presets*). The website
thus appears as areas using presets, preset 1 being the default (in the
future all areas will be customizable with a different preset). The only
difference between "using preset 1 explicitely" and "not using a preset"
will be that background color is transparent in no-preset, leaving the
body background appear. If the body background has no image, then there
is no difference at all as the background color of the body is set to be
the background color of the preset 1. In boxed mode, that color is used
for the "box" and the website body uses a different customizable color.

Note: before this commit, the "text" color edition was used to set the
main text color and one of the constrasting color for the color-yiq
function (the darkest if a dark color or the lightest if a light color).
That last part has been removed and automatic colors will now always
use $gray-900 and $white as contrasting colors, unless changed by the
theme explicitely. This needed to be removed as now the "text color"
edition has been moved in the "preset 1" config and should thus only
impact the "no-preset / preset 1" areas instead of all the presets.

Part of https://github.com/odoo/odoo/pull/45856
task-2197038
This commit is contained in:
qsm-odoo
2020-06-02 09:42:19 +00:00
parent 7736cde22c
commit 55c90cc9fa
16 changed files with 284 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/scss/bootstrap_review.scss
Vendored
+10 -3
View File
@@ -108,15 +108,22 @@
// We do it ourself here with a tweak: we introduce btn-fill-* (working as the
// normal btn-* classes (in opposition to btn-outline-* classes). We then map
// the btn-* classes to either btn-fill-* or btn-outline-* classes depending on
// the configuration.
// the configuration. We also allow to define a border-color different than the
// background color.
$o-btn-bg-colors: () !default;
$o-btn-border-colors: () !default;
@each $color, $value in $theme-colors {
$-bg-color: map-get($o-btn-bg-colors, $color) or $value;
$-border-color: map-get($o-btn-border-colors, $color) or $-bg-color;
.btn-fill-#{$color} {
@include button-variant($value, $value);
@include button-variant($-bg-color, $-border-color);
}
}
@each $color, $value in $theme-colors {
$-bg-color: map-get($o-btn-bg-colors, $color) or $value;
$-border-color: map-get($o-btn-border-colors, $color) or $-bg-color;
.btn-outline-#{$color} {
@include button-outline-variant($value);
@include button-outline-variant($-border-color);
}
}
$o-btn-outline-defaults: () !default;
addons/web/static/src/scss/bs_mixins_overrides.scss
+5 -1
View File
@@ -14,6 +14,10 @@ $enable-deprecation-messages: false !default;
@return o-get-most-contrast($color, $light, $dark, $background, $threshold, $cross-mix);
}
@function mute-color($color) {
@return scale-color($color, $alpha: -30%);
}
// This placeholder regroups the rules that will apply on all elements with a
// bg-* class (see o-bg-color, bg-variant). The optimized-css way would be to
// have a common class for them all.
@@ -37,7 +41,7 @@ $o-color-extras-nesting-selector: '&' !default;
.text-muted {
// Always important since the basic BS rule is important
color: scale-color($-yiq-color, $alpha: -30%) !important;
color: mute-color($-yiq-color) !important;
}
}
}
addons/web_editor/static/src/js/editor/snippets.options.js
+5 -1
View File
@@ -739,7 +739,11 @@ const SelectUserValueWidget = UserValueWidget.extend({
*
* @private
*/
_onClick: function () {
_onClick: function (ev) {
if (ev.target.closest('[role="button"]')) {
return;
}
if (!this.menuTogglerEl.classList.contains('active')) {
this.trigger_up('user_value_widget_opening');
this.menuTogglerEl.classList.add('active');
addons/web_editor/static/src/scss/bootstrap_overridden.scss
Vendored
+11
View File
@@ -7,6 +7,17 @@ $colors: () !default;
$colors: map-merge(('#{$name}': o-color($color)), $colors);
}
$o-btn-bg-colors: () !default;
$o-btn-bg-colors: map-merge((
'primary': o-color('o-cc1-btn-primary'),
'secondary': o-color('o-cc1-btn-secondary'),
), $o-btn-bg-colors);
$o-btn-border-colors: () !default;
$o-btn-border-colors: map-merge((
'primary': o-color('o-cc1-btn-primary-border'),
'secondary': o-color('o-cc1-btn-secondary-border'),
), $o-btn-border-colors);
// Automatically extend bootstrap to create theme background/text/button classes
$theme-colors: () !default;
@each $name, $color in $o-theme-color-palette {
addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss
Vendored
+11
View File
@@ -1,3 +1,14 @@
$o-theme-color-palette: map-remove($o-theme-color-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
$o-gray-color-palette: map-remove($o-gray-color-palette, '100', '200', '300', '400', '500', '600', '700', '800', '900');
$o-btn-bg-colors: () !default;
$o-btn-bg-colors: map-merge((
'primary': null,
'secondary': null,
), $o-btn-bg-colors);
$o-btn-border-colors: () !default;
$o-btn-border-colors: map-merge((
'primary': null,
'secondary': null,
), $o-btn-border-colors);
addons/web_editor/static/src/scss/web_editor.common.scss
+54
View File
@@ -6,6 +6,60 @@
@each $color, $value in $grays {
--#{$color}: #{$value};
}
// Most of the keys of the color combination color should be null. We have
// to indicate their fallback values.
@for $index from 1 through length($o-color-combinations) {
$-text: color('o-cc#{$index}-text') or color-yiq(o-color('o-cc#{$index}-bg'));
$-headings: color('o-cc#{$index}-headings') or $-text;
$-h2: color('o-cc#{$index}-h2') or $-headings;
$-h3: color('o-cc#{$index}-h3') or $-h2;
$-h4: color('o-cc#{$index}-h4') or $-h3;
$-h5: color('o-cc#{$index}-h5') or $-h4;
$-h6: color('o-cc#{$index}-h6') or $-h5;
@if not color('o-cc#{$index}-text') {
--o-cc#{$index}-text: #{$-text};
}
@if not color('o-cc#{$index}-headings') {
--o-cc#{$index}-headings: #{$-headings};
}
@if not color('o-cc#{$index}-h2') {
--o-cc#{$index}-h2: #{$-h2};
}
@if not color('o-cc#{$index}-h3') {
--o-cc#{$index}-h3: #{$-h3};
}
@if not color('o-cc#{$index}-h4') {
--o-cc#{$index}-h4: #{$-h4};
}
@if not color('o-cc#{$index}-h5') {
--o-cc#{$index}-h5: #{$-h5};
}
@if not color('o-cc#{$index}-h6') {
--o-cc#{$index}-h6: #{$-h6};
}
@if not color('o-cc#{$index}-link') {
--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')};
}
@if not color('o-cc#{$index}-btn-primary-border') {
--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')};
}
@if not color('o-cc#{$index}-btn-secondary-border') {
--o-cc#{$index}-btn-secondary-border: #{$-btn-secondary or theme-color('secondary')};
}
}
}
html, body {
addons/web_editor/static/src/scss/web_editor.variables.scss
+5
View File
@@ -251,6 +251,7 @@ $o-we-toolbar-height: 32px;
&.btn-primary {
@include button-variant($o-brand-primary, $o-brand-primary);
color: white;
}
&.btn-secondary {
@include button-variant($o-we-bg-color, $o-we-bg-color);
@@ -262,15 +263,19 @@ $o-we-toolbar-height: 32px;
}
&.btn-success {
@include button-variant($o-we-color-success, $o-we-color-success);
color: white;
}
&.btn-info {
@include button-variant($o-we-color-info, $o-we-color-info);
color: white;
}
&.btn-warning {
@include button-variant($o-we-color-warning, $o-we-color-warning);
color: $o-we-color-divider;
}
&.btn-danger {
@include button-variant($o-we-color-danger, $o-we-color-danger);
color: $o-we-color-divider;
}
}
}
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+25 -7
View File
@@ -265,6 +265,21 @@ body.editor_enable.editor_has_snippets {
}
we-toggler {
@include we-icon-button('\f107');
+ * {
display: none !important;
margin-top: -1px !important;
background-color: rgba(0, 0, 0, 0.3);
}
&.active {
&::after {
content: '\f106';
}
+ * {
display: block !important;
}
}
}
%we-icon-button {
position: relative;
@@ -284,8 +299,9 @@ body.editor_enable.editor_has_snippets {
}
we-customizeblock-options {
position: relative;
display: block;
padding: 0.5em;
padding: 1em;
color: var(--o-we-snippets-color);
&:nth-child(2n) {
@@ -343,6 +359,14 @@ body.editor_enable.editor_has_snippets {
}
}
.o_we_fold_icon {
@include o-position-absolute(0, 100%, 0, auto);
display: flex;
justify-content: center;
align-items: center;
width: 1em;
}
//----------------------------------------------------------------------
// User Value Widgets
//----------------------------------------------------------------------
@@ -409,16 +433,10 @@ body.editor_enable.editor_has_snippets {
&.active {
background-color: transparent;
border-color: var(--o-we-color);
+ we-select-menu {
display: block;
}
}
}
we-select-menu {
@include o-position-absolute(100%, 0, auto, 0);
margin-top: -1px;
display: none;
z-index: $zindex-dropdown;
border: 1px solid var(--o-we-color);
background-color: var(--o-we-bg-color-dark);
addons/web_editor/static/src/xml/snippets.xml
+9 -6
View File
@@ -64,14 +64,17 @@
<t t-name="web_editor.colorpalette.combination.btn">
<button type="button" class="o_we_color_btn o_we_color_combination_btn o_we_cc_preview_container"
t-att-data-color="number" t-attf-title="Preset #{number}">
<div class="o_we_cc_preview_wrapper d-flex justify-content-between align-items-end">
<h1 class="o_we_color_combination_btn_title">Title</h1>
<p class="o_we_color_combination_btn_text flex-grow-1">Text</p>
<span class="o_we_color_combination_btn_btn btn btn-sm btn-primary o_btn_preview mr-1"><small>Button</small></span>
<span class="o_we_color_combination_btn_btn btn btn-sm btn-secondary o_btn_preview"><small>Button</small></span>
</div>
<t t-call="web_editor.color.combination.preview"/>
</button>
</t>
<t t-name="web_editor.color.combination.preview">
<div class="o_we_cc_preview_wrapper d-flex justify-content-between align-items-end">
<h1 class="o_we_color_combination_btn_title">Title</h1>
<p class="o_we_color_combination_btn_text flex-grow-1">Text</p>
<span class="o_we_color_combination_btn_btn btn btn-sm btn-primary o_btn_preview mr-1"><small>Button</small></span>
<span class="o_we_color_combination_btn_btn btn btn-sm btn-secondary o_btn_preview"><small>Button</small></span>
</div>
</t>
<t t-name="web_editor.many2one.button">
<div class="btn-group">
addons/website/static/src/js/editor/snippets.options.js
+78
View File
@@ -614,6 +614,13 @@ options.registry.background.include({
});
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
*/
@@ -812,6 +819,77 @@ options.registry.Theme = options.Class.extend({
});
return aceEditor;
},
/**
* @override
*/
async _renderOriginalXML($xml) {
const uiFragment = await this._super(...arguments);
uiFragment.querySelectorAll('.o_cc_subheadings_toggler').forEach(headingsEl => {
const togglerEl = document.createElement('span');
togglerEl.classList.add('o_cc_subheadings_toggler_icon', 'o_we_fold_icon', 'fa', 'fa-caret-down');
togglerEl.setAttribute('role', 'button');
const titleEl = headingsEl.querySelector('we-title');
titleEl.insertBefore(togglerEl, titleEl.firstChild);
});
uiFragment.querySelectorAll('.o_cc_subheadings_collapse').forEach(subheadingsEl => {
subheadingsEl.classList.add('d-none');
});
return uiFragment;
},
/**
* @override
*/
async _renderCustomXML(uiFragment) {
const ccEl = uiFragment.querySelector('.o_color_combinations_edition');
for (let i = 1; i <= 5; i++) {
const togglerEl = document.createElement('we-toggler');
togglerEl.classList.add('pt-0', 'pb-0', 'pl-0');
const divEl = document.createElement('div');
divEl.classList.add('o_we_cc_preview_container');
const ccPreviewEl = $(qweb.render('web_editor.color.combination.preview'))[0];
ccPreviewEl.classList.add('p-1', 'text-center', `o_cc${i}`);
divEl.appendChild(ccPreviewEl);
togglerEl.appendChild(divEl);
ccEl.appendChild(togglerEl);
const collapseEl = document.createElement('we-collapse');
const editionEl = $(qweb.render('website.color_combination_edition', {number: i}))[0];
collapseEl.appendChild(editionEl);
ccEl.appendChild(collapseEl);
}
},
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
/**
* @private
* @param {Event} ev
*/
_onCCTogglerClick(ev) {
const ccTogglerEls = this.el.querySelectorAll('.o_color_combinations_edition we-toggler');
for (const el of ccTogglerEls) {
if (el !== ev.currentTarget) {
el.classList.remove('active');
}
}
ev.currentTarget.classList.toggle('active');
},
/**
* @private
* @param {Event} ev
*/
_onCCHeadingsTogglerClick(ev) {
const togglerEl = ev.currentTarget;
const collapseEl = togglerEl.closest('we-collapse').querySelector('.o_cc_subheadings_collapse');
const show = togglerEl.classList.contains('fa-caret-down');
togglerEl.classList.toggle('fa-caret-down', !show);
togglerEl.classList.toggle('fa-caret-up', show);
collapseEl.classList.toggle('d-none', !show);
},
});
options.registry.menu_data = options.Class.extend({
addons/website/static/src/scss/bootstrap_overridden.scss
Vendored
+24 -14
View File
@@ -2,32 +2,40 @@
// Color system
//
// Bootstrap default for $yiq-text-light and $yiq-text-dark are $white and
// $gray-900. What we want to do is use the user text color as light or dark
// depending on its contrast. Themes should be careful if they decide to
// override those values. This would be simplified by giving the user the choice
// for its dark *and* light text colors.
$-light: if(o-color('white') != null, o-color('white'), #FFFFFF);
$-dark: if(o-color('900') != null, o-color('900'), #212529);
$-text: if(o-color('text') != null, o-color('text'), $-dark);
$-is-light: (o-get-most-contrast($-text, $-light, $-dark, o-color('body'), $cross-mix: false) == $-dark);
$yiq-text-light: if($-is-light, o-color('text'), null) !default;
$yiq-text-dark: if($-is-light, null, o-color('text')) !default;
// Use auto threshold for yiq colors
// Note: also need to be defined here so that color-yiq below works
$yiq-contrasted-threshold: false !default;
// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark: o-color('900') !default;
$yiq-text-light: o-color('white') !default;
// Body
//
// Settings for the `<body>` element.
$body-bg: o-color('body') !default;
$body-color: o-color('text') !default;
$body-bg: if($o-theme-layout == 'full', o-color('o-cc1-bg'), o-color('body')) !default;
$body-color: o-color('o-cc1-text') or color-yiq(o-color('o-cc1-bg')) !default;
// Links
//
// Style anchor elements.
$link-color: o-color('o-cc1-link') !default;
$link-decoration: if(o-website-value('link-underline') == 'always', underline, none) !default;
$link-hover-decoration: if(o-website-value('link-underline') != 'never', underline, none) !default;
// Components
//
// Define common padding and border radius sizes and more.
// Note: for the 'active' color, color preset edition is not really flexible but
// this could come in a future update.
$component-active-bg: o-color('o-cc1-btn-primary') !default;
@if $component-active-bg {
$component-active-color: color-yiq($component-active-bg) !default;
}
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
@@ -44,7 +52,9 @@ $h5-font-size: $font-size-base * $o-theme-h5-font-size-multiplier !default;
$h6-font-size: $font-size-base * $o-theme-h6-font-size-multiplier !default;
$headings-font-family: $o-theme-headings-font !default;
$headings-color: o-color('h1') !default;
$headings-color: o-color('o-cc1-headings') !default;
$text-muted: mute-color($body-color) !default;
// Jumbotron
addons/website/static/src/scss/primary_variables.scss
-7
View File
@@ -8,13 +8,6 @@ $o-base-color-palette: map-merge($o-base-color-palette, (
'body': $o-portal-default-body-bg,
'menu': #F8F9FA, // BS gray-100
'footer': #F8F9FA, // BS gray-100
'text': null, // Default to bootstrap
'h1': null, // Default to text
'h2': null, // Default to h1
'h3': null, // Default to h2
'h4': null, // Default to h3
'h5': null, // Default to h4
'h6': null, // Default to h5
));
// By default, all user color palette values are null. Each null value is
addons/website/static/src/scss/website.scss
+6 -20
View File
@@ -41,21 +41,7 @@ $-font-numbers: (
}
// 5) Use final value used by the theme
$-h1-color: if($headings-color == inherit or not $headings-color, $body-color, $headings-color);
$-h2-color: if(color('h2'), color('h2'), $-h1-color);
$-h3-color: if(color('h3'), color('h3'), $-h2-color);
$-h4-color: if(color('h4'), color('h4'), $-h3-color);
$-h5-color: if(color('h5'), color('h5'), $-h4-color);
$-h6-color: if(color('h6'), color('h6'), $-h5-color);
--body: #{$body-bg};
--text: #{$body-color};
--h1: #{$-h1-color};
--h2: #{$-h2-color};
--h3: #{$-h3-color};
--h4: #{$-h4-color};
--h5: #{$-h5-color};
--h6: #{$-h6-color};
--logo-height: #{$o-theme-navbar-logo-height};
--fixed-logo-height: #{$o-theme-navbar-fixed-logo-height};
@@ -81,7 +67,7 @@ $-font-numbers: (
}
#wrap {
background-color: $white;
background-color: o-color('o-cc1-bg');
}
}
}
@@ -145,19 +131,19 @@ $-header-nav-link-height: $nav-link-height;
}
}
h2, h3, h4, h5, h6 {
color: color('h2');
color: color('o-cc1-h2');
}
h3, h4, h5, h6 {
color: color('h3');
color: color('o-cc1-h3');
}
h4, h5, h6 {
color: color('h4');
color: color('o-cc1-h4');
}
h5, h6 {
color: color('h5');
color: color('o-cc1-h5');
}
h6 {
color: color('h6');
color: color('o-cc1-h6');
}
.btn {
@if ($o-theme-buttons-font != $o-theme-font) {
addons/website/static/src/scss/website.wysiwyg.scss
+5
View File
@@ -169,3 +169,8 @@ $i: 1;
}
}
}
we-collapse {
position: relative;
padding: 0.3em 0.3em 0.3em 1em;
}
addons/website/static/src/xml/website.editor.xml
+24
View File
@@ -84,6 +84,30 @@
</we-button>
</t>
<t t-name="website.color_combination_edition">
<div>
<we-colorpicker string="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-bg"/>
<we-colorpicker string="Text" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-text"/>
<we-colorpicker string="Headings" class="o_cc_subheadings_toggler" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-headings"/>
<we-row string="Sub-Headings" class="o_cc_subheadings_collapse">
<we-colorpicker title="Headings 2" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h2"/>
<we-colorpicker title="Headings 3" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h3"/>
<we-colorpicker title="Headings 4" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h4"/>
<we-colorpicker title="Headings 5" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h5"/>
<we-colorpicker title="Headings 6" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h6"/>
</we-row>
<we-colorpicker string="Links" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-link"/>
<we-row string="Main Buttons">
<we-colorpicker title="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-primary"/>
<we-colorpicker title="Border" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-primary-border"/>
</we-row>
<we-row string="Buttons">
<we-colorpicker title="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-secondary"/>
<we-colorpicker title="Border" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-secondary-border"/>
</we-row>
</div>
</t>
<!-- Theme - custom code -->
<div t-name="website.custom_code_dialog_content">
<div class="mb-2" t-esc="contentText"/>
addons/website/views/snippets/snippets.xml
+12 -22
View File
@@ -646,20 +646,20 @@
still customizable.
</we-alert>
<we-row string="Theme colors">
<we-colorpicker title="Primary" data-customize-website-color="" data-color="o-color-1"/>
<we-colorpicker title="Secondary" data-customize-website-color="" data-color="o-color-2"/>
<we-colorpicker data-name="color_1_opt" title="Primary" data-customize-website-color="" data-color="o-color-1"/>
<we-colorpicker data-name="color_2_opt" title="Secondary" data-customize-website-color="" data-color="o-color-2"/>
<we-colorpicker data-customize-website-color="" data-color="o-color-3"/>
<we-colorpicker data-customize-website-color="" data-color="o-color-4"/>
<we-colorpicker data-customize-website-color="" data-color="o-color-5"/>
</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="Texts">
<we-colorpicker data-customize-website-color="" data-color="text"/>
<we-row string="Typography">
<we-fontfamilypicker data-variable="font-number"/>
<we-input data-customize-website-variable="null" data-variable="font-size-base" data-unit="px" data-save-unit="rem"/>
</we-row>
@@ -668,17 +668,7 @@
<we-button data-customize-website-variable="hover">On Hover</we-button>
<we-button data-customize-website-variable="always">Always</we-button>
</we-select>
<we-row string="Headings">
<we-colorpicker data-customize-website-color="" data-color="h1"/>
<we-fontfamilypicker data-variable="headings-font-number"/>
</we-row>
<we-row string="Sub-Headings">
<we-colorpicker title="Headings 2" data-customize-website-color="" data-color="h2"/>
<we-colorpicker title="Headings 3" data-customize-website-color="" data-color="h3"/>
<we-colorpicker title="Headings 4" data-customize-website-color="" data-color="h4"/>
<we-colorpicker title="Headings 5" data-customize-website-color="" data-color="h5"/>
<we-colorpicker title="Headings 6" data-customize-website-color="" data-color="h6"/>
</we-row>
<we-fontfamilypicker string="Headings" data-variable="headings-font-number"/>
<we-fontfamilypicker string="Buttons Font" data-variable="buttons-font-number"/>
<we-select string="Main Buttons" data-variable="btn-primary-outline">
<we-button data-customize-website-variable="false">Fill</we-button>
@@ -688,19 +678,19 @@
<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="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">
<we-colorpicker title="Body" data-customize-website-color="" data-color="body"/>
<we-select>
<we-colorpicker data-name="body_bg_color_opt" data-dependencies="!layout_full_opt" data-customize-website-color="" data-color="body"/>
<we-select data-name="body_bg_type_opt">
<we-button data-name="no_background_opt" data-customize-website-views="">None</we-button>
<we-button data-customize-website-views="website.option_custom_body_image">Image</we-button>
<we-button data-customize-website-views="website.option_custom_body_image, website.option_custom_body_pattern">Pattern</we-button>
</we-select>
<we-imagepicker data-dependencies="!no_background_opt" data-customize-body-bg=""/>
<we-imagepicker data-name="body_bg_image_opt" data-dependencies="!no_background_opt" data-customize-body-bg=""/>
</we-row>
<we-select string="Layout">
<we-button data-customize-website-views="">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="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>