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

[REF] web, web_editor, *: review theme color extensions

Browse Source 
* survey, website_slides

Before this commit, the web_editor app created bg and text classes its
own way for theming (alpha, beta, grays, ...). Now the system is far
more automatic by extending BS4 color maps.
This commit is contained in:
qsm-odoo
2018-07-27 12:36:54 +02:00
parent cd3f5bbfda
commit 76f714dca8
14 changed files with 153 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/survey/views/survey_templates.xml
+1 -1
View File
@@ -13,7 +13,7 @@
<t t-call="web._assets_frontend_helpers"/>
<link href="/web/static/lib/nvd3/nv.d3.css" rel="stylesheet" type="text/css"></link>
<link rel="stylesheet" type="text/less" href="/web/static/src/scss/import_bootstrap.scss"/>
<t t-call="web._assets_bootstrap"/>
<link rel="stylesheet" type="text/less" href="/web/static/src/scss/fonts.scss" />
<!-- Some helper classes (like mt- mb-) are required for survey templates -->
<link rel="stylesheet" type="text/less" href="/web_editor/static/src/scss/web_editor.common.scss"/>
addons/web/static/src/scss/bootstrap_overridden_frontend.scss
Vendored
+3
View File
@@ -0,0 +1,3 @@
$black: black;
$white: white;
addons/web/static/src/scss/bs_mixins_overrides.scss
+38
View File
@@ -0,0 +1,38 @@
//------------------------------------------------------------------------------
// Bootstrap Mixins and Functions Extensions
// Those will affect the way bootstrap is generated wherever bootstrap is used
//------------------------------------------------------------------------------
// Override background utilities so that they come with a default contrasted
// color (especially useful in the frontend editor for example). Also modifies
// the way .text-muted elements are rendered in those environments.
@mixin bg-variant($parent, $color, $text-color: null) {
#{$parent} {
$-yiq-color: if($text-color, $text-color, color-yiq($color));
background-color: $color !important;
color: $-yiq-color; // not important so that text utilities still work
.text-muted {
color: rgba($-yiq-color, 0.4) !important;
}
}
a#{$parent},
button#{$parent} {
$-darken-color: darken($color, 10%);
@include hover-focus {
background-color: $-darken-color !important;
color: if($text-color, $text-color, color-yiq($-darken-color));
}
}
}
@mixin bg-gradient-variant($parent, $color, $text-color: null) {
#{$parent} {
$-yiq-color: if($text-color, $text-color, color-yiq($color));
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
color: $-yiq-color;
.text-muted {
color: rgba($-yiq-color, 0.4) !important;
}
}
}
addons/web/static/src/scss/import_bootstrap.scss
-1
View File
@@ -1 +0,0 @@
@import "bootstrap";
addons/web/static/src/scss/import_bootstrap_part1.scss
+11
View File
@@ -0,0 +1,11 @@
// This file is importing bootstrap. While a simple "import "bootstrap";"
// should be enough, this does not allow overridding mixins. Overridding mixins
// is necessary for some of our need and allow to generate more efficient CSS
// than adding more rules. This file instead copies the first part of the
// content of the "bootstrap.scss" files to allow adding mixin overrides in
// between.
@import "functions";
@import "variables";
@import "mixins";
addons/web/static/src/scss/import_bootstrap_part2.scss
+40
View File
@@ -0,0 +1,40 @@
// This file is importing bootstrap. While a simple "import "bootstrap";"
// should be enough, this does not allow overridding mixins. Overridding mixins
// is necessary for some of our need and allow to generate more efficient CSS
// than adding more rules. This file instead copies the second part of the
// content of the "bootstrap.scss" files to allow adding mixin overrides in
// between.
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "utilities";
@import "print";
addons/web/views/report_templates.xml
+1 -1
View File
@@ -5,7 +5,7 @@
<template id="report_assets_common">
<t t-call="web._assets_helpers"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap.scss"/>
<t t-call="web._assets_bootstrap"/>
<link href="/base/static/src/css/description.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/>
addons/web/views/webclient_templates.xml
+9 -2
View File
@@ -4,6 +4,7 @@
<link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/_functions.scss"/>
<link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/_mixins.scss"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/utils.scss"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/bs_mixins_overrides.scss"/>
</template>
<template id="_assets_primary_variables">
@@ -35,6 +36,12 @@
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/bootstrap_overridden_frontend.scss"/>
</template>
<template id="_assets_bootstrap">
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap_part1.scss"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/bs_mixins_overrides.scss"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap_part2.scss"/>
</template>
<template id="assets_common" name="Common Assets (used in backend interface and website)">
<t t-call="web._assets_helpers"/>
@@ -128,7 +135,7 @@
<template id="assets_backend" name="Backend Assets (used in backend interface)">
<t t-call="web._assets_backend_helpers"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap.scss"/>
<t t-call="web._assets_bootstrap"/>
<link rel="stylesheet" type="text/scss" href="/web/static/lib/tempusdominus/tempusdominus.scss"/>
<link rel="stylesheet" type="text/css" href="/base/static/src/css/modules.css"/>
@@ -294,7 +301,7 @@
<template id="web.assets_frontend" name="Website Assets">
<t t-call="web._assets_frontend_helpers"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap.scss"/>
<t t-call="web._assets_bootstrap"/>
<link rel="stylesheet" type="text/scss" href="/web/static/lib/tempusdominus/tempusdominus.scss"/>
<script type="text/javascript" src="/web/static/src/js/services/session.js"></script>
addons/web_editor/controllers/main.py
+1 -1
View File
@@ -285,7 +285,7 @@ class Web_Editor(http.Controller):
if get_scss:
# Compile regex outside of the loop
# This will used to exclude library scss files from the result
excluded_url_matcher = re.compile("^(.+/lib/.+)|(.+import_bootstrap.scss)$")
excluded_url_matcher = re.compile("^(.+/lib/.+)|(.+import_bootstrap.+\.scss)$")
# Load already customized scss files attachments
custom_attachments = request.env["ir.attachment"].search([("url", "=like", self._make_custom_scss_file_url("%%.%%", "%%"))])
addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss
+28
View File
@@ -0,0 +1,28 @@
// Automatically extend bootstrap to create theme background/text/button classes
$theme-colors: () !default;
$theme-colors: map-merge((
'alpha': $color-alpha,
'beta': $color-beta,
'gamma': $color-gamma,
'delta': $color-delta,
'epsilon': $color-epsilon,
), $theme-colors);
// Extend grays with transparent ones (for some reason, BS4 create black-50 and
// white-50 but does not allow overridding that with variables). Also add black
// and white ones too as they were also not added by BS4...
$grays: () !default;
$grays: map-merge((
'black-25': $color-black-25,
'black-50': $color-black-50,
'black-75': $color-black-75,
'white-25': $color-white-25,
'white-50': $color-white-50,
'white-75': $color-white-75,
// Note: those two needs to be redefined before bootstrap, otherwise they
// do not exist yet
'black': $black,
'white': $white,
), $grays);
addons/web_editor/static/src/scss/web_editor.common.scss
+5 -37
View File
@@ -229,40 +229,8 @@ a.o_underline {
}
}
// Create classes for theme colors...
@include o-create-color-classes(alpha, $color-alpha);
@include o-create-color-classes(beta, $color-beta);
@include o-create-color-classes(gamma, $color-gamma);
@include o-create-color-classes(delta, $color-delta);
@include o-create-color-classes(epsilon, $color-epsilon);
// ... and button classes
@include o-create-color-btn-classes(alpha, $color-alpha);
@include o-create-color-btn-classes(beta, $color-beta);
@include o-create-color-btn-classes(gamma, $color-gamma);
@include o-create-color-btn-classes(delta, $color-delta);
@include o-create-color-btn-classes(epsilon, $color-epsilon);
// Create classes for UI colors // FIXME
@include o-create-color-classes(primary, theme-color('primary'));
// @include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text);
// @include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text);
// @include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text);
// @include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text);
// Create classes for greyscale colors
@include o-create-color-classes('black', $black);
@include o-create-color-classes('gray-darker', gray('900')); // FIXME
@include o-create-color-classes('gray-dark', gray('900'));
@include o-create-color-classes('gray', gray('700'));
@include o-create-color-classes('gray-light', gray('600'));
@include o-create-color-classes('gray-lighter', gray('200'));
@include o-create-color-classes('white', $white);
// Create classes for greyscale transparent colours
@include o-create-color-classes('black-25', $color-black-25);
@include o-create-color-classes('black-50', $color-black-50);
@include o-create-color-classes('black-75', $color-black-75);
@include o-create-color-classes('white-25', $color-white-25);
@include o-create-color-classes('white-50', $color-white-50);
@include o-create-color-classes('white-75', $color-white-75);
// Extend bootstrap to create background and text utilities for gray colors too
@each $color, $value in $grays {
@include bg-variant(".bg-#{$color}", $value);
@include text-emphasis-variant(".text-#{$color}", $value);
}
addons/web_editor/static/src/scss/web_editor.variables.scss
-18
View File
@@ -234,24 +234,6 @@ $color-white-25: rgba(white, 0.25) !default;
$color-white-50: rgba(white, 0.5) !default;
$color-white-75: rgba(white, 0.75) !default;
@mixin o-create-color-classes($name, $color, $complementary: o-get-most-contrast($color, $body-color, #FFF), $content-color: $color) {
.bg-#{$name} {
background-color: $color;
color: $complementary;
.text-muted {
color: rgba($complementary, 0.4);
}
}
body .text-#{$name} { // body to make the rules more important that bg-* ones
color: $content-color;
}
}
@mixin o-create-color-btn-classes($name, $color, $complementary: o-get-most-contrast($color, $body-color, #FFF), $border-color: darken($color, 5%)) {
.btn-#{$name} {
@include button-variant($complementary, $color, $border-color);
}
}
// Translations
$o-we-content-to-translate-color: rgb(255, 255, 90) !default;
$o-we-translated-content-color: rgb(120, 215, 110) !default;
addons/web_editor/views/editor.xml
+15 -5
View File
@@ -66,6 +66,12 @@
</xpath>
</template>
<template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.bootstrap.scss"/>
</xpath>
</template>
<template id="assets_backend" inherit_id="web.assets_backend" name="Web Editor Backend Assets (used in backend interface)">
<xpath expr="link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/> <!-- not in common because compiled differently with context -->
@@ -76,6 +82,12 @@
</xpath>
</template>
<template id="_assets_frontend_helpers" inherit_id="web._assets_frontend_helpers">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.bootstrap.scss"/>
</xpath>
</template>
<template id="assets_frontend" inherit_id="web.assets_frontend" name="Web Editor Frontend Assets (used in public odoo)" priority="15">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/> <!-- not in common because compiled differently with context -->
@@ -149,11 +161,9 @@
</div>
<div class="o_colorpicker_section" data-name="grayscale" data-icon-class="fa fa-database">
<button data-color="white">White</button>
<button data-color="gray-lighter">Gray Lighter</button>
<button data-color="gray-light">Gray Light</button>
<button data-color="gray">Gray</button>
<button data-color="gray-dark">Gray Dark</button>
<button data-color="gray-darker">Gray Darker</button>
<t t-foreach="[100, 200, 300, 400, 500, 600, 700, 800, 900]" t-as="gray">
<button t-att-data-color="gray">Gray <t t-esc="gray"/></button>
</t>
<button data-color="black">Black</button>
</div>
<div class="o_colorpicker_section" data-name="ui" data-icon-class="fa fa-paint-brush">
addons/website_slides/views/website_slides_embed.xml
+1 -1
View File
@@ -3,7 +3,7 @@
<data>
<!-- Bundle (minimal) for embedded slide iframe -->
<template id="website_slides.slide_embed_assets" name="Website slides embed assets">
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap.scss"/>
<t t-call="web._assets_bootstrap"/>
<link rel="stylesheet" type="text/scss" href="/website_slides/static/src/scss/website_slides.scss" t-ignore="true"/>
<t t-call="web.pdf_js_lib"></t>