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

[IMP] mail : improve emoji widget code to ease overrides

Browse Source 
This commit attempts to improve emoji widget css and code to make it easily
overridable by other modules. This is done in preparation for extension by the
SmsWidget that will enable the emojis support.

To improve the emoji widget, the following changes have been made

  * remove the spacing after emoji fields by setting widget dropdown height to
    0 (emoji dropdown has relative position + (height > 0) which leaves an
    empty space after widget fields);
  * hide Emoji widget when field has "invisible modifier";
  * move the code that adds the emoji dropdown to another method, allowing to
    better understand code organization;

Task ID-2224393
PR #49096
This commit is contained in:
xO-Tx
2020-08-11 14:38:32 +00:00
committed by Thibault Delavallée
parent 6286f8aab7
commit 6b7e20da3f
2 changed files with 42 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/js/text_emojis_fields.js
+33 -26
View File
@@ -24,34 +24,10 @@ var FieldEmojiCommon = {
},
/**
* This will add an emoji button that shows the emojis selection dropdown.
*
* We use 'on_attach_callback' because we need the element to be attached to the form first.
* That's because the $emojisIcon element needs to be rendered outside of this $el
* (which is an text element, that can't 'contain' any other elements).
*
* @override
*/
on_attach_callback: function () {
if (!this.$emojisIcon) {
this.$emojisIcon = $(QWeb.render('mail.EmojisDropdown', {widget: this}));
this.$emojisIcon.find('.o_mail_emoji').on('click', this._onEmojiClick.bind(this));
if (this.$el.filter('span.o_field_translate').length) {
// multi-languages activated, place the button on the left of the translation button
this.$emojisIcon.addClass('o_mail_emojis_dropdown_translation');
}
if (this.$el.filter('textarea').length) {
this.$emojisIcon.addClass('o_mail_emojis_dropdown_textarea');
}
this.$el.last().after(this.$emojisIcon);
}
if (this.mode === 'edit') {
this.$emojisIcon.show();
} else {
this.$emojisIcon.hide();
}
this._attachEmojisDropdown();
},
//--------------------------------------------------------------------------
@@ -122,6 +98,37 @@ var FieldEmojiCommon = {
*/
_triggerOnchange: function () {
this.$input.trigger('change');
},
/**
* This will add an emoji button that shows the emojis selection dropdown.
*
* Should be used inside 'on_attach_callback' because we need the element to be attached to the form first.
* That's because the $emojisIcon element needs to be rendered outside of this $el
* (which is an text element, that can't 'contain' any other elements).
*
* @private
*/
_attachEmojisDropdown: function () {
if (!this.$emojisIcon) {
this.$emojisIcon = $(QWeb.render('mail.EmojisDropdown', {widget: this}));
this.$emojisIcon.find('.o_mail_emoji').on('click', this._onEmojiClick.bind(this));
if (this.$el.filter('span.o_field_translate').length) {
// multi-languages activated, place the button on the left of the translation button
this.$emojisIcon.addClass('o_mail_emojis_dropdown_translation');
}
if (this.$el.filter('textarea').length) {
this.$emojisIcon.addClass('o_mail_emojis_dropdown_textarea');
}
this.$el.last().after(this.$emojisIcon);
}
if (this.mode === 'edit') {
this.$emojisIcon.show();
} else {
this.$emojisIcon.hide();
}
}
};
@@ -138,6 +145,6 @@ var FieldCharEmojis = basicFields.FieldChar.extend(MailEmojisMixin, FieldEmojiCo
registry.add('text_emojis', FieldTextEmojis);
registry.add('char_emojis', FieldCharEmojis);
return {FieldTextEmojis: FieldTextEmojis, FieldCharEmojis: FieldCharEmojis};
return {FieldTextEmojis: FieldTextEmojis, FieldCharEmojis: FieldCharEmojis, FieldEmojiCommon: FieldEmojiCommon};
});
addons/mail/static/src/scss/emojis.scss
+9
View File
@@ -17,6 +17,15 @@ $o-mail-emoji-height: 2rem;
}
}
.o_form_view {
// Emojis widgets should hide the emoji dropdown button when the field is invisible.
// This is necessary because the button is added *after* the main element (and not inside)
// (see '_attachEmojisDropdown' for more details)
.o_invisible_modifier + .o_mail_add_emoji{
display: none !important;
}
}
.o_mail_emojis_dropdown {
height: $o-mail-emoji-height;
width: 40px;