Skip to content

C
converse.js
Commit 56e4e8b8 authored by JC Brand's avatar JC Brand
Browse files
Options

Fix rendering of headline messages. 

Also, add urijs to more intelligently handle URIs
parent 3d424250
Hide whitespace changes
Inline Side-by-side
Showing with 79 additions and 60 deletions
css/converse.css
View file @ 56e4e8b8
...@@ -8345,8 +8345,7 @@ body.reset { ...@@ -8345,8 +8345,7 @@ body.reset {
#conversejs .chatbox.headlines .chat-body .chat-message { #conversejs .chatbox.headlines .chat-body .chat-message {
color: #D2842B; } color: #D2842B; }
#conversejs .chatbox.headlines .chat-content { #conversejs .chatbox.headlines .chat-content {
height: 100%; height: 100%; }
border-radius: 4px; }
#conversejs .message.date-separator { #conversejs .message.date-separator {
height: 2em; height: 2em;
...@@ -8384,9 +8383,6 @@ body.reset { ...@@ -8384,9 +8383,6 @@ body.reset {
#conversejs .message.chat-info.chat-error { #conversejs .message.chat-info.chat-error {
color: #D24E2B; color: #D24E2B;
font-weight: bold; } font-weight: bold; }
#conversejs .message.chat-info.chat-date {
display: inline-block;
margin-top: 1em; }
#conversejs .message .chat-image { #conversejs .message .chat-image {
height: auto; height: auto;
width: auto; width: auto;
...@@ -8422,12 +8418,14 @@ body.reset { ...@@ -8422,12 +8418,14 @@ body.reset {
vertical-align: middle; vertical-align: middle;
width: 36px; } width: 36px; }
#conversejs .message.chat-msg .chat-msg-content { #conversejs .message.chat-msg .chat-msg-content {
margin-left: 0.5rem; } margin-left: 0.5rem;
word-wrap: break-word;
width: 100%; }
#conversejs .message.chat-msg.headline .chat-msg-content {
margin-left: 0; }
#conversejs .message.chat-msg .chat-msg-text { #conversejs .message.chat-msg .chat-msg-text {
padding: 0; padding: 0;
color: #666; color: #666; }
max-width: 100%;
word-wrap: break-word; }
#conversejs .message.chat-msg .chat-msg-text .emojione { #conversejs .message.chat-msg .chat-msg-text .emojione {
margin-bottom: -6px; } margin-bottom: -6px; }
#conversejs .message.chat-msg .chat-msg-heading { #conversejs .message.chat-msg .chat-msg-heading {
......
css/inverse.css
View file @ 56e4e8b8
...@@ -8525,8 +8525,7 @@ body { ...@@ -8525,8 +8525,7 @@ body {
#conversejs .chatbox.headlines .chat-body .chat-message { #conversejs .chatbox.headlines .chat-body .chat-message {
color: #D2842B; } color: #D2842B; }
#conversejs .chatbox.headlines .chat-content { #conversejs .chatbox.headlines .chat-content {
height: 100%; height: 100%; }
border-radius: 4px; }
#conversejs.fullscreen .chatbox.headlines .box-flyout { #conversejs.fullscreen .chatbox.headlines .box-flyout {
background-color: #E7A151; } background-color: #E7A151; }
...@@ -8572,9 +8571,6 @@ body { ...@@ -8572,9 +8571,6 @@ body {
#conversejs .message.chat-info.chat-error { #conversejs .message.chat-info.chat-error {
color: #D24E2B; color: #D24E2B;
font-weight: bold; } font-weight: bold; }
#conversejs .message.chat-info.chat-date {
display: inline-block;
margin-top: 1em; }
#conversejs .message .chat-image { #conversejs .message .chat-image {
height: auto; height: auto;
width: auto; width: auto;
...@@ -8610,12 +8606,14 @@ body { ...@@ -8610,12 +8606,14 @@ body {
vertical-align: middle; vertical-align: middle;
width: 36px; } width: 36px; }
#conversejs .message.chat-msg .chat-msg-content { #conversejs .message.chat-msg .chat-msg-content {
margin-left: 0.5rem; } margin-left: 0.5rem;
word-wrap: break-word;
width: 100%; }
#conversejs .message.chat-msg.headline .chat-msg-content {
margin-left: 0; }
#conversejs .message.chat-msg .chat-msg-text { #conversejs .message.chat-msg .chat-msg-text {
padding: 0; padding: 0;
color: #666; color: #666; }
max-width: 100%;
word-wrap: break-word; }
#conversejs .message.chat-msg .chat-msg-text .emojione { #conversejs .message.chat-msg .chat-msg-text .emojione {
margin-bottom: -6px; } margin-bottom: -6px; }
#conversejs .message.chat-msg .chat-msg-heading { #conversejs .message.chat-msg .chat-msg-heading {
......
package-lock.json
View file @ 56e4e8b8
...@@ -907,13 +907,6 @@ ...@@ -907,13 +907,6 @@
"dev": true, "dev": true,
"optional": true "optional": true
}, },
"bindings": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.3.0.tgz",
"integrity": "sha512-DpLh5EzMR2kzvX1KIlVC0VkC3iZtHKTgdtZ0a3pglBZdaQFjt5S9g9xd1lE+YvXyfd6mtCeRnrUfOLYiTMlNSw==",
"dev": true,
"optional": true
},
"bootstrap": { "bootstrap": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0.tgz", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0.tgz",
...@@ -8069,10 +8062,12 @@ ...@@ -8069,10 +8062,12 @@
} }
}, },
"otr": { "otr": {
"version": "github:jcbrand/otr#b2a10117c23632714c13074d5e63aee6aedab9e3", "version": "0.2.16",
"resolved": "https://registry.npmjs.org/otr/-/otr-0.2.16.tgz",
"integrity": "sha1-BKdTRPUi38sHeMVDjA9V5p0+i8E=",
"dev": true, "dev": true,
"requires": { "requires": {
"webworker-threads": "0.7.13" "webworker-threads": "0.4.13"
} }
}, },
"output-file-sync": { "output-file-sync": {
...@@ -9703,6 +9698,12 @@ ...@@ -9703,6 +9698,12 @@
} }
} }
}, },
"urijs": {
"version": "1.19.1",
"resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.1.tgz",
"integrity": "sha512-xVrGVi94ueCJNrBSTjWqjvtgvl3cyOTThp2zaMaFNGp3F542TR6sM3f2o8RqZl+AwteClSVmoCyt0ka4RjQOQg==",
"dev": true
},
"url": { "url": {
"version": "0.11.0", "version": "0.11.0",
"resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz", "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
...@@ -9757,14 +9758,22 @@ ...@@ -9757,14 +9758,22 @@
"dev": true "dev": true
}, },
"webworker-threads": { "webworker-threads": {
"version": "0.7.13", "version": "0.4.13",
"resolved": "https://registry.npmjs.org/webworker-threads/-/webworker-threads-0.7.13.tgz", "resolved": "https://registry.npmjs.org/webworker-threads/-/webworker-threads-0.4.13.tgz",
"integrity": "sha1-yEsYtrokElu503NC5E3rgVFi+4M=", "integrity": "sha1-1zvf0AIb9wkxy4XCTMP0zvvrH5g=",
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"bindings": "1.3.0", "nan": "0.8.0"
"nan": "2.9.2" },
"dependencies": {
"nan": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/nan/-/nan-0.8.0.tgz",
"integrity": "sha1-AiqPpen+hCCWSsH7PclOF/RJ9f0=",
"dev": true,
"optional": true
}
} }
}, },
"which": { "which": {
......
package.json
View file @ 56e4e8b8
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
"lodash": "4.17.4", "lodash": "4.17.4",
"lodash-template-loader": "^2.0.0", "lodash-template-loader": "^2.0.0",
"moment": "~> 2.19.3 ", "moment": "~> 2.19.3 ",
"otr": "jcbrand/otr", "otr": "0.2.16",
"pluggable.js": "2.0.0", "pluggable.js": "2.0.0",
"po2json": "^0.4.4", "po2json": "^0.4.4",
"requirejs": "2.3.5", "requirejs": "2.3.5",
...@@ -75,6 +75,7 @@ ...@@ -75,6 +75,7 @@
"strophejs-plugin-vcard": "0.0.1", "strophejs-plugin-vcard": "0.0.1",
"text": "requirejs/text#2.0.15", "text": "requirejs/text#2.0.15",
"uglify-es": "^3.0.24", "uglify-es": "^3.0.24",
"urijs": "^1.19.1",
"wait-until-promise": "^1.0.0", "wait-until-promise": "^1.0.0",
"xss": "^0.3.3" "xss": "^0.3.3"
}, },
......
sass/_headline.scss
View file @ 56e4e8b8
...@@ -14,7 +14,6 @@ ...@@ -14,7 +14,6 @@
} }
.chat-content { .chat-content {
height: 100%; height: 100%;
border-radius: $chatbox-border-radius;
} }
} }
} }
......
sass/_messages.scss
View file @ 56e4e8b8
...@@ -48,10 +48,6 @@ ...@@ -48,10 +48,6 @@
color: $warning-color; color: $warning-color;
font-weight: bold; font-weight: bold;
} }
&.chat-date {
display: inline-block;
margin-top: 1em;
}
} }
.chat-image { .chat-image {
...@@ -104,14 +100,18 @@ ...@@ -104,14 +100,18 @@
.chat-msg-content { .chat-msg-content {
margin-left: 0.5rem; margin-left: 0.5rem;
word-wrap: break-word;
width: 100%;
}
&.headline {
.chat-msg-content {
margin-left: 0;
}
} }
.chat-msg-text { .chat-msg-text {
padding: 0; padding: 0;
color: #666; color: #666;
max-width: 100%;
word-wrap: break-word;
.emojione { .emojione {
margin-bottom: -6px; margin-bottom: -6px;
} }
......
spec/chatroom.js
View file @ 56e4e8b8
...@@ -2021,7 +2021,7 @@ ...@@ -2021,7 +2021,7 @@
}); });
expect(view.onMessageSubmitted).toHaveBeenCalled(); expect(view.onMessageSubmitted).toHaveBeenCalled();
const info_messages = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info:not(.chat-date)'), 0); const info_messages = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info'), 0);
expect(info_messages.length).toBe(17); expect(info_messages.length).toBe(17);
expect(info_messages.pop().textContent).toBe('/voice: Allow muted user to post messages'); expect(info_messages.pop().textContent).toBe('/voice: Allow muted user to post messages');
expect(info_messages.pop().textContent).toBe('/topic: Set room subject (alias for /subject)'); expect(info_messages.pop().textContent).toBe('/topic: Set room subject (alias for /subject)');
......
spec/headline.js
View file @ 56e4e8b8
...@@ -66,7 +66,8 @@ ...@@ -66,7 +66,8 @@
.c('subject').t('SIEVE').up() .c('subject').t('SIEVE').up()
.c('body').t('<juliet@example.com> You got mail.').up() .c('body').t('<juliet@example.com> You got mail.').up()
.c('x', {'xmlns': 'jabber:x:oob'}) .c('x', {'xmlns': 'jabber:x:oob'})
.c('url').t('imap://romeo@example.com/INBOX;UIDVALIDITY=385759043/;UID=18'); .c('url').t('imap://romeo@example.com/INBOX;UIDVALIDITY=385759043/;UID=18');
_converse.connection._dataRecv(test_utils.createRequest(stanza)); _converse.connection._dataRecv(test_utils.createRequest(stanza));
expect( expect(
_.includes( _.includes(
......
src/config.js
View file @ 56e4e8b8
...@@ -15,6 +15,8 @@ if (typeof(require) === 'undefined') { ...@@ -15,6 +15,8 @@ if (typeof(require) === 'undefined') {
require.config({ require.config({
baseUrl: '.', baseUrl: '.',
paths: { paths: {
"IPv6": "node_modules/urijs/src/IPv6",
"SecondLevelDomains": "node_modules/urijs/src/SecondLevelDomains",
"almond": "node_modules/almond/almond", "almond": "node_modules/almond/almond",
"awesomplete": "node_modules/awesomplete-avoid-xss/awesomplete", "awesomplete": "node_modules/awesomplete-avoid-xss/awesomplete",
"babel": "node_modules/requirejs-babel/babel-5.8.34.min", "babel": "node_modules/requirejs-babel/babel-5.8.34.min",
...@@ -42,6 +44,7 @@ require.config({ ...@@ -42,6 +44,7 @@ require.config({
"muc-utils": "src/utils/muc", "muc-utils": "src/utils/muc",
"pluggable": "node_modules/pluggable.js/dist/pluggable", "pluggable": "node_modules/pluggable.js/dist/pluggable",
"polyfill": "src/polyfill", "polyfill": "src/polyfill",
"punycode": "node_modules/urijs/src/punycode",
"sizzle": "node_modules/sizzle/dist/sizzle", "sizzle": "node_modules/sizzle/dist/sizzle",
"snabbdom": "node_modules/snabbdom/dist/snabbdom", "snabbdom": "node_modules/snabbdom/dist/snabbdom",
"snabbdom-attributes": "node_modules/snabbdom/dist/snabbdom-attributes", "snabbdom-attributes": "node_modules/snabbdom/dist/snabbdom-attributes",
...@@ -59,6 +62,7 @@ require.config({ ...@@ -59,6 +62,7 @@ require.config({
"tovnode": "node_modules/snabbdom/dist/tovnode", "tovnode": "node_modules/snabbdom/dist/tovnode",
"tpl": "node_modules/lodash-template-loader/loader", "tpl": "node_modules/lodash-template-loader/loader",
"underscore": "src/underscore-shim", "underscore": "src/underscore-shim",
"uri": "node_modules/urijs/src/URI",
"utils": "src/utils/core", "utils": "src/utils/core",
"vdom-parser": "node_modules/vdom-parser/dist", "vdom-parser": "node_modules/vdom-parser/dist",
"xss": "node_modules/xss/dist/xss", "xss": "node_modules/xss/dist/xss",
......
src/converse-headline.js
View file @ 56e4e8b8
...@@ -135,8 +135,8 @@ ...@@ -135,8 +135,8 @@
const chatbox = _converse.chatboxes.create({ const chatbox = _converse.chatboxes.create({
'id': from_jid, 'id': from_jid,
'jid': from_jid, 'jid': from_jid,
'fullname': from_jid,
'type': 'headline', 'type': 'headline',
'from': from_jid
}); });
chatbox.createMessage(message, undefined, message); chatbox.createMessage(message, undefined, message);
_converse.emit('message', {'chatbox': chatbox, 'stanza': message}); _converse.emit('message', {'chatbox': chatbox, 'stanza': message});
......
src/converse-message-view.js
View file @ 56e4e8b8
...@@ -74,12 +74,14 @@ ...@@ -74,12 +74,14 @@
username = this.model.get('fullname') || this.model.get('from'); username = this.model.get('fullname') || this.model.get('from');
template = this.model.get('is_spoiler') ? tpl_spoiler_message : tpl_message; template = this.model.get('is_spoiler') ? tpl_spoiler_message : tpl_message;
if (this.model.get('sender') === 'me') { if (this.model.get('type') !== 'headline') {
image_type = _converse.xmppstatus.get('image_type'); if (this.model.get('sender') === 'me') {
image = _converse.xmppstatus.get('image'); image_type = _converse.xmppstatus.get('image_type');
} else { image = _converse.xmppstatus.get('image');
image_type = this.chatbox.get('image_type'); } else {
image = this.chatbox.get('image'); image_type = this.chatbox.get('image_type');
image = this.chatbox.get('image');
}
} }
} }
const moment_time = moment(this.model.get('time')); const moment_time = moment(this.model.get('time'));
......
src/templates/message.html
View file @ 56e4e8b8
<div class="message chat-msg {{{o.extra_classes}}}" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}"> <div class="message chat-msg {{{o.type}}} {{{o.extra_classes}}}" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
{[ if (o.type !== 'headline') { ]}
<img alt="User Avatar" class="avatar" height="36px" width="36px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/> <img alt="User Avatar" class="avatar" height="36px" width="36px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
{[ } ]}
<div class="chat-msg-content"> <div class="chat-msg-content">
<span class="chat-msg-heading"> <span class="chat-msg-heading">
<span class="chat-msg-author">{{{o.username}}}</span> <span class="chat-msg-author">{{{o.username}}}</span>
......
src/templates/new_day.html
View file @ 56e4e8b8
<time class="message chat-info chat-date badge badge-info" data-isodate="{{{o.isodate}}}">{{{o.datestring}}}</time> <div class="message date-separator">
<hr class="separator">
<time class="separator-text" datetime="{{{o.isodate}}}"><span>{{{o.datestring}}}</span></time>
</div>
src/utils/core.js
View file @ 56e4e8b8
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
"es6-promise", "es6-promise",
"lodash.noconflict", "lodash.noconflict",
"strophe", "strophe",
"uri",
"tpl!audio", "tpl!audio",
"tpl!file", "tpl!file",
"tpl!image", "tpl!image",
...@@ -46,6 +47,7 @@ ...@@ -46,6 +47,7 @@
Promise, Promise,
_, _,
Strophe, Strophe,
URI,
tpl_audio, tpl_audio,
tpl_file, tpl_file,
tpl_image, tpl_image,
...@@ -247,19 +249,19 @@ ...@@ -247,19 +249,19 @@
}; };
u.renderFileURL = function (_converse, url) { u.renderFileURL = function (_converse, url) {
if (url.endsWith('mp3') || url.endsWith('mp4') || const uri = new URI(url), { __ } = _converse,
url.endsWith('jpg') || url.endsWith('jpeg') || filename = uri.filename();
url.endsWith('png') || url.endsWith('gif') || if (!_.includes(["https", "http"], uri.protocol()) ||
url.endsWith('svg')) { filename.endsWith('mp3') || filename.endsWith('mp4') ||
filename.endsWith('jpg') || filename.endsWith('jpeg') ||
filename.endsWith('png') || filename.endsWith('gif') ||
filename.endsWith('svg')) {
return url; return url;
} }
const name = url.split('/').pop(),
{ __ } = _converse;
return tpl_file({ return tpl_file({
'url': url, 'url': url,
'label_download': __('Download file: "%1$s', name) 'label_download': __('Download: "%1$s', filename)
}) })
}; };
......
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