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

[IMP] web_editor: add transparent grayscale color palette

Browse Source 
These colors were usually hardcoded in some snippets (.s_banner for
example) to increase text legibility over background images.

This commit will let the user personalize them.
This commit is contained in:
stefanorigano
2016-08-31 16:37:20 +02:00
committed by qsm-odoo
parent 8ef4535327
commit 8c035a7a41
2 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/less/web_editor.common.less
+16
View File
@@ -246,6 +246,14 @@ a.o_underline {
@color-delta: #0D6759;
@color-epsilon: #0B2E59;
//Greyscale transparent colours
@color-black-25: fade(black, 25%);
@color-black-50: fade(black, 50%);
@color-black-75: fade(black, 75%);
@color-white-25: fade(white, 25%);
@color-white-50: fade(white, 50%);
@color-white-75: fade(white, 75%);
.o-create-color-classes(@class_name, @color, @complementary: contrast(@color, @text-color, #FFF, 60%), @content-color: @color) {
.bg-@{class_name} {
background-color: @color;
@@ -281,3 +289,11 @@ a.o_underline {
.o-create-color-classes(~'gray-light', @gray-light);
.o-create-color-classes(~'gray-lighter', @gray-lighter);
.o-create-color-classes(~'white', @gray-white);
// Create classes for greyscale transparent colours
.o-create-color-classes(~'black-25', @color-black-25);
.o-create-color-classes(~'black-50', @color-black-50);
.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);
addons/web_editor/views/editor.xml
+8
View File
@@ -154,6 +154,14 @@
<button data-color="warning">Warning</button>
<button data-color="danger">Danger</button>
</div>
<div class="o_colorpicker_section" data-name="transparent_grayscale" data-icon-class="fa fa-eye-slash">
<button data-color="black-25">25% Black</button>
<button data-color="black-50">50% Black</button>
<button data-color="black-75">75% Black</button>
<button data-color="white-25">25% White</button>
<button data-color="white-50">50% White</button>
<button data-color="white-75">75% White</button>
</div>
</colorpicker>
</template>
</odoo>