CSS and markup improvements to the controlbox

- Remove the `.controlbox-head` element
conversejs · Jul 27, 2024 · d335735 · d335735
1 parent 292132b
commit d335735
Show file tree

Hide file tree

Showing 13 changed files with 115 additions and 121 deletions.
diff --git a/dev.html b/dev.html
@@ -38,7 +38,7 @@
         muc_respect_autojoin: true,
         muc_show_logs_before_join: true,
         notify_all_room_messages: ['[email protected]'],
-        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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);
+        }
+    }
+}