From 5b8c93f073402e05d240ed866624f4eb49ff717a Mon Sep 17 00:00:00 2001 From: stefanorigano Date: Mon, 5 Sep 2016 15:39:05 +0200 Subject: [PATCH] [IMP] web_editor: change design of transparent colors palette * Add a "transparent" button * Add a special background for transparent background buttons + Some minor colorpicker design change --- .../static/src/js/snippets.options.js | 19 +++++--- .../static/src/less/web_editor.common.less | 4 +- .../src/less/web_editor.ui.components.less | 1 - .../static/src/less/web_editor.ui.less | 43 +++++++++++++++---- addons/web_editor/views/editor.xml | 3 +- 5 files changed, 51 insertions(+), 19 deletions(-) diff --git a/addons/web_editor/static/src/js/snippets.options.js b/addons/web_editor/static/src/js/snippets.options.js index cd5c5de71b4..7905da76895 100644 --- a/addons/web_editor/static/src/js/snippets.options.js +++ b/addons/web_editor/static/src/js/snippets.options.js @@ -263,12 +263,14 @@ odoo.define('web_editor.snippets.options', function (require) { } var classes = []; - this.$el.find(".colorpicker button").map(function () { + this.$el.find(".colorpicker button").each(function () { var $color = $(this); + if (!$color.data("color")) { + return; + } + var className = 'bg-' + $color.data('color'); - $color.addClass(className); - if (self.$target.hasClass(className)) { self.color = className; $color.addClass("selected"); @@ -285,14 +287,19 @@ odoo.define('web_editor.snippets.options', function (require) { var $colors = this.$el.find(".colorpicker button"); $colors .mouseenter(function (e) { - self.$target.removeClass(self.classes).addClass('bg-' + $(this).data("color")); + self.$target.removeClass(self.classes); + var color = $(this).data("color"); + if (color) { + self.$target.addClass('bg-' + color); + } self.$target.trigger("background-color-event", e.type); }) .mouseleave(function (e) { self.$target.removeClass(self.classes); var $selected = $colors.filter(".selected"); - if ($selected.length) { - self.$target.addClass('bg-' + $selected.data("color")); + var color = $selected.length && $selected.data("color"); + if (color) { + self.$target.addClass('bg-' + color); } self.$target.trigger("background-color-event", e.type); }) diff --git a/addons/web_editor/static/src/less/web_editor.common.less b/addons/web_editor/static/src/less/web_editor.common.less index 73707a19d1d..a2445e55fea 100644 --- a/addons/web_editor/static/src/less/web_editor.common.less +++ b/addons/web_editor/static/src/less/web_editor.common.less @@ -156,7 +156,7 @@ div.oe_menu_buttons { right: -8px; } -ul.oe_menu_editor { +ul.oe_menu_editor { .fa-home { display: none; } @@ -296,4 +296,4 @@ a.o_underline { .o-create-color-classes(~'black-75', @color-black-75); .o-create-color-classes(~'white-25', @color-white-25); .o-create-color-classes(~'white-50', @color-white-50); -.o-create-color-classes(~'white-75', @color-white-75); \ No newline at end of file +.o-create-color-classes(~'white-75', @color-white-75); diff --git a/addons/web_editor/static/src/less/web_editor.ui.components.less b/addons/web_editor/static/src/less/web_editor.ui.components.less index 0c03c2cbb8e..31d2ce07dac 100644 --- a/addons/web_editor/static/src/less/web_editor.ui.components.less +++ b/addons/web_editor/static/src/less/web_editor.ui.components.less @@ -1,4 +1,3 @@ - // INPUTS .o_switch { .o-flex-display(); diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less index bbf8b6ce764..2870742fec7 100644 --- a/addons/web_editor/static/src/less/web_editor.ui.less +++ b/addons/web_editor/static/src/less/web_editor.ui.less @@ -835,6 +835,7 @@ html[lang] > body.editor_enable{ float: left; margin: 1px 1px 0 0; border-color: black; + .o_alpha_button_preview(); &.o_small { width: 16px; @@ -846,6 +847,10 @@ html[lang] > body.editor_enable{ &.o_clear { clear: both; } + + &.o_btn_transparent { + display: none; + } } } } @@ -973,26 +978,26 @@ table.colorpicker { font-size: 12px; font-weight: bold; text-align: left; + .o_alpha_button_preview(); + &:hover, &.selected { box-shadow: 0px 0px 2px 2px @o-we-color-light; } - &.selected:before { - content: "\f00c"; - font-family: "FontAwesome"; - color: @odoo-brand-optional; - .o-position-absolute(@top: 0, @left: 3px); - font-size: 13px; - line-height: 28px; - } &:after { content: "A"; .o-position-absolute(0, 0); width: 25px; text-align: center; + font-size: 13px; line-height: 28px; font-weight: normal; } + &.selected:after { + content: "\f00c"; + font-family: "FontAwesome"; + color: @brand-success; + } &[data-event="foreColor"] { background-color: @o-we-color-normal; @@ -1008,6 +1013,10 @@ table.colorpicker { padding: 0; margin-right: 5px; } + + &.o_btn_transparent::before { + background-color: transparent; + } } } .note-palette-title { @@ -1022,7 +1031,7 @@ table.colorpicker { .note-color-reset { font-size: 20px!important; color: desaturate(fade(@o-we-color-danger, 60%), 40%); - margin: 3px 0 0; + margin: 1px 0 0; padding: 0; cursor: pointer; &:hover { @@ -1075,3 +1084,19 @@ body.editor_enable { display: none; } } + +// Mixins for buttons with alpha bg-color +.o_alpha_button_preview () { + position: relative; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAClJREFUeNpivHnzJgMSUFNTQ+YyMeAFNJVm/P//PzL/1q1bg8VpAAEGAMiICJs4Ce8uAAAAAElFTkSuQmCC'); + background-size: 10px auto; + z-index: 1; + + // Place an overlay that inherit the button's bg-color. + &::before { + content: ""; + .o-position-absolute(0, 0, 0, 0); + z-index: -1; + background-color: inherit; + } +} diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml index 6c7f23f8822..b92685d6593 100644 --- a/addons/web_editor/views/editor.xml +++ b/addons/web_editor/views/editor.xml @@ -85,7 +85,7 @@