Fix chat head buttons not showing

We need to use `converse-icon` now that the fontawesome fonts aren't
included

src/plugins/chatview/styles/chat-head.scss

@@ -64,34 +64,30 @@
                 padding: 0;
             }
 
-            a, a:visited, a:hover, a:not([href]):not([tabindex]) {
-                &.chatbox-btn {
-                    &.fa,
-                    &.fas,
-                    &.far {
-                        color: var(--chat-head-text-color);;
-                        &.button-on:before {
-                            padding: 0.2em;
-                            background-color: var(--chat-head-text-color);
-                            color: var(--chat-head-color);
-                        }
-                    }
-                }
-            }
-
             .chatbox-btn {
                 color: white;
-                &.fa, &.far, &.fas  {
-                    color: white;
-                }
                 &:active {
                     position: relative;
                     top: 1px;
                 }
-                &.button-on:before {
-                    border-radius: 5%;
-                    background-color: var(--chat-head-text-color);
-                    color: var(--chat-head-color);
+            }
+
+            converse-dropdown {
+                .dropdown-menu {
+                    converse-icon {
+                        svg {
+                            fill: var(--chat-color);
+                        }
+                    }
+                }
+            }
+
+
+            .chatbox-btn {
+                converse-icon {
+                    svg {
+                        fill: var(--chat-head-fg-color);
+                    }
                 }
             }
         }

src/plugins/chatview/templates/chat-head.js

@@ -1,22 +1,10 @@
 import { __ } from 'i18n';
 import { _converse } from '@converse/headless/core';
-import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js';
+import { getStandaloneButtons, getDropdownButtons } from 'shared/chat/utils.js';
 import { html } from "lit";
 import { until } from 'lit/directives/until.js';
 
 
-async function getStandaloneButtons (promise) {
-    const heading_btns = await promise;
-    const standalone_btns = heading_btns.filter(b => b.standalone);
-    return standalone_btns.map(b => getHeadingStandaloneButton(b))
-}
-
-async function getDropdownButtons (promise) {
-    const heading_btns = await promise;
-    const dropdown_btns = heading_btns.filter(b => !b.standalone);
-    return dropdown_btns.map(b => getHeadingDropdownItem(b));
-}
-
 export default (o) => {
     const i18n_profile = __("The User's Profile Image");
     const avatar = html`<span title="${i18n_profile}">
@@ -27,12 +15,6 @@ export default (o) => {
             height="40" width="40"></converse-avatar></span>`;
     const display_name = o.model.getDisplayName();
 
-    const tpl_dropdown_btns = () => getDropdownButtons(o.heading_buttons_promise)
-        .then(btns => btns.length ? html`<converse-dropdown class="dropleft" color="var(--chat-head-text-color)" .items=${btns}></converse-dropdown>` : '');
-
-    const tpl_standalone_btns = () => getStandaloneButtons(o.heading_buttons_promise)
-        .then(btns => btns.reverse().map(b => until(b, '')));
-
     return html`
         <div class="chatbox-title ${ o.status ? '' :  "chatbox-title--no-desc"}">
             <div class="chatbox-title--row">
@@ -43,8 +25,8 @@ export default (o) => {
                 </div>
             </div>
             <div class="chatbox-title__buttons row no-gutters">
-                ${ until(tpl_dropdown_btns(), '') }
-                ${ until(tpl_standalone_btns(), '') }
+                ${ until(getDropdownButtons(o.heading_buttons_promise), '') }
+                ${ until(getStandaloneButtons(o.heading_buttons_promise), '') }
             </div>
         </div>
         ${ o.status ? html`<p class="chat-head__desc">${ o.status }</p>` : '' }

src/plugins/chatview/utils.js

@@ -1,5 +1,5 @@
 import { __ } from 'i18n';
-import { _converse, api } from "@converse/headless/core";
+import { _converse, api } from '@converse/headless/core';
 import { html } from 'lit';
 
 export function clearHistory (jid) {
@@ -8,28 +8,6 @@ export function clearHistory (jid) {
     }
 }
 
-export async function getHeadingDropdownItem (promise_or_data) {
-    const data = await promise_or_data;
-    return data ? html`
-        <a href="#" class="dropdown-item ${data.a_class}" @click=${data.handler} title="${data.i18n_title}">
-            <converse-icon size="1em" color="var(--text-color-lighten-15-percent)" class="fa ${data.icon_class}"></converse-icon>
-            ${data.i18n_text}
-        </a>
-    ` : '';
-}
-
-export async function getHeadingStandaloneButton (promise_or_data) {
-    const data = await promise_or_data;
-    return html`
-        <a
-            href="#"
-            class="chatbox-btn ${data.a_class} fa ${data.icon_class}"
-            @click=${data.handler}
-            title="${data.i18n_title}"
-        ></a>
-    `;
-}
-
 export async function clearMessages (chat) {
     const result = await api.confirm(__('Are you sure you want to clear the messages from this conversation?'));
     if (result) {
@@ -37,7 +15,6 @@ export async function clearMessages (chat) {
     }
 }
 
-
 export async function parseMessageForCommands (chat, text) {
     const match = text.replace(/^\s*/, '').match(/^\/(.*)\s*$/);
     if (match) {
@@ -56,7 +33,7 @@ export async function parseMessageForCommands (chat, text) {
          *      return handled;
          *  }
          */
-        handled = await api.hook('parseMessageForCommands', {model: chat, text}, handled);
+        handled = await api.hook('parseMessageForCommands', { model: chat, text }, handled);
         if (handled) {
             return true;
         }

src/plugins/controlbox/index.js

@@ -15,6 +15,7 @@ import { _converse, api, converse } from '@converse/headless/core';
 import { addControlBox, clearSession, disconnect, onChatBoxesFetched } from './utils.js';
 
 import './styles/_controlbox.scss';
+import './styles/controlbox-head.scss';
 
 
 converse.plugins.add('converse-controlbox', {

src/plugins/controlbox/styles/_controlbox.scss

@@ -415,26 +415,6 @@
                     }
                 }
 
-                .controlbox-head {
-                    display: flex;
-                    flex-direction: row-reverse;
-                    flex-wrap: nowrap;
-                    justify-content: space-between;
-                    min-height: 0;
-
-                    .brand-heading {
-                        color: var(--controlbox-text-color);
-                        font-size: 2em;
-                    }
-                    .chatbox-btn {
-                        color: var(--controlbox-head-color);
-                        margin: 0;
-                        converse-icon {
-                            color: var(--controlbox-head-color);
-                        }
-                    }
-                }
-
                 #converse-register, #converse-login {
                     @include make-col(12);
                     padding-bottom: 0;

src/plugins/controlbox/styles/controlbox-head.scss

@@ -0,0 +1,24 @@
+.conversejs {
+    #controlbox {
+        .controlbox-head {
+            display: flex;
+            flex-direction: row-reverse;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            min-height: 0;
+
+            .brand-heading {
+                color: var(--controlbox-text-color);
+                font-size: 2em;
+            }
+            .chatbox-btn {
+                margin: 0;
+                converse-icon {
+                    svg {
+                        fill: var(--controlbox-head-btn-color);
+                    }
+                }
+            }
+        }
+    }
+}

src/plugins/headlines-view/index.js

@@ -9,6 +9,7 @@ import { HeadlinesFeedsList } from './feed-list.js';
 import { _converse, converse } from '@converse/headless/core';
 
 import './styles/headlines.scss';
+import './styles/headlines-head.scss';
 
 
 converse.plugins.add('converse-headlines-view', {

src/plugins/headlines-view/styles/headlines-head.scss

@@ -0,0 +1,53 @@
+.conversejs {
+    .chatbox {
+        &.headlines {
+            converse-headlines-heading {
+                &.chat-head {
+                    .chatbox-title--no-desc {
+                        padding: 0.75rem 1rem;
+                    }
+
+                    &.chat-head-chatbox {
+                        background-color: var(--headline-head-bg-color);
+                        border-bottom: var(--headline-head-border-bottom);
+                    }
+                    background-color: var(--headline-head-bg-color);
+
+                    .chatbox-title__text {
+                        color: var(--headline-head-text-color) !important;
+                    }
+
+                    converse-dropdown {
+                        .dropdown-menu {
+                            converse-icon {
+                                svg {
+                                    fill: var(--headlines-color);
+                                }
+                            }
+                        }
+                    }
+
+                    .chatbox-btn {
+                        converse-icon {
+                            svg {
+                                fill: var(--headline-head-fg-color);
+                            }
+                        }
+                    }
+                }
+            }
+
+            converse-chats {
+                &.converse-fullscreen {
+                    .chatbox.headlines {
+                        .chat-head {
+                            &.chat-head-chatbox {
+                                background-color: var(--headline-head-bg-color);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/plugins/headlines-view/styles/headlines.scss

@@ -1,36 +1,6 @@
 .conversejs {
     .chatbox {
-        converse-headlines-heading {
-            &.chat-head {
-                .chatbox-title__text {
-                    color: var(--headline-head-text-color) !important;
-                    background-color: var(--headline-head-bg-color);
-                }
-
-                a, a:visited, a:hover, a:not([href]):not([tabindex]) {
-                    &.chatbox-btn {
-                        &.fa,
-                        &.fas,
-                        &.far {
-                            color: var(--headline-head-text-color);
-                            &.button-on:before {
-                                padding: 0.2em;
-                                background-color: var(--headline-head-text-color);
-                                color: var(--headline-head-bg-color);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
         &.headlines {
-            .chat-head {
-                &.chat-head-chatbox {
-                    background-color: var(--headline-head-bg-color);
-                    border-bottom: var(--headline-head-border-bottom);
-                }
-            }
             .chat-body {
                 background-color: var(--background);
                 .chat-message {
@@ -72,11 +42,6 @@
                 .box-flyout {
                     background-color: var(--headline-head-text-color);
                 }
-                .chat-head {
-                    &.chat-head-chatbox {
-                        background-color: var(--headline-head-text-color);
-                    }
-                }
                 .flyout {
                     border-color: var(--headline-head-text-color);
                 }

src/plugins/headlines-view/templates/chat-head.js

@@ -1,26 +1,10 @@
 import { _converse } from '@converse/headless/core';
 import { html } from "lit";
 import { until } from 'lit/directives/until.js';
-import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js';
+import { getStandaloneButtons, getDropdownButtons } from 'shared/chat/utils.js';
 
 
 export default (o) => {
-    const standalone_btns_promise = o.heading_buttons_promise.then(
-        btns => btns
-            .filter(b => b.standalone)
-            .map(b => getHeadingStandaloneButton(b))
-            .reverse()
-            .map(b => until(b, '')));
-
-    const dropdown_btns_promise = o.heading_buttons_promise.then(
-        btns => {
-            const dropdown_btns = btns
-                .filter(b => !b.standalone)
-                .map(b => getHeadingDropdownItem(b));
-            return dropdown_btns.length ? html`<converse-dropdown class="dropleft" .items=${dropdown_btns}></converse-dropdown>` : '';
-        }
-    );
-
     return html`
         <div class="chatbox-title ${ o.status ? '' :  "chatbox-title--no-desc"}">
             <div class="chatbox-title--row">
@@ -28,8 +12,8 @@ export default (o) => {
                 <div class="chatbox-title__text" title="${o.jid}">${ o.display_name }</div>
             </div>
             <div class="chatbox-title__buttons row no-gutters">
-                ${ until(dropdown_btns_promise, '') }
-                ${ until(standalone_btns_promise, '') }
+                ${ until(getDropdownButtons(o.heading_buttons_promise), '') }
+                ${ until(getStandaloneButtons(o.heading_buttons_promise), '') }
             </div>
         </div>
         ${ o.status ? html`<p class="chat-head__desc">${ o.status }</p>` : '' }

src/plugins/muc-views/styles/muc-forms.scss

@@ -24,7 +24,7 @@ converse-muc-config-form {
                     margin: 0 0.5em;
                 }
                 .button-primary {
-                    background-color: var(--chatroom-head-button-color);
+                    background-color: var(--chatroom-head-fg-color);
                 }
             }
 

src/plugins/muc-views/styles/muc-head.scss

@@ -47,15 +47,27 @@
                     &.fa {
                         color: var(--chatroom-head-color);
                         &.button-on:before {
-                            color: var(--chatroom-head-button-color);
+                            color: var(--chatroom-head-fg-color);
+                        }
+                    }
+                }
+            }
+
+            converse-dropdown {
+                .dropdown-menu {
+                    converse-icon {
+                        svg {
+                            fill: var(--chatroom-color);
                         }
                     }
                 }
             }
 
             .chatbox-btn {
-                &.button-on:before {
-                    color: var(--chatroom-head-button-color);
+                converse-icon {
+                    svg {
+                        fill: var(--chatroom-head-fg-color);
+                    }
                 }
             }
             .chatbox-title__text {

src/plugins/muc-views/templates/muc-head.js

@@ -2,7 +2,7 @@ import 'shared/components/dropdown.js';
 import 'shared/components/rich-text.js';
 import { __ } from 'i18n';
 import { _converse, api } from "@converse/headless/core.js";
-import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js';
+import { getStandaloneButtons, getDropdownButtons } from 'shared/chat/utils.js';
 import { html } from "lit";
 import { until } from 'lit/directives/until.js';
 
@@ -10,6 +10,7 @@ import { until } from 'lit/directives/until.js';
 export default (el) => {
     const o = el.model.toJSON();
     const subject_hidden = el.user_settings?.get('mucs_with_hidden_subject', [])?.includes(el.model.get('jid'));
+    const heading_buttons_promise = el.getHeadingButtons(subject_hidden);
     const i18n_hide_topic = __('Hide the groupchat topic');
     const i18n_bookmarked = __('This groupchat is bookmarked');
     const subject = o.subject ? o.subject.text : '';
@@ -38,12 +39,8 @@ export default (el) => {
                 </div>
             </div>
             <div class="chatbox-title__buttons row no-gutters">
-                ${ until(el.getHeadingButtons(subject_hidden).then((buttons) => {
-                    const dropdown_btns = buttons.filter(b => !b.standalone).map(b => getHeadingDropdownItem(b));
-                    return html`
-                        ${ buttons.filter(b => b.standalone).reverse().map(b => until(getHeadingStandaloneButton(b), '')) }
-                        ${ dropdown_btns.length ? html`<converse-dropdown class="dropleft" color="var(--chatroom-head-color)" .items=${dropdown_btns}></converse-dropdown>` : '' }`
-                }), '') }
+                ${ until(getStandaloneButtons(heading_buttons_promise), '') }
+                ${ until(getDropdownButtons(heading_buttons_promise), '') }
             </div>
         </div>
         ${ show_subject ? html`<p class="chat-head__desc" title="${i18n_hide_topic}">

src/plugins/muc-views/tests/muc.js

@@ -340,6 +340,7 @@ describe("Groupchats", function () {
                 expect(topic_el.textContent.trim()).toBe(text);
                 expect(u.isVisible(topic_el)).toBe(true);
 
+                await u.waitUntil(() => view.querySelector('.hide-topic').textContent.trim() === 'Hide topic');
                 const toggle = view.querySelector('.hide-topic');
                 expect(toggle.textContent.trim()).toBe('Hide topic');
                 toggle.click();

src/shared/chat/utils.js

@@ -2,6 +2,7 @@ import debounce from 'lodash/debounce';
 import tpl_new_day from "./templates/new-day.js";
 import { _converse, api, converse } from '@converse/headless/core';
 import { html } from 'lit';
+import { until } from 'lit/directives/until.js';
 import {
     convertASCII2Emoji,
     getShortnameReferences,
@@ -10,6 +11,59 @@ import {
 
 const { dayjs, u } = converse.env;
 
+export async function getHeadingDropdownItem (promise_or_data) {
+    const data = await promise_or_data;
+    return data
+        ? html`
+              <a href="#" class="dropdown-item ${data.a_class}" @click=${data.handler} title="${data.i18n_title}">
+                  <converse-icon
+                      size="1em"
+                      class="fa ${data.icon_class}"
+                  ></converse-icon>
+                  ${data.i18n_text}
+              </a>
+          `
+        : '';
+}
+
+export async function getHeadingStandaloneButton (promise_or_data) {
+    const data = await promise_or_data;
+    return html`
+        <a
+            href="#"
+            class="chatbox-btn ${data.a_class}"
+            @click=${data.handler}
+            title="${data.i18n_title}"
+        >
+            <converse-icon
+                size="1em"
+                class="fa ${data.icon_class}"
+            ></converse-icon>
+        </a>
+    `;
+}
+
+export function getStandaloneButtons (promise) {
+    return promise.then(
+        btns => btns
+            .filter(b => b.standalone)
+            .map(b => getHeadingStandaloneButton(b))
+            .reverse()
+            .map(b => until(b, '')));
+}
+
+export function getDropdownButtons (promise) {
+    return promise.then(
+        btns => {
+            const dropdown_btns = btns
+                .filter(b => !b.standalone)
+                .map(b => getHeadingDropdownItem(b));
+            return dropdown_btns.length ? html`<converse-dropdown class="chatbox-btn dropleft" .items=${dropdown_btns}></converse-dropdown>` : '';
+        }
+    );
+}
+
+
 export function onScrolledDown (model) {
     if (!model.isHidden()) {
         if (api.settings.get('allow_url_history_change')) {

src/shared/components/dropdown.js

@@ -14,21 +14,19 @@ export default class Dropdown extends DropdownBase {
     static get properties () {
         return {
             'icon_classes': { type: String },
-            'color': { type: String },
             'items': { type: Array }
         }
     }
 
     constructor () {
         super();
-        this.color = 'var(--text-color)';
         this.icon_classes = 'fa fa-bars';
     }
 
     render () {
         return html`
             <button type="button" class="btn btn--transparent btn--standalone" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <converse-icon color="${this.color}" size="1em" class="${ this.icon_classes }">
+                <converse-icon size="1em" class="${ this.icon_classes }">
             </button>
             <div class="dropdown-menu">
                 ${ this.items.map(b => until(b, '')) }

src/shared/styles/themes/classic.scss

@@ -67,6 +67,7 @@
     --chat-textarea-height: 60px;
 
     --chat-correcting-color: var(--chat-head-color-lighten-50-percent);
+    --chat-head-fg-color: white;
     --chat-head-color-dark: #1E9652;
     --chat-head-color-darker: #0E763B;
     --chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%)
@@ -101,6 +102,7 @@
 
     --controlbox-width: 250px;
     --controlbox-head-color: var(--light-blue);
+    --controlbox-head-btn-color: var(--light-blue);
     --controlbox-heading-color: inherit;
     --controlbox-heading-font-weight: bold;
     --controlbox-heading-top-margin: 0.75em;
@@ -123,7 +125,7 @@
     --chatroom-head-bg-color-dark: #D24E2B; // $red
     --chatroom-head-bg-color: var(--redder-orange);
     --chatroom-head-border-bottom: 0px;
-    --chatroom-head-button-color: var(--chatroom-head-bg-color);
+    --chatroom-head-fg-color: white;
     --chatroom-head-color: white;
     --chatroom-head-description-display: block;
     --chatroom-head-description-link-color: white;
@@ -133,7 +135,8 @@
     --muc-toolbar-btn-disabled-color: gray;
 
     --headlines-color: var(--orange);
-    --headline-head-text-color: var(--white);
+    --headline-head-text-color: white;
+    --headline-head-fg-color: white;
     --headline-head-bg-color: var(--headlines-color);
     --headline-message-color: #D2842B;
     --headline-separator-border-bottom: 2px solid var(--headlines-color);

src/shared/styles/themes/concord.scss

@@ -25,7 +25,7 @@
     --chatroom-correcting-color: #FFFFC0;
     --chatroom-head-bg-color: white;
     --chatroom-head-border-bottom: 1px solid #EEE;
-    --chatroom-head-button-color: #999;
+    --chatroom-head-fg-color: #999;
     --chatroom-head-color: #7E7E7E;
     --chatroom-head-description-border-left: 1px solid #DDD;
     --chatroom-head-description-color: black;

src/shared/styles/themes/dracula.scss

@@ -25,6 +25,7 @@
 
     --headlines-color: var(--pink);
     --headline-head-text-color: var(--headlines-color);
+    --headline-head-fg-color: var(--headlines-color);
     --headline-head-bg-color: var(--background);
     --headline-message-color: var(--headlines-color);
     --headline-separator-border-bottom: 2px solid var(--headlines-color);
@@ -65,28 +66,31 @@
 
     --badge-color: var(--background);
 
-    --chatroom-head-color: var(--muc-color);
+    --chatroom-correcting-color: var(--comment);
+    --chatroom-head-bg-color-dark: var(--muc-color);
     --chatroom-head-bg-color: var(--background);
     --chatroom-head-border-bottom: 0.15em solid var(--muc-color);
+    --chatroom-head-fg-color: var(--muc-color);
+    --chatroom-head-color: var(--muc-color);
     --chatroom-head-description-link-color: var(--link-color);
-    --chatroom-separator-border-bottom: 0.15em solid var(--muc-color);
     --chatroom-message-input-border-top: 0.15em solid var(--muc-color);
-    --chatroom-head-bg-color-dark: var(--muc-color);
-    --chatroom-correcting-color: var(--comment);
+    --chatroom-separator-border-bottom: 0.15em solid var(--muc-color);
     --muc-toolbar-btn-disabled-color: var(--disabled-color);
 
     --occupants-border-left: 0.15em solid var(--muc-color);
     --occupants-border-bottom: 0.15em solid var(--muc-color);
 
-    --chat-head-text-color: var(--chat-color);
-    --chat-head-color: var(--background);
+    --chat-correcting-color: var(--comment);
+    --chat-head-border-bottom: 0.15em solid var(--chat-color);
+    --chat-head-fg-color: var(--chat-color);
     --chat-head-color-dark: var(--chat-color);
     --chat-head-color-darker: var(--chat-color);
     --chat-head-color-lighten-50-percent: var(--chat-color);
-    --chat-head-border-bottom: 0.15em solid var(--chat-color);
-    --chatbox-message-input-border-top: 0.15em solid var(--chat-color);
+    --chat-head-color: var(--background);
+    --chat-head-text-color: var(--chat-color);
     --chat-toolbar-btn-color: var(--chat-color);
-    --chat-correcting-color: var(--comment);
+    --chat-toolbar-btn-color: var(--green);
+    --chatbox-message-input-border-top: 0.15em solid var(--chat-color);
 
     --toolbar-btn-text-color: var(--background);
 
@@ -118,6 +122,7 @@
     --message-author-color: var(--purple);
 
     --controlbox-head-color: var(--purple);
+    --controlbox-head-btn-color: var(--subdued-color);
 
     --message-receipt-color: var(--green);
 

src/shared/tests/mock.js

@@ -628,6 +628,8 @@ function clearStores () {
     window.sessionStorage.removeItem(cache_key+'fetched');
 }
 
+const theme = ['dracula', 'classic', 'concord'][Math.floor(Math.random()*3)];
+
 async function _initConverse (settings) {
     clearStores();
     await clearIndexedDB();
@@ -639,10 +641,11 @@ async function _initConverse (settings) {
         'discover_connection_methods': false,
         'enable_smacks': false,
         'i18n': 'en',
-        'persistent_store': 'localStorage',
         'loglevel': 'debug',
         'no_trimming': true,
+        'persistent_store': 'localStorage',
         'play_sounds': false,
+        'theme': theme,
         'use_emojione': false,
         'view_mode': view_mode
     }, settings || {}));

src/shared/tests/tests.css

@@ -1,3 +1,3 @@
-body {
+body.converse-overlayed {
     overflow: auto !important;
 }