Commit 7a18f59f authored by JC Brand's avatar JC Brand

Simplify rendering of trimmed chats

Also fix issue where trimmed headline chatboxes don't show the proper
color
parent da713f31
#conversejs { #conversejs {
.chat-head-headline {
background-color: var(--headline-head-color);
}
.chatbox.headlines { .chatbox.headlines {
.chat-head { .chat-head {
&.chat-head-chatbox { &.chat-head-chatbox {
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
* </message * </message
*/ */
sinon.spy(utils, 'isHeadlineMessage'); sinon.spy(utils, 'isHeadlineMessage');
var stanza = $msg({ const stanza = $msg({
'xmlns': 'jabber:client', 'xmlns': 'jabber:client',
'to': 'dummy@localhost', 'to': 'dummy@localhost',
'type': 'chat', 'type': 'chat',
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
* </message> * </message>
*/ */
sinon.spy(utils, 'isHeadlineMessage'); sinon.spy(utils, 'isHeadlineMessage');
var stanza = $msg({ const stanza = $msg({
'type': 'headline', 'type': 'headline',
'from': 'notify.example.com', 'from': 'notify.example.com',
'to': 'dummy@localhost', 'to': 'dummy@localhost',
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
expect(utils.isHeadlineMessage.returned(true)).toBeTruthy(); expect(utils.isHeadlineMessage.returned(true)).toBeTruthy();
utils.isHeadlineMessage.restore(); // unwraps utils.isHeadlineMessage.restore(); // unwraps
// Headlines boxes don't show an avatar // Headlines boxes don't show an avatar
var view = _converse.chatboxviews.get('notify.example.com'); const view = _converse.chatboxviews.get('notify.example.com');
expect(view.model.get('show_avatar')).toBeFalsy(); expect(view.model.get('show_avatar')).toBeFalsy();
expect(view.el.querySelector('img.avatar')).toBe(null); expect(view.el.querySelector('img.avatar')).toBe(null);
done(); done();
......
...@@ -173,19 +173,10 @@ converse.plugins.add('converse-minimize', { ...@@ -173,19 +173,10 @@ converse.plugins.add('converse-minimize', {
/* The initialize function gets called as soon as the plugin is /* The initialize function gets called as soon as the plugin is
* loaded by Converse.js's plugin machinery. * loaded by Converse.js's plugin machinery.
*/ */
const { _converse } = this, const { _converse } = this;
{ __ } = _converse; const { __ } = _converse;
// Add new HTML templates.
_converse.templates.chatbox_minimize = tpl_chatbox_minimize;
_converse.templates.toggle_chats = tpl_toggle_chats;
_converse.templates.trimmed_chat = tpl_trimmed_chat;
_converse.templates.chats_panel = tpl_chats_panel;
_converse.api.settings.update({
'no_trimming': false, // Set to true for tests
});
_converse.api.settings.update({'no_trimming': false});
const minimizableChatBox = { const minimizableChatBox = {
maximize () { maximize () {
...@@ -360,7 +351,6 @@ converse.plugins.add('converse-minimize', { ...@@ -360,7 +351,6 @@ converse.plugins.add('converse-minimize', {
_converse.MinimizedChatBoxView = Backbone.NativeView.extend({ _converse.MinimizedChatBoxView = Backbone.NativeView.extend({
tagName: 'div', tagName: 'div',
className: 'chat-head row no-gutters',
events: { events: {
'click .close-chatbox-button': 'close', 'click .close-chatbox-button': 'close',
'click .restore-chat': 'restore' 'click .restore-chat': 'restore'
...@@ -368,21 +358,20 @@ converse.plugins.add('converse-minimize', { ...@@ -368,21 +358,20 @@ converse.plugins.add('converse-minimize', {
initialize () { initialize () {
this.model.on('change:num_unread', this.render, this); this.model.on('change:num_unread', this.render, this);
this.model.on('change:name', this.render, this);
this.model.on('change:fullname', this.render, this);
this.model.on('change:jid', this.render, this);
this.model.on('destroy', this.remove, this);
}, },
render () { render () {
const data = Object.assign( const data = Object.assign(
this.model.toJSON(), this.model.toJSON(), {
{ 'tooltip': __('Click to restore this chat') } 'tooltip': __('Click to restore this chat'),
); 'title': this.model.getDisplayName()
if (this.model.get('type') === 'chatroom') { });
data.title = this.model.get('name');
u.addClass('chat-head-chatroom', this.el);
} else {
data.title = this.model.get('fullname');
u.addClass('chat-head-chatbox', this.el);
}
this.el.innerHTML = tpl_trimmed_chat(data); this.el.innerHTML = tpl_trimmed_chat(data);
this.setElement(this.el.firstElementChild);
return this.el; return this.el;
}, },
......
...@@ -12,7 +12,6 @@ import converse from "./converse-core"; ...@@ -12,7 +12,6 @@ import converse from "./converse-core";
import sizzle from "sizzle"; import sizzle from "sizzle";
const CHATROOMS_TYPE = 'chatroom';
const { Promise, Strophe, $iq, _, dayjs } = converse.env; const { Promise, Strophe, $iq, _, dayjs } = converse.env;
const u = converse.env.utils; const u = converse.env.utils;
...@@ -89,7 +88,7 @@ converse.plugins.add('converse-mam', { ...@@ -89,7 +88,7 @@ converse.plugins.add('converse-mam', {
if (this.disable_mam) { if (this.disable_mam) {
return; return;
} }
const is_groupchat = this.get('type') === CHATROOMS_TYPE; const is_groupchat = this.get('type') === _converse.CHATROOMS_TYPE;
const mam_jid = is_groupchat ? this.get('jid') : _converse.bare_jid; const mam_jid = is_groupchat ? this.get('jid') : _converse.bare_jid;
if (!(await _converse.api.disco.supports(Strophe.NS.MAM, mam_jid))) { if (!(await _converse.api.disco.supports(Strophe.NS.MAM, mam_jid))) {
return; return;
......
<a href="#" class="restore-chat w-100 align-self-center" title="{{{o.tooltip}}}"> <div class="chat-head-{{{o.type}}} chat-head row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="{{{o.tooltip}}}">
{[ if (o.num_unread) { ]} {[ if (o.num_unread) { ]}
<span class="message-count badge badge-light">{{{o.num_unread}}}</span> <span class="message-count badge badge-light">{{{o.num_unread}}}</span>
{[ } ]} {[ } ]}
{{{o.title || o.jid }}} {{{o.title}}}
</a> </a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a> <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment