Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Fix the minimized chats toggle

Browse Source 
Clicking didn't make the minimized chats appear.
Also turn it into a Lit component
This commit is contained in:
JC Brand 2021-08-29 00:14:48 +02:00
parent 6c3a3dd1d3
commit 0c0af2d00b
4 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/plugins/minimize/styles/minimize.scss
View File

@ -67,6 +67,10 @@
width: 100%;
max-width: 9em;
flex-wrap: nowrap;
background-color: var(--chat-head-color);
}
.chat-head-chatroom {
background-color: var(--chatroom-head-bg-color);
}
&.minimized {
height: auto;

17
src/plugins/minimize/templates/trimmed_chat.js
View File

@ -4,12 +4,15 @@ import { __ } from 'i18n';
export default (o) => {
const i18n_tooltip = __('Click to restore this chat');
const close_color = o.type === 'chatroom' ? "var(--chatroom-head-color)" : "var(--chat-head-text-color)";
return html`
<div class="chat-head-${o.type} chat-head row no-gutters">
<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}
</a>
<a class="chatbox-btn close-chatbox-button fa fa-times" @click=${o.close}></a>
</div>`;
<div class="chat-head-${o.type} chat-head row no-gutters">
<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}
</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>
</div>`;
}

29
src/plugins/minimize/view.js
View File

@ -1,25 +1,28 @@
import MinimizedChatsToggle from './toggle.js';
import tpl_chats_panel from './templates/chats-panel.js';
import { ElementView } from '@converse/skeletor/src/element.js';
import { CustomElement } from 'shared/components/element';
import { _converse, api } from '@converse/headless/core';
import { initStorage } from '@converse/headless/utils/storage.js';
import { render } from 'lit';
export default class MinimizedChats extends ElementView {
export default class MinimizedChats extends CustomElement {
constructor () {
super();
this.initialize();
}
async initialize () {
this.model = _converse.chatboxes;
await this.initToggle();
this.render();
this.listenTo(this.minchats, 'change:collapsed', this.render)
this.listenTo(this.model, 'add', this.render)
this.listenTo(this.model, 'change:fullname', this.render)
this.listenTo(this.model, 'change:jid', this.render)
this.listenTo(this.model, 'change:minimized', this.render)
this.listenTo(this.model, 'change:name', this.render)
this.listenTo(this.model, 'change:num_unread', this.render)
this.listenTo(this.model, 'remove', this.render)
this.listenTo(this.minchats, 'change:collapsed', this.requestUpdate)
this.listenTo(this.model, 'add', this.requestUpdate)
this.listenTo(this.model, 'change:fullname', this.requestUpdate)
this.listenTo(this.model, 'change:jid', this.requestUpdate)
this.listenTo(this.model, 'change:minimized', this.requestUpdate)
this.listenTo(this.model, 'change:name', this.requestUpdate)
this.listenTo(this.model, 'change:num_unread', this.requestUpdate)
this.listenTo(this.model, 'remove', this.requestUpdate)
}
render () {
@ -29,7 +32,7 @@ export default class MinimizedChats extends ElementView {
const collapsed = this.minchats.get('collapsed');
const data = { chats, num_unread, num_minimized, collapsed };
data.toggle = ev => this.toggle(ev);
render(tpl_chats_panel(data), this);
return tpl_chats_panel(data);
}
async initToggle () {

4
src/shared/styles/_core.scss
View File

@ -10,6 +10,10 @@
direction: ltr;
z-index: 1031; // One more than bootstrap navbar
.flyout {
position: absolute;
}
textarea:disabled {
background-color: #EEE !important;
}