[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
This commit is contained in:
stefanorigano
@@ -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);
|
||||
})
|
||||
|
||||
@@ -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);
|
||||
.o-create-color-classes(~'white-75', @color-white-75);
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
// INPUTS
|
||||
.o_switch {
|
||||
.o-flex-display();
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
|
||||
<template id="assets_editor" name="Full web_editor assets">
|
||||
<t t-call="web.less_helpers"/>
|
||||
|
||||
|
||||
<link rel="stylesheet" type="text/less" href="/web_editor/static/src/less/web_editor.ui.less"/>
|
||||
<link rel="stylesheet" type="text/less" href="/web_editor/static/src/less/web_editor.ui.components.less"/>
|
||||
|
||||
@@ -157,6 +157,7 @@
|
||||
<button data-color="danger">Danger</button>
|
||||
</div>
|
||||
<div class="o_colorpicker_section" data-name="transparent_grayscale" data-icon-class="fa fa-eye-slash">
|
||||
<button class="o_btn_transparent">Transparent</button>
|
||||
<button data-color="black-25">25% Black</button>
|
||||
<button data-color="black-50">50% Black</button>
|
||||
<button data-color="black-75">75% Black</button>
|
||||
|
||||
Reference in New Issue
Block a user