diff options
Diffstat (limited to 'addons/web_editor')
| -rw-r--r-- | addons/web_editor/controllers/main.py | 2 | ||||
| -rw-r--r-- | addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss | 28 | ||||
| -rw-r--r-- | addons/web_editor/static/src/scss/web_editor.common.scss | 42 | ||||
| -rw-r--r-- | addons/web_editor/static/src/scss/web_editor.variables.scss | 18 | ||||
| -rw-r--r-- | addons/web_editor/views/editor.xml | 20 |
5 files changed, 49 insertions, 61 deletions
diff --git a/addons/web_editor/controllers/main.py b/addons/web_editor/controllers/main.py index 22a1e514d88..7dbc3415f21 100644 --- a/addons/web_editor/controllers/main.py +++ b/addons/web_editor/controllers/main.py @@ -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("%%.%%", "%%"))]) diff --git a/addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss b/addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss new file mode 100644 index 00000000000..b7ad30b1bc4 --- /dev/null +++ b/addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss @@ -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); diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss index 31ae70b766c..11fa94cd010 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -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); +} diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index 552e4dfe262..203b27fc886 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -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; diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml index 3d7d36f18a9..9fa14472206 100644 --- a/addons/web_editor/views/editor.xml +++ b/addons/web_editor/views/editor.xml @@ -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"> |