Skip to content

C
converse.js
Commit 1d9bbb8d authored by JC Brand's avatar JC Brand
Browse files
Options

Message display improvements 

* Checkmark and edit modal button are now on the right
* Instead of showing checkmarks for MUC messages,
  we now show them as light grey before MUC reflection
* Simplify message markup by requiring less `if` statements
parent f2ac9ef4
Hide whitespace changes
Inline Side-by-side
Showing with 42 additions and 24 deletions
sass/_messages.scss
View file @ 1d9bbb8d
......@@ -130,7 +130,21 @@
margin-left: 0.5rem;
width: calc(100% - var(--message-avatar-width));
}
.chat-msg__content--me {
.chat-msg__body--groupchat {
.chat-msg__text {
color: var(--subdued-color);
}
&.chat-msg__body--delayed .chat-msg__text,
&.chat-msg__body--received .chat-msg__text {
color: var(--message-text-color);
}
}
}
.chat-msg__content--action {
width: 100%;
margin-left: 0;
}
......@@ -164,8 +178,8 @@
}
.chat-msg__text {
padding: 0;
color: var(--message-text-color);
padding: 0;
width: 100%;
white-space: pre-wrap;
a {
......@@ -255,7 +269,7 @@
}
&.chat-msg--action {
.chat-msg__content {
flex-wrap: wrap;
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-start;
}
......@@ -286,6 +300,7 @@
}
.chat-msg__content {
margin-left: 2.75rem;
width: 100%;
}
}
......
spec/messages.js
View file @ 1d9bbb8d
......@@ -2301,7 +2301,7 @@
expect(view.model.messages.last().get('affiliation')).toBe('owner');
expect(view.model.messages.last().get('role')).toBe('moderator');
expect(view.el.querySelectorAll('.chat-msg').length).toBe(1);
expect(sizzle('.chat-msg__author', view.el).pop().classList.value.trim()).toBe('chat-msg__author chat-msg__me moderator');
expect(sizzle('.chat-msg__author', view.el).pop().classList.value.trim()).toBe('chat-msg__author moderator');
let presence = $pres({
to:'romeo@montague.lit/orchard',
......@@ -2328,7 +2328,7 @@
expect(view.model.messages.last().get('affiliation')).toBe('member');
expect(view.model.messages.last().get('role')).toBe('participant');
expect(view.el.querySelectorAll('.chat-msg').length).toBe(2);
expect(sizzle('.chat-msg__author', view.el).pop().classList.value.trim()).toBe('chat-msg__author chat-msg__me participant');
expect(sizzle('.chat-msg__author', view.el).pop().classList.value.trim()).toBe('chat-msg__author participant');
presence = $pres({
to:'romeo@montague.lit/orchard',
......@@ -2348,7 +2348,7 @@
expect(view.model.messages.last().get('affiliation')).toBe('owner');
expect(view.model.messages.last().get('role')).toBe('moderator');
expect(view.el.querySelectorAll('.chat-msg').length).toBe(3);
expect(sizzle('.chat-msg__author', view.el).pop().classList.value.trim()).toBe('chat-msg__author chat-msg__me moderator');
expect(sizzle('.chat-msg__author', view.el).pop().classList.value.trim()).toBe('chat-msg__author moderator');
done();
}));
......@@ -2562,21 +2562,24 @@
keyCode: 13 // Enter
});
await new Promise((resolve, reject) => view.once('messageInserted', resolve));
expect(view.el.querySelectorAll('.chat-msg__body.chat-msg__body--received').length).toBe(0);
const msg_obj = view.model.messages.at(0);
const stanza = u.toStanza(`
<message xmlns="jabber:client"
from="${msg_obj.get('from')}"
to="${_converse.connection.jid}"
type="groupchat">
<body>${msg_obj.get('message')}</body>
<msg_body>${msg_obj.get('message')}</msg_body>
<stanza-id xmlns="urn:xmpp:sid:0"
id="5f3dbc5e-e1d3-4077-a492-693f3769c7ad"
by="lounge@montague.lit"/>
<origin-id xmlns="urn:xmpp:sid:0" id="${msg_obj.get('origin_id')}"/>
</message>`);
await view.model.onMessage(stanza);
await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-msg__receipt').length, 500);
expect(view.el.querySelectorAll('.chat-msg__receipt').length).toBe(1);
await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-msg__body.chat-msg__body--received').length, 500);
expect(view.el.querySelectorAll('.chat-msg__receipt').length).toBe(0);
expect(view.el.querySelectorAll('.chat-msg__body.chat-msg__body--received').length).toBe(1);
expect(view.model.messages.length).toBe(1);
const message = view.model.messages.at(0);
......
src/converse-message-view.js
View file @ 1d9bbb8d
......@@ -164,6 +164,7 @@ converse.plugins.add('converse-message-view', {
Object.assign(
this.model.toJSON(), {
'__': __,
'is_groupchat_message': this.model.get('type') === 'groupchat',
'is_me_message': is_me_message,
'roles': roles,
'pretty_time': time.format(_converse.time_format),
......
src/headless/converse-chatboxes.js
View file @ 1d9bbb8d
......@@ -397,7 +397,7 @@ converse.plugins.add('converse-chatboxes', {
// Overridden in converse-muc and converse-mam
const attrs = this.getUpdatedMessageAttributes(message, stanza);
if (attrs) {
message.save(attrs, {'patch': true});
message.save(attrs);
}
},
......
src/headless/converse-muc.js
View file @ 1d9bbb8d
......@@ -1308,9 +1308,8 @@ converse.plugins.add('converse-muc', {
*/
async onMessage (stanza) {
this.fetchFeaturesIfConfigurationChanged(stanza);
const original_stanza = stanza,
forwarded = sizzle(`forwarded[xmlns="${Strophe.NS.FORWARD}"]`, stanza).pop();
const original_stanza = stanza;
const forwarded = sizzle(`forwarded[xmlns="${Strophe.NS.FORWARD}"]`, stanza).pop();
if (forwarded) {
stanza = forwarded.querySelector('message');
}
......
src/templates/message.html
View file @ 1d9bbb8d
......@@ -3,20 +3,19 @@
{[ if (o.type !== 'headline' && !o.is_me_message) { ]}
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
{[ } ]}
<div class="chat-msg__content {[ if (o.is_me_message) { ]}chat-msg__content--action{[ } ]}">
<div class="chat-msg__content chat-msg__content--{{{o.sender}}} {{{o.is_me_message ? 'chat-msg__content--action' : ''}}}">
<span class="chat-msg__heading">
{[ if (o.is_me_message) { ]}<time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>{[ } ]}
<span class="chat-msg__author chat-msg__{{{o.sender}}} {{{o.type === 'groupchat' && o.role ? o.role : ''}}}">{[ if (o.is_me_message) { ]}**{[ }; ]}{{{o.username}}}</span>
<span class="chat-msg__author {{{o.is_groupchat_message && o.role ? o.role : ''}}}">{[ if (o.is_me_message) { ]}**{[ }; ]}{{{o.username}}}</span>
{[ if (!o.is_me_message) { ]}
{[o.roles.forEach(function (role) { ]} <span class="badge badge-secondary">{{{role}}}</span> {[ }); ]}
<time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>
{[ } ]}
{[ if (o.is_encrypted) { ]}<span class="fa fa-lock"></span>{[ } ]}
</span>
{[ if (!o.is_me_message) { ]}<div class="chat-msg__body">{[ } ]}
{[ if (o.received && !o.is_me_message) { ]} <span class="fa fa-check chat-msg__receipt"></span> {[ } ]}
{[ if (o.edited) { ]} <i title="{{{o.__('This message has been edited')}}}" class="fa fa-edit chat-msg__edit-modal"></i> {[ } ]}
{[ if (!o.is_me_message) { ]}<div class="chat-msg__message">{[ } ]}
<div class="chat-msg__body chat-msg__body--{{{o.type}}} {{{o.received ? 'chat-msg__body--received' : '' }}} {{{o.is_delayed ? 'chat-msg__body--delayed' : '' }}}">
<div class="chat-msg__message">
{[ if (o.is_spoiler) { ]}
<div class="chat-msg__spoiler-hint">
<span class="spoiler-hint">{{{o.spoiler_hint}}}</span>
......@@ -30,13 +29,14 @@
{[ if (o.is_single_emoji) { ]} chat-msg__text--larger{[ } ]}
{[ if (o.is_spoiler) { ]} spoiler collapsed{[ } ]}"><!-- message gets added here via renderMessage --></div>
<div class="chat-msg__media"></div>
{[ if (!o.is_me_message) { ]}</div>{[ } ]}
{[ if (o.type !== 'headline' && !o.is_me_message && o.sender === 'me') { ]}
<div class="chat-msg__actions">
<button class="chat-msg__action chat-msg__action-edit fa fa-pencil-alt" title="{{{o.__('Edit this message')}}}"></button>
</div>
{[ if (o.received && !o.is_me_message && !o.is_groupchat_message) { ]} <span class="fa fa-check chat-msg__receipt"></span> {[ } ]}
{[ if (o.edited) { ]} <i title="{{{o.__('This message has been edited')}}}" class="fa fa-edit chat-msg__edit-modal"></i> {[ } ]}
{[ if (o.type !== 'headline' && o.sender === 'me') { ]}
<div class="chat-msg__actions">
<button class="chat-msg__action chat-msg__action-edit fa fa-pencil-alt" title="{{{o.__('Edit this message')}}}"></button>
</div>
{[ } ]}
{[ if (!o.is_me_message) { ]}</div>{[ } ]}
</div>
</div>
</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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7