[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:
@@ -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
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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>'+
|
||||
|
||||
Reference in New Issue
Block a user