Commit 49da581d authored by JC Brand's avatar JC Brand

Fixes #1400. When chat message is only an emoji, enlarge it

parent 519bd54a
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
- New config setting [locked_muc_domain](https://conversejs.org/docs/html/configuration.html#locked-muc-domain) - New config setting [locked_muc_domain](https://conversejs.org/docs/html/configuration.html#locked-muc-domain)
- #1373: Re-add support for the [muc_domain](https://conversejs.org/docs/html/configuration.html#muc-domain) setting - #1373: Re-add support for the [muc_domain](https://conversejs.org/docs/html/configuration.html#muc-domain) setting
- #1400: When a chat message is just an emoji, enlarge the emoji
- #1437: List of groupchats in modal doesn't scroll - #1437: List of groupchats in modal doesn't scroll
- #1457: Wrong tooltip shown for "unbookmark" icon - #1457: Wrong tooltip shown for "unbookmark" icon
......
...@@ -11948,6 +11948,9 @@ body.converse-fullscreen { ...@@ -11948,6 +11948,9 @@ body.converse-fullscreen {
vertical-align: -0.1em; } vertical-align: -0.1em; }
#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__text--larger {
font-size: 2em;
padding-top: 0.25em; }
#conversejs .message.chat-msg .chat-msg__media { #conversejs .message.chat-msg .chat-msg__media {
margin-top: 0.25rem; margin-top: 0.25rem;
word-break: break-all; } word-break: break-all; }
......
...@@ -48252,8 +48252,8 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins ...@@ -48252,8 +48252,8 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
const _converse = this.__super__._converse, const _converse = this.__super__._converse,
__ = _converse.__; __ = _converse.__;
const bookmark_button = templates_chatroom_bookmark_toggle_html__WEBPACK_IMPORTED_MODULE_5___default()(_.assignIn(this.model.toJSON(), { const bookmark_button = templates_chatroom_bookmark_toggle_html__WEBPACK_IMPORTED_MODULE_5___default()(_.assignIn(this.model.toJSON(), {
info_toggle_bookmark: __('Bookmark this groupchat'), 'info_toggle_bookmark': this.model.get('bookmarked') ? __('Unbookmark this groupchat') : __('Bookmark this groupchat'),
bookmarked: this.model.get('bookmarked') 'bookmarked': this.model.get('bookmarked')
})); }));
const close_button = this.el.querySelector('.close-chatbox-button'); const close_button = this.el.querySelector('.close-chatbox-button');
close_button.insertAdjacentHTML('afterend', bookmark_button); close_button.insertAdjacentHTML('afterend', bookmark_button);
...@@ -62137,6 +62137,7 @@ _converse_core__WEBPACK_IMPORTED_MODULE_2__["default"].plugins.add('converse-cha ...@@ -62137,6 +62137,7 @@ _converse_core__WEBPACK_IMPORTED_MODULE_2__["default"].plugins.add('converse-cha
const archive = sizzle(`result[xmlns="${Strophe.NS.MAM}"]`, original_stanza).pop(), const archive = sizzle(`result[xmlns="${Strophe.NS.MAM}"]`, original_stanza).pop(),
spoiler = sizzle(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`, original_stanza).pop(), spoiler = sizzle(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`, original_stanza).pop(),
delay = sizzle(`delay[xmlns="${Strophe.NS.DELAY}"]`, original_stanza).pop(), delay = sizzle(`delay[xmlns="${Strophe.NS.DELAY}"]`, original_stanza).pop(),
text = _converse.chatboxes.getMessageBody(stanza) || undefined,
chat_state = stanza.getElementsByTagName(_converse.COMPOSING).length && _converse.COMPOSING || stanza.getElementsByTagName(_converse.PAUSED).length && _converse.PAUSED || stanza.getElementsByTagName(_converse.INACTIVE).length && _converse.INACTIVE || stanza.getElementsByTagName(_converse.ACTIVE).length && _converse.ACTIVE || stanza.getElementsByTagName(_converse.GONE).length && _converse.GONE; chat_state = stanza.getElementsByTagName(_converse.COMPOSING).length && _converse.COMPOSING || stanza.getElementsByTagName(_converse.PAUSED).length && _converse.PAUSED || stanza.getElementsByTagName(_converse.INACTIVE).length && _converse.INACTIVE || stanza.getElementsByTagName(_converse.ACTIVE).length && _converse.ACTIVE || stanza.getElementsByTagName(_converse.GONE).length && _converse.GONE;
const attrs = _.extend({ const attrs = _.extend({
...@@ -62144,7 +62145,8 @@ _converse_core__WEBPACK_IMPORTED_MODULE_2__["default"].plugins.add('converse-cha ...@@ -62144,7 +62145,8 @@ _converse_core__WEBPACK_IMPORTED_MODULE_2__["default"].plugins.add('converse-cha
'is_archived': !_.isNil(archive), 'is_archived': !_.isNil(archive),
'is_delayed': !_.isNil(delay), 'is_delayed': !_.isNil(delay),
'is_spoiler': !_.isNil(spoiler), 'is_spoiler': !_.isNil(spoiler),
'message': _converse.chatboxes.getMessageBody(stanza) || undefined, 'is_single_emoji': text ? u.isSingleEmoji(text) : false,
'message': text,
'msgid': stanza.getAttribute('id'), 'msgid': stanza.getAttribute('id'),
'references': this.getReferencesFromStanza(stanza), 'references': this.getReferencesFromStanza(stanza),
'subject': _.propertyOf(stanza.querySelector('subject'))('textContent'), 'subject': _.propertyOf(stanza.querySelector('subject'))('textContent'),
...@@ -91745,6 +91747,16 @@ function convert(unicode) { ...@@ -91745,6 +91747,16 @@ function convert(unicode) {
return twemoji__WEBPACK_IMPORTED_MODULE_0__["default"].convert.fromCodePoint(unicode); return twemoji__WEBPACK_IMPORTED_MODULE_0__["default"].convert.fromCodePoint(unicode);
} }
_core__WEBPACK_IMPORTED_MODULE_2__["default"].isSingleEmoji = function (str) {
if (!str || str.length > 2) {
return;
}
const result = _lodash_noconflict__WEBPACK_IMPORTED_MODULE_1___default.a.flow(_core__WEBPACK_IMPORTED_MODULE_2__["default"].shortnameToUnicode, twemoji__WEBPACK_IMPORTED_MODULE_0__["default"].parse)(str);
return result.match(/<img class="emoji" draggable="false" alt=".*?" src=".*?\.png"\/>/);
};
_core__WEBPACK_IMPORTED_MODULE_2__["default"].shortnameToUnicode = function (str) { _core__WEBPACK_IMPORTED_MODULE_2__["default"].shortnameToUnicode = function (str) {
/* will output unicode from shortname /* will output unicode from shortname
* useful for sending emojis back to mobile devices * useful for sending emojis back to mobile devices
...@@ -91774,11 +91786,7 @@ _core__WEBPACK_IMPORTED_MODULE_2__["default"].shortnameToUnicode = function (str ...@@ -91774,11 +91786,7 @@ _core__WEBPACK_IMPORTED_MODULE_2__["default"].shortnameToUnicode = function (str
}; };
_core__WEBPACK_IMPORTED_MODULE_2__["default"].addEmoji = function (_converse, text) { _core__WEBPACK_IMPORTED_MODULE_2__["default"].addEmoji = function (_converse, text) {
if (_converse.use_system_emojis) { return _core__WEBPACK_IMPORTED_MODULE_2__["default"].getEmojiRenderer(_converse)(text);
return _core__WEBPACK_IMPORTED_MODULE_2__["default"].shortnameToUnicode(text);
} else {
return twemoji__WEBPACK_IMPORTED_MODULE_0__["default"].parse(text);
}
}; };
_core__WEBPACK_IMPORTED_MODULE_2__["default"].getEmojisByCategory = function (_converse) { _core__WEBPACK_IMPORTED_MODULE_2__["default"].getEmojisByCategory = function (_converse) {
...@@ -93905,7 +93913,11 @@ __p += '\n <div class="chat-msg__subject">' + ...@@ -93905,7 +93913,11 @@ __p += '\n <div class="chat-msg__subject">' +
__e( o.subject ) + __e( o.subject ) +
'</div>\n '; '</div>\n ';
} ; } ;
__p += '\n <div class="chat-msg__text'; __p += '\n <div class="chat-msg__text\n ';
if (o.is_single_emoji) { ;
__p += ' chat-msg__text--larger';
} ;
__p += '\n ';
if (o.is_spoiler) { ; if (o.is_spoiler) { ;
__p += ' spoiler collapsed'; __p += ' spoiler collapsed';
} ; } ;
...@@ -177,6 +177,11 @@ ...@@ -177,6 +177,11 @@
} }
} }
.chat-msg__text--larger {
font-size: 2em;
padding-top: 0.25em;
}
.chat-msg__media { .chat-msg__media {
margin-top: 0.25rem; margin-top: 0.25rem;
word-break: break-all; word-break: break-all;
......
...@@ -907,6 +907,30 @@ ...@@ -907,6 +907,30 @@
done(); done();
})); }));
it("will display larger if it's a single emoji",
mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
async function (done, _converse) {
await test_utils.waitForRoster(_converse, 'current');
const sender_jid = mock.cur_names[1].replace(/ /g,'.').toLowerCase() + '@localhost';
_converse.chatboxes.onMessage($msg({
'from': sender_jid,
'to': _converse.connection.jid,
'type': 'chat',
'id': (new Date()).getTime()
}).c('body').t('😇').up()
.c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
await new Promise(resolve => _converse.on('chatBoxOpened', resolve));
const view = _converse.api.chatviews.get(sender_jid);
await new Promise((resolve, reject) => view.once('messageInserted', resolve));
const chat_content = view.el.querySelector('.chat-content');
const message = chat_content.querySelector('.chat-msg__text');
expect(u.hasClass('chat-msg__text--larger', message)).toBe(true);
done();
}));
it("will render newlines", it("will render newlines",
mock.initConverse( mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched'], {}, null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
...@@ -1870,7 +1894,9 @@ ...@@ -1870,7 +1894,9 @@
await new Promise((resolve, reject) => view.once('messageInserted', resolve)); await new Promise((resolve, reject) => view.once('messageInserted', resolve));
await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg audio').length, 1000); await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg audio').length, 1000);
let msg = view.el.querySelector('.chat-msg .chat-msg__text'); let msg = view.el.querySelector('.chat-msg .chat-msg__text');
expect(msg.outerHTML).toEqual('<div class="chat-msg__text">Have you heard this funny audio?</div>'); expect(msg.classList.length).toEqual(1);
expect(u.hasClass('chat-msg__text', msg)).toBe(true);
expect(msg.textContent).toEqual('Have you heard this funny audio?');
let media = view.el.querySelector('.chat-msg .chat-msg__media'); let media = view.el.querySelector('.chat-msg .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual( expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
'<!-- src/templates/audio.html -->'+ '<!-- src/templates/audio.html -->'+
...@@ -1919,7 +1945,8 @@ ...@@ -1919,7 +1945,8 @@
_converse.connection._dataRecv(test_utils.createRequest(stanza)); _converse.connection._dataRecv(test_utils.createRequest(stanza));
await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg video').length, 2000) await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg video').length, 2000)
let msg = view.el.querySelector('.chat-msg .chat-msg__text'); let msg = view.el.querySelector('.chat-msg .chat-msg__text');
expect(msg.outerHTML).toEqual('<div class="chat-msg__text">Have you seen this funny video?</div>'); expect(msg.classList.length).toBe(1);
expect(msg.textContent).toEqual('Have you seen this funny video?');
let media = view.el.querySelector('.chat-msg .chat-msg__media'); let media = view.el.querySelector('.chat-msg .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual( expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
'<!-- src/templates/video.html -->'+ '<!-- src/templates/video.html -->'+
...@@ -1967,7 +1994,8 @@ ...@@ -1967,7 +1994,8 @@
await new Promise((resolve, reject) => view.once('messageInserted', resolve)); await new Promise((resolve, reject) => view.once('messageInserted', resolve));
await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg a').length, 1000); await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg a').length, 1000);
const msg = view.el.querySelector('.chat-msg .chat-msg__text'); const msg = view.el.querySelector('.chat-msg .chat-msg__text');
expect(msg.outerHTML).toEqual('<div class="chat-msg__text">Have you downloaded this funny file?</div>'); expect(u.hasClass('chat-msg__text', msg)).toBe(true);
expect(msg.textContent).toEqual('Have you downloaded this funny file?');
const media = view.el.querySelector('.chat-msg .chat-msg__media'); const media = view.el.querySelector('.chat-msg .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual( expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
'<!-- src/templates/file.html -->'+ '<!-- src/templates/file.html -->'+
...@@ -1999,7 +2027,8 @@ ...@@ -1999,7 +2027,8 @@
await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg img').length, 2000); await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg img').length, 2000);
const msg = view.el.querySelector('.chat-msg .chat-msg__text'); const msg = view.el.querySelector('.chat-msg .chat-msg__text');
expect(msg.outerHTML).toEqual('<div class="chat-msg__text">Have you seen this funny image?</div>'); expect(u.hasClass('chat-msg__text', msg)).toBe(true);
expect(msg.textContent).toEqual('Have you seen this funny image?');
const media = view.el.querySelector('.chat-msg .chat-msg__media'); const media = view.el.querySelector('.chat-msg .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual( expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
`<!-- src/templates/image.html -->`+ `<!-- src/templates/image.html -->`+
...@@ -2633,11 +2662,13 @@ ...@@ -2633,11 +2662,13 @@
.c('reference', {'xmlns':'urn:xmpp:reference:0', 'begin':'15', 'end':'23', 'type':'mention', 'uri':'xmpp:mr.robot@localhost'}).nodeTree; .c('reference', {'xmlns':'urn:xmpp:reference:0', 'begin':'15', 'end':'23', 'type':'mention', 'uri':'xmpp:mr.robot@localhost'}).nodeTree;
await view.model.onMessage(msg); await view.model.onMessage(msg);
await new Promise((resolve, reject) => view.once('messageInserted', resolve)); await new Promise((resolve, reject) => view.once('messageInserted', resolve));
expect(view.el.querySelectorAll('.chat-msg__text').length).toBe(1); const messages = view.el.querySelectorAll('.chat-msg__text');
expect(view.el.querySelector('.chat-msg__text').outerHTML).toBe( expect(messages.length).toBe(1);
'<div class="chat-msg__text">hello <span class="mention">z3r0</span> '+ expect(messages[0].classList.length).toEqual(1);
expect(messages[0].innerHTML).toBe(
'hello <span class="mention">z3r0</span> '+
'<span class="mention mention--self badge badge-info">tom</span> '+ '<span class="mention mention--self badge badge-info">tom</span> '+
'<span class="mention">mr.robot</span>, how are you?</div>'); '<span class="mention">mr.robot</span>, how are you?');
done(); done();
})); }));
}); });
......
...@@ -656,6 +656,7 @@ converse.plugins.add('converse-chatboxes', { ...@@ -656,6 +656,7 @@ converse.plugins.add('converse-chatboxes', {
const archive = sizzle(`result[xmlns="${Strophe.NS.MAM}"]`, original_stanza).pop(), const archive = sizzle(`result[xmlns="${Strophe.NS.MAM}"]`, original_stanza).pop(),
spoiler = sizzle(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`, original_stanza).pop(), spoiler = sizzle(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`, original_stanza).pop(),
delay = sizzle(`delay[xmlns="${Strophe.NS.DELAY}"]`, original_stanza).pop(), delay = sizzle(`delay[xmlns="${Strophe.NS.DELAY}"]`, original_stanza).pop(),
text = _converse.chatboxes.getMessageBody(stanza) || undefined,
chat_state = stanza.getElementsByTagName(_converse.COMPOSING).length && _converse.COMPOSING || chat_state = stanza.getElementsByTagName(_converse.COMPOSING).length && _converse.COMPOSING ||
stanza.getElementsByTagName(_converse.PAUSED).length && _converse.PAUSED || stanza.getElementsByTagName(_converse.PAUSED).length && _converse.PAUSED ||
stanza.getElementsByTagName(_converse.INACTIVE).length && _converse.INACTIVE || stanza.getElementsByTagName(_converse.INACTIVE).length && _converse.INACTIVE ||
...@@ -667,7 +668,8 @@ converse.plugins.add('converse-chatboxes', { ...@@ -667,7 +668,8 @@ converse.plugins.add('converse-chatboxes', {
'is_archived': !_.isNil(archive), 'is_archived': !_.isNil(archive),
'is_delayed': !_.isNil(delay), 'is_delayed': !_.isNil(delay),
'is_spoiler': !_.isNil(spoiler), 'is_spoiler': !_.isNil(spoiler),
'message': _converse.chatboxes.getMessageBody(stanza) || undefined, 'is_single_emoji': text ? u.isSingleEmoji(text) : false,
'message': text,
'msgid': stanza.getAttribute('id'), 'msgid': stanza.getAttribute('id'),
'references': this.getReferencesFromStanza(stanza), 'references': this.getReferencesFromStanza(stanza),
'subject': _.propertyOf(stanza.querySelector('subject'))('textContent'), 'subject': _.propertyOf(stanza.querySelector('subject'))('textContent'),
......
...@@ -160,6 +160,14 @@ function convert (unicode) { ...@@ -160,6 +160,14 @@ function convert (unicode) {
return twemoji.default.convert.fromCodePoint(unicode); return twemoji.default.convert.fromCodePoint(unicode);
} }
u.isSingleEmoji = function (str) {
if (!str || str.length > 2) {
return;
}
const result = _.flow(u.shortnameToUnicode, twemoji.default.parse)(str)
return result.match(/<img class="emoji" draggable="false" alt=".*?" src=".*?\.png"\/>/);
}
u.shortnameToUnicode = function (str) { u.shortnameToUnicode = function (str) {
/* will output unicode from shortname /* will output unicode from shortname
* useful for sending emojis back to mobile devices * useful for sending emojis back to mobile devices
...@@ -186,13 +194,8 @@ u.shortnameToUnicode = function (str) { ...@@ -186,13 +194,8 @@ u.shortnameToUnicode = function (str) {
return str; return str;
} }
u.addEmoji = function (_converse, text) { u.addEmoji = function (_converse, text) {
if (_converse.use_system_emojis) { return u.getEmojiRenderer(_converse)(text);
return u.shortnameToUnicode(text);
} else {
return twemoji.default.parse(text);
}
} }
u.getEmojisByCategory = function (_converse) { u.getEmojisByCategory = function (_converse) {
......
...@@ -26,7 +26,9 @@ ...@@ -26,7 +26,9 @@
{[ if (o.subject) { ]} {[ if (o.subject) { ]}
<div class="chat-msg__subject">{{{ o.subject }}}</div> <div class="chat-msg__subject">{{{ o.subject }}}</div>
{[ } ]} {[ } ]}
<div class="chat-msg__text{[ if (o.is_spoiler) { ]} spoiler collapsed{[ } ]}"><!-- message gets added here via renderMessage --></div> <div class="chat-msg__text
{[ 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> <div class="chat-msg__media"></div>
{[ if (!o.is_me_message) { ]}</div>{[ } ]} {[ if (!o.is_me_message) { ]}</div>{[ } ]}
{[ if (o.type !== 'headline' && !o.is_me_message && o.sender === 'me') { ]} {[ if (o.type !== 'headline' && !o.is_me_message && o.sender === 'me') { ]}
......
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