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

[IMP] website: add the possibility to control btn & input dimensions

Browse Source 
Part of https://github.com/odoo/odoo/pull/56427
task-2264627

X-original-commit: 9e3a6429de073ab7ecfeb16c3a6eb505d87719c7
This commit is contained in:
qsm-odoo
2020-08-28 08:19:45 +00:00
committed by Xavier-Do
parent 18725e0cb1
commit 65a34e988e
4 changed files with 155 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/scss/bootstrap_overridden.scss
Vendored
+42
View File
@@ -62,6 +62,48 @@ $headings-color: o-color('o-cc1-headings') !default;
$text-muted: mute-color($body-color) !default;
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
$btn-padding-y: o-website-value('btn-padding-y') !default;
$btn-padding-x: o-website-value('btn-padding-x') !default;
$btn-font-size: o-website-value('btn-font-size') !default;
$btn-padding-y-sm: o-website-value('btn-padding-y-sm') !default;
$btn-padding-x-sm: o-website-value('btn-padding-x-sm') !default;
$btn-font-size-sm: o-website-value('btn-font-size-sm') !default;
$btn-padding-y-lg: o-website-value('btn-padding-y-lg') !default;
$btn-padding-x-lg: o-website-value('btn-padding-x-lg') !default;
$btn-font-size-lg: o-website-value('btn-font-size-lg') !default;
$btn-border-width: o-website-value('btn-border-width') !default;
$btn-border-radius: o-website-value('btn-border-radius') !default;
$btn-border-radius-lg: o-website-value('btn-border-radius-lg') !default;
$btn-border-radius-sm: o-website-value('btn-border-radius-sm') !default;
// Forms
$input-padding-y: o-website-value('input-padding-y') !default;
$input-padding-x: o-website-value('input-padding-x') !default;
$input-font-size: o-website-value('input-font-size') !default;
$input-padding-y-sm: o-website-value('input-padding-y-sm') !default;
$input-padding-x-sm: o-website-value('input-padding-x-sm') !default;
$input-font-size-sm: o-website-value('input-font-size-sm') !default;
$input-padding-y-lg: o-website-value('input-padding-y-lg') !default;
$input-padding-x-lg: o-website-value('input-padding-x-lg') !default;
$input-font-size-lg: o-website-value('input-font-size-lg') !default;
$input-border-width: o-website-value('input-border-width') !default;
$input-border-radius: o-website-value('input-border-radius') !default;
$input-border-radius-lg: o-website-value('input-border-radius-lg') !default;
$input-border-radius-sm: o-website-value('input-border-radius-sm') !default;
// Navbar
// Increase default navbar padding for some navbar styles
addons/website/static/src/scss/primary_variables.scss
+28
View File
@@ -256,6 +256,34 @@ $o-base-website-values-palette: (
'link-underline': 'hover', // 'never' / 'hover' / 'always'
'btn-ripple': false,
'btn-padding-y': null, // Default to BS
'btn-padding-x': null, // Default to BS
'btn-font-size': null, // Default to BS
'btn-padding-y-sm': null, // Default to portal value
'btn-padding-x-sm': null, // Default to portal value
'btn-font-size-sm': null, // Default to BS
'btn-padding-y-lg': null, // Default to BS
'btn-padding-x-lg': null, // Default to BS
'btn-font-size-lg': null, // Default to BS
'btn-border-width': null, // Default to BS
'btn-border-radius': null, // Default to BS
'btn-border-radius-sm': null, // Default to BS
'btn-border-radius-lg': null, // Default to BS
'input-padding-y': null, // Default to BS
'input-padding-x': null, // Default to BS
'input-font-size': null, // Default to BS
'input-padding-y-sm': null, // Default to BS
'input-padding-x-sm': null, // Default to BS
'input-font-size-sm': null, // Default to BS
'input-padding-y-lg': null, // Default to BS
'input-padding-x-lg': null, // Default to BS
'input-font-size-lg': null, // Default to BS
'input-border-width': null, // Default to BS
'input-border-radius': null, // Default to BS
'input-border-radius-sm': null, // Default to BS
'input-border-radius-lg': null, // Default to BS
// A key from the $o-theme-font-configs map (null = default to the first key)
'font': null,
'headings-font': null,
addons/website/static/src/scss/website.scss
+28
View File
@@ -46,6 +46,34 @@ $-seen-urls: ();
$i: $i + 1;
}
@include print-variable('btn-padding-y', $btn-padding-y);
@include print-variable('btn-padding-x', $btn-padding-x);
@include print-variable('btn-font-size', $btn-font-size);
@include print-variable('btn-padding-y-sm', $btn-padding-y-sm);
@include print-variable('btn-padding-x-sm', $btn-padding-x-sm);
@include print-variable('btn-font-size-sm', $btn-font-size-sm);
@include print-variable('btn-padding-y-lg', $btn-padding-y-lg);
@include print-variable('btn-padding-x-lg', $btn-padding-x-lg);
@include print-variable('btn-font-size-lg', $btn-font-size-lg);
@include print-variable('btn-border-width', $btn-border-width);
@include print-variable('btn-border-radius', $btn-border-radius);
@include print-variable('btn-border-radius-sm', $btn-border-radius-sm);
@include print-variable('btn-border-radius-lg', $btn-border-radius-lg);
@include print-variable('input-padding-y', $input-padding-y);
@include print-variable('input-padding-x', $input-padding-x);
@include print-variable('input-font-size', $input-font-size);
@include print-variable('input-padding-y-sm', $input-padding-y-sm);
@include print-variable('input-padding-x-sm', $input-padding-x-sm);
@include print-variable('input-font-size-sm', $input-font-size-sm);
@include print-variable('input-padding-y-lg', $input-padding-y-lg);
@include print-variable('input-padding-x-lg', $input-padding-x-lg);
@include print-variable('input-font-size-lg', $input-font-size-lg);
@include print-variable('input-border-width', $input-border-width);
@include print-variable('input-border-radius', $input-border-radius);
@include print-variable('input-border-radius-sm', $input-border-radius-sm);
@include print-variable('input-border-radius-lg', $input-border-radius-lg);
@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);
addons/website/views/snippets/snippets.xml
+57 -1
View File
@@ -1096,6 +1096,8 @@
<we-fontfamilypicker string="⌙ Headings" data-variable="headings-font"/>
<we-fontfamilypicker string="⌙ Buttons" data-variable="buttons-font"/>
</we-collapse>
<!-- Buttons & Links -->
<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>
@@ -1104,7 +1106,32 @@
<we-button data-customize-website-variable="false">Fill</we-button>
<we-button data-customize-website-variable="true">Outline</we-button>
</we-select>
<we-checkbox string="Ripple Buttons"
<we-collapse>
<we-row string="⌙ Paddings">
<we-input title="Y" data-customize-website-variable="" data-variable="btn-padding-y" data-unit="px" data-save-unit="rem"/>
<we-input title="X" data-customize-website-variable="" data-variable="btn-padding-x" data-unit="px" data-save-unit="rem"/>
</we-row>
<we-row string=" ⌙ Small">
<we-input title="Y" data-customize-website-variable="" data-variable="btn-padding-y-sm" data-unit="px" data-save-unit="rem"/>
<we-input title="X" data-customize-website-variable="" data-variable="btn-padding-x-sm" data-unit="px" data-save-unit="rem"/>
</we-row>
<we-row string=" ⌙ Large">
<we-input title="Y" data-customize-website-variable="" data-variable="btn-padding-y-lg" data-unit="px" data-save-unit="rem"/>
<we-input title="X" data-customize-website-variable="" data-variable="btn-padding-x-lg" data-unit="px" data-save-unit="rem"/>
</we-row>
</we-collapse>
<we-collapse>
<we-input string="⌙ Font Size" data-customize-website-variable="" data-variable="btn-font-size" data-unit="px" data-save-unit="rem"/>
<we-input string=" ⌙ Small" data-customize-website-variable="" data-variable="btn-font-size-sm" data-unit="px" data-save-unit="rem"/>
<we-input string=" ⌙ Large" data-customize-website-variable="" data-variable="btn-font-size-lg" data-unit="px" data-save-unit="rem"/>
</we-collapse>
<we-input string="⌙ Border Width" data-customize-website-variable="" data-variable="btn-border-width" data-unit="px" data-save-unit="rem"/>>
<we-collapse>
<we-input string="⌙ Border Radius" data-customize-website-variable="" data-variable="btn-border-radius" data-unit="px" data-save-unit="rem"/>
<we-input string=" ⌙ Small" data-customize-website-variable="" data-variable="btn-border-radius-sm" data-unit="px" data-save-unit="rem"/>
<we-input string=" ⌙ Large" data-customize-website-variable="" data-variable="btn-border-radius-lg" data-unit="px" data-save-unit="rem"/>
</we-collapse>
<we-checkbox string="⌙ Ripple Effect"
data-customize-website-views="website.option_ripple_effect"
data-customize-website-variable="false|true"
data-variable="btn-ripple"/>
@@ -1113,6 +1140,35 @@
<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>
<!-- Inputs -->
<we-title>Inputs</we-title>
<we-collapse>
<we-row string="⌙ Paddings">
<we-input title="Y" data-customize-website-variable="" data-variable="input-padding-y" data-unit="px" data-save-unit="rem"/>
<we-input title="X" data-customize-website-variable="" data-variable="input-padding-x" data-unit="px" data-save-unit="rem"/>
</we-row>
<we-row string=" ⌙ Small">
<we-input title="Y" data-customize-website-variable="" data-variable="input-padding-y-sm" data-unit="px" data-save-unit="rem"/>
<we-input title="X" data-customize-website-variable="" data-variable="input-padding-x-sm" data-unit="px" data-save-unit="rem"/>
</we-row>
<we-row string=" ⌙ Large">
<we-input title="Y" data-customize-website-variable="" data-variable="input-padding-y-lg" data-unit="px" data-save-unit="rem"/>
<we-input title="X" data-customize-website-variable="" data-variable="input-padding-x-lg" data-unit="px" data-save-unit="rem"/>
</we-row>
</we-collapse>
<we-collapse>
<we-input string="⌙ Font Size" data-customize-website-variable="" data-variable="input-font-size" data-unit="px" data-save-unit="rem"/>
<we-input string=" ⌙ Small" data-customize-website-variable="" data-variable="input-font-size-sm" data-unit="px" data-save-unit="rem"/>
<we-input string=" ⌙ Large" data-customize-website-variable="" data-variable="input-font-size-lg" data-unit="px" data-save-unit="rem"/>
</we-collapse>
<we-input string="⌙ Border Width" data-customize-website-variable="" data-variable="input-border-width" data-unit="px" data-save-unit="rem"/>>
<we-collapse>
<we-input string="⌙ Border Radius" data-customize-website-variable="" data-variable="input-border-radius" data-unit="px" data-save-unit="rem"/>
<we-input string=" ⌙ Small" data-customize-website-variable="" data-variable="input-border-radius-sm" data-unit="px" data-save-unit="rem"/>
<we-input string=" ⌙ Large" data-customize-website-variable="" data-variable="input-border-radius-lg" data-unit="px" data-save-unit="rem"/>
</we-collapse>
<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"/>