From a652ec3b61d8c60f24641833c912e495cc9c212e Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 9 Oct 2020 13:30:10 +1100 Subject: [PATCH] fix light theme in react refactor --- background.html | 1 - background_test.html | 1 - js/models/conversations.js | 1 + js/views/conversation_view.js | 7 ----- stylesheets/_modules.scss | 7 ++++- stylesheets/_session.scss | 2 +- stylesheets/_session_constants.scss | 2 ++ stylesheets/_session_conversation.scss | 23 +++++++++------ stylesheets/_session_group_panel.scss | 3 +- stylesheets/_session_left_pane.scss | 2 +- test/index.html | 1 - ts/components/ConversationListItem.tsx | 2 +- .../conversation/ConversationHeader.tsx | 11 -------- .../conversation/SessionCompositionBox.tsx | 1 - .../conversation/SessionConversation.tsx | 28 +++++++++---------- .../session/conversation/SessionRecording.tsx | 2 -- 16 files changed, 42 insertions(+), 52 deletions(-) diff --git a/background.html b/background.html index f9b14827d..04fc9ebe4 100644 --- a/background.html +++ b/background.html @@ -311,7 +311,6 @@ - diff --git a/background_test.html b/background_test.html index 686ccaf65..1158cefe9 100644 --- a/background_test.html +++ b/background_test.html @@ -314,7 +314,6 @@ - diff --git a/js/models/conversations.js b/js/models/conversations.js index b9e1e9202..27b96d19f 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -1861,6 +1861,7 @@ message => message.get('received_at') <= newestUnreadDate ); + let read = await Promise.all( _.map(oldUnread, async providedM => { const m = MessageController.register(providedM.id, providedM); diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 41edb4aa4..803327ddc 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -204,13 +204,6 @@ onShowSafetyNumber: () => { this.showSafetyNumber(); }, - onShowAllMedia: async () => { - this.updateHeader(); - }, - onShowGroupMembers: async () => { - await this.showMembers(); - this.updateHeader(); - }, onGoBack: () => { this.resetPanel(); this.updateHeader(); diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 768f3e48e..38151716b 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -1279,6 +1279,7 @@ display: flex; flex-grow: 1; overflow-y: auto; + overflow-x: hidden; padding: 20px; } @@ -1286,6 +1287,7 @@ display: flex; flex-grow: 1; flex-direction: column; + width: 100%; } // Module: Attachment Section @@ -1341,13 +1343,16 @@ display: inline-flex; flex-direction: column; flex-grow: 1; - flex-shrink: 0; margin-inline-start: 8px; margin-inline-end: 8px; + min-width: 0; } .module-document-list-item__file-name { font-weight: bold; + white-space: nowrap; + text-overflow: ellipsis; + overflow-x: hidden; } .module-document-list-item__file-size { diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index a3bad8483..865ed64d2 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -1447,7 +1447,7 @@ input { &.selected { @include themify($themes) { - background-color: themed('conversationItemSelected'); + background-color: themed('conversationItemSelected') !important; } } diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index a87ebcc34..af870e5a4 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -217,3 +217,5 @@ $session-fadein-duration: 0.1s; @mixin session-dark-background-hover { background-color: $session-shade-7; } + +$composition-container-height: 60px; diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 68701c1f5..5212b6cbd 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -1,4 +1,3 @@ -$composition-container-height: 60px; @keyframes fadein { from { @@ -74,10 +73,12 @@ $composition-container-height: 60px; transition: transform 1.5 * $session-transition-duration ease-in-out; transform: translateX(100%); will-change: transform; + width: 25vw; &.show { transform: none; transition: transform $session-transition-duration ease-in-out; + z-index: 2; } } } @@ -106,7 +107,6 @@ $composition-container-height: 60px; .session-button.default.danger { display: flex; - width: 80px; } } .message-selection-overlay div[role='button'] { @@ -130,7 +130,6 @@ $composition-container-height: 60px; flex-grow: 1; flex-direction: column; position: relative; - background-color: $session-background; outline: none; .conversation-messages { @@ -143,6 +142,12 @@ $composition-container-height: 60px; outline: none; position: relative; + @include themify($themes) { + border-left: themed('sessionBorder'); + border-top: themed('sessionBorder'); + border-bottom: themed('sessionBorder'); + } + &__blocking-overlay { background-color: rgba(0, 0, 0, 0.8); position: absolute; @@ -213,9 +218,11 @@ $composition-container-height: 60px; display: flex; justify-content: center; align-items: center; - background-color: $session-shade-4; padding: 0px $session-margin-md; min-height: min-content; + @include themify($themes) { + background: themed('inputBackground'); + } & > .session-icon-button { margin-right: $session-margin-sm; @@ -227,7 +234,6 @@ $composition-container-height: 60px; opacity: 0.8; .send { - background-color: $session-shade-14; padding: $session-margin-xs; border-radius: 50%; height: 30px; @@ -248,11 +254,13 @@ $composition-container-height: 60px; min-height: $composition-container-height / 3; max-height: 3 * $composition-container-height; margin-right: $session-margin-md; - color: $session-color-white; + @include themify($themes) { + color: themed('textColor'); + } + background: transparent; resize: none; display: flex; flex-grow: 1; - background: transparent; outline: none; border: none; font-size: 14px; @@ -379,7 +387,6 @@ $composition-container-height: 60px; display: flex; align-items: center; justify-content: center; - background-color: $session-shade-5; width: $actions-element-size; height: $actions-element-size; border-radius: 50%; diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss index 4403555cd..f3b232c83 100644 --- a/stylesheets/_session_group_panel.scss +++ b/stylesheets/_session_group_panel.scss @@ -80,8 +80,7 @@ margin-top: auto; width: 100%; border: none; - height: 51px; - background-color: black; + height: $composition-container-height; flex-shrink: 0; align-items: center; @include themify($themes) { diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 7338410aa..ad102f4be 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -387,7 +387,7 @@ $session-compose-margin: 20px; .session-button.square-outline.square.white, .session-button.square-outline.square.danger { flex-grow: 1; - height: 51px; + height: $composition-container-height; @include themify($themes) { border: themed('sessionBorder'); diff --git a/test/index.html b/test/index.html index 3c7380577..ab811b6dc 100644 --- a/test/index.html +++ b/test/index.html @@ -323,7 +323,6 @@ - diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx index 6418ac3e3..48aa0471d 100644 --- a/ts/components/ConversationListItem.tsx +++ b/ts/components/ConversationListItem.tsx @@ -302,7 +302,7 @@ class ConversationListItem extends React.PureComponent { style, mentionedUs, } = this.props; - const triggerId = `conversation-item-${phoneNumber}-ctxmenu`; + const triggerId = `conversation-item-${phoneNumber}-ctxmenu-${Date.now()}`; return (
diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index 8aff94d87..13b80068b 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -75,8 +75,6 @@ interface Props { onDeleteSelectedMessages: () => void; onShowSafetyNumber: () => void; - onShowAllMedia: () => void; - onShowGroupMembers: () => void; onGoBack: () => void; onBlockUser: () => void; @@ -421,7 +419,6 @@ class ConversationHeader extends React.Component { isRss, onResetSession, onSetDisappearingMessages, - onShowGroupMembers, onShowSafetyNumber, timerOptions, onBlockUser, @@ -437,13 +434,6 @@ class ConversationHeader extends React.Component { onSetDisappearingMessages, i18n ); - const showMembersMenuItem = Menu.getShowMemberMenuItem( - isPublic, - isRss, - isGroup, - onShowGroupMembers, - i18n - ); const showSafetyNumberMenuItem = Menu.getShowSafetyNumberMenuItem( isPublic, @@ -473,7 +463,6 @@ class ConversationHeader extends React.Component { return ( {disappearingMessagesMenuItem} - {showMembersMenuItem} {showSafetyNumberMenuItem} {resetSessionMenuItem} {blockHandlerMenuItem} diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index 610077faf..8bbe7048d 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -208,7 +208,6 @@ export class SessionCompositionBox extends React.Component { diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index c926267a6..7b5785bc6 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -535,16 +535,9 @@ export class SessionConversation extends React.Component { this.setState({ infoViewState: undefined }); }, - onShowAllMedia: async () => { - conversation.updateHeader(); - }, onUpdateGroupName: () => { conversation.onUpdateGroupName(); }, - onShowGroupMembers: async () => { - window.Whisper.events.trigger('updateGroupMembers', conversation); - conversation.updateHeader(); - }, onBlockUser: () => { conversation.block(); @@ -590,6 +583,9 @@ export class SessionConversation extends React.Component { const ourPK = window.textsecure.storage.user.getNumber(); const members = conversation.get('members') || []; + const isAdmin = conversation.isMediumGroup() + ? true + : conversation.get('groupAdmins').includes(ourPK); return { id: conversation.id, @@ -603,7 +599,7 @@ export class SessionConversation extends React.Component { isKickedFromGroup: conversation.attributes.isKickedFromGroup, isGroup: !conversation.isPrivate(), isPublic: conversation.isPublic(), - isAdmin: conversation.get('groupAdmins').includes(ourPK), + isAdmin, isRss: conversation.isRss(), isBlocked: conversation.isBlocked(), @@ -612,8 +608,13 @@ export class SessionConversation extends React.Component { value: item.get('seconds'), })), - onSetDisappearingMessages: (seconds: any) => - conversation.setDisappearingMessages(seconds), + onSetDisappearingMessages: (seconds: any) => { + if (seconds > 0) { + conversation.updateExpirationTimer(seconds); + } else { + conversation.updateExpirationTimer(null); + } + }, onGoBack: () => { this.toggleGroupSettingsPane(); @@ -626,8 +627,7 @@ export class SessionConversation extends React.Component { window.Whisper.events.trigger('updateGroupMembers', conversation); }, onInviteContacts: () => { - // VINCE TODO: Inviting contacts ⚡️ - return; + window.Whisper.events.trigger('inviteContacts', conversation); }, onLeaveGroup: () => { window.Whisper.events.trigger('leaveGroup', conversation); @@ -872,10 +872,10 @@ export class SessionConversation extends React.Component { // If removable from server, we "Unsend" - otherwise "Delete" const pluralSuffix = multiple ? 's' : ''; const title = window.i18n( - isPublic ? `unsendMessage${pluralSuffix}` : `deleteMessage${pluralSuffix}` + isServerDeletable ? `deleteMessage${pluralSuffix}ForEveryone` : `deleteMessage${pluralSuffix}` ); - const okText = window.i18n(isServerDeletable ? 'unsend' : 'delete'); + const okText = window.i18n(isServerDeletable ? 'deleteForEveryone' : 'delete'); window.confirmationDialog({ title, diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index 16bdade78..7556832d8 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -207,7 +207,6 @@ export class SessionRecording extends React.Component { )} @@ -250,7 +249,6 @@ export class SessionRecording extends React.Component {