From 2279f0abc63ead8f2ca2321ec0c1c65e1dc169e3 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 7 Oct 2020 10:24:28 +1100 Subject: [PATCH 1/7] center uneditable profile name --- stylesheets/_modal.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index 6f154ded3..d55046a49 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -287,7 +287,6 @@ display: flex; align-items: center; justify-content: center; - margin-inline-start: $session-margin-lg; p { font-size: $session-font-md; From d7e1d014a4ba6ed324d214361da7656afcd77fa7 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 7 Oct 2020 10:51:35 +1100 Subject: [PATCH 2/7] make right panel the correct size when window is tiny --- stylesheets/_session_group_panel.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss index 21f7a9619..32feb7b95 100644 --- a/stylesheets/_session_group_panel.scss +++ b/stylesheets/_session_group_panel.scss @@ -8,8 +8,8 @@ display: flex; flex-direction: column; height: 100vh; - width: 22vw; - flex-shrink: 0; + width: -webkit-fill-available; + @include themify($themes) { background: themed('leftpaneOverlayBackground'); border-left: themed('sessionBorder'); @@ -142,11 +142,11 @@ .module-media-grid-item__image, .module-media-grid-item { height: calc( - 22vw / 3.5 - ); //.group-settings is 22vw and we want three rows with some space so divide it by 3.5 + 22vw / 4 + ); //.group-settings is 22vw and we want three rows with some space so divide it by 4 width: calc( - 22vw / 3.5 - ); //.group-settings is 22vw and we want three rows with some space so divide it by 3.5 + 22vw / 4 + ); //.group-settings is 22vw and we want three rows with some space so divide it by 4 margin: auto; margin-bottom: 1vh; } From 6e993da510d5963f12def4a9f699f4af14faaafb Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 7 Oct 2020 11:08:36 +1100 Subject: [PATCH 3/7] fix highlight of text selected for light mode --- stylesheets/_session.scss | 4 +++- stylesheets/themes.scss | 2 ++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 10cfb00ba..aa5082d35 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -38,7 +38,9 @@ textarea { user-select: text; &::selection { - background: rgba($session-color-green, 0.6); + @include themify($themes) { + background: themed('textHighlight'); + } } } } diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index 0c9835a55..372bfbce6 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -25,6 +25,7 @@ $themes: ( textColor: $black, textColorSubtle: #a0a0a0, textColorOpposite: $white, + textHighlight: rgba($black, 0.2), // inbox inboxBackground: $white, // buttons @@ -74,6 +75,7 @@ $themes: ( textColor: $white, textColorSubtle: #a0a0a0, textColorOpposite: $black, + textHighlight: rgba($accentDarkTheme, 0.6), // inbox inboxBackground: linear-gradient(180deg, #171717 0%, #121212 100%), // buttons From 1a5a0786a1ecc938d0de0834d4823d584ae35d0f Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 7 Oct 2020 15:22:22 +1100 Subject: [PATCH 4/7] fix new medium group mark as unread then as read on opened --- js/conversation_controller.js | 23 +---------------------- js/models/conversations.js | 6 +++--- js/views/message_list_view.js | 2 +- ts/receiver/mediumGroups.ts | 5 ++++- 4 files changed, 9 insertions(+), 27 deletions(-) diff --git a/js/conversation_controller.js b/js/conversation_controller.js index 4e453e73a..236515892 100644 --- a/js/conversation_controller.js +++ b/js/conversation_controller.js @@ -1,4 +1,4 @@ -/* global _, Whisper, Backbone, storage, textsecure, libsignal, log */ +/* global Whisper, Backbone, textsecure, libsignal, log */ /* eslint-disable more/no-then */ @@ -15,10 +15,6 @@ this.listenTo(conversations, 'reset', () => this.reset([])); this.listenTo(conversations, 'remove', this.remove); - this.on( - 'add remove change:unreadCount', - _.debounce(this.updateUnreadCount.bind(this), 1000) - ); this.startPruning(); }, addActive(model) { @@ -29,23 +25,6 @@ this.remove(model); } }, - updateUnreadCount() { - const newUnreadCount = _.reduce( - this.map(m => m.get('unreadCount')), - (item, memo) => item + memo, - 0 - ); - storage.put('unreadCount', newUnreadCount); - - if (newUnreadCount > 0) { - window.setBadgeCount(newUnreadCount); - window.document.title = `${window.getTitle()} (${newUnreadCount})`; - } else { - window.setBadgeCount(0); - window.document.title = window.getTitle(); - } - window.updateTrayIcon(newUnreadCount); - }, startPruning() { const halfHour = 30 * 60 * 1000; this.interval = setInterval(() => { diff --git a/js/models/conversations.js b/js/models/conversations.js index be3b0aa6b..e958588fc 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -1047,7 +1047,7 @@ ); }, - getUnread() { + async getUnread() { return window.Signal.Data.getUnreadByConversation(this.id, { MessageCollection: Whisper.MessageCollection, }); @@ -1741,6 +1741,7 @@ await window.Signal.Data.updateConversation(this.id, this.attributes, { Conversation: Whisper.Conversation, }); + await this.trigger('change', this); }, async addMessage(messageAttributes) { @@ -1866,7 +1867,6 @@ conversationId, }) ); - let unreadMessages = await this.getUnread(); const oldUnread = unreadMessages.filter( message => message.get('received_at') <= newestUnreadDate @@ -1898,7 +1898,7 @@ unreadMessages = unreadMessages.filter(m => Boolean(m.isIncoming())); const unreadCount = unreadMessages.length - read.length; - this.set({ unreadCount }); + this.set('unreadCount', unreadCount); const mentionRead = (() => { const stillUnread = unreadMessages.filter( diff --git a/js/views/message_list_view.js b/js/views/message_list_view.js index 84a8d58bc..13ac989d5 100644 --- a/js/views/message_list_view.js +++ b/js/views/message_list_view.js @@ -55,7 +55,7 @@ this.triggerLazyScroll(); }, atBottom() { - return this.bottomOffset < 30; + return this.bottomOffset ? this.bottomOffset < 30 : true; }, measureScrollPosition() { if (this.el.scrollHeight === 0) { diff --git a/ts/receiver/mediumGroups.ts b/ts/receiver/mediumGroups.ts index 49f19e0f6..1265a35ba 100644 --- a/ts/receiver/mediumGroups.ts +++ b/ts/receiver/mediumGroups.ts @@ -207,7 +207,10 @@ async function handleNewGroup( // We only set group admins on group creation convo.set('groupAdmins', admins); - + // update the unreadCount for this convo + convo.set({ + unreadCount: Number(convo.get('unreadCount')) + 1, + }); convo.commit(); const secretKeyHex = toHex(groupPrivateKey); From b050a3740d2902f4084600ad2047ad31fec52a08 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 7 Oct 2020 15:25:57 +1100 Subject: [PATCH 5/7] clean all updateConversation calls to convo.commit() --- js/models/conversations.js | 84 +++++-------------- js/modules/debug.js | 6 +- js/modules/loki_app_dot_net_api.js | 9 +- .../session/LeftPaneMessageSection.tsx | 1 - ts/receiver/errors.ts | 9 +- ts/receiver/multidevice.ts | 5 +- ts/state/selectors/conversations.ts | 1 - 7 files changed, 26 insertions(+), 89 deletions(-) diff --git a/js/models/conversations.js b/js/models/conversations.js index e958588fc..1336a0c01 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -641,9 +641,7 @@ this.set({ verified }); // we don't await here because we don't need to wait for this to finish - window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + this.commit(); return; } @@ -706,9 +704,7 @@ } this.set({ verified }); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); // Three situations result in a verification notice in the conversation: // 1) The message came from an explicit verification in another client (not @@ -813,16 +809,12 @@ secondaryStatus: newStatus, primaryDevicePubKey, }); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); } }, async updateGroupAdmins(groupAdmins) { this.set({ groupAdmins }); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); }, isUnverified() { if (this.isPrivate()) { @@ -1307,9 +1299,7 @@ timestamp: now, isArchived: false, }); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); // We're offline! if (!textsecure.messaging) { @@ -1494,17 +1484,13 @@ this.set(lastMessageUpdate); if (this.hasChanged()) { - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); } }, async setArchived(isArchived) { this.set({ isArchived }); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); }, async updateExpirationTimer( @@ -1541,9 +1527,7 @@ const timestamp = (receivedAt || Date.now()) - 1; this.set({ expireTimer }); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); const message = this.messageCollection.add({ // Even though this isn't reflected to the user, we want to place the last seen @@ -1636,9 +1620,7 @@ } if (this.get('sessionResetStatus') !== newStatus) { this.set({ sessionResetStatus: newStatus }); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); } }, async onSessionResetInitiated() { @@ -1917,9 +1899,7 @@ this.set({ mentionedUs: false }); } - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); // If a message has errors, we don't want to send anything out about it. // read syncs - let's wait for a client that really understands the message @@ -1978,18 +1958,14 @@ } this.set({ nickname: trimmed }); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); await this.updateProfileName(); }, async setLokiProfile(newProfile) { if (!_.isEqual(this.get('profile'), newProfile)) { this.set({ profile: newProfile }); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); } // if set to null, it will show a placeholder with color and first letter @@ -2041,9 +2017,7 @@ channelId: newChannelId, active_at: Date.now(), }); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); } }, getPublicSource() { @@ -2080,9 +2054,7 @@ } if (this.get('lastPublicMessage') !== newLastMessageId) { this.set({ lastPublicMessage: newLastMessageId }); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); } }, isModerator(pubKey) { @@ -2099,9 +2071,7 @@ // TODO: compare array properly if (!_.isEqual(this.get('moderators'), moderators)) { this.set({ moderators }); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); } }, @@ -2136,18 +2106,14 @@ const profileName = this.get('profileName'); if (profileName !== name) { this.set({ profileName: name }); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); } }, async setGroupName(name) { const profileName = this.get('name'); if (profileName !== name) { this.set({ name }); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); } }, async setSubscriberCount(count) { @@ -2166,18 +2132,14 @@ this.set({ name }); } // save - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); } }, async setProfileAvatar(avatar) { const profileAvatar = this.get('profileAvatar'); if (profileAvatar !== avatar) { this.set({ profileAvatar: avatar }); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); } }, async setProfileKey(profileKey) { @@ -2194,9 +2156,7 @@ await this.deriveAccessKeyIfNeeded(); - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); } }, @@ -2426,9 +2386,7 @@ }); } - await window.Signal.Data.updateConversation(this.id, this.attributes, { - Conversation: Whisper.Conversation, - }); + await this.commit(); }, getName() { diff --git a/js/modules/debug.js b/js/modules/debug.js index 5f0e4037c..e763758aa 100644 --- a/js/modules/debug.js +++ b/js/modules/debug.js @@ -50,11 +50,7 @@ exports.createConversation = async ({ unread: numMessages, }); const conversationId = conversation.get('id'); - await Signal.Data.updateConversation( - conversationId, - conversation.attributes, - { Conversation: Whisper.Conversation } - ); + await conversation.commit(); await Promise.all( range(0, numMessages).map(async index => { diff --git a/js/modules/loki_app_dot_net_api.js b/js/modules/loki_app_dot_net_api.js index efcd5642a..ca78976a1 100644 --- a/js/modules/loki_app_dot_net_api.js +++ b/js/modules/loki_app_dot_net_api.js @@ -1619,14 +1619,7 @@ class LokiPublicChannelAPI { if (data.counts && Number.isInteger(data.counts.subscribers)) { this.conversation.setSubscriberCount(data.counts.subscribers); } - - await window.Signal.Data.updateConversation( - this.conversation.id, - this.conversation.attributes, - { - Conversation: Whisper.Conversation, - } - ); + await this.conversation.commit(); } // get moderation actions diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx index e426099a1..78c1f2724 100644 --- a/ts/components/session/LeftPaneMessageSection.tsx +++ b/ts/components/session/LeftPaneMessageSection.tsx @@ -161,7 +161,6 @@ export class LeftPaneMessageSection extends React.Component { const length = conversations.length; const listKey = 0; - // Note: conversations is not a known prop for List, but it is required to ensure that // it re-renders when our conversation data changes. Otherwise it would just render // on startup and scroll. diff --git a/ts/receiver/errors.ts b/ts/receiver/errors.ts index a41179f85..26e2201b4 100644 --- a/ts/receiver/errors.ts +++ b/ts/receiver/errors.ts @@ -16,9 +16,7 @@ async function onNoSession(ev: any) { if (!convo.get('sessionRestoreSeen')) { convo.set({ sessionRestoreSeen: true }); - await window.Signal.Data.updateConversation(convo.id, convo.attributes, { - Conversation: Whisper.Conversation, - }); + await convo.commit(); await SessionProtocol.sendSessionRequestIfNeeded(new PubKey(pubkey)); } else { @@ -85,10 +83,7 @@ export async function onError(ev: any) { if (ev.confirm) { ev.confirm(); } - - await window.Signal.Data.updateConversation(id, conversation.attributes, { - Conversation: Whisper.Conversation, - }); + await conversation.commit(); } throw error; diff --git a/ts/receiver/multidevice.ts b/ts/receiver/multidevice.ts index 35f30e591..a46de5286 100644 --- a/ts/receiver/multidevice.ts +++ b/ts/receiver/multidevice.ts @@ -409,10 +409,7 @@ async function onContactReceived(details: any) { ); conversation.set(newAttributes); } - - await window.Signal.Data.updateConversation(id, conversation.attributes, { - Conversation: Whisper.Conversation, - }); + await conversation.commit(); const { expireTimer } = details; const isValidExpireTimer = typeof expireTimer === 'number'; if (isValidExpireTimer) { diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index 63b86af9e..c4b772fed 100644 --- a/ts/state/selectors/conversations.ts +++ b/ts/state/selectors/conversations.ts @@ -193,7 +193,6 @@ export const _getLeftPaneLists = ( }; const contacts: Array = filterToPrimary(allContacts); - return { conversations, archivedConversations, From 3f4be17393bdf8ab718bdc1769dd2f51e58437d1 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 7 Oct 2020 15:55:12 +1100 Subject: [PATCH 6/7] do not draw attention for linux env --- main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.js b/main.js index 4bebeafc9..f6f33a645 100644 --- a/main.js +++ b/main.js @@ -987,7 +987,7 @@ ipc.on('draw-attention', () => { if (!mainWindow) { return; } - if (process.platform === 'win32' || process.platform === 'linux') { + if (process.platform === 'win32') { mainWindow.flashFrame(true); } }); From 37dd7b87cc92a13bf5b52665caaa11cc0565efa0 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 7 Oct 2020 16:09:01 +1100 Subject: [PATCH 7/7] remove right buttons on Message. use right click instead --- js/views/identicon_svg_view.js | 16 ---- stylesheets/_modules.scss | 111 +------------------------ stylesheets/_theme_dark.scss | 21 ----- ts/components/conversation/Message.tsx | 95 --------------------- 4 files changed, 2 insertions(+), 241 deletions(-) diff --git a/js/views/identicon_svg_view.js b/js/views/identicon_svg_view.js index 996a57605..0acf9c83b 100644 --- a/js/views/identicon_svg_view.js +++ b/js/views/identicon_svg_view.js @@ -13,7 +13,6 @@ templateName: 'identicon-svg', initialize(options) { this.render_attributes = options; - this.render_attributes.color = COLORS[this.render_attributes.color]; }, getSVGUrl() { const html = this.render().$el.html(); @@ -40,19 +39,4 @@ }); }, }); - - const COLORS = { - red: '#cc163d', - deep_orange: '#c73800', - brown: '#746c53', - pink: '#a23474', - purple: '#862caf', - indigo: '#5951c8', - blue: '#336ba3', - teal: '#067589', - green: '#3b7845', - light_green: '#1c8260', - blue_grey: '#895d66', - grey: '#6b6b78', - }; })(); diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index c595ca77b..de3f210a0 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -76,94 +76,10 @@ margin-inline-start: 32px; } -.module-message__buttons { - position: absolute; - top: 0; - bottom: 0; - display: inline-flex; - flex-direction: row; - align-items: center; - opacity: 0; -} - -.module-message:hover .module-message__buttons { +.module-message:hover { opacity: 1; } -.module-message__buttons--incoming { - left: 100%; -} -.module-message__buttons--outgoing { - right: 100%; -} - -.module-message__buttons__upload { - height: 24px; - width: 24px; - transform: rotate(180deg); - display: inline-block; - cursor: pointer; - @include color-svg('../images/download.svg', $color-light-45); - &:hover { - @include color-svg('../images/download.svg', $color-gray-90); - } -} - -.module-message__buttons__download { - min-height: 24px; - min-width: 24px; - display: inline-block; - cursor: pointer; - @include color-svg('../images/download.svg', $color-light-45); - &:hover { - @include color-svg('../images/download.svg', $color-gray-90); - } -} - -.module-message__buttons__download--incoming { - margin-inline-start: 12px; -} -.module-message__buttons__download--outgoing { - margin-inline-end: 12px; -} - -.module-message__buttons__reply { - min-height: 24px; - min-width: 24px; - display: inline-block; - cursor: pointer; - @include color-svg('../images/reply.svg', $color-light-45); - &:hover { - @include color-svg('../images/reply.svg', $color-gray-90); - } -} - -.module-message__buttons__reply--incoming { - margin-inline-start: 12px; -} -.module-message__buttons__reply--outgoing { - margin-inline-end: 12px; -} - -.module-message__buttons__menu { - height: 24px; - width: 24px; - display: inline-block; - cursor: pointer; - @include color-svg('../images/ellipsis.svg', $color-light-45); - &:hover { - @include color-svg('../images/ellipsis.svg', $color-gray-90); - } -} - -.module-message__buttons__menu--incoming { - margin-inline-start: 12px; -} - -.module_message__buttons__menu--outgoing { - margin-inline-end: 12px; -} - .module-message__error-container { width: 28px; position: relative; @@ -2822,6 +2738,7 @@ border: 1px solid $color-dark-05; opacity: 0; user-select: none; + transition: opacity $session-transition-duration; } .react-contextmenu--visible { @@ -2890,14 +2807,6 @@ // All media query widths have 300px added to account for the left pane // And have been tweaked for smoother transitions -// To hide in small breakpoints -.module-message__buttons__download { - display: none; -} -.module-message__buttons__reply { - display: none; -} - // To limit messages with things forcing them wider, like long attachment names .module-message__container { max-width: 300px; @@ -2926,14 +2835,6 @@ margin-inline-start: auto; } - // To hide in small breakpoints - .module-message__buttons__download { - display: inline-block; - } - .module-message__buttons__reply { - display: inline-block; - } - // To hide in larger breakpoints .module-message__context__download { display: none; @@ -2965,14 +2866,6 @@ margin-inline-start: auto; } - // To hide in small breakpoints - .module-message__buttons__download { - display: inline-block; - } - .module-message__buttons__reply { - display: inline-block; - } - // To hide in larger breakpoints .module-message__context__download { display: none; diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index baef39f70..58b27ee7e 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -295,27 +295,6 @@ // Module: Message - .module-message__buttons__download { - @include color-svg('../images/download.svg', $color-light-45); - &:hover { - @include color-svg('../images/download.svg', $color-dark-05); - } - } - - .module-message__buttons__reply { - @include color-svg('../images/reply.svg', $color-light-45); - &:hover { - @include color-svg('../images/reply.svg', $color-dark-05); - } - } - - .module-message__buttons__menu { - @include color-svg('../images/ellipsis.svg', $color-light-45); - &:hover { - @include color-svg('../images/ellipsis.svg', $color-dark-05); - } - } - .module-message__error { @include color-svg('../images/error.svg', $session-color-danger); } diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 73143a2b0..f6bf8c93e 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -769,89 +769,6 @@ export class Message extends React.PureComponent { } } - public renderMenu(isCorrectSide: boolean, triggerId: string) { - const { - attachments, - direction, - disableMenu, - isKickedFromGroup, - onDownload, - onReply, - } = this.props; - - if (!isCorrectSide || disableMenu || isKickedFromGroup) { - return null; - } - - const fileName = - attachments && attachments[0] ? attachments[0].fileName : null; - const isDangerous = isFileDangerous(fileName || ''); - const multipleAttachments = attachments && attachments.length > 1; - const firstAttachment = attachments && attachments[0]; - - const downloadButton = - !multipleAttachments && firstAttachment && !firstAttachment.pending ? ( -
{ - if (onDownload) { - onDownload(isDangerous); - } - e.stopPropagation(); - }} - role="button" - className={classNames( - 'module-message__buttons__download', - `module-message__buttons__download--${direction}` - )} - /> - ) : null; - - const replyButton = ( -
{ - if (onReply) { - onReply(); - } - e.stopPropagation(); - }} - role="button" - className={classNames( - 'module-message__buttons__reply', - `module-message__buttons__download--${direction}` - )} - /> - ); - - const menuButton = ( - -
- - ); - - const first = direction === 'incoming' ? downloadButton : menuButton; - const last = direction === 'incoming' ? menuButton : downloadButton; - - return ( -
- {first} - {replyButton} - {last} -
- ); - } - public renderContextMenu(triggerId: string) { const { attachments, @@ -1058,12 +975,7 @@ export class Message extends React.PureComponent { } = this.props; const { expired, expiring } = this.state; - // This id is what connects our triple-dot click with our associated pop-up menu. - // It needs to be unique. // The Date.now() is a workaround to be sure a single triggerID with this id exists - const triggerId = id - ? String(`message-${id}-${Date.now()}`) - : String(`message-${authorPhoneNumber}-${timestamp}`); const rightClickTriggerId = id ? String(`message-ctx-${id}-${Date.now()}`) : String(`message-ctx-${authorPhoneNumber}-${timestamp}`); @@ -1111,9 +1023,6 @@ export class Message extends React.PureComponent { )} > {this.renderError(isIncoming)} - {isRss || isKickedFromGroup - ? null - : this.renderMenu(!isIncoming, triggerId)}
{ {this.renderMetadata()}
{this.renderError(!isIncoming)} - {isRss || multiSelectMode - ? null - : this.renderMenu(isIncoming, triggerId)} - {enableContextMenu ? this.renderContextMenu(triggerId) : null} {enableContextMenu ? this.renderContextMenu(rightClickTriggerId) : null}