Some improvements to the chat toolbar UI

Fix rendering of skintone picker.

src/shared/chat/styles/emoji.scss

@@ -68,7 +68,8 @@
             }
             .emoji-skintone-picker {
                 display: flex;
-                padding: 0.5em 0;
+                padding: 0.5em 0 0.5em 0.5em;
+                color: var(--subdued-color);
                 background-color: var(--chat-head-color);
                 width: 100%;
                 font-size: var(--font-size);
@@ -76,6 +77,7 @@
                     display: flex;
                     flex-direction: row;
                     flex-wrap: wrap;
+                    padding-left: 0;
                     li {
                         padding: 0 0.25em;
                     }
@@ -96,11 +98,6 @@
                     list-style: none;
                     position: relative;
                     &.insert-emoji {
-                        padding: 0 0.2em;
-                        height: auto;
-                        width: auto;
-                        margin: 0;
-                        display: block;
                         text-align: center;
                         &.selected a {
                             background-color: var(--highlight-color-darker);
@@ -142,7 +139,7 @@
                 ul {
                     display: flex;
                     flex-direction: row;
-                    flex-wrap: wrap;
+                    padding-left: 0;
 
                     .emoji-category {
                         padding: 0.25em 0;

src/shared/chat/styles/toolbar.scss

@@ -1,44 +1,27 @@
 .conversejs {
 
-    converse-chat-toolbar {
-        .btn {
-            padding: 0.25em 0.5em !important;
-        }
-
-        .send-button {
-            border-radius: 0;
-            bottom: var(--send-button-bottom);
-            color: var(--inverse-link-color);
-        }
-    }
-
-    .chatbox {
-        .send-button {
-            color: var(--background);
-            background-color: var(--chat-toolbar-btn-color);
-        }
-    }
-
-    .chatroom {
-        .send-button {
-            background-color: var(--muc-toolbar-btn-color);
-        }
-    }
-
-    .chat-toolbar {
+    converse-chat-toolbar.btn-toolbar {
+        background-color: var(--chat-background-color);
+        box-sizing: border-box;
+        width: 100%;
         justify-content: space-between;
+        margin-bottom: 1px; // So that bottom border on toolbar buttons is visible
+
         .toolbar-buttons {
             .message-limit {
                 padding: 0.5em;
                 font-weight: bold;
             }
         }
-    }
 
-    converse-chat-toolbar {
-        background-color: var(--chat-background-color);
-        box-sizing: border-box;
-        width: 100%;
+        .btn {
+            padding: 0.25em 0.5em !important;
+        }
+
+        .send-button {
+            color: var(--background);
+            border-radius: 0;
+        }
 
         .fa, .fa:hover,
         .far, .far:hover,
@@ -53,20 +36,21 @@
         .unencrypted {
             color: var(--text-color);
         }
+    }
 
-        button {
-            border: 1px transparent solid;
-            background-color: transparent;
+    .chatbox {
+        .send-button {
+            background-color: var(--chat-toolbar-btn-color);
+        }
+    }
 
-            &.send-button {
-                padding-top: 0.2em;
-                padding-bottom: 0.2em;
-                margin: 0;
-                margin-top: -1px;
-            }
+    .chatroom {
+        .send-button {
+            background-color: var(--muc-toolbar-btn-color);
         }
     }
 
+
     .chatbox {
         converse-chat-toolbar {
             border-top: var(--chatbox-message-input-border-top);

src/shared/chat/templates/emoji-picker.js

@@ -11,7 +11,7 @@ const emoji_category = (o) => {
             class="emoji-category ${o.category} ${(o.current_category === o.category) ? 'picked' : ''}"
             title="${__(api.settings.get('emoji_category_labels')[o.category])}">
 
-            <a class="pick-category"
+            <a class="btn pick-category"
                @click=${o.onCategoryPicked}
                href="#emoji-picker-${o.category}"
                data-category="${o.category}">${o.emoji} </a>
@@ -22,7 +22,7 @@ const emoji_category = (o) => {
 const emoji_picker_header = (o) => {
     const cats = api.settings.get('emoji_categories');
     const transform = c => cats[c] ? emoji_category(Object.assign({'category': c, 'emoji': o.sn2Emoji(cats[c])}, o)) : '';
-    return html`<ul>${ Object.keys(cats).map(transform) }</ul>`;
+    return html`<ul class="flex-wrap flex-md-nowrap">${ Object.keys(cats).map(transform) }</ul>`;
 }
 
 const emoji_item = (o) => {
@@ -33,7 +33,7 @@ const emoji_item = (o) => {
     `;
 }
 
-export const tplSearchResults = (o) => {
+export function tplSearchResults (o) {
     const i18n_search_results = __('Search results');
     return html`
         <span ?hidden=${!o.query} class="emoji-lists__container emojis-lists__container--search">
@@ -45,7 +45,7 @@ export const tplSearchResults = (o) => {
     `;
 }
 
-const emojis_for_category = (o) => {
+function emojis_for_category (o) {
     return html`
         <a id="emoji-picker-${o.category}" class="emoji-category__heading" data-category="${o.category}">${ __(api.settings.get('emoji_category_labels')[o.category]) }</a>
         <ul class="emoji-picker" data-category="${o.category}">
@@ -53,7 +53,7 @@ const emojis_for_category = (o) => {
         </ul>`;
 }
 
-export const tplAllEmojis = (o) => {
+export function tplAllEmojis (o) {
     const cats = api.settings.get('emoji_categories');
     return html`
         <span ?hidden=${o.query} class="emoji-lists__container emoji-lists__container--browse">
@@ -62,17 +62,25 @@ export const tplAllEmojis = (o) => {
 }
 
 
-const skintone_emoji = (o) => {
+function skintone_emoji (o, skintone, skintone_emoji) {
     return html`
-        <li data-skintone="${o.skintone}" class="emoji-skintone ${(o.current_skintone === o.skintone) ? 'picked' : ''}">
-            <a class="pick-skintone" href="#" data-skintone="${o.skintone}" @click=${o.onSkintonePicked}>${u.shortnamesToEmojis(':'+o.skintone+':')}</a>
+        <li data-skintone="${skintone_emoji}" class="emoji-skintone ${(o.current_skintone === skintone) ? 'picked' : ''}">
+            <a class="pick-skintone" href="#" data-skintone="${skintone}" @click=${o.onSkintonePicked}>
+                ${u.shortnamesToEmojis(skintone_emoji)}
+            </a>
         </li>`;
 }
 
 
-export const tplEmojiPicker = (o) => {
+export function tplEmojiPicker (o) {
     const i18n_search = __('Search');
-    const skintones = ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'];
+    const skintones = {
+        "tone1": ":raised_hand_tone1:",
+        "tone2": ":raised_hand_tone2:",
+        "tone3": ":raised_hand_tone3:",
+        "tone4": ":raised_hand_tone4:",
+        "tone5": ":raised_hand_tone5:"
+    };
     return html`
         <div class="emoji-picker__header">
             <input class="form-control emoji-search" name="emoji-search" placeholder="${i18n_search}"
@@ -91,6 +99,7 @@ export const tplEmojiPicker = (o) => {
                 query="${o.query}"></converse-emoji-picker-content>` : ''}
 
         <div class="emoji-skintone-picker">
-            <ul>${ skintones.map(skintone => skintone_emoji(Object.assign({skintone}, o))) }</ul>
+            Skin tone:
+            <ul>${ Object.keys(skintones).map(k => skintone_emoji(o, k, skintones[k])) }</ul>
         </div>`;
 }

src/shared/chat/toolbar.js

@@ -1,11 +1,11 @@
+import { html } from 'lit';
+import { until } from 'lit/directives/until.js';
+import { _converse, api, converse } from '@converse/headless';
 import './emoji-picker.js';
 import 'shared/chat/message-limit.js';
 import tplToolbar from './templates/toolbar.js';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
-import { _converse, api, converse } from '@converse/headless';
-import { html } from 'lit';
-import { until } from 'lit/directives/until.js';
 
 import './styles/toolbar.scss';