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

[IMP] web_editor: come back to a more regular summernote colorpicker

Browse Source 
Splitting the summernote colorpicker into bg colorpicker and foreground
colorpicker seems to have been a bad idea as people tend to click on
the recent color button thinking it will open a dropdown.

This commit keeps the design that had been decided for colorpicker
template and do not change the "background-color" snippet option.
However, the colors for background and foreground text changes are
now displayed in an unique dropdown again, with reviewed style.

+ adapt the rte tour
This commit is contained in:
qsm-odoo
2016-08-19 17:44:27 +02:00
parent 1d54874c13
commit f196afc80b
4 changed files with 90 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/lib/summernote/src/js/Renderer.js
+19 -45
View File
@@ -31,7 +31,6 @@ define([
var title = options.title;
var className = options.className;
var dropdown = options.dropdown;
var no_caret = options.no_caret;
var hide = options.hide;
return (dropdown ? '<div class="btn-group' +
@@ -48,7 +47,7 @@ define([
(hide ? ' data-hide=\'' + hide + '\'' : '') +
' tabindex="-1">' +
label +
((dropdown && !no_caret)? ' <span class="caret"></span>' : '') +
(dropdown ? ' <span class="caret"></span>' : '') +
'</button>' +
(dropdown || '') +
(dropdown ? '</div>' : '');
@@ -225,52 +224,27 @@ define([
value: '{"backColor":"#B35E9B"}'
});
// This is a copy of web_editor.snippet.option.colorpicker qweb template
var colorpicker_template = '' +
'<div class="dropdown-menu">' +
'<div class="colorpicker">' +
'<div class="note-palette-title">{0}</div>' +
'<div class="btn-group palette-reset">' +
'<div class="note-color-reset" data-event="{2}" data-value="inherit" title="{1}">' +
'<i class="fa fa-ban"></i>' +
'</div>' +
'</div>' +
'<div class="o_colorpicker_sections">' +
'<ul class="nav nav-pills o_colorpicker_section_menu">' +
'<li><a href="#o_palette_spectrum"><i class="fa fa-eyedropper"></i></a></li>' +
'</ul>' +
'<div class="tab-content o_colorpicker_section_tabs">' +
'<div class="tab-pane" id="o_palette_spectrum">' +
'<div class="note-color-palette" data-target-event="{2}"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
var items = [
'<li><div class="btn-group">',
'<div class="note-palette-title">' + lang.color.background + '</div>',
'<div class="note-color-reset" data-event="backColor"',
' data-value="inherit" title="' + lang.color.transparent + '">' + lang.color.setTransparent + '</div>',
'<div class="note-color-palette" data-target-event="backColor"></div>',
'</div><div class="btn-group">',
'<div class="note-palette-title">' + lang.color.foreground + '</div>',
'<div class="note-color-reset" data-event="foreColor" data-value="inherit" title="' + lang.color.reset + '">',
lang.color.resetToDefault,
'</div>',
'<div class="note-color-palette" data-target-event="foreColor"></div>',
'</div></li>'
];
var foreground = formatStr(colorpicker_template, [lang.color.foreground, lang.color.reset, 'foreColor']);
var background = formatStr(colorpicker_template, [lang.color.background, lang.color.transparent, 'backColor']);
var foregroundButton = tplButton('', {
title: lang.color.foreground,
className: 'o_foreground_toggle',
dropdown: foreground,
no_caret: true,
});
var backgroundButton = tplButton('', {
title: lang.color.background,
className: 'o_background_toggle',
dropdown: background,
no_caret: true,
var moreButton = tplButton('', {
title: lang.color.more,
dropdown: tplDropdown(items)
});
return colorButton + foregroundButton + backgroundButton;
function formatStr(str, values) {
return str.replace(/{(\d+)}/g, function (match, number) {
return (values[number] !== undefined)? values[number] : match;
});
};
return colorButton + moreButton;
},
bold: function (lang, options) {
return tplIconButton(options.iconPrefix + options.icons.font.bold, {
addons/web_editor/static/src/js/rte.summernote.js
+23 -50
View File
@@ -46,65 +46,38 @@ renderer.createPalette = function ($container, options) {
var $clpicker = $(QWeb.render('web_editor.colorpicker'));
$container.find('.colorpicker').each(function (i, picker) {
var $picker = $(picker);
var $sections = $clpicker.find('.o_colorpicker_section').clone(true);
var $toggles = $picker.find('.o_colorpicker_section_menu');
var $tabs = $picker.find('.o_colorpicker_section_tabs');
var $defaultToggle = $toggles.find('li');
var $defaultTab = $tabs.find('.tab-pane');
var newDefaultID = _.uniqueId();
$defaultToggle.children('a').attr('href', $defaultToggle.children('a').attr('href') + newDefaultID);
$defaultTab.attr('id', $defaultTab.attr('id') + newDefaultID);
if ($sections.length) {
$sections.each(function () {
var $section = $(this);
var id = 'o_palette_' + $section.data('name') + _.uniqueId();
var $li = $('<li/>')
.append($('<a/>', {href: '#' + id})
.append($('<i/>', {'class': $section.data('iconClass') || '', html: $section.data('iconContent') || ''})));
$defaultToggle.before($li);
$defaultTab.before($section.addClass('tab-pane').attr('id', id));
});
} else {
var id = 'o_palette_other' + _.uniqueId();
var $li = $('<li/>')
.append($('<a/>', {href: '#' + id, 'aria-controls': id})
.append($('<i/>', {'class': 'fa fa-magic'})));
$toggles.prepend($li);
$tabs.prepend($('<div/>', {'class': 'tab-pane', id: id}).append($clpicker.clone(true)));
}
$toggles.find('li:first-child').addClass('active');
$tabs.find('div:first-child').addClass('active');
$toggles.on('click mouseover', '> li > a', function (e) {
e.preventDefault();
e.stopPropagation();
$(this).tab('show');
var groups;
if ($clpicker.is("colorpicker")) {
groups = _.map($clpicker.children(), function (el) {
return $(el).find("button").empty();
});
});
} else {
groups = [$clpicker.find("button").empty()];
}
var $bg = $container.find('.o_background_toggle .dropdown-menu button');
var $fore = $container.find('.o_foreground_toggle .dropdown-menu button');
var html = "<h6>" + _t("Theme colors") + "</h6>" + _.map(groups, function ($group) {
var $row = $("<div/>", {"class": "note-color-row mb8"}).append($group);
var $after_breaks = $row.find(".o_small + :not(.o_small)");
if ($after_breaks.length === 0) {
$after_breaks = $row.find(":nth-child(8n+9)");
}
$after_breaks.addClass("o_clear");
return $row[0].outerHTML;
}).join("") + "<h6>" + _t("Common colors") + "</h6>";
var $palettes = $container.find(".note-color .note-color-palette");
$palettes.prepend(html);
var $bg = $palettes.first().find("button:not(.note-color-btn)").addClass("note-color-btn");
var $fore = $palettes.last().find("button:not(.note-color-btn)").addClass("note-color-btn");
$bg.each(function () {
var $el = $(this);
var className = $el.hasClass('note-color-btn')? $el.attr('title') : ('bg-' + $el.data('color'));
var className = 'bg-' + $el.data('color');
$el.attr('data-event', 'backColor').attr('data-value', className).addClass(className);
});
$fore.each(function () {
var $el = $(this);
var className = $el.hasClass('note-color-btn')? $el.attr('title') : ('text-' + $el.data('color'));
$el.attr('data-event', 'foreColor').attr('data-value', className).addClass(className);
var className = 'text-' + $el.data('color');
$el.attr('data-event', 'foreColor').attr('data-value', className).addClass('bg-' + $el.data('color'));
});
};
addons/web_editor/static/src/js/tour.rte.js
+5 -15
View File
@@ -61,7 +61,7 @@ Tour.register({
},
{
waitFor: '#editable_area > section .row > div:first:not(:has(p font)) h1 font',
element: '.note-color button.dropdown-toggle:visible:first',
element: '.note-color button.dropdown-toggle:visible',
title: "change selection to change text color",
onload: function () {
var $el = $('#editable_area > section .row > div:first:not(:has(p font)) h1 font');
@@ -70,17 +70,12 @@ Tour.register({
}
},
{
title: "Select foreground spectrum colorpanel",
waitFor: ".dropdown-menu:visible",
element: ".dropdown-menu:visible .o_colorpicker_section_menu li:last a",
},
{
element: ".dropdown-menu:visible .note-color-row:eq(1) button[data-event=foreColor]:first",
element: ".dropdown-menu:visible .btn-group:last .note-color-row:eq(1) button[data-event=foreColor]:first",
title: "change text color",
},
{
waitFor: '#editable_area > section .row > div:first h1 font:eq(2)',
element: '.note-color button.dropdown-toggle:visible:last',
element: '.note-color button.dropdown-toggle:visible',
title: "change selection to change text bg-color again",
onload: function () {
var $el = $('#editable_area > section .row > div:first h1 font:eq(2)');
@@ -89,12 +84,7 @@ Tour.register({
}
},
{
title: "Select background spectrum colorpanel",
waitFor: ".dropdown-menu:visible",
element: ".dropdown-menu:visible .o_colorpicker_section_menu li:last a",
},
{
element: ".dropdown-menu:visible .note-color-row:eq(0) button[data-event=backColor]:first",
element: ".dropdown-menu:visible .btn-group:first .note-color-row:eq(0) button[data-event=backColor]:first",
title: "change text backColor again",
},
{
@@ -109,7 +99,7 @@ Tour.register({
},
{
waitFor: ".dropdown-menu:visible",
element: ".dropdown-menu:visible .note-color-row:eq(0) button[data-event=foreColor]:first",
element: ".dropdown-menu:visible .btn-group:last .note-color-row:eq(0) button[data-event=foreColor]:first",
title: "change text foreColor again",
},
{
addons/web_editor/static/src/less/web_editor.ui.less
+43 -25
View File
@@ -726,29 +726,33 @@ html[lang] > body.editor_enable{
.o-text-overflow(inline-block);
max-width: 100px;
}
&.active {
border-top: 2px solid white;
background-color: @o-we-color-dark;
color: @o-we-color-text-light;
box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5);
}
}
.btn.active {
border-top: 2px solid white;
background-color: @o-we-color-dark;
color: @o-we-color-text-light;
box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5);
}
>.btn-group {
margin-top: -2px
}
.btn-group.open .dropdown-toggle {
border-top: 2px solid white;
background-color: @o-we-color-darker;
color: white;
box-shadow: none;
> .btn-group {
margin-top: -2px;
&.open .dropdown-toggle {
border-top: 2px solid white;
background-color: @o-we-color-darker;
color: white;
box-shadow: none;
}
}
.dropdown-menu {
margin: 0;
border-radius: 0;
background-color: @o-we-color-darker;
color: @o-we-color-text-normal;
> li > a {
width: 100%;
color: @o-we-color-text-light;
&:hover {
background-color: @o-we-tab-active-bg;
color: white;
@@ -765,16 +769,31 @@ html[lang] > body.editor_enable{
border: 1px solid #989898;
border-color: fadeOut(@o-we-color-text-normal, 0.5);
}
.note-color-palette td > button, .note-color-palette div .note-color-btn {
border-color: fadeOut(white, 50%);
border-radius: 0;
margin: 1px;
}
.note-color-palette .note-color-row {
height: auto!important;
// COLORPICKER
.note-color {
border: 1px solid @o-we-color-divider;
border-width: 0 1px;
&::after {
content: "";
display: table;
clear: both;
}
.note-color-btn {
float: left;
margin: 1px 1px 0 0;
border-color: black;
&.o_small {
width: 16px;
height: 16px;
margin: 3px 3px 2px 2px;
border-radius: 50%;
}
&.o_clear {
clear: both;
}
}
}
}
}
@@ -804,8 +823,7 @@ html[lang] > body.editor_enable{
content: '\f0c3';
}
.dropdown-menu {
min-width: 250px!important;
padding: 0!important;
min-width: 353px!important;
}
}
}