Fix markup for trimmed chats

src/plugins/controlbox/toggle.js

@@ -1,6 +1,6 @@
-import tplControlboxToggle from "./templates/toggle.js";
-import { CustomElement } from 'shared/components/element.js';
 import { _converse, api } from "@converse/headless";
+import { CustomElement } from 'shared/components/element.js';
+import tplControlboxToggle from "./templates/toggle.js";
 
 
 class ControlBoxToggle extends CustomElement {

src/plugins/minimize/index.js

@@ -8,8 +8,6 @@
  */
 import debounce from 'lodash-es/debounce';
 import { _converse, api, converse, constants } from '@converse/headless';
-import './view.js';
-import './components/minimized-chat.js';
 import MinimizedChatsToggle from './toggle.js';
 import {
     addMinimizeButtonToChat,
@@ -21,6 +19,9 @@ import {
     trimChats
 } from './utils.js';
 
+import './view.js';
+import './minimized-chat.js';
+
 import './styles/minimize.scss';
 
 const { CHATROOMS_TYPE } = constants;

src/plugins/minimize/components/minimized-chat.js → src/plugins/minimize/minimized-chat.js

@@ -1,7 +1,7 @@
 import { api } from "@converse/headless";
-import tplTrimmedChat from "../templates/trimmed_chat.js";
+import tplTrimmedChat from "./templates/trimmed_chat.js";
 import { CustomElement } from 'shared/components/element.js';
-import { maximize } from  '../utils.js';
+import { maximize } from  './utils.js';
 
 
 export default class MinimizedChat extends CustomElement {
@@ -24,21 +24,20 @@ export default class MinimizedChat extends CustomElement {
     }
 
     render () {
-        const data = {
-            'close': ev => this.close(ev),
-            'num_unread': this.num_unread,
-            'restore': ev => this.restore(ev),
-            'title': this.title,
-            'type': this.type
-        };
-        return tplTrimmedChat(data);
+        return tplTrimmedChat(this);
     }
 
+    /**
+     * @param {MouseEvent} ev
+     */
     close (ev) {
         ev?.preventDefault();
         this.model.close();
     }
 
+    /**
+     * @param {MouseEvent} ev
+     */
     restore (ev) {
         ev?.preventDefault();
         maximize(this.model);

src/plugins/minimize/styles/minimize.scss

@@ -33,13 +33,13 @@
                     width: var(--minimized-chats-width);
 
                     .chat-head {
+                        flex-shrink: 1;
                         min-height: 0;
                         padding: 0.3em;
                         border-radius: var(--chatbox-border-radius);
                         height: 35px;
                         margin-bottom: 0.2em;
                         width: 100%;
-                        max-width: 9em;
                         flex-wrap: nowrap;
                         background-color: var(--chat-head-color);
                     }

src/plugins/minimize/templates/trimmed_chat.js

@@ -2,25 +2,28 @@ import { html } from "lit";
 import { __ } from 'i18n';
 
 
-export default (o) => {
+/**
+ * @param {import('../minimized-chat').default} el
+ */
+export default (el) => {
     const i18n_tooltip = __('Click to restore this chat');
     let close_color;
-    if (o.type === 'chatroom') {
+    if (el.type === 'chatroom') {
         close_color = "var(--chatroom-head-color)";
-    } else if (o.type === 'headline') {
+    } else if (el.type === 'headline') {
         close_color = "var(--headlines-head-text-color)";
     } else {
         close_color = "var(--chat-head-text-color)";
     }
 
     return html`
-    <div class="chat-head-${o.type} chat-head row g-0">
-        <a class="restore-chat w-100 align-self-center" title="${i18n_tooltip}" @click=${o.restore}>
-            ${o.num_unread ? html`<span class="message-count badge badge-light">${o.num_unread}</span>` : '' }
-            ${o.title}
+    <div class="chat-head-${el.type} chat-head row g-0">
+        <a class="col-10 restore-chat align-self-center" title="${i18n_tooltip}" @click=${ev => el.restore(ev)}>
+            ${el.num_unread ? html`<span class="message-count badge badge-light">${el.num_unread}</span>` : '' }
+            ${el.title}
         </a>
-        <a class="chatbox-btn close-chatbox-button" @click=${o.close}>
-            <converse-icon color=${close_color} class="fas fa-times" @click=${o.close} size="1em"></converse-icon>
+        <a class="col-2 pl-1" @click=${ev => el.close(ev)}>
+            <converse-icon color=${close_color} class="fas fa-times" @click=${ev => el.close(ev)} size="1em"></converse-icon>
         </a>
     </div>`;
 }

src/shared/styles/background.scss

@@ -9,7 +9,6 @@
     .converse-brand {
         display: flex;
         justify-content: space-between;
-        margin-top: 15vh;
         animation-name: fadein;
         animation-fill-mode: forwards;
         animation-duration: 5s;
@@ -47,6 +46,10 @@
 
 .converse-fullscreen {
     #conversejs-bg {
+        .converse-brand {
+            margin-top: 15vh;
+        }
+
         .converse-brand__padding {
             @include make-col-ready();
             @include media-breakpoint-up(md) {
@@ -88,6 +91,9 @@
 
 .converse-overlayed {
     #conversejs-bg {
+        height: 100vh;
+        width: 100vw;
+        background-color: var(--global-background-color);
         .converse-brand__padding {
             @include make-col-ready();
             @include media-breakpoint-up(md) {

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

@@ -18,8 +18,14 @@ export default class MinimizedChat extends CustomElement {
     type: any;
     title: any;
     render(): import("lit").TemplateResult<1>;
-    close(ev: any): void;
-    restore(ev: any): void;
+    /**
+     * @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(o: any): import("lit").TemplateResult<1>;
+declare function _default(el: import('../components/minimized-chat').default): import("lit").TemplateResult<1>;
 export default _default;
 //# sourceMappingURL=trimmed_chat.d.ts.map