Skip to content

C
converse.js
Commit 1405d9cb authored by JC Brand's avatar JC Brand
Browse files
Options

Also style file upload and action messages.

parent 209bac4b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 90 deletions
mockup/chatroom.html
View file @ 1405d9cb
......@@ -45,6 +45,13 @@
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;Romeo Montague&quot;">
Romeo Montague has entered the room</div>
<div class="message chat-msg chat-action" data-isodate="2018-04-36T18:07:38+02:00">
<span class="chat-msg-heading">
<span class="chat-msg-author">**Romeo Montague</span>
</span>
<p class="chat-msg-text">looks around</p>
</div>
<div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
......@@ -114,6 +121,18 @@
</div>
</div>
<div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">19:36</span>
</span>
<span class="chat-msg-text">Uploading file: <strong>juliet.jpg</strong>, 120kb</span>
<progress value="50" max="100"/>
</div>
</div>
<div class="message chat-msg">
<canvas height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
......
spec/chatbox.js
View file @ 1405d9cb
This diff is collapsed.
spec/chatroom.js
View file @ 1405d9cb
......@@ -838,7 +838,7 @@
type: 'groupchat'
}).c('body').t(message).tree();
view.model.onMessage(msg);
expect($(view.el).find('.chat-message').hasClass('mentioned')).toBeTruthy();
expect($(view.el).find('.chat-msg').hasClass('mentioned')).toBeTruthy();
done();
});
}));
......@@ -869,7 +869,7 @@
}).c('body').t(message).tree();
view.model.onMessage(msg);
expect(_.includes($(view.el).find('.chat-msg-author').text(), '**Dyon van de Wege')).toBeTruthy();
expect($(view.el).find('.chat-msg-content').text()).toBe(' is tired');
expect($(view.el).find('.chat-msg-text').text()).toBe(' is tired');
message = '/me is as well';
msg = $msg({
......@@ -880,7 +880,7 @@
}).c('body').t(message).tree();
view.model.onMessage(msg);
expect(_.includes($(view.el).find('.chat-msg-author:last').text(), '**Max Mustermann')).toBeTruthy();
expect($(view.el).find('.chat-msg-content:last').text()).toBe(' is as well');
expect($(view.el).find('.chat-msg-text:last').text()).toBe(' is as well');
done();
});
}));
......@@ -1463,8 +1463,8 @@
}).c('body').t(text);
view.model.onMessage(message.nodeTree);
var $chat_content = $(view.el).find('.chat-content');
expect($chat_content.find('.chat-message').length).toBe(1);
expect($chat_content.find('.chat-msg-content').text()).toBe(text);
expect($chat_content.find('.chat-msg').length).toBe(1);
expect($chat_content.find('.chat-msg-text').text()).toBe(text);
expect(_converse.emit).toHaveBeenCalledWith('message', jasmine.any(Object));
done();
}));
......@@ -1489,7 +1489,7 @@
expect(_converse.emit).toHaveBeenCalledWith('messageSend', text);
var $chat_content = $(view.el).find('.chat-content');
expect($chat_content.find('.chat-message').length).toBe(1);
expect($chat_content.find('.chat-msg').length).toBe(1);
// Let's check that if we receive the same message again, it's
// not shown.
......@@ -1500,8 +1500,8 @@
id: view.model.messages.at(0).get('msgid')
}).c('body').t(text);
view.model.onMessage(message.nodeTree);
expect($chat_content.find('.chat-message').length).toBe(1);
expect($chat_content.find('.chat-msg-content').last().text()).toBe(text);
expect($chat_content.find('.chat-msg').length).toBe(1);
expect($chat_content.find('.chat-msg-text').last().text()).toBe(text);
// We don't emit an event if it's our own message
expect(_converse.emit.calls.count(), 1);
done();
......@@ -1542,7 +1542,7 @@
// Now check that the message appears inside the chatbox in the DOM
var $chat_content = $(view.el).find('.chat-content');
var msg_txt = $chat_content.find('.chat-message:last').find('.chat-msg-content').text();
var msg_txt = $chat_content.find('.chat-msg:last').find('.chat-msg-text').text();
expect(msg_txt).toEqual(message);
expect(view.content.scrollTop).toBe(0);
done();
......@@ -3381,8 +3381,8 @@
var messages = view.el.querySelectorAll('.message');
expect(messages.length).toBe(8);
expect(view.el.querySelectorAll('.chat-message').length).toBe(1);
expect(view.el.querySelector('.chat-message .chat-msg-content').textContent).toBe('hello world');
expect(view.el.querySelectorAll('.chat-msg').length).toBe(1);
expect(view.el.querySelector('.chat-msg .chat-msg-text').textContent).toBe('hello world');
// Test that the composing notifications get removed
// via timeout.
......
spec/mam.js
View file @ 1405d9cb
......@@ -40,7 +40,7 @@
</result>
</message>`).firstElementChild;
chatroomview.model.onMessage(stanza);
expect(chatroomview.content.querySelectorAll('.chat-message').length).toBe(1);
expect(chatroomview.content.querySelectorAll('.chat-msg').length).toBe(1);
done();
});
}))
......
src/converse-message-view.js
View file @ 1405d9cb
......@@ -55,7 +55,7 @@
},
render () {
if (this.model.get('file') && !this.model.get('message')) {
if (this.model.get('file') && !this.model.get('oob_url')) {
return this.renderFileUploadProgresBar();
} else if (this.model.get('type') === 'error') {
return this.renderErrorMessage();
......@@ -73,7 +73,6 @@
} else {
username = this.model.get('fullname') || this.model.get('from');
template = this.model.get('is_spoiler') ? tpl_spoiler_message : tpl_message;
if (this.model.get('type') !== 'headline') {
if (this.model.get('sender') === 'me') {
image_type = _converse.xmppstatus.get('image_type');
......@@ -143,15 +142,29 @@
},
renderFileUploadProgresBar () {
let image, image_type;
if (this.model.get('sender') === 'me') {
image_type = _converse.xmppstatus.get('image_type');
image = _converse.xmppstatus.get('image');
} else {
image_type = this.chatbox.get('image_type');
image = this.chatbox.get('image');
}
const msg = u.stringToElement(tpl_file_progress(
_.extend(this.model.toJSON(),
{'filesize': filesize(this.model.get('file').size)}
)));
_.extend(this.model.toJSON(), {
'filesize': filesize(this.model.get('file').size),
'image': image,
'image_type': image_type
})));
return this.replaceElement(msg);
},
isMeCommand () {
const match = this.model.get('message').match(/^\/(.*?)(?: (.*))?$/);
const text = this.model.get('message');
if (!text) {
return false;
}
const match = text.match(/^\/(.*?)(?: (.*))?$/);
return match && match[1] === 'me';
},
......
src/templates/action.html
View file @ 1405d9cb
<div class="message chat-msg chat-action {{{o.extra_classes}}}" data-isodate="{{{o.time}}}">
<span class="chat-msg-author chat-msg-{{{o.sender}}}">{{{o.pretty_time}}} **{{{o.username}}}</span>
<span class="chat-msg-content"><!-- message gets added here via renderMessage --></span>
<span class="chat-msg-heading">
<span class="chat-msg-author">**{{{o.username}}}</span>
</span>
<p class="chat-msg-text"><!-- message gets added here via renderMessage --></p>
</div>
src/templates/file_progress.html
View file @ 1405d9cb
<div class="message" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
<span class="chat-msg-content">Uploading file: <strong>{{{o.file.name}}}</strong>, {{{o.filesize}}}</span>
<progress value="{{{o.progress}}}"/>
<div class="message chat-msg" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
<img alt="User Avatar" class="avatar" height="36px" width="36px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
<div class="chat-msg-content">
<span class="chat-msg-text">Uploading file: <strong>{{{o.file.name}}}</strong>, {{{o.filesize}}}</span>
<progress value="{{{o.progress}}}"/>
</div>
</div>
src/templates/image.html
View file @ 1405d9cb
<a href="{{{o.url}}}"
target="_blank" rel="noopener">
<img class="chat-image img-thumbnail" src="{{{o.url}}}">
</a>
<a href="{{{o.url}}}" target="_blank" rel="noopener"><img class="chat-image img-thumbnail" src="{{{o.url}}}"></a>
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