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

[FIX] web_editor, website: review grays

Browse Source 
What was designed as a new feature appeared as a regression: users were
not able to choose a bootstrap gray as a background color anymore but
instead got the possibiility to choose a hardcoded gray. This commit
restores the use of the custom gray palette that themes can customize
and which automatically uses the correct text color when used as a
background. This also allows to remove ugly inline style from snippet
definitions and allows to solve bugs like the described below one:

---------------------------------------
Also add bg-* classes on snippet cards:
---------------------------------------

Snippet cards are often put (or may be put by the user) in an element
which have a bg-* class on it. This means that the card will still have
a white background (as chosen by BS4 by default) but the text color will
be adapted to that ancestor bg-* classed element.

This commit forces the card background color (as suggested by BS4) with
bg-* classes.

closes odoo/odoo#27637
This commit is contained in:
qsm-odoo
2018-10-10 15:09:24 +00:00
parent 1dbb555aab
commit 1f9bf60260
5 changed files with 62 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/rte.js
+18 -1
View File
@@ -7,6 +7,7 @@ var core = require('web.core');
var Widget = require('web.Widget');
var weContext = require('web_editor.context');
var summernote = require('web_editor.summernote');
var summernoteCustomColors = require('web_editor.rte.summernote_custom_colors');
var _t = core._t;
@@ -533,7 +534,8 @@ var RTEWidget = Widget.extend({
'lang': 'odoo',
'onChange': function (html, $editable) {
$editable.trigger('content_changed');
}
},
'colors': summernoteCustomColors,
};
},
/**
@@ -703,3 +705,18 @@ return {
history: history,
};
});
odoo.define('web_editor.rte.summernote_custom_colors', function (require) {
'use strict';
return [
['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#F7F7F7', '#FFFFFF'],
['#FF0000', '#FF9C00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#9C00FF', '#FF00FF'],
['#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE'],
['#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD'],
['#E76363', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5'],
['#CE0000', '#E79439', '#EFC631', '#6BA54A', '#4A7B8C', '#3984C6', '#634AA5', '#A54A7B'],
['#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842'],
['#630000', '#7B3900', '#846300', '#295218', '#083139', '#003163', '#21104A', '#4A1031']
];
});
addons/web_editor/static/src/js/editor/snippets.options.js
+11 -14
View File
@@ -4,7 +4,7 @@ odoo.define('web_editor.snippets.options', function (require) {
var core = require('web.core');
var Dialog = require('web.Dialog');
var Widget = require('web.Widget');
var weContext = require('web_editor.context');
var summernoteCustomColors = require('web_editor.rte.summernote_custom_colors');
var weWidgets = require('web_editor.widget');
var qweb = core.qweb;
@@ -631,7 +631,7 @@ registry.colorpicker = SnippetOption.extend({
var $clpicker = $(qweb.render('web_editor.colorpicker'));
_.each($clpicker.find('.o_colorpicker_section'), function (elem) {
$(elem).prepend("<div class='text-muted mt8'>" + elem.dataset.display + "</div>")
$(elem).prepend("<div class='text-muted mt8'>" + elem.dataset.display + "</div>");
});
// Retrieve excluded palettes list
@@ -651,19 +651,16 @@ registry.colorpicker = SnippetOption.extend({
// Add common colors to palettes if not excluded
if (!('common' in excluded)) {
var colors = [
'#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#F7F7F7', '#FFFFFF',
'#FF0000', '#FF9C00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#9C00FF', '#FF00FF',
'#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE',
'#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD',
'#E76363', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5',
'#CE0000', '#E79439', '#EFC631', '#6BA54A', '#4A7B8C', '#3984C6', '#634AA5', '#A54A7B',
'#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842',
'#630000', '#7B3900', '#846300', '#295218', '#083139', '#003163', '#21104A', '#4A1031'
];
var $commonColorSection = $clpicker.find('[data-name="common"]');
_.each(colors, function (color) {
$commonColorSection.append('<button class="o_custom_color" style="background-color: ' + color + '" />');
_.each(summernoteCustomColors, function (colorRow, i) {
var $div = $('<div/>', {class: 'clearfix'}).appendTo($commonColorSection);
if (i === 0) {
// Ignore the summernote gray palette and use ours
return;
}
_.each(colorRow, function (color) {
$div.append('<button class="o_custom_color" style="background-color: ' + color + '" />');
});
});
}
addons/web_editor/static/src/scss/web_editor.ui.scss
+1 -1
View File
@@ -904,7 +904,7 @@ table.colorpicker {
clear: both;
}
> button {
button {
float: left;
height: 25px;
width: 25px;
addons/web_editor/views/editor.xml
+14 -1
View File
@@ -168,7 +168,20 @@
<button data-color="white-50"></button>
<button data-color="white-75"></button>
</div>
<div class="o_colorpicker_section" data-name="common" data-display="Common Colors" data-icon-class="fa fa-paint-brush"></div>
<div class="o_colorpicker_section" data-name="common" data-display="Common Colors" data-icon-class="fa fa-paint-brush">
<button data-color="black"></button>
<button data-color="white"></button>
<div class="clearfix"/>
<button data-color="900"></button>
<button data-color="800"></button>
<button data-color="700"></button>
<button data-color="600"></button>
<button data-color="500"></button>
<button data-color="400" class="d-none"></button><!-- Hide this one to be able to use it but not display it -->
<button data-color="300"></button>
<button data-color="200"></button>
<button data-color="100"></button>
</div>
</colorpicker>
</template>
</odoo>
addons/website/views/snippets.xml
+18 -18
View File
@@ -78,7 +78,7 @@
<span class="s_parallax_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
<div class="container">
<div class="row s_nb_column_fixed">
<div class="col-lg-7 jumbotron pt32 pb32" style="background-color: rgb(255, 255, 255);" data-name="Box">
<div class="col-lg-7 bg-white jumbotron pt32 pb32" data-name="Box">
<div class="row">
<div class="col-lg-12 s_title s_col_no_bgcolor" data-name="Title">
<h1 class="s_title_thin"><font style="font-size: 62px;"><b>Sell Online.</b> Easily.</font></h1>
@@ -135,11 +135,11 @@
</template>
<template id="s_three_columns" name="Three Columns">
<section class="s_three_columns pt32 pb32" style="background-color: rgb(239, 239, 239);">
<section class="s_three_columns bg-200 pt32 pb32">
<div class="container">
<div class="row d-flex align-items-stretch">
<div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
<div class="card">
<div class="card bg-white">
<img class="card-img-top" src="/web/image/website.library_image_11" alt="Odoo - Sample 1 for three columns"/>
<div class="card-body">
<h3 class="card-title">Feature One</h3>
@@ -148,7 +148,7 @@
</div>
</div>
<div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
<div class="card">
<div class="card bg-white">
<img class="card-img-top" src="/web/image/website.library_image_13" alt="Odoo - Sample 2 for three columns"/>
<div class="card-body">
<h3 class="card-title">Feature Two</h3>
@@ -160,7 +160,7 @@
</div>
</div>
<div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
<div class="card">
<div class="card bg-white">
<img class="card-img-top" src="/web/image/website.library_image_07" alt="Odoo - Sample 3 for three columns"/>
<div class="card-body">
<h3 class="card-title">Feature Three</h3>
@@ -177,7 +177,7 @@
</template>
<template id="s_picture" name="Picture">
<section class="s_picture pt48 pb24" style="background-color: rgb(239, 239, 239);">
<section class="s_picture bg-200 pt48 pb24">
<div class="container">
<div class="row s_nb_column_fixed">
<div class="col-lg-12 s_title pt16 pb16">
@@ -280,7 +280,7 @@
</template>
<template id="s_card" name="Card">
<div class="s_card card w-100" style="background-color: rgba(255,255,255);">
<div class="s_card card bg-white w-100">
<h4 class="card-header">Feature Title</h4>
<div class="card-body">
<p class="card-text">A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.</p>
@@ -366,7 +366,7 @@
</div>
<div class="row">
<div class="col-lg-4 s_col_no_bgcolor text-center pt16 pb16" data-name="Box">
<div class="card" style="background-color: rgb(239, 239, 239);">
<div class="card bg-200">
<h4 class="card-header">Beginner</h4>
<div class="card-body text-center">
<h2 class="card-title">
@@ -510,7 +510,7 @@
</template>
<template id="s_call_to_action" name="Call to Action">
<section class="s_call_to_action pt48 pb24" style="background-color: rgb(239, 239, 239);">
<section class="s_call_to_action bg-200 pt48 pb24">
<div class="container">
<div class="row">
<div class="col-lg-9 pb24">
@@ -529,7 +529,7 @@
</template>
<template id="s_references" name="References">
<section class="s_references pt16 pb16" style="background-color: rgb(239, 239, 239);">
<section class="s_references bg-200 pt16 pb16">
<div class="container">
<div class="row">
<div class="col-lg-2 pt32">
@@ -566,7 +566,7 @@
<div class="row s_col_no_bgcolor">
<div class="col-lg-12 pt16 pb16">
<div id="myCollapse" class="accordion" role="tablist">
<div class="card" style="background-color: rgb(255, 255, 255);">
<div class="card bg-white">
<a href="#" role="tab" data-toggle="collapse" aria-expanded="true" class="card-header text-primary">Terms of service</a>
<div class="collapse show" role="tabpanel">
<div class="card-body">
@@ -574,7 +574,7 @@
</div>
</div>
</div>
<div class="card" style="background-color: rgb(255, 255, 255);">
<div class="card bg-white">
<a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header text-primary">Links to other Websites</a>
<div class="collapse" role="tabpanel">
<div class="card-body">
@@ -583,7 +583,7 @@
</div>
</div>
</div>
<div class="card" style="background-color: rgb(255, 255, 255);">
<div class="card bg-white">
<a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header text-primary">Use of Cookies</a>
<div class="collapse" role="tabpanel">
<div class="card-body">
@@ -670,7 +670,7 @@
<div class="container">
<div class="row s_col_no_bgcolor">
<div class="col-lg-8 offset-lg-2 pt48 pb48">
<div class="card">
<div class="card bg-white">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" role="tablist">
<li class="nav-item">
@@ -763,10 +763,10 @@
<!-- Content -->
<div class="carousel-inner">
<!-- #01 -->
<div class="carousel-item active pt80 pb80" style="background-color: rgb(239, 239, 239);" data-name="Slide">
<div class="carousel-item active bg-200 pt80 pb80" data-name="Slide">
<div class="container">
<div class="row content">
<blockquote class="carousel-content col-lg-6 offset-lg-3" style="background-color: rgb(255, 255, 255);">
<blockquote class="carousel-content col-lg-6 bg-white offset-lg-3">
<i class="fa fa-1x fa-quote-left rounded-0 bg-secondary s_quotes_carousel_icon"/>
<p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
<footer>
@@ -781,7 +781,7 @@
<div class="carousel-item oe_img_bg pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_1'); background-position: 50% 50%;" data-name="Slide">
<div class="container">
<div class="row content">
<blockquote class="col-lg-6" style="background-color: rgb(255, 255, 255);">
<blockquote class="col-lg-6 bg-white">
<p>Odoo provides essential platform for our project management. Things are better organized and more visible with it.</p>
<footer>
<img class="img" src="/web/image/website.s_quotes_carousel_demo_image_4" alt=""/>
@@ -795,7 +795,7 @@
<div class="carousel-item oe_img_bg pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_2'); background-position: 50% 50%;" data-name="Slide">
<div class="container">
<div class="row content">
<blockquote class="col-lg-6 offset-lg-6" style="background-color: rgb(255, 255, 255);">
<blockquote class="col-lg-6 offset-lg-6 bg-white">
<p>Odoo provides essential platform for our project management. Things are better organized and more visible with it.</p>
<footer class="blockquote-footer">
<img class="img" src="/web/image/website.s_quotes_carousel_demo_image_5" alt=""/>