Some improvements to the chat toolbar UI

conversejs · Jul 30, 2024 · fcd924e · fcd924e
1 parent 7d3626d
commit fcd924e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 51 deletions.
diff --git a/src/shared/chat/styles/emoji.scss b/src/shared/chat/styles/emoji.scss
@@ -96,11 +96,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 +137,7 @@
                 ul {
                     display: flex;
                     flex-direction: row;
-                    flex-wrap: wrap;
+                    padding-left: 0;
 
                     .emoji-category {
                         padding: 0.25em 0;

diff --git a/src/shared/chat/styles/toolbar.scss b/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);

diff --git a/src/shared/chat/templates/emoji-picker.js b/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) => {

diff --git a/src/shared/chat/toolbar.js b/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';