CSS and markup improvements to the controlbox

- Remove the `.controlbox-head` element.
- Remove the `.controlbox-panes` element.
- Remove unused CSS styles.
- Create a new component for rendering the controlbox buttons.
- Move styles to loginform.scss

src/plugins/bookmark-views/styles/bookmarks.scss

@@ -9,22 +9,6 @@
     }
 }
 
-.conversejs.fullscreen {
-    #controlbox {
-        #chatrooms {
-            .bookmarks-list {
-                dl.rooms-list.bookmarks {
-                    dd.available-chatroom {
-                        a.open-room {
-                            width: 80%;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
 converse-bookmarks {
     .list-item-link {
         padding: 0 1em;

src/plugins/controlbox/buttons.js

@@ -0,0 +1,43 @@
+import { _converse, api } from '@converse/headless';
+import { CustomElement } from 'shared/components/element.js';
+import tplButtons from './templates/buttons.js';
+
+import './styles/buttons.scss';
+
+
+class ControlboxButtons extends CustomElement {
+    initialize () {
+        const { chatboxes } = _converse.state;
+        this.model = chatboxes.get('controlbox');
+    }
+
+    render () {
+        return tplButtons(this);
+    }
+
+
+    /**
+     * @param {MouseEvent} ev
+     */
+    showUserSettingsModal (ev) {
+        ev?.preventDefault();
+        api.modal.show(
+            'converse-user-settings-modal',
+            { model: _converse.state.xmppstatus, _converse },
+            ev
+        );
+    }
+
+    /**
+     * @param {MouseEvent} ev
+     */
+    closeControlBox (ev) {
+        ev?.preventDefault();
+        const view = _converse.state.chatboxviews.get('controlbox');
+        view?.close();
+    }
+}
+
+api.elements.define('converse-controlbox-buttons', ControlboxButtons);
+
+export default ControlboxButtons;

src/plugins/controlbox/controlbox.js

@@ -1,6 +1,6 @@
-import tplControlbox from './templates/controlbox.js';
-import { CustomElement } from 'shared/components/element.js';
 import { _converse, api, constants, u } from '@converse/headless';
+import { CustomElement } from 'shared/components/element.js';
+import tplControlbox from './templates/controlbox.js';
 
 const { LOGOUT } = constants;
 
@@ -57,7 +57,7 @@ class ControlBoxView extends CustomElement {
         ) {
             return;
         }
-        if (api.settings.get('sticky_controlbox')) {
+        if (api.settings.get('sticky_controlbox') || api.settings.get('view_mode') !== 'overlayed') {
             return;
         }
         u.safeSave(this.model, { 'closed': true });

src/plugins/controlbox/index.js

@@ -7,6 +7,7 @@ import "shared/components/brand-heading.js";
 import "../chatview/index.js";
 import './loginform.js';
 import './navback.js';
+import './buttons.js';
 import ControlBox from './model.js';
 import ControlBoxToggle from './toggle.js';
 import ControlBoxView from './controlbox.js';
@@ -14,7 +15,6 @@ import controlbox_api from './api.js';
 import { addControlBox, clearSession, disconnect, onChatBoxesFetched } from './utils.js';
 
 import './styles/_controlbox.scss';
-import './styles/controlbox-head.scss';
 
 const { CONTROLBOX_TYPE } = constants;
 

src/plugins/controlbox/loginform.js

@@ -4,6 +4,8 @@ import { CustomElement } from 'shared/components/element.js';
 import { updateSettingsWithFormData, validateJID } from './utils.js';
 import tplLoginPanel from './templates/loginform.js';
 
+import './styles/loginform.scss';
+
 const { Strophe } = converse.env;
 const { ANONYMOUS } = constants;
 

src/plugins/controlbox/styles/_controlbox.scss

@@ -5,30 +5,6 @@
 @import "shared/styles/_mixins.scss";
 
 .conversejs {
-
-    .set-xmpp-status,
-    .xmpp-status {
-        .chat-status--online {
-            color: var(--chat-status-online);
-        }
-        .chat-status--busy {
-            color: var(--chat-status-busy);
-        }
-        .chat-status--away {
-            color: var(--chat-status-away);
-        }
-        .far.fa-circle,
-        .fa-times-circle {
-            color: var(--subdued-color);
-        }
-    }
-
-    .set-xmpp-status {
-        .chat-status {
-            padding-right: 0.5em;
-        }
-    }
-
     .room-info {
         font-size: var(--font-size-small);
         font-style: normal;
@@ -70,8 +46,13 @@
             display: block;
         }
 
+        converse-user-profile {
+            padding: 0.5em 1em;
+        }
+
         .brand-name-wrapper {
             font-size: 200%;
+            padding-right: 0.5em;
         }
 
         .brand-name-wrapper--fullscreen {
@@ -121,34 +102,6 @@
             }
         }
 
-        #converse-login-panel, #converse-register-panel {
-            padding-top: 0;
-            padding-bottom: 0;
-        }
-
-        #converse-login-panel {
-            flex-direction: row;
-        }
-
-        .toggle-register-login {
-            font-weight: bold;
-        }
-
-        .controlbox-pane {
-            .userinfo {
-                padding-bottom: 1em;
-
-                .username {
-                    margin-left: 0.5em;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                }
-                .profile {
-                    margin-bottom: 0.75em;
-                }
-            }
-        }
-
         #chatrooms {
             padding: 0;
 
@@ -164,7 +117,6 @@
         }
 
         .controlbox-section {
-
             .controlbox-heading {
                 font-family: var(--heading-font);
                 color: var(--controlbox-heading-color);
@@ -186,79 +138,19 @@
             .controlbox-heading--headline {
                 color: var(--headlines-head-color);
             }
-
-            .controlbox-heading__btn {
-                cursor: pointer;
-                padding: 0 0 0 1em;
-                font-size: 1em;
-                margin: var(--controlbox-heading-top-margin) 0 var(--inline-action-margin) 0;
-                text-align: center;
-                &.fa-vcard {
-                    margin-top: 1em;
-                }
-            }
         }
 
-        .dropdown {
-            a {
-                width: 143px;
-                display: inline-block;
-            }
-            li {
-                list-style: none;
-                padding-left: 0;
-            }
-            dd {
-                ul {
-                    padding: 0;
-                    list-style: none;
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                    width: 100%;
-                    z-index: 21;
-                    background-color: var(--light-background-color);
-                    li:hover {
-                        background-color: var(--highlight-color);
-                    }
-                }
-            }
-
-            dd.search-xmpp {
-                height: 0;
-                .contact-form-container {
-                    position: absolute;
-                    z-index: 22;
-                    form {
-                        box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4);
-                        background-color: white;
-                    }
-                }
-                li:hover {
-                    background-color: var(--light-background-color);
-                }
-            }
-            dt a span {
-                cursor: pointer;
-                display: block;
-                padding: 4px 7px 0 5px;
-            }
+        .controlbox-padded {
+            padding-left: 1em;
+            padding-right: 1em;
+            align-items: center;
+            line-height: normal;
         }
 
-        .controlbox-panes {
+        .controlbox-pane {
             background-color: var(--controlbox-pane-background-color);
             height: 100%;
             overflow-y: auto;
-        }
-
-        .controlbox-subtitle {
-            font-size: 90%;
-            padding: 0.5em;
-            text-align: right;
-        }
-
-        .controlbox-pane {
-            background-color: var(--controlbox-pane-background-color);
             border: 0;
             font-size: var(--font-size);
             left: 0;
@@ -266,21 +158,6 @@
             overflow-x: hidden;
             padding: 0;
 
-            .controlbox-padded {
-                padding-left: 1em;
-                padding-right: 1em;
-                align-items: center;
-                line-height: normal;
-
-                .change-status {
-                    min-width: 25px;
-                    text-align: center;
-                    converse-icon {
-                        padding-right: 0.5em;
-                    }
-                }
-            }
-
             .add-converse-contact {
                 margin: 0 0 0.75em 0;
             }
@@ -289,17 +166,6 @@
                 margin: 0;
             }
 
-            .switch-form {
-                text-align: center;
-                padding: 1em 0;
-            }
-            dd {
-                margin-left: 0;
-                margin-bottom: 0;
-                &.odd {
-                    background-color: #DCEAC5;
-                }
-            }
         }
 
         .add-xmpp-contact {
@@ -339,65 +205,43 @@
                     min-width: var(--controlbox-width) !important;
                     width: var(--controlbox-width);
                 }
-
-                .login-trusted {
-                    white-space: nowrap;
-                    font-size: 90%;
-                }
-
-                #converse-login-trusted {
-                    margin-top: 0.5em;
-                }
-                &:not(.logged-out) {
-                    .controlbox-head {
-                        height: 15px;
-                    }
-                }
-
-                #converse-register, #converse-login {
-                    @include make-col(12);
-                    padding-bottom: 0;
-                }
-
-                #converse-register {
-                    .button-cancel {
-                        font-size: 90%;
-                    }
-                }
             }
 
             .brand-heading {
-                padding-top: 0.8rem;
-                padding-left: 0.8rem;
+                padding-left: 1em;
                 width: 100%;
             }
+
             .converse-svg-logo {
+                margin-top: 0.25em;
                 height: 1em;
             }
-            #controlbox {
-                #converse-login-panel {
-                    height: 100%;
-                }
-                .controlbox-panes {
-                    margin-top: 0.5em;
-                }
-            }
         }
 
         &.converse-embedded,
-        &.converse-fullscreen{
-            .controlbox-panes {
-                border-right: 0.2rem solid var(--panel-divider-color);
+        &.converse-fullscreen {
+            #controlbox {
+                .flyout {
+                    border-right: 0.2rem solid var(--panel-divider-color);
+                }
             }
             .toggle-controlbox {
                 display: none;
             }
         }
 
+        &.converse-overlayed {
+            .flyout {
+                border: 0;
+            }
+        }
+
         &.converse-embedded,
         &.converse-fullscreen,
         &.converse-mobile {
             #controlbox {
+                margin: 0;
+
                 @include make-col-ready();
 
                 @include media-breakpoint-up(md) {
@@ -412,23 +256,17 @@
 
                 &.logged-out {
                     @include make-col(12);
+                    @include fade-in;
+                    width: 100%;
+                    .box-flyout {
+                        width: 100%;
+                    }
                 }
 
-                margin: 0;
-
                 .flyout {
                     border-radius: 0;
-                }
-
-                #converse-login-panel {
-                    border-radius: 0;
-                    .converse-form {
-                        padding: 3em 2em 3em;
-                    }
-                }
-
-                .toggle-register-login {
-                    line-height: var(--line-height-huge);
+                    width: 100%;
+                    z-index: 1;
                 }
 
                 converse-brand-logo {
@@ -452,51 +290,6 @@
                         }
                     }
                 }
-
-                &.logged-out {
-                    @include make-col(12);
-                    @include fade-in;
-                    width: 100%;
-                    .box-flyout {
-                        width: 100%;
-                    }
-                }
-                .box-flyout {
-                    border: 0;
-                    width: 100%;
-                    z-index: 1;
-                    background-color: var(--controlbox-head-color);
-
-                    .controlbox-head {
-                        display: none;
-                    }
-                }
-
-                #converse-register, #converse-login {
-                    @include make-col-ready();
-                    @include make-col(8);
-                    @include make-col-offset(2);
-
-                    @include media-breakpoint-up(sm) {
-                        @include make-col(8);
-                        @include make-col-offset(2);
-                    }
-                    @include media-breakpoint-up(md) {
-                        @include make-col(8);
-                        @include make-col-offset(2);
-                    }
-                    @include media-breakpoint-up(lg) {
-                        @include make-col(6);
-                        @include make-col-offset(3);
-                    }
-                    .title, .instructions {
-                        margin: 1em 0;
-                    }
-                    input[type=submit],
-                    input[type=button] {
-                        width: auto;
-                    }
-                }
             }
         }
 
@@ -520,7 +313,7 @@
                     }
                 }
             }
-            .controlbox-panes {
+            .controlbox-pane {
                 padding-top: 2em;
                 padding-bottom: 1em;
             }

src/plugins/controlbox/styles/buttons.scss

@@ -0,0 +1,21 @@
+.conversejs {
+    converse-controlbox-buttons {
+        text-align: right;
+        width: 100%;
+
+        .btn-toolbar {
+            justify-content: flex-end;
+
+            .controlbox-heading__btn {
+                cursor: pointer;
+                padding: 0 0 0 1em;
+                font-size: 1em;
+                margin: var(--controlbox-heading-top-margin) 0 var(--inline-action-margin) 0;
+                text-align: center;
+                &.fa-vcard {
+                    margin-top: 1em;
+                }
+            }
+        }
+    }
+}

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

@@ -1,24 +0,0 @@
-.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/controlbox/styles/loginform.scss

@@ -0,0 +1,92 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
+.conversejs {
+    #controlbox {
+        #converse-login-panel {
+            padding-top: 0;
+            padding-bottom: 0;
+            flex-direction: row;
+        }
+
+        .toggle-register-login {
+            font-weight: bold;
+        }
+
+        .controlbox-pane {
+            .switch-form {
+                text-align: center;
+                padding: 0.5em 0;
+            }
+        }
+    }
+}
+
+.conversejs {
+    converse-chats {
+        &.converse-overlayed {
+            #controlbox {
+                .login-trusted {
+                    white-space: nowrap;
+                    font-size: 90%;
+                }
+
+                #converse-login-panel {
+                    height: 100%;
+                }
+
+                #converse-login-trusted {
+                    margin-top: 0.5em;
+                }
+
+                #converse-register, #converse-login {
+                    @include make-col(12);
+                    padding-bottom: 0;
+                }
+
+                #converse-register {
+                    .button-cancel {
+                        font-size: 90%;
+                    }
+                }
+            }
+        }
+
+        &.converse-embedded,
+        &.converse-fullscreen,
+        &.converse-mobile {
+            #controlbox {
+                .toggle-register-login {
+                    line-height: var(--line-height-huge);
+                }
+
+                #converse-register, #converse-login {
+                    @include make-col-ready();
+                    @include make-col(8);
+                    @include make-col-offset(2);
+
+                    @include media-breakpoint-up(sm) {
+                        @include make-col(8);
+                        @include make-col-offset(2);
+                    }
+                    @include media-breakpoint-up(md) {
+                        @include make-col(8);
+                        @include make-col-offset(2);
+                    }
+                    @include media-breakpoint-up(lg) {
+                        @include make-col(6);
+                        @include make-col-offset(3);
+                    }
+                    .title, .instructions {
+                        margin: 1em 0;
+                    }
+                    input[type=submit],
+                    input[type=button] {
+                        width: auto;
+                    }
+                }
+            }
+        }
+    }
+}

src/plugins/controlbox/templates/buttons.js

@@ -0,0 +1,49 @@
+import { html } from "lit";
+import { api } from "@converse/headless";
+import { __ } from 'i18n';
+import { logOut } from '../utils.js';
+
+
+function tplSignout () {
+    const i18n_logout = __('Log out');
+    return html`<a class="controlbox-heading__btn logout align-self-center" title="${i18n_logout}" @click=${logOut}>
+        <converse-icon class="fa fa-sign-out-alt" size="1em"></converse-icon>
+    </a>`
+}
+
+/**
+ * @param {import('../buttons').default} el
+ */
+function tplUserSettingsButton (el) {
+    const i18n_details = __('Show details about this chat client');
+    return html`<a class="controlbox-heading__btn show-client-info align-self-center"
+        title="${i18n_details}"
+        @click=${el.showUserSettingsModal}>
+
+        <converse-icon class="fa fa-cog" size="1em"></converse-icon>
+    </a>`;
+}
+
+/**
+ * @param {import('../buttons').default} el
+ */
+function tplCloseButton (el) {
+    return html`
+        <a class="controlbox-heading__btn close align-self-center" @click=${(ev) => el.closeControlBox(ev)}>
+            <converse-icon class="fa fa-times" size="1em"></converse-icon>
+        </a>`
+}
+
+/**
+ * @param {import('../buttons').default} el
+ */
+export default (el) => {
+    const is_connected = el.model.get('connected');
+    const show_settings_button = api.settings.get('show_client_info') || api.settings.get('allow_adhoc_commands');
+    return html`
+        <div class="btn-toolbar g-0">
+            ${is_connected && show_settings_button  ? tplUserSettingsButton(el) : ''}
+            ${is_connected && api.settings.get('allow_logout') ? tplSignout() : ''}
+            ${api.settings.get('sticky_controlbox') ? '' : tplCloseButton(el)}
+        </div>`;
+};

src/plugins/controlbox/templates/controlbox.js

@@ -1,6 +1,3 @@
-/**
- * @typedef {import('../controlbox').default} ControlBoxView
- */
 import tplSpinner from 'templates/spinner.js';
 import { _converse, api, converse, constants } from '@converse/headless';
 import { html } from 'lit';
@@ -9,7 +6,7 @@ const { Strophe } = converse.env;
 const { ANONYMOUS } = constants;
 
 /**
- * @param {ControlBoxView} el
+ * @param {import('../controlbox').default} el
  */
 function whenNotConnected(el) {
     const connection_status = _converse.state.connfeedback.get('connection_status');
@@ -21,42 +18,33 @@ function whenNotConnected(el) {
     }
     return html`<converse-login-form
         id="converse-login-panel"
-        class="controlbox-pane fade-in row g-0"
+        class="controlbox-pane fade-in"
     ></converse-login-form>`;
 }
 
 /**
- * @param {ControlBoxView} el
+ * @param {import('../controlbox').default} el
  */
 export default (el) => {
-    const sticky_controlbox = api.settings.get('sticky_controlbox');
-
     return html` <div class="flyout box-flyout">
         <converse-dragresize></converse-dragresize>
-        <div class="chat-head controlbox-head">
-            ${sticky_controlbox
-                ? ''
-                : html`
-                      <a class="chatbox-btn close-chatbox-button" @click=${(ev) => el.close(ev)}>
-                          <converse-icon class="fa fa-times" size="1em"></converse-icon>
-                      </a>
-                  `}
-        </div>
-        <div class="controlbox-panes">
-            <div class="controlbox-pane">
-                ${el.model.get('connected')
-                    ? html` <converse-user-profile></converse-user-profile>
-                          <converse-headlines-feeds-list class="controlbox-section"></converse-headlines-feeds-list>
-                          <div id="chatrooms" class="controlbox-section">
-                              <converse-rooms-list></converse-rooms-list>
-                          </div>
-                          ${api.settings.get('authentication') === ANONYMOUS
-                              ? ''
-                              : html`<div id="converse-roster" class="controlbox-section">
-                                    <converse-roster></converse-roster>
-                                </div>`}`
-                    : whenNotConnected(el)}
-            </div>
+        ${
+            el.model.get('connected') ?
+                html`<converse-user-profile></converse-user-profile>` :
+                html`<converse-controlbox-buttons class="controlbox-padded"></converse-controlbox-buttons>`
+        }
+        <div class="controlbox-pane">
+            ${el.model.get('connected')
+                ? html`<converse-headlines-feeds-list class="controlbox-section"></converse-headlines-feeds-list>
+                        <div id="chatrooms" class="controlbox-section">
+                            <converse-rooms-list></converse-rooms-list>
+                        </div>
+                        ${api.settings.get('authentication') === ANONYMOUS
+                            ? ''
+                            : html`<div id="converse-roster" class="controlbox-section">
+                                <converse-roster></converse-roster>
+                            </div>`}`
+                : whenNotConnected(el)}
         </div>
     </div>`;
 };

src/plugins/controlbox/tests/controlbox.js

@@ -25,7 +25,7 @@ describe("The Controlbox", function () {
         spyOn(view, 'close').and.callThrough();
         spyOn(_converse.api, "trigger").and.callThrough();
 
-        view.querySelector('.close-chatbox-button').click();
+        view.querySelector(".controlbox-heading__btn.close").click();
         expect(view.close).toHaveBeenCalled();
         expect(_converse.api.trigger).toHaveBeenCalledWith('controlBoxClosed', jasmine.any(Object));
     }));

src/plugins/controlbox/utils.js

@@ -47,6 +47,17 @@ export function clearSession () {
     }
 }
 
+/**
+ * @param {MouseEvent} ev
+ */
+export async function logOut (ev) {
+    ev?.preventDefault();
+    const result = await api.confirm(__("Are you sure you want to log out?"));
+    if (result) {
+        api.user.logout();
+    }
+}
+
 export function onChatBoxesFetched () {
     const controlbox = _converse.state.chatboxes.get('controlbox') || addControlBox();
     controlbox.save({ 'connected': true });

src/plugins/profile/modals/chat-status.js

@@ -1,7 +1,9 @@
+import { api, converse } from '@converse/headless';
 import BaseModal from 'plugins/modal/modal.js';
-import tplChatStatusModal from '../templates/chat-status-modal.js';
 import { __ } from 'i18n';
-import { api, converse } from '@converse/headless';
+import tplChatStatusModal from '../templates/chat-status-modal.js';
+
+import './styles/chat-status-modal.scss';
 
 const u = converse.env.utils;
 
@@ -23,7 +25,6 @@ export default class ChatStatusModal extends BaseModal {
     }
 
     getModalTitle () {
-        // eslint-disable-line class-methods-use-this
         return __('Change chat status');
     }
 

src/plugins/profile/modals/styles/chat-status-modal.scss

@@ -0,0 +1,21 @@
+.conversejs {
+    .set-xmpp-status {
+        .chat-status--online {
+            color: var(--chat-status-online);
+        }
+        .chat-status--busy {
+            color: var(--chat-status-busy);
+        }
+        .chat-status--away {
+            color: var(--chat-status-away);
+        }
+        .far.fa-circle,
+        .fa-times-circle {
+            color: var(--subdued-color);
+        }
+        .chat-status {
+            padding-right: 0.5em;
+        }
+    }
+}
+

src/plugins/profile/statusview.js

@@ -1,6 +1,9 @@
-import tplProfile from './templates/profile.js';
-import { CustomElement } from 'shared/components/element.js';
 import { _converse, api } from '@converse/headless';
+import { CustomElement } from 'shared/components/element.js';
+import tplProfile from './templates/profile.js';
+
+import './styles/profile.scss';
+
 
 class Profile extends CustomElement {
     initialize () {
@@ -14,20 +17,21 @@ class Profile extends CustomElement {
         return tplProfile(this);
     }
 
+    /**
+     * @param {MouseEvent} ev
+     */
     showProfileModal (ev) {
         ev?.preventDefault();
         api.modal.show('converse-profile-modal', { model: this.model }, ev);
     }
 
+    /**
+     * @param {MouseEvent} ev
+     */
     showStatusChangeModal (ev) {
         ev?.preventDefault();
         api.modal.show('converse-chat-status-modal', { model: this.model }, ev);
     }
-
-    showUserSettingsModal (ev) {
-        ev?.preventDefault();
-        api.modal.show('converse-user-settings-modal', { model: this.model, _converse }, ev);
-    }
 }
 
 api.elements.define('converse-user-profile', Profile);

src/plugins/profile/styles/profile.scss

@@ -0,0 +1,36 @@
+converse-user-profile {
+    .change-status {
+        min-width: 25px;
+        text-align: center;
+        converse-icon {
+            padding-right: 0.5em;
+        }
+    }
+
+    .userinfo {
+        .username {
+            margin-left: 0.5em;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .profile {
+            margin-bottom: 0.75em;
+        }
+    }
+
+    .xmpp-status {
+        .chat-status--online {
+            color: var(--chat-status-online);
+        }
+        .chat-status--busy {
+            color: var(--chat-status-busy);
+        }
+        .chat-status--away {
+            color: var(--chat-status-away);
+        }
+        .far.fa-circle,
+        .fa-times-circle {
+            color: var(--subdued-color);
+        }
+    }
+}

src/plugins/profile/templates/profile.js

@@ -1,26 +1,8 @@
+import { html } from "lit";
 import 'shared/avatar/avatar.js';
 import { __ } from 'i18n';
-import { api } from "@converse/headless";
-import { getPrettyStatus, logOut } from '../utils.js';
-import { html } from "lit";
-
-
-function tplSignout () {
-    const i18n_logout = __('Log out');
-    return html`<a class="controlbox-heading__btn logout align-self-center" title="${i18n_logout}" @click=${logOut}>
-        <converse-icon class="fa fa-sign-out-alt" size="1em"></converse-icon>
-    </a>`
-}
-
-function tplUserSettingsButton (o) {
-    const i18n_details = __('Show details about this chat client');
-    return html`<a class="controlbox-heading__btn show-client-info align-self-center"
-        title="${i18n_details}"
-        @click=${o.showUserSettingsModal}>
+import { getPrettyStatus } from '../utils.js';
 
-        <converse-icon class="fa fa-cog" size="1em"></converse-icon>
-    </a>`;
-}
 
 /**
  * @param {import('../statusview').default} el
@@ -29,7 +11,6 @@ export default (el) => {
     const chat_status = el.model.get('status') || 'offline';
     const status_message = el.model.get('status_message') || __("I am %1$s", getPrettyStatus(chat_status));
     const i18n_change_status = __('Click to change your chat status');
-    const show_settings_button = api.settings.get('show_client_info') || api.settings.get('allow_adhoc_commands');
     let classes, color;
     if (chat_status === 'online') {
         [classes, color] = ['fa fa-circle chat-status', 'chat-status-online'];
@@ -51,8 +32,7 @@ export default (el) => {
                         height="40" width="40"></converse-avatar>
                 </a>
                 <span class="username w-100 align-self-center">${el.model.getDisplayName()}</span>
-                ${show_settings_button  ? tplUserSettingsButton(el) : ''}
-                ${api.settings.get('allow_logout') ? tplSignout() : ''}
+                <converse-controlbox-buttons></converse-controlbox-buttons>
             </div>
             <div class="d-flex xmpp-status">
                 <a class="change-status"

src/plugins/profile/utils.js

@@ -1,8 +1,9 @@
 import { __ } from 'i18n';
-import { api, converse, _converse } from '@converse/headless';
-
-const { Strophe, $iq, sizzle, u } = converse.env;
+import { _converse } from '@converse/headless';
 
+/**
+ * @param {string} stat
+ */
 export function getPrettyStatus (stat) {
     if (stat === 'chat') {
         return __('online');
@@ -18,11 +19,3 @@ export function getPrettyStatus (stat) {
         return __(stat) || __('online');
     }
 }
-
-export async function logOut (ev) {
-    ev?.preventDefault();
-    const result = await api.confirm(__("Are you sure you want to log out?"));
-    if (result) {
-        api.user.logout();
-    }
-}

src/plugins/register/styles/register.scss

@@ -1,61 +1,50 @@
 @import "shared/styles/_mixins.scss";
 
 converse-register-panel {
+    padding-top: 0;
+    padding-bottom: 0;
+
     .alert {
         margin: auto;
         max-width: 50vw;
     }
-}
 
-#converse-register {
-    @include fade-in;
-    background-color: var(--controlbox-pane-background-color);
+    #converse-register {
+        @include fade-in;
 
-    .title {
-        font-weight: bold;
-    }
+        padding-top: 0;
+        background-color: var(--controlbox-pane-background-color);
 
-    .input-group {
-        input {
-            height: auto;
-        }
-        .input-group-text {
-            color: var(--text-color);
-            background-color: var(--controlbox-pane-background-color);
+        .title {
+            font-weight: bold;
         }
-    }
-
-    .info {
-        color: green;
-        font-size: 90%;
-        margin: 1.5em 0;
-    }
 
-    .form-errors {
-        color: var(--error-color);
-        margin: 1em 0;
-    }
-
-    .provider-title {
-        font-size: var(--font-size-huge);
-        margin: 0;
-    }
+        .input-group {
+            input {
+                height: auto;
+            }
+            .input-group-text {
+                color: var(--text-color);
+                background-color: var(--controlbox-pane-background-color);
+            }
+        }
 
-    .provider-score {
-        width: 178px;
-        margin-bottom: 8px;
-    }
+        .form-errors {
+            color: var(--error-color);
+            margin: 1em 0;
+        }
 
-    .form-help .url {
-        font-weight: bold;
-        color: var(--link-color);
-    }
+        .form-help .url {
+            font-weight: bold;
+            color: var(--link-color);
+        }
 
-    .instructions {
-        color: gray;
-        font-size: 85%;
-        &:hover {
-            color: var(--controlbox-text-color);
+        .instructions {
+            color: gray;
+            font-size: 85%;
+            &:hover {
+                color: var(--controlbox-text-color);
+            }
         }
     }
 }

src/plugins/register/tests/register.js

@@ -3,7 +3,7 @@
 const { stx, Strophe, $iq, sizzle, u } = converse.env;
 
 
-describe("The Registration Panel", function () {
+fdescribe("The Registration Panel", function () {
 
     afterEach(() => {
         // Remove the hash

src/plugins/rosterview/styles/roster.scss

@@ -19,37 +19,15 @@
     }
 
     #converse-roster {
-        text-align: left;
         width: 100%;
-        position: relative;
         margin: 0;
-        height: var(--roster-height);
         padding: 0;
-        overflow: hidden;
-        // XXX: FIXME
-        height: calc(100% - 70px);
-
-
-        /* Custom addition for CSP */
-        #online-count {
-            display: none;
-        }
-
-        .search-xmpp {
-            ul {
-                li.chat-info {
-                    padding-left: 10px;
-                }
-            }
-        }
 
         .roster-contacts {
             padding: 0;
             margin: 0 0 0.2em 0;
-            height: 100%;
-            overflow-x: hidden;
-            overflow-y: auto;
             color: var(--text-color);
+            display: contents;
 
             .roster-group-contacts {
                 .list-item {

src/shared/styles/_core.scss

@@ -45,7 +45,6 @@
         align-items: flex-start;
         font-family: var(--branding-font);
         color: var(--link-color);
-        margin-bottom: 0.75em;
 
       .brand-name-wrapper {
         display: flex;

src/shared/styles/_variables.scss

@@ -14,8 +14,6 @@ $mobile_portrait_length: 480px !default;
 
     --inline-action-margin: 0.75em;
 
-    --roster-height: 194px;
-
     --button-border-radius: 5px;
     --chatbox-border-radius: 4px;
 

src/shared/styles/themes/classic.scss

@@ -107,7 +107,6 @@
     --groupchats-header-color-dark: var(--chatroom-head-bg-color-dark);
 
     --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;

src/shared/styles/themes/dracula.scss

@@ -147,11 +147,9 @@
     --message-author-color: var(--purple);
 
     --controlbox-head-color: var(--purple);
-    --controlbox-head-btn-color: var(--subdued-color);
 
     --message-receipt-color: var(--green);
 
-
     --inverse-link-color: var(--foreground);
     --link-color: var(--cyan);
     --dark-link-color: var(--cyan);

src/shared/tests/mock.js

@@ -100,16 +100,12 @@ async function openControlBox(_converse) {
     const model = await _converse.api.controlbox.open();
     await u.waitUntil(() => model.get('connected'));
     toggleControlBox();
-    return this;
+    return model;
 }
 
 function closeControlBox () {
-    const controlbox = document.querySelector("#controlbox");
-    if (u.isVisible(controlbox)) {
-        const button = controlbox.querySelector(".close-chatbox-button");
-        (button !== null) && button.click();
-    }
-    return this;
+    const view = document.querySelector("#controlbox");
+    u.isVisible(view) && view.querySelector(".controlbox-heading__btn.close")?.click();
 }
 
 async function waitUntilBookmarksReturned (_converse, bookmarks=[]) {

src/types/plugins/controlbox/buttons.d.ts

@@ -0,0 +1,16 @@
+export default ControlboxButtons;
+declare class ControlboxButtons extends CustomElement {
+    initialize(): void;
+    model: any;
+    render(): import("lit").TemplateResult<1>;
+    /**
+     * @param {MouseEvent} ev
+     */
+    showUserSettingsModal(ev: MouseEvent): void;
+    /**
+     * @param {MouseEvent} ev
+     */
+    closeControlBox(ev: MouseEvent): void;
+}
+import { CustomElement } from "shared/components/element.js";
+//# sourceMappingURL=buttons.d.ts.map

src/types/plugins/controlbox/templates/buttons.d.ts

@@ -0,0 +1,3 @@
+declare function _default(el: import('../buttons').default): import("lit").TemplateResult<1>;
+export default _default;
+//# sourceMappingURL=buttons.d.ts.map

src/types/plugins/controlbox/templates/controlbox.d.ts

@@ -1,4 +1,3 @@
-declare function _default(el: ControlBoxView): import("lit").TemplateResult<1>;
+declare function _default(el: import('../controlbox').default): import("lit").TemplateResult<1>;
 export default _default;
-export type ControlBoxView = import('../controlbox').default;
 //# sourceMappingURL=controlbox.d.ts.map

src/types/plugins/controlbox/utils.d.ts

@@ -9,6 +9,10 @@ export function showControlBox(ev?: Event): void;
 export function navigateToControlBox(jid: string): void;
 export function disconnect(): void;
 export function clearSession(): void;
+/**
+ * @param {MouseEvent} ev
+ */
+export function logOut(ev: MouseEvent): Promise<void>;
 export function onChatBoxesFetched(): void;
 /**
  * Given the login `<form>` element, parse its data and update the

src/types/plugins/minimize/minimized-chat.d.ts

@@ -0,0 +1,31 @@
+export default class MinimizedChat extends CustomElement {
+    static get properties(): {
+        model: {
+            type: ObjectConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        type: {
+            type: StringConstructor;
+        };
+        num_unread: {
+            type: NumberConstructor;
+        };
+    };
+    model: any;
+    num_unread: any;
+    type: any;
+    title: any;
+    render(): import("lit").TemplateResult<1>;
+    /**
+     * @param {MouseEvent} ev
+     */
+    close(ev: MouseEvent): void;
+    /**
+     * @param {MouseEvent} ev
+     */
+    restore(ev: MouseEvent): void;
+}
+import { CustomElement } from "shared/components/element.js";
+//# sourceMappingURL=minimized-chat.d.ts.map

src/types/plugins/minimize/templates/trimmed_chat.d.ts

@@ -1,3 +1,3 @@
-declare function _default(el: import('../components/minimized-chat').default): import("lit").TemplateResult<1>;
+declare function _default(el: import('../minimized-chat').default): import("lit").TemplateResult<1>;
 export default _default;
 //# sourceMappingURL=trimmed_chat.d.ts.map

src/types/plugins/muc-views/modals/templates/occupant.d.ts

@@ -1,3 +1,3 @@
-declare function _default(el: any): import("lit").TemplateResult<1>;
+declare function _default(el: import('../occupant').default): import("lit").TemplateResult<1>;
 export default _default;
 //# sourceMappingURL=occupant.d.ts.map

src/types/plugins/profile/statusview.d.ts

@@ -3,9 +3,14 @@ declare class Profile extends CustomElement {
     initialize(): void;
     model: any;
     render(): import("lit").TemplateResult<1>;
-    showProfileModal(ev: any): void;
-    showStatusChangeModal(ev: any): void;
-    showUserSettingsModal(ev: any): void;
+    /**
+     * @param {MouseEvent} ev
+     */
+    showProfileModal(ev: MouseEvent): void;
+    /**
+     * @param {MouseEvent} ev
+     */
+    showStatusChangeModal(ev: MouseEvent): void;
 }
 import { CustomElement } from "shared/components/element.js";
 //# sourceMappingURL=statusview.d.ts.map

src/types/plugins/profile/utils.d.ts

@@ -1,3 +1,5 @@
-export function getPrettyStatus(stat: any): any;
-export function logOut(ev: any): Promise<void>;
+/**
+ * @param {string} stat
+ */
+export function getPrettyStatus(stat: string): any;
 //# sourceMappingURL=utils.d.ts.map