[IMP] web_editor: improve icon color edition

- Make sure icon colors can be edited the same way as text
- Improve recent color behavior
This commit is contained in:
dbh
2017-06-14 17:49:56 +02:00
committed by qsm-odoo
parent 6ad2ae3035
commit 137c4f5d76
3 changed files with 50 additions and 23 deletions
@@ -67,8 +67,8 @@ renderer.createPalette = function ($container, options) {
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");
var $bg = $palettes.filter(":even").find("button:not(.note-color-btn)").addClass("note-color-btn");
var $fore = $palettes.filter(":odd").find("button:not(.note-color-btn)").addClass("note-color-btn");
$bg.each(function () {
var $el = $(this);
var className = 'bg-' + $el.data('color');
@@ -146,10 +146,7 @@ renderer.tplPopovers = function (lang, options) {
})).appendTo($resizefa);
}
var $colorfa = $airPopover.find('.note-color').clone();
$colorfa.find(".btn-group:first").remove();
$colorfa.find("ul.dropdown-menu").css('min-width', '172px');
$colorfa.find('button[data-event="color"]').attr('data-value', '{"foreColor": "#f00"}')
.find("i").css({'background': '', 'color': '#f00'});
$resizefa.after($colorfa);
// show dialog box and delete
+46 -16
View File
@@ -1872,23 +1872,51 @@ $.summernote.pluginEvents.removeFormat = function (event, editor, layoutInfo, va
var fn_boutton_updateRecentColor = eventHandler.modules.toolbar.button.updateRecentColor;
eventHandler.modules.toolbar.button.updateRecentColor = function (elBtn, sEvent, sValue) {
fn_boutton_updateRecentColor.call(this, elBtn, sEvent, sValue);
var font = $(elBtn).closest('.note-color').find('.note-recent-color i')[0];
var $recentcolor = $.find('.note-recent-color i');
var $recentcolorbtn = $.find('.note-recent-color');
if (sEvent === "foreColor") {
if (sValue.indexOf('text-') !== -1) {
font.className += ' ' + sValue;
font.style.color = '';
//find last used color for fonts or for icons
//set this color into recentcolor button of both font and icon
for (var i in $recentcolor) {
var $font = $recentcolor[i];
var $button = $($recentcolorbtn[i]);
var className = $font.className.split(/\s+/);
if (sEvent === "foreColor") {
//set class for forecolor to recentcolor button font-icon
for (var k=2; k<className.length; k++) {
if (className[k].length && className[k].slice(0,5) === "text-") {
className.splice(k,1);
k--;
}
}
if (sValue.indexOf('text-') !== -1) {
$font.className = className.join(' ') + ' ' + sValue;
$font.style.color = '';
} else {
$font.className = $font.className.replace(/(^|\s+)text-\S+/, '');
$font.style.color = sValue !== 'inherit' ? sValue : "";
}
} else {
font.className = font.className.replace(/(^|\s+)text-\S+/);
font.style.color = sValue !== 'inherit' ? sValue : "";
//set class for backcolor to recentcolor button font-icon
for (var k=2; k<className.length; k++) {
if (className[k].length && className[k].slice(0,3) === "bg-") {
className.splice(k,1);
k--;
}
}
if (sValue.indexOf('bg-') !== -1) {
$font.className =className.join(' ') + ' ' + sValue;
$font.style.backgroundColor = "";
} else {
$font.className = $font.className.replace(/(^|\s+)bg-\S+/, '');
$font.style.backgroundColor = sValue !== 'inherit' ? sValue : "";
}
}
} else {
if (sValue.indexOf('bg-') !== -1) {
font.className += ' ' + sValue;
font.style.backgroundColor = "";
} else {
font.className = font.className.replace(/(^|\s+)bg-\S+/, '');
font.style.backgroundColor = sValue !== 'inherit' ? sValue : "";
if (sValue !== 'inherit') {
//set attribute for color to the recentcolor button
var colorInfo = JSON.parse($button.attr('data-value'));
colorInfo[sEvent] = sValue;
$button.attr('data-value', JSON.stringify(colorInfo));
}
}
return false;
@@ -2089,8 +2117,9 @@ $.summernote.pluginEvents.applyFont = function (event, editor, layoutInfo, color
}
// remove node without attributes (move content), and merge the same nodes
var className2, style, style2, $prev;
for (var i=0; i<nodes.length; i++) {
if (!dom.isImgFont(node)) {
var className2, style, style2, $prev;
for (var i=0; i<nodes.length; i++) {
node = nodes[i];
if ((dom.isText(node) || dom.isBR(node)) && !dom.isVisibleText(node)) {
@@ -2128,6 +2157,7 @@ $.summernote.pluginEvents.applyFont = function (event, editor, layoutInfo, color
continue;
}
}
}
}
range.create(startPoint.node, startPoint.offset, endPoint.node, endPoint.offset).select();
+2 -2
View File
@@ -61,7 +61,7 @@ odoo.define('web_editor.tour', function (require) {
trigger: ".note-color button.dropdown-toggle",
}, {
content: "change text color",
trigger: "button[data-event=foreColor]:first",
trigger: ".btn-group.open button[data-event=foreColor]:first",
}, {
content: "change selection to change text bg-color again",
trigger: '#editable_area > section .row > div:first h1 font:eq(2)',
@@ -218,7 +218,7 @@ odoo.define('web_editor.tour', function (require) {
}, {
content: "add ul content",
trigger: '#editable_area > section .row > div:first',
extra_trigger: 'body:not(:has(#editable_area > section .row > div:first p:eq(4), #editable_area > section .row > div:eq(3))) #editable_area > section .row > div:first p:eq(3)',
extra_trigger: 'body:not(:has(#editable_area > section .row > div:first p:eq(5), #editable_area > section .row > div:eq(3))) #editable_area > section .row > div:first p:eq(3)',
run: function () {
var html = ' <ul> '+
'\n <li> <p>Batnae municipium. </p></li>'+