From d3357355a246e09c7738278119260308ea58bb1f Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Sat, 27 Jul 2024 09:50:50 +0200
Subject: [PATCH] CSS and markup improvements to the controlbox

- Remove the `.controlbox-head` element
---
 dev.html                                      |  2 +-
 src/plugins/controlbox/controlbox.js          |  6 +-
 src/plugins/controlbox/index.js               |  1 -
 .../controlbox/styles/_controlbox.scss        | 83 ++++---------------
 .../controlbox/styles/controlbox-head.scss    | 24 ------
 .../controlbox/templates/controlbox.js        | 22 +----
 src/plugins/profile/modals/chat-status.js     |  7 +-
 .../modals/styles/chat-status-modal.scss      | 21 +++++
 src/plugins/profile/statusview.js             | 25 +++++-
 src/plugins/profile/styles/profile.scss       | 36 ++++++++
 src/plugins/profile/templates/profile.js      |  6 ++
 src/shared/styles/themes/classic.scss         |  1 -
 src/shared/styles/themes/dracula.scss         |  2 -
 13 files changed, 115 insertions(+), 121 deletions(-)
 delete mode 100644 src/plugins/controlbox/styles/controlbox-head.scss
 create mode 100644 src/plugins/profile/modals/styles/chat-status-modal.scss
 create mode 100644 src/plugins/profile/styles/profile.scss

diff --git a/dev.html b/dev.html
index b6fb9677b3..8cf86da986 100644
--- a/dev.html
+++ b/dev.html
@@ -38,7 +38,7 @@
         muc_respect_autojoin: true,
         muc_show_logs_before_join: true,
         notify_all_room_messages: ['discuss@conference.conversejs.org'],
-        view_mode: 'fullscreen',
+        // view_mode: 'fullscreen',
         websocket_url: 'wss://conversejs.org/xmpp-websocket',
         // websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
         whitelisted_plugins: ['converse-debug'],
diff --git a/src/plugins/controlbox/controlbox.js b/src/plugins/controlbox/controlbox.js
index 3268aa7c9c..aeb8ee34f0 100644
--- a/src/plugins/controlbox/controlbox.js
+++ b/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 });
diff --git a/src/plugins/controlbox/index.js b/src/plugins/controlbox/index.js
index 0d0523fe0a..c4c1c0bde6 100644
--- a/src/plugins/controlbox/index.js
+++ b/src/plugins/controlbox/index.js
@@ -14,7 +14,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;
 
diff --git a/src/plugins/controlbox/styles/_controlbox.scss b/src/plugins/controlbox/styles/_controlbox.scss
index ffdf3d89af..288da70100 100644
--- a/src/plugins/controlbox/styles/_controlbox.scss
+++ b/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,6 +46,10 @@
             display: block;
         }
 
+        converse-user-profile {
+            padding: 0.5em 1em;
+        }
+
         .brand-name-wrapper {
             font-size: 200%;
         }
@@ -134,21 +114,6 @@
             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 +129,6 @@
         }
 
         .controlbox-section {
-
             .controlbox-heading {
                 font-family: var(--heading-font);
                 color: var(--controlbox-heading-color);
@@ -271,14 +235,6 @@
                 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 {
@@ -348,11 +304,6 @@
                 #converse-login-trusted {
                     margin-top: 0.5em;
                 }
-                &:not(.logged-out) {
-                    .controlbox-head {
-                        height: 15px;
-                    }
-                }
 
                 #converse-register, #converse-login {
                     @include make-col(12);
@@ -385,15 +336,23 @@
         }
 
         &.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 {
@@ -418,6 +377,8 @@
 
                 .flyout {
                     border-radius: 0;
+                    width: 100%;
+                    z-index: 1;
                 }
 
                 #converse-login-panel {
@@ -461,16 +422,6 @@
                         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();
diff --git a/src/plugins/controlbox/styles/controlbox-head.scss b/src/plugins/controlbox/styles/controlbox-head.scss
deleted file mode 100644
index f10c3332ca..0000000000
--- a/src/plugins/controlbox/styles/controlbox-head.scss
+++ /dev/null
@@ -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);
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/src/plugins/controlbox/templates/controlbox.js b/src/plugins/controlbox/templates/controlbox.js
index 96aca19e18..594abd14fc 100644
--- a/src/plugins/controlbox/templates/controlbox.js
+++ b/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');
@@ -26,27 +23,16 @@ function whenNotConnected(el) {
 }
 
 /**
- * @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>
+        ${el.model.get('connected') ? html` <converse-user-profile></converse-user-profile>` : ''}
         <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>
+                    ? 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>
diff --git a/src/plugins/profile/modals/chat-status.js b/src/plugins/profile/modals/chat-status.js
index 0c337f58f1..aa119bd73c 100644
--- a/src/plugins/profile/modals/chat-status.js
+++ b/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');
     }
 
diff --git a/src/plugins/profile/modals/styles/chat-status-modal.scss b/src/plugins/profile/modals/styles/chat-status-modal.scss
new file mode 100644
index 0000000000..bb913f646e
--- /dev/null
+++ b/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;
+        }
+    }
+}
+
diff --git a/src/plugins/profile/statusview.js b/src/plugins/profile/statusview.js
index ee3e00da93..009579518f 100644
--- a/src/plugins/profile/statusview.js
+++ b/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,38 @@ 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);
     }
 
+    /**
+     * @param {MouseEvent} ev
+     */
     showUserSettingsModal (ev) {
         ev?.preventDefault();
         api.modal.show('converse-user-settings-modal', { model: this.model, _converse }, ev);
     }
+
+    /**
+     * @param {MouseEvent} ev
+     */
+    closeControlBox (ev) {
+        ev?.preventDefault();
+        const view = _converse.state.chatboxviews.get('controlbox');
+        view?.close();
+    }
 }
 
 api.elements.define('converse-user-profile', Profile);
diff --git a/src/plugins/profile/styles/profile.scss b/src/plugins/profile/styles/profile.scss
new file mode 100644
index 0000000000..3215cb6dc5
--- /dev/null
+++ b/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);
+        }
+    }
+}
diff --git a/src/plugins/profile/templates/profile.js b/src/plugins/profile/templates/profile.js
index a3b7872770..734700132c 100644
--- a/src/plugins/profile/templates/profile.js
+++ b/src/plugins/profile/templates/profile.js
@@ -53,6 +53,12 @@ export default (el) => {
                 <span class="username w-100 align-self-center">${el.model.getDisplayName()}</span>
                 ${show_settings_button  ? tplUserSettingsButton(el) : ''}
                 ${api.settings.get('allow_logout') ? tplSignout() : ''}
+                ${api.settings.get('sticky_controlbox') ? ''
+                    : 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>
+                    `}
             </div>
             <div class="d-flex xmpp-status">
                 <a class="change-status"
diff --git a/src/shared/styles/themes/classic.scss b/src/shared/styles/themes/classic.scss
index 5b77e712b0..c6d101cda1 100644
--- a/src/shared/styles/themes/classic.scss
+++ b/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;
diff --git a/src/shared/styles/themes/dracula.scss b/src/shared/styles/themes/dracula.scss
index 2b2f090fd6..d7655c864c 100644
--- a/src/shared/styles/themes/dracula.scss
+++ b/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);