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

[IMP] web_editor: highlight the selected image/icon

Browse Source 
When we selected an image/icon, there was no visual feedback explaining
to the user that the image/icon had been selected (except for images on
chrome).

task-35020
Closes https://github.com/odoo/odoo/pull/24160
This commit is contained in:
Kishan Gajjar
2018-05-23 11:57:49 +02:00
committed by qsm-odoo
parent 473c74f636
commit 5766fac388
3 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/rte.summernote.js
+5 -4
View File
@@ -212,7 +212,9 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
// stop animation when edit content
var previous = $(".note-control-selection").data('target');
if (previous) {
$(previous).css({"-webkit-animation-play-state": "", "animation-play-state": "", "-webkit-transition": "", "transition": "", "-webkit-animation": "", "animation": ""});
var $previous = $(previous);
$previous.css({"-webkit-animation-play-state": "", "animation-play-state": "", "-webkit-transition": "", "transition": "", "-webkit-animation": "", "animation": ""});
$previous.find('.o_we_selected_image').addBack('.o_we_selected_image').removeClass('o_we_selected_image');
}
// end
@@ -229,8 +231,9 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
$container.find('a[data-event="padding"][data-value="xl"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-xl"));
$container.find('a[data-event="padding"][data-value=""]').parent().toggleClass("active", !$container.find('.active a[data-event="padding"]').length);
if (dom.isImgFont(oStyle.image)) {
$(oStyle.image).addClass('o_we_selected_image');
if (dom.isImgFont(oStyle.image)) {
$container.find('.btn-group:not(.only_fa):has(button[data-event="resize"],button[data-value="img-thumbnail"])').addClass("hidden");
$container.find('.only_fa').removeClass("hidden");
$container.find('button[data-event="resizefa"][data-value="2"]').toggleClass("active", $(oStyle.image).hasClass("fa-2x"));
@@ -243,7 +246,6 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
$container.find('button[data-event="imageShape"][data-value="shadow"]').toggleClass("active", $(oStyle.image).hasClass("shadow"));
} else {
$container.find('.hidden:not(.only_fa)').removeClass("hidden");
$container.find('.only_fa').addClass("hidden");
var width = ($(oStyle.image).attr('style') || '').match(/(^|;|\s)width:\s*([0-9]+%)/);
@@ -262,7 +264,6 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
}
$container.find('.note-color').addClass("hidden");
}
$container.find('button[data-event="floatMe"][data-value="left"]').toggleClass("active", $(oStyle.image).hasClass("pull-left"));
addons/web_editor/static/src/js/editor/snippets.editor.js
+4
View File
@@ -637,10 +637,14 @@ var SnippetsMenu = Widget.extend({
_.each(this.snippetEditors, function (snippetEditor) {
snippetEditor.cleanForSave();
});
this.$editable.find('[contentEditable]')
.removeAttr('contentEditable')
.removeProp('contentEditable');
this.$editable.find('.o_we_selected_image')
.removeClass('o_we_selected_image');
// Removing query_string used to invalidate cache during image crop
_.each(this.$editable.find('.o_cropped_img_to_clean'), function (croppedImg) {
var $croppedImg = $(croppedImg);
addons/web_editor/static/src/scss/web_editor.ui.scss
+14
View File
@@ -1686,3 +1686,17 @@ body .modal {
}
}
}
// Highlight selected image/icon
%o-we-selected-image {
$o-selected-image-color: rgba(150, 150, 220, 0.3);
background: $o-selected-image-color;
outline: 3px solid $o-selected-image-color;
}
img.o_we_selected_image {
@extend %o-we-selected-image;
}
.fa.o_we_selected_image::before {
@extend %o-we-selected-image;
}