Fix CSS and work on declaratively rendering the controlbox toggle

sass/_controlbox.scss

@@ -384,218 +384,221 @@
     }
 }
 
-converse-chats {
-    .converse-overlayed {
-        .toggle-controlbox {
-            order: -1;
-            text-align: center;
-            background-color: var(--link-color);
-            border-top-left-radius: var(--button-border-radius);
-            border-top-right-radius: var(--button-border-radius);
-            color: #0a0a0a;
-            float: right;
-            height: 100%;
-            margin: 0 var(--chat-gutter);
-            padding: 1em;
-            span {
-                color: var(--inverse-link-color);
+#conversejs {
+    converse-chats {
+        &.converse-overlayed {
+
+            .toggle-controlbox {
+                order: -1;
+                text-align: center;
+                background-color: var(--link-color);
+                border-top-left-radius: var(--button-border-radius);
+                border-top-right-radius: var(--button-border-radius);
+                color: #0a0a0a;
+                float: right;
+                height: 100%;
+                margin: 0 var(--chat-gutter);
+                padding: 1em;
+                span {
+                    color: var(--inverse-link-color);
+                }
             }
-        }
 
-        #controlbox {
-            min-width: var(--controlbox-width) !important;
-            width: var(--controlbox-width);
-            .box-flyout {
+            #controlbox {
                 min-width: var(--controlbox-width) !important;
                 width: var(--controlbox-width);
-            }
+                .box-flyout {
+                    min-width: var(--controlbox-width) !important;
+                    width: var(--controlbox-width);
+                }
 
-            .login-trusted {
-                white-space: nowrap;
-                font-size: 90%;
-            }
+                .login-trusted {
+                    white-space: nowrap;
+                    font-size: 90%;
+                }
 
-            #converse-login-trusted {
-                margin-top: 0.5em;
-            }
-            &:not(.logged-out) {
-                .controlbox-head {
-                    height: 15px;
+                #converse-login-trusted {
+                    margin-top: 0.5em;
+                }
+                &:not(.logged-out) {
+                    .controlbox-head {
+                        height: 15px;
+                    }
                 }
-            }
 
-            .controlbox-head {
-                display: flex;
-                flex-direction: row-reverse;
-                flex-wrap: nowrap;
-                justify-content: space-between;
-                min-height: 0;
+                .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;
+                    .brand-heading {
+                        color: var(--controlbox-text-color);
+                        font-size: 2em;
+                    }
+                    .chatbox-btn {
+                        color: var(--controlbox-head-color);
+                        margin: 0;
+                    }
                 }
-            }
 
-            #converse-register, #converse-login {
-                @include make-col(12);
-                padding-bottom: 0;
-            }
+                #converse-register, #converse-login {
+                    @include make-col(12);
+                    padding-bottom: 0;
+                }
 
-            #converse-register {
-                .button-cancel {
-                    font-size: 90%;
+                #converse-register {
+                    .button-cancel {
+                        font-size: 90%;
+                    }
                 }
-            }
 
-            .controlbox-panes {
-                border-radius: var(--chatbox-border-radius);
+                .controlbox-panes {
+                    border-radius: var(--chatbox-border-radius);
+                }
             }
         }
-    }
 
-    .converse-embedded,
-    .converse-fullscreen{
-        .toggle-controlbox {
-            display: none;
-        }
-    }
-
-    .converse-embedded,
-    .converse-fullscreen,
-    .converse-mobile {
-        #controlbox {
-            @include make-col-ready();
-
-            @include media-breakpoint-up(md) {
-                @include make-col(4);
-            }
-            @include media-breakpoint-up(lg) {
-                @include make-col(3);
-            }
-            @include media-breakpoint-up(xl) {
-                @include make-col(2);
+        &.converse-embedded,
+        &.converse-fullscreen{
+            .toggle-controlbox {
+                display: none;
             }
+        }
 
-            &.logged-out {
-                @include make-col(12);
-            }
+        &.converse-embedded,
+        &.converse-fullscreen,
+        &.converse-mobile {
+            #controlbox {
+                @include make-col-ready();
 
-            margin: 0;
+                @include media-breakpoint-up(md) {
+                    @include make-col(4);
+                }
+                @include media-breakpoint-up(lg) {
+                    @include make-col(3);
+                }
+                @include media-breakpoint-up(xl) {
+                    @include make-col(2);
+                }
 
-            .controlbox-pane {
-                border-radius: 0;
-            }
+                &.logged-out {
+                    @include make-col(12);
+                }
 
-            .flyout {
-                border-radius: 0;
-            }
+                margin: 0;
 
-            #converse-login-panel {
-                border-radius: 0;
-                .converse-form {
-                    padding: 3em 2em 3em;
+                .controlbox-pane {
+                    border-radius: 0;
                 }
-            }
 
-            .toggle-register-login {
-                line-height: var(--line-height-huge);
-            }
+                .flyout {
+                    border-radius: 0;
+                }
 
-            converse-brand-logo {
-                @include make-col(12);
-                margin-top: 5em;
-                margin-bottom: 1em;
-                .brand-heading {
-                    width: 100%;
-                    font-size: 500%;
-                    padding: 0.7em 0 0 0;
-                    opacity: 0.8;
-                    color: var(--brand-heading-color);
+                #converse-login-panel {
+                    border-radius: 0;
+                    .converse-form {
+                        padding: 3em 2em 3em;
+                    }
                 }
-                .brand-subtitle {
-                    font-size: 90%;
-                    padding: 0.5em;
+
+                .toggle-register-login {
+                    line-height: var(--line-height-huge);
                 }
-                @media screen and (max-width: $mobile-portrait-length) {
+
+                converse-brand-logo {
+                    @include make-col(12);
+                    margin-top: 5em;
+                    margin-bottom: 1em;
                     .brand-heading {
-                        font-size: 300%;
+                        width: 100%;
+                        font-size: 500%;
+                        padding: 0.7em 0 0 0;
+                        opacity: 0.8;
+                        color: var(--brand-heading-color);
+                    }
+                    .brand-subtitle {
+                        font-size: 90%;
+                        padding: 0.5em;
+                    }
+                    @media screen and (max-width: $mobile-portrait-length) {
+                        .brand-heading {
+                            font-size: 300%;
+                        }
                     }
                 }
-            }
 
-            &.logged-out {
-                @include make-col(12);
-                @include fade-in;
-                width: 100%;
-                .box-flyout {
+                &.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);
+                .box-flyout {
+                    border: 0;
+                    width: 100%;
+                    z-index: 1;
+                    background-color: var(--controlbox-head-color);
 
-                .controlbox-head {
-                    display: none;
+                    .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) {
+                #converse-register, #converse-login {
+                    @include make-col-ready();
                     @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;
+
+                    @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;
+                    }
                 }
             }
         }
-    }
 
-    .converse-fullscreen {
-        .controlbox-panes {
-            padding-top: 1em;
+        &.converse-fullscreen {
+            .controlbox-panes {
+                padding-top: 1em;
+            }
         }
-    }
 
-    .converse-overlayed {
-        .brand-heading {
-            padding-top: 0.8rem;
-            padding-left: 0.8rem;
-            width: 100%;
-        }
-        .converse-svg-logo {
-            height: 1em;
-        }
-        #controlbox {
-            #converse-login-panel {
-                height: 100%;
+        &.converse-overlayed {
+            .brand-heading {
+                padding-top: 0.8rem;
+                padding-left: 0.8rem;
+                width: 100%;
             }
-            .controlbox-panes {
-                margin-top: 0.5em;
+            .converse-svg-logo {
+                height: 1em;
+            }
+            #controlbox {
+                #converse-login-panel {
+                    height: 100%;
+                }
+                .controlbox-panes {
+                    margin-top: 0.5em;
+                }
             }
         }
     }

spec/register.js

@@ -5,9 +5,9 @@ const $iq = converse.env.$iq;
 const { sizzle}  = converse.env;
 const u = converse.env.utils;
 
-describe("The Registration Panel", function () {
+fdescribe("The Registration Panel", function () {
 
-    fit("is not available unless allow_registration=true",
+    it("is not available unless allow_registration=true",
         mock.initConverse(
             ['chatBoxesInitialized'],
             { auto_login: false,
@@ -20,26 +20,25 @@ describe("The Registration Panel", function () {
         done();
     }));
 
-    it("can be opened by clicking on the registration tab",
+    fit("can be opened by clicking on the registration tab",
         mock.initConverse(
             ['chatBoxesInitialized'],
             { auto_login: false,
               allow_registration: true },
             async function (done, _converse) {
 
-        const toggle = document.querySelector(".toggle-controlbox");
+        const toggle = await u.waitUntil(() => document.querySelector(".toggle-controlbox"));
         if (!u.isVisible(document.querySelector("#controlbox"))) {
             if (!u.isVisible(toggle)) {
                 u.removeClass('hidden', toggle);
             }
             toggle.click();
         }
-        await u.waitUntil(() => _.get(_converse.chatboxviews.get('controlbox'), 'registerpanel'), 300);
         const cbview = _converse.chatboxviews.get('controlbox');
         const panels = cbview.querySelector('.controlbox-panes');
         const login = panels.firstElementChild;
         const registration = panels.childNodes[1];
-        const register_link = cbview.querySelector('a.register-account');
+        const register_link = await u.waitUntil(() => cbview.querySelector('a.register-account'));
         expect(register_link.textContent).toBe("Create an account");
         register_link.click();
 

src/plugins/controlbox/templates/toggle.js

@@ -2,7 +2,7 @@ import { __ } from 'i18n';
 import { api } from "@converse/headless/core";
 import { html } from "lit-html";
 
-export default  () => {
+export default  (o) => {
     const i18n_toggle = api.connection.connected() ? __('Chat Contacts') : __('Toggle chat');
-    return html`<a id="toggle-controlbox" class="toggle-controlbox"><span class="toggle-feedback">${i18n_toggle}</span></a>`;
+    return html`<a id="toggle-controlbox" class="toggle-controlbox ${o.hide ? 'hidden' : ''}" @click=${o.onClick}><span class="toggle-feedback">${i18n_toggle}</span></a>`;
 }

src/plugins/controlbox/toggle.js

@@ -8,9 +8,6 @@ const u = converse.env.utils;
 
 
 class ControlBoxToggle extends ElementView {
-    events = {
-        'click': 'onClick'
-    }
 
     async initialize () {
         await api.waitUntil('initialized');
@@ -18,25 +15,11 @@ class ControlBoxToggle extends ElementView {
     }
 
     render () {
-        // We let the render method of ControlBoxView decide whether
-        // the ControlBox or the Toggle must be shown. This prevents
-        // artifacts (i.e. on page load the toggle is shown only to then
-        // seconds later be hidden in favor of the controlbox).
-        render(tpl_controlbox_toggle(), this);
-        return this;
-    }
-
-    hide (callback) {
-        if (u.isVisible(this)) {
-            u.hideElement(this);
-            callback();
-        }
-    }
-
-    show (callback) {
-        if (!u.isVisible(this)) {
-            u.fadeIn(this, callback);
-        }
+        const controlbox = _converse.chatboxes.get('controlbox');
+        render(tpl_controlbox_toggle({
+            'onClick': (ev) => this.onClick(ev),
+            'hide': !controlbox.get('closed')
+        }), this);
     }
 
     showControlBox () { // eslint-disable-line class-methods-use-this

src/plugins/controlbox/view.js

@@ -20,7 +20,6 @@ class ControlBoxView extends ElementView {
     initialize () {
         this.model = _converse.chatboxes.get(this.getAttribute('id'));
         this.listenTo(this.model, 'change:connected', this.onConnected);
-        // this.listenTo(this.model, 'hide', this.hide);
         this.listenTo(this.model, 'show', this.show);
         this.render();
         _converse.chatboxviews.add('controlbox', this);
@@ -84,20 +83,16 @@ class ControlBoxView extends ElementView {
         return this;
     }
 
-    hide (callback) {
+    hide () {
         if (api.settings.get('sticky_controlbox')) {
             return;
         }
         u.addClass('hidden', this);
         api.trigger('chatBoxClosed', this);
-        if (!api.connection.connected()) {
-            _converse.controlboxtoggle.render();
-        }
-        _converse.controlboxtoggle.show(callback);
         return this;
     }
 
-    onControlBoxToggleHidden () {
+    show () {
         this.model.set('closed', false);
         this.classList.remove('hidden');
         /**
@@ -106,10 +101,6 @@ class ControlBoxView extends ElementView {
          * @type {_converse.ControlBox}
          */
         api.trigger('controlBoxOpened', this);
-    }
-
-    show () {
-        _converse.controlboxtoggle.hide(() => this.onControlBoxToggleHidden());
         return this;
     }
 

src/plugins/register/index.js

@@ -6,6 +6,7 @@
  * @copyright 2020, the Converse.js contributors
  * @license Mozilla Public License (MPLv2)
  */
+import './panel.js';
 import '../controlbox/index.js';
 import log from '@converse/headless/log';
 import { __ } from 'i18n';

src/plugins/register/panel.js

@@ -36,7 +36,8 @@ class RegisterPanel extends ElementView {
 
     initialize () {
         this.reset();
-        this.model = _converse.controlbox;
+        const controlbox = _converse.chatboxes.get('controlbox');
+        this.model = controlbox;
         api.listen.on('connectionInitialized', () => this.registerHooks());
         this.listenTo(this.model, 'change:registration_status', this.render);
 
@@ -46,8 +47,6 @@ class RegisterPanel extends ElementView {
         } else {
             this.model.set('registration_status', CHOOSE_PROVIDER);
         }
-
-        this.initPopovers();
     }
 
     render () {