Permalink
Browse files

[FIX] web_editor, website: review grays

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 #27637
  • Loading branch information...
qsm-odoo committed Oct 10, 2018
1 parent 1dbb555 commit 1f9bf60260162ae20ff59678db782ddb503cd2a3
@@ -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']
];
});
@@ -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 + '" />');
});
});
}
@@ -904,7 +904,7 @@ table.colorpicker {
clear: both;
}
> button {
button {
float: left;
height: 25px;
width: 25px;
@@ -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>
@@ -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,15 +566,15 @@
<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">
<p class="card-text">These terms of service ("Terms", "Agreement") are an agreement between the website ("Website operator", "us", "we" or "our") and you ("User", "you" or "your"). This Agreement sets forth the general terms and conditions of your use of this website and any of its products or services (collectively, "Website" or "Services").</p>
</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=""/>

0 comments on commit 1f9bf60

Please sign in to comment.