From 26165d8431762244b7de6bdd80247970c9cee530 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Mon, 8 Apr 2019 17:16:08 -0300 Subject: [PATCH 1/9] Add a .message-body--unstyled style for sidebar item's last message and thread quotes --- .../client/imports/components/messages.css | 37 +++++++++++++++++++ .../components/sidebar/sidebar-item.css | 30 --------------- app/threads/client/threads.css | 4 -- app/ui-message/client/message.html | 7 +++- app/ui-sidenav/client/sidebarItem.html | 4 +- app/ui-utils/client/lib/RoomHistoryManager.js | 11 +++--- 6 files changed, 52 insertions(+), 41 deletions(-) diff --git a/app/theme/client/imports/components/messages.css b/app/theme/client/imports/components/messages.css index 57ef05552666e..8095db99536d4 100644 --- a/app/theme/client/imports/components/messages.css +++ b/app/theme/client/imports/components/messages.css @@ -101,6 +101,43 @@ } } +.message-body { + &--unstyled { + font: inherit; + line-height: initial; + + & .emojione, + & .emoji { + display: inline-block !important; + + width: 1em !important; + min-width: 1em; + height: 1em !important; + min-height: 1em; + } + + & * { + display: inline !important; + + padding: unset !important; + + white-space: unset !important; + + color: inherit !important; + + background-color: unset !important; + + font-family: inherit !important; + + font-weight: unset !important; + } + + & a { + pointer-events: none; + } + } +} + .messages-box .rc-popover__list { padding: 0; } diff --git a/app/theme/client/imports/components/sidebar/sidebar-item.css b/app/theme/client/imports/components/sidebar/sidebar-item.css index f5647d554ca4b..14bc45df94d01 100644 --- a/app/theme/client/imports/components/sidebar/sidebar-item.css +++ b/app/theme/client/imports/components/sidebar/sidebar-item.css @@ -270,36 +270,6 @@ font-size: 12px; line-height: normal; - - & .emojione, - & .emoji { - display: inline-block !important; - - width: 13px !important; - min-width: 13px; - height: 13px !important; - min-height: 13px; - } - - & * { - display: inline !important; - - padding: unset !important; - - white-space: unset !important; - - color: inherit !important; - - background-color: unset !important; - - font-family: inherit !important; - - font-weight: unset !important; - } - - & a { - pointer-events: none; - } } &__time { diff --git a/app/threads/client/threads.css b/app/threads/client/threads.css index 0f7e324b2f512..cc636a1520744 100644 --- a/app/threads/client/threads.css +++ b/app/threads/client/threads.css @@ -42,10 +42,6 @@ cursor: pointer; color: var(--rc-color-link-active); - - font-style: normal; - - line-height: initial; } .contextual-bar__content.thread, diff --git a/app/ui-message/client/message.html b/app/ui-message/client/message.html index 9bd5c1e9c29da..aad2262831371 100644 --- a/app/ui-message/client/message.html +++ b/app/ui-message/client/message.html @@ -67,7 +67,12 @@ ****** {{else}} {{#if and settings.showreply msg.tmid}} -

{{_ "Replied_on"}}: {{parentMessage}}

+

+ {{_ "Replied_on"}}: + + {{{parentMessage}}} + +

{{{body}}}
diff --git a/app/ui-sidenav/client/sidebarItem.html b/app/ui-sidenav/client/sidebarItem.html index c36ac3016c12c..8d35fdb019c0d 100644 --- a/app/ui-sidenav/client/sidebarItem.html +++ b/app/ui-sidenav/client/sidebarItem.html @@ -53,7 +53,9 @@
{{#if extended}} {{#if lastMessage}} -
{{{lastMessage}}}
+
+ {{{lastMessage}}} +
{{/if}} {{/if}} {{#if unread}} diff --git a/app/ui-utils/client/lib/RoomHistoryManager.js b/app/ui-utils/client/lib/RoomHistoryManager.js index a32df5f081d91..2eb6135be0cd7 100644 --- a/app/ui-utils/client/lib/RoomHistoryManager.js +++ b/app/ui-utils/client/lib/RoomHistoryManager.js @@ -1,25 +1,26 @@ import { Meteor } from 'meteor/meteor'; import { ReactiveVar } from 'meteor/reactive-var'; import { Blaze } from 'meteor/blaze'; -import { /* UserRoles, RoomRoles,*/ ChatMessage, ChatSubscription, ChatRoom } from '../../../models'; -// import _ from 'underscore'; +import { ChatMessage, ChatSubscription, ChatRoom } from '../../../models'; import { RoomManager } from './RoomManager'; import { readMessage } from './readMessages'; +import { renderMessageBody } from './renderMessageBody'; +import s from 'underscore.string'; export const normalizeThreadMessage = (message) => { if (message.msg) { - return message.msg; + return renderMessageBody(message).replace(//g, ' '); } if (message.attachments) { const attachment = message.attachments.find((attachment) => attachment.title || attachment.description); if (attachment.description) { - return attachment.description; + return s.escapeHTML(attachment.description); } if (attachment.title) { - return attachment.title; + return s.escapeHTML(attachment.title); } } }; From 3b1d3f0d545b3e15802b02a0d7ef679e6c40e453 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Mon, 8 Apr 2019 17:50:46 -0300 Subject: [PATCH 2/9] Remove broken tooltip from thread quotes --- app/ui-message/client/message.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/ui-message/client/message.html b/app/ui-message/client/message.html index aad2262831371..f8b08c7a283bf 100644 --- a/app/ui-message/client/message.html +++ b/app/ui-message/client/message.html @@ -69,7 +69,7 @@ {{#if and settings.showreply msg.tmid}}

{{_ "Replied_on"}}: - + {{{parentMessage}}}

From 9b4f1587563c61841d0352e47b6a22bbc69ea7fc Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Mon, 8 Apr 2019 17:57:37 -0300 Subject: [PATCH 3/9] Memoize normalizeThreadMessage helper --- app/ui-utils/client/lib/RoomHistoryManager.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/ui-utils/client/lib/RoomHistoryManager.js b/app/ui-utils/client/lib/RoomHistoryManager.js index 2eb6135be0cd7..9f349a87c6520 100644 --- a/app/ui-utils/client/lib/RoomHistoryManager.js +++ b/app/ui-utils/client/lib/RoomHistoryManager.js @@ -1,3 +1,5 @@ +import mem from 'mem'; +import s from 'underscore.string'; import { Meteor } from 'meteor/meteor'; import { ReactiveVar } from 'meteor/reactive-var'; import { Blaze } from 'meteor/blaze'; @@ -5,9 +7,8 @@ import { ChatMessage, ChatSubscription, ChatRoom } from '../../../models'; import { RoomManager } from './RoomManager'; import { readMessage } from './readMessages'; import { renderMessageBody } from './renderMessageBody'; -import s from 'underscore.string'; -export const normalizeThreadMessage = (message) => { +export const normalizeThreadMessage = mem((message) => { if (message.msg) { return renderMessageBody(message).replace(//g, ' '); } @@ -23,7 +24,7 @@ export const normalizeThreadMessage = (message) => { return s.escapeHTML(attachment.title); } } -}; +}); export const upsertMessage = ({ msg: { _id, ...msg }, subscription }) => { const userId = msg.u && msg.u._id; From 37f0935064a35d101d50248b39113b8df06ddbdc Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Mon, 8 Apr 2019 18:21:38 -0300 Subject: [PATCH 4/9] Clear messageBox input on send --- app/ui-message/client/messageBox.js | 28 +++++++++++++++++----------- app/ui/client/lib/chatMessages.js | 5 ++--- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/app/ui-message/client/messageBox.js b/app/ui-message/client/messageBox.js index 2f3e0fe055e23..e9e0b093c1ff4 100644 --- a/app/ui-message/client/messageBox.js +++ b/app/ui-message/client/messageBox.js @@ -42,6 +42,20 @@ Template.messageBox.onCreated(function() { this.replyMessageData = new ReactiveVar(); this.isMicrophoneDenied = new ReactiveVar(true); this.sendIconDisabled = new ReactiveVar(false); + + this.send = (event) => { + if (!this.input) { + return; + } + + const { rid, tmid, onSend } = this.data; + const { value } = this.input; + this.input.value = ''; + onSend && onSend.call(this.data, event, { rid, tmid, value }, () => { + this.input.updateAutogrow(); + this.input.focus(); + }); + }; }); Template.messageBox.onRendered(function() { @@ -222,7 +236,7 @@ const insertNewLine = (input) => { }; const handleSubmit = (event, instance) => { - const { data: { rid, tmid, onSend }, input } = instance; + const { input } = instance; const { which: keyCode } = event; const isSubmitKey = keyCode === keyCodes.CARRIAGE_RETURN || keyCode === keyCodes.NEW_LINE; @@ -238,10 +252,7 @@ const handleSubmit = (event, instance) => { const isSending = (sendOnEnterActive && !withModifier) || (!sendOnEnterActive && withModifier); if (isSending) { - onSend && onSend.call(this, event, { rid, tmid, value: input.value }, () => { - input.updateAutogrow(); - input.focus(); - }); + instance.send(event); return true; } @@ -369,12 +380,7 @@ Template.messageBox.events({ onValueChanged && onValueChanged.call(this, event, { rid, tmid }); }, async 'click .js-send'(event, instance) { - const { input } = instance; - const { rid, tmid, onSend } = this; - onSend && onSend.call(this, event, { rid, tmid, value: input.value }, () => { - input.updateAutogrow(); - input.focus(); - }); + instance.send(event); }, 'click .js-action-menu'(event, instance) { const groups = messageBox.actions.get(); diff --git a/app/ui/client/lib/chatMessages.js b/app/ui/client/lib/chatMessages.js index b0c46671f4dff..4c7df34f3d65b 100644 --- a/app/ui/client/lib/chatMessages.js +++ b/app/ui/client/lib/chatMessages.js @@ -228,7 +228,6 @@ export class ChatMessages { const cursorPosition = editingNext ? 0 : -1; this.$input.setCursorPosition(cursorPosition); this.input.focus(); - return this.input; } clearEditing() { @@ -259,6 +258,8 @@ export class ChatMessages { await call('joinRoom', rid); } + messageBoxState.save({ rid, tmid }, this.input); + let msg = value; if (value.trim()) { const mention = this.$input.data('mention-user') || false; @@ -288,8 +289,6 @@ export class ChatMessages { try { await this.processMessageSend(message); - messageBoxState.set(this.input, ''); - messageBoxState.save({ rid, tmid }, this.input); this.$input.removeData('reply').trigger('dataChange'); } catch (error) { console.error(error); From 4b4270584448b46ad0f6edd8dfefb3269ebb1d93 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Mon, 8 Apr 2019 19:00:20 -0300 Subject: [PATCH 5/9] Update join button in messageBox --- app/theme/client/imports/components/message-box.css | 2 +- app/ui-message/client/messageBox.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/theme/client/imports/components/message-box.css b/app/theme/client/imports/components/message-box.css index 7f216d829179e..95a89fab0bc58 100644 --- a/app/theme/client/imports/components/message-box.css +++ b/app/theme/client/imports/components/message-box.css @@ -262,7 +262,7 @@ &__join-button { flex: 0; - margin: 0 0.25rem; + margin: -1rem 0.15rem; } } diff --git a/app/ui-message/client/messageBox.html b/app/ui-message/client/messageBox.html index 4c8097a5f7fc3..3a31d5572da91 100644 --- a/app/ui-message/client/messageBox.html +++ b/app/ui-message/client/messageBox.html @@ -39,7 +39,7 @@ {{/if}} {{else}} - {{/if}} From bc8dc3566dca6bfbb3f6588606abdc3964a225f8 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Mon, 8 Apr 2019 19:30:43 -0300 Subject: [PATCH 6/9] Add word wrap in thread --- app/threads/client/threads.css | 1 + 1 file changed, 1 insertion(+) diff --git a/app/threads/client/threads.css b/app/threads/client/threads.css index cc636a1520744..bdcd5cba12ffb 100644 --- a/app/threads/client/threads.css +++ b/app/threads/client/threads.css @@ -21,6 +21,7 @@ .thread-list { overflow: auto; flex-shrink: 1; + word-wrap: break-word; } .thread-replied { From 0535c78fee48cc1be6cf720a8d508e8af50b5f3c Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Mon, 8 Apr 2019 19:48:10 -0300 Subject: [PATCH 7/9] Avoid overflow from embedded attachment --- app/oembed/client/oembedAudioWidget.html | 2 +- app/oembed/client/oembedFrameWidget.html | 2 +- app/oembed/client/oembedUrlWidget.html | 2 +- app/oembed/client/oembedVideoWidget.html | 2 +- app/oembed/client/oembedYoutubeWidget.html | 2 +- app/spotify/lib/client/oembedSpotifyWidget.html | 2 +- app/theme/client/imports/components/messages.css | 4 ++++ app/threads/client/threads.css | 3 ++- 8 files changed, 12 insertions(+), 7 deletions(-) diff --git a/app/oembed/client/oembedAudioWidget.html b/app/oembed/client/oembedAudioWidget.html index 9d4117485189e..62c1924b4491b 100644 --- a/app/oembed/client/oembedAudioWidget.html +++ b/app/oembed/client/oembedAudioWidget.html @@ -5,7 +5,7 @@ {{else}} -
+