[IMP] mail: several emoji picker improvements

- Bigger and centered emojis in grid
- Better visual clue of focused input from search icon
- No search screen with icon + text
- Consistent sizing of emoji picker in case of failure
- Added basic test for active highlighted category

closes odoo/odoo#117001

Signed-off-by: Debondt Didier (did) <did@odoo.com>

addons/mail/static/src/emoji_picker/emoji_picker.js

@@ -296,25 +296,21 @@ export class EmojiPicker extends Component {
     }
 
     selectCategory(ev) {
-        const id = Number(ev.target.dataset.id);
-        if (!isNaN(id)) {
-            this.state.searchStr = "";
-            this.state.categoryId = id;
-            this.shouldScrollElem = true;
-        }
+        const id = Number(ev.currentTarget.dataset.id);
+        this.state.searchStr = "";
+        this.state.categoryId = id;
+        this.shouldScrollElem = true;
     }
 
     selectEmoji(ev) {
-        const codepoints = ev.target.dataset.codepoints;
-        if (codepoints) {
-            this.props.onSelect(codepoints);
-            this.recent[codepoints] ??= 0;
-            this.recent[codepoints]++;
-            browser.localStorage.setItem("mail.emoji.frequent", JSON.stringify(this.recent));
-            this.gridRef.el.scrollTop = 0;
-            this.props.close();
-            this.props.onClose();
-        }
+        const codepoints = ev.currentTarget.dataset.codepoints;
+        this.props.onSelect(codepoints);
+        this.recent[codepoints] ??= 0;
+        this.recent[codepoints]++;
+        browser.localStorage.setItem("mail.emoji.frequent", JSON.stringify(this.recent));
+        this.gridRef.el.scrollTop = 0;
+        this.props.close();
+        this.props.onClose();
     }
 
     highlightActiveCategory() {

addons/mail/static/src/emoji_picker/emoji_picker.scss

@@ -5,11 +5,6 @@
     display: grid;
     grid-template-rows: 34px 35px 1fr;
 
-    &.o-failure {
-        width: 200px;
-        height: 120px;
-    }
-
     .o-mail-Emoji {
         width: 30px;
         font-size: 1.5rem;
@@ -23,13 +18,18 @@
     }
 
     .o-mail-EmojiPicker-empty {
+        font-size: 5rem !important;
         filter: grayscale(0.25);
     }
 
     input:not(:focus) {
-        & + i.oi-search, &::placeholder {
+        &::placeholder {
             opacity: 75%;
         }
+
+        & + i.oi-search {
+            opacity: 60%;
+        }
     }
 }
 

addons/mail/static/src/emoji_picker/emoji_picker.xml

@@ -2,13 +2,13 @@
 <templates xml:space="preserve">
 
 <t t-name="mail.EmojiPicker" owl="1">
-    <div class="o-mail-EmojiPicker bg-white" t-att-class="emojis.length === 0 ? 'd-flex flex-column align-items-center justify-content-center o-failure' : ''" t-on-click="onClick" t-on-keydown="onKeydown">
+    <div class="o-mail-EmojiPicker bg-white" t-att-class="emojis.length === 0 ? 'd-flex flex-column align-items-center justify-content-center' : ''" t-on-click="onClick" t-on-keydown="onKeydown">
         <t t-if="emojis.length === 0">
-            <span class="o-mail-EmojiPicker-empty fs-1">😵‍💫</span>
-            <span class="fs-5">Failed to load emojis...</span>
+            <span class="o-mail-EmojiPicker-empty">😵‍💫</span>
+            <span class="fs-5 text-muted">Failed to load emojis...</span>
         </t>
         <t t-else="">
-            <div class="o-mail-EmojiPicker-header d-flex align-items-center border-bottom overflow-auto bg-100" t-on-click="selectCategory">
+            <div class="o-mail-EmojiPicker-header d-flex align-items-center border-bottom overflow-auto bg-100">
                 <t t-if="recentEmojis.length > 0" t-call="mail.EmojiPicker.tab">
                     <t t-set="category" t-value="recentCategory"/>
                 </t>
@@ -26,7 +26,11 @@
                 <hr class="mx-2 my-0 text-muted"/>
             </div>
             <t t-set="itemIndex" t-value="0"/>
-            <div class="o-mail-EmojiPicker-content overflow-auto d-flex flex-wrap align-content-start align-items-center" t-ref="emoji-grid" t-on-click="selectEmoji" t-on-scroll="highlightActiveCategory">
+            <div class="o-mail-EmojiPicker-content overflow-auto d-flex flex-wrap align-items-center" t-att-class="getEmojis().length === 0 ? 'flex-column justify-content-center' : 'align-content-start'" t-ref="emoji-grid" t-on-scroll="highlightActiveCategory">
+                <t t-if="state.searchStr and getEmojis().length === 0" class="d-flex flex-column">
+                    <span class="o-mail-EmojiPicker-empty">😢</span>
+                    <span class="fs-5 text-muted">No emoji match your search</span>
+                </t>
                 <t t-if="recentEmojis.length > 0 and !state.searchStr">
                     <t t-call="mail.EmojiPicker.section">
                         <t t-set="category" t-value="recentCategory"/>
@@ -59,19 +63,19 @@
 </t>
 
 <t t-name="mail.EmojiPicker.tab" owl="1">
-    <span class="o-mail-Emoji text-center p-1 cursor-pointer" t-att-class="{'o-isActive bg-300': category.sortId === state.categoryId}" t-att-title="category.name" t-att-data-id="category.sortId">
+    <span class="o-mail-Emoji text-center p-1 cursor-pointer" t-att-class="{'o-isActive bg-300': category.sortId === state.categoryId}" t-att-title="category.name" t-att-data-id="category.sortId" t-on-click="selectCategory">
         <t t-esc="category.title"/>
     </span>
 </t>
 
 <t t-name="mail.EmojiPicker.section" owl="1">
-    <span class="w-100 fs-5 p-2 position-sticky top-0 bg-white" t-esc="category.displayName" t-att-data-category="category.sortId"/>
-    <span class="o-mail-EmojiPicker-category opacity-100 fs-5 py-2" t-att-data-category="category.sortId"/>
+    <span class="w-100 fs-6 p-2 position-sticky top-0 bg-white" t-esc="category.displayName" t-att-data-category="category.sortId"/>
+    <span class="o-mail-EmojiPicker-category opacity-100 fs-6 py-2" t-att-data-category="category.sortId"/>
 </t>
 
 <t t-name="mail.EmojiPicker.emoji" owl="1">
-    <span class="o-mail-Emoji p-1 cursor-pointer" t-att-class="{ 'bg-300': state.activeEmojiIndex === itemIndex }" t-att-title="emoji.name" t-att-data-codepoints="emoji.codepoints" t-att-data-index="itemIndex" t-att-data-category="recentCategory.sortId">
-        <t t-esc="emoji.codepoints"/>
+    <span class="o-mail-Emoji cursor-pointer d-flex justify-content-center fs-2" t-att-class="{ 'bg-300': state.activeEmojiIndex === itemIndex }" t-att-title="emoji.name" t-att-data-codepoints="emoji.codepoints" t-att-data-index="itemIndex" t-att-data-category="recentCategory.sortId" t-on-click="selectEmoji">
+        <span t-esc="emoji.codepoints"/>
     </span>
 </t>
 

addons/mail/static/tests/emoji/emoji_tests.js

@@ -141,3 +141,12 @@ QUnit.test("posting :snowman: in message should impact recent", async (assert) =
         "span:contains(Frequently used) ~ .o-mail-Emoji:contains(☃️) ~ span:contains(Smileys & Emotion)"
     );
 });
+
+QUnit.test("first category should be highlight by default", async (assert) => {
+    const pyEnv = await startServer();
+    const channelId = pyEnv["mail.channel"].create({ name: "" });
+    const { openDiscuss } = await start();
+    await openDiscuss(channelId);
+    await click("button[aria-label='Emojis']");
+    assert.containsOnce($, ".o-mail-EmojiPicker-header .o-mail-Emoji:eq(0).bg-300");
+});