From aad2d3232ab1715d6abfe1533bf07e38f10ea64d Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 4 Nov 2020 09:44:06 +1100 Subject: [PATCH] be able to show right panel for users too (and display convo medias) --- js/modules/signal.js | 8 - js/views/conversation_view.js | 201 +----------------- stylesheets/_session_group_panel.scss | 6 - .../conversation/SessionConversation.tsx | 25 +-- .../conversation/SessionRightPanel.tsx | 25 ++- 5 files changed, 28 insertions(+), 237 deletions(-) diff --git a/js/modules/signal.js b/js/modules/signal.js index 6c39b009c..c84917ff9 100644 --- a/js/modules/signal.js +++ b/js/modules/signal.js @@ -28,12 +28,6 @@ const { } = require('../../ts/components/conversation/ContactDetail'); const { ContactListItem } = require('../../ts/components/ContactListItem'); const { ContactName } = require('../../ts/components/conversation/ContactName'); -const { - ConversationHeaderWithDetails, -} = require('../../ts/components/conversation/ConversationHeader'); -const { - SessionRightPanelWithDetails, -} = require('../../ts/components/session/conversation/SessionRightPanel'); const { EmbeddedContact, } = require('../../ts/components/conversation/EmbeddedContact'); @@ -270,8 +264,6 @@ exports.setup = (options = {}) => { ContactDetail, ContactListItem, ContactName, - ConversationHeaderWithDetails, - SessionRightPanelWithDetails, SettingsView, EmbeddedContact, Emojify, diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 84e1f30da..b15113348 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -12,7 +12,7 @@ */ // eslint-disable-next-line func-names -(function() { +(function () { 'use strict'; window.Whisper = window.Whisper || {}; @@ -131,171 +131,6 @@ this.toggleMicrophone() ); - const getHeaderProps = () => { - const expireTimer = this.model.get('expireTimer'); - const expirationSettingName = expireTimer - ? Whisper.ExpirationTimerOptions.getName(expireTimer || 0) - : null; - - const members = this.model.get('members') || []; - - return { - id: this.model.id, - name: this.model.getName(), - phoneNumber: this.model.getNumber(), - profileName: this.model.getProfileName(), - avatarPath: this.model.getAvatarPath(), - isVerified: this.model.isVerified(), - isMe: this.model.isMe(), - isClosable: this.model.isClosable(), - isBlocked: this.model.isBlocked(), - isGroup: !this.model.isPrivate(), - isPrivate: this.model.isPrivate(), - isOnline: this.model.isOnline(), - isArchived: this.model.get('isArchived'), - isPublic: this.model.isPublic(), - isRss: this.model.isRss(), - amMod: this.model.isModerator( - window.storage.get('primaryDevicePubKey') - ), - members, - subscriberCount: this.model.get('subscriberCount'), - selectedMessages: this.model.selectedMessages, - expirationSettingName, - showBackButton: Boolean(this.panels && this.panels.length), - timerOptions: Whisper.ExpirationTimerOptions.map(item => ({ - name: item.getName(), - value: item.get('seconds'), - })), - hasNickname: !!this.model.getNickname(), - isKickedFromGroup: this.model.get('isKickedFromGroup'), - - onSetDisappearingMessages: seconds => - this.setDisappearingMessages(seconds), - onDeleteMessages: () => this.destroyMessages(), - onDeleteSelectedMessages: () => this.deleteSelectedMessages(), - onCloseOverlay: () => this.model.resetMessageSelection(), - onDeleteContact: () => this.model.deleteContact(), - onResetSession: () => this.endSession(), - - // These are view only and don't update the Conversation model, so they - // need a manual update call. - onShowSafetyNumber: () => { - this.showSafetyNumber(); - }, - onGoBack: () => { - this.resetPanel(); - this.updateHeader(); - }, - - onBlockUser: () => { - this.model.block(); - }, - onUnblockUser: () => { - this.model.unblock(); - }, - onCopyPublicKey: () => { - this.model.copyPublicKey(); - }, - onArchive: () => { - this.unload('archive'); - this.model.setArchived(true); - }, - onLeaveGroup: () => { - window.Whisper.events.trigger('leaveGroup', this.model); - }, - - onInviteContacts: () => { - window.Whisper.events.trigger('inviteContacts', this.model); - }, - - onUpdateGroupName: () => { - window.Whisper.events.trigger('updateGroupName', this.model); - }, - - onAddModerators: () => { - window.Whisper.events.trigger('addModerators', this.model); - }, - - onRemoveModerators: () => { - window.Whisper.events.trigger('removeModerators', this.model); - }, - - onAvatarClick: pubkey => { - if (this.model.isPrivate()) { - window.Whisper.events.trigger('onShowUserDetails', { - userPubKey: pubkey, - }); - } else if (!this.model.isRss()) { - this.showGroupSettings(); - } - }, - }; - }; - const getGroupSettingsProps = () => { - const members = this.model.get('members') || []; - const ourPK = window.textsecure.storage.user.getNumber(); - const isAdmin = this.model.isMediumGroup() - ? true - : this.model.get('groupAdmins').includes(ourPK); - - return { - id: this.model.id, - name: this.model.getName(), - phoneNumber: this.model.getNumber(), - profileName: this.model.getProfileName(), - avatarPath: this.model.getAvatarPath(), - isGroup: !this.model.isPrivate(), - isPublic: this.model.isPublic(), - isAdmin, - isRss: this.model.isRss(), - memberCount: members.length, - amMod: this.model.isModerator( - window.storage.get('primaryDevicePubKey') - ), - isKickedFromGroup: this.model.get('isKickedFromGroup'), - isBlocked: this.model.isBlocked(), - - timerOptions: Whisper.ExpirationTimerOptions.map(item => ({ - name: item.getName(), - value: item.get('seconds'), - })), - - onSetDisappearingMessages: seconds => - this.setDisappearingMessages(seconds), - - onGoBack: () => { - this.hideConversationRight(); - }, - - onUpdateGroupName: () => { - window.Whisper.events.trigger('updateGroupName', this.model); - }, - onUpdateGroupMembers: () => { - window.Whisper.events.trigger('updateGroupMembers', this.model); - }, - - onLeaveGroup: () => { - window.Whisper.events.trigger('leaveGroup', this.model); - }, - - onInviteContacts: () => { - window.Whisper.events.trigger('inviteContacts', this.model); - }, - onShowLightBox: (lightBoxOptions = {}) => { - this.showChannelLightbox(lightBoxOptions); - }, - }; - }; - this.titleView = new Whisper.ReactWrapperView({ - className: 'title-wrapper', - Component: window.Signal.Components.ConversationHeaderWithDetails, - props: getHeaderProps(), - }); - this.updateHeader = () => this.titleView.update(getHeaderProps()); - this.listenTo(this.model, 'change', this.updateHeader); - this.$('.conversation-header').append(this.titleView.el); - this.view = new Whisper.MessageListView({ collection: this.model.messageCollection, window: this.window, @@ -308,39 +143,6 @@ onClicked: this.selectMember.bind(this), }); - this.hideConversationRight = () => { - this.$('.conversation-content-right').css({ - 'margin-inline-end': '-22vw', - }); - }; - this.showConversationRight = () => { - this.$('.conversation-content-right').css({ - 'margin-inline-end': '0vw', - }); - }; - - this.showGroupSettings = () => { - if (!this.groupSettings) { - this.groupSettings = new Whisper.ReactWrapperView({ - className: 'group-settings', - Component: window.Signal.Components.SessionRightPanelWithDetails, - props: getGroupSettingsProps(this.model), - }); - this.$('.conversation-content-right').append(this.groupSettings.el); - this.updateGroupSettingsPanel = () => - this.groupSettings.update(getGroupSettingsProps(this.model)); - this.listenTo(this.model, 'change', this.updateGroupSettingsPanel); - } else { - this.groupSettings.update(getGroupSettingsProps(this.model)); - } - - this.showConversationRight(); - }; - - this.hideGroupSettings = () => { - this.showConversationRight(); - }; - this.memberView.render(); this.$messageField = this.$('.send-message'); @@ -506,7 +308,6 @@ ); this.fileInput.remove(); - this.titleView.remove(); if (this.captureAudioView) { this.captureAudioView.remove(); diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss index f3b232c83..b572ac0e8 100644 --- a/stylesheets/_session_group_panel.scss +++ b/stylesheets/_session_group_panel.scss @@ -1,9 +1,3 @@ -.conversation-content-right { - transition: $session-transition-duration; - width: 22vw; - margin-inline-end: -22vw; -} - .group-settings { display: flex; flex-direction: column; diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index 2b10cb032..803e73ced 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -108,8 +108,8 @@ export class SessionConversation extends React.Component { this.dragCounter = 0; // Group settings panel - this.toggleGroupSettingsPane = this.toggleGroupSettingsPane.bind(this); - this.getGroupSettingsProps = this.getGroupSettingsProps.bind(this); + this.toggleRightPanel = this.toggleRightPanel.bind(this); + this.getRightPanelProps = this.getRightPanelProps.bind(this); // Recording view this.onLoadVoiceNoteView = this.onLoadVoiceNoteView.bind(this); @@ -232,8 +232,7 @@ export class SessionConversation extends React.Component { // TODO VINCE: OPTIMISE FOR NEW SENDING??? const sendMessageFn = conversationModel.sendMessage.bind(conversationModel); - const shouldRenderGroupSettings = - !conversationModel.isPrivate() && !conversationModel.isRss(); + const shouldRenderRightPanel = !conversationModel.isRss(); const showSafetyNumber = this.state.infoViewState === 'safetyNumber'; const showMessageDetails = this.state.infoViewState === 'messageDetails'; @@ -307,14 +306,14 @@ export class SessionConversation extends React.Component { )} - {shouldRenderGroupSettings && ( + {shouldRenderRightPanel && (
- +
)} @@ -485,12 +484,8 @@ export class SessionConversation extends React.Component { }, onAvatarClick: (pubkey: any) => { - if (conversation.isPrivate()) { - window.Whisper.events.trigger('onShowUserDetails', { - userPubKey: pubkey, - }); - } else if (!conversation.isRss()) { - this.toggleGroupSettingsPane(); + if (!conversation.isRss()) { + this.toggleRightPanel(); } }, }; @@ -525,7 +520,7 @@ export class SessionConversation extends React.Component { }; } - public getGroupSettingsProps() { + public getRightPanelProps() { const { conversationKey } = this.props; const conversation = window.ConversationController.getOrThrow( conversationKey @@ -567,7 +562,7 @@ export class SessionConversation extends React.Component { }, onGoBack: () => { - this.toggleGroupSettingsPane(); + this.toggleRightPanel(); }, onUpdateGroupName: () => { @@ -589,7 +584,7 @@ export class SessionConversation extends React.Component { }; } - public toggleGroupSettingsPane() { + public toggleRightPanel() { const { showOptionsPane } = this.state; this.setState({ showOptionsPane: !showOptionsPane }); } diff --git a/ts/components/session/conversation/SessionRightPanel.tsx b/ts/components/session/conversation/SessionRightPanel.tsx index 27fd72364..6b3e4ac1c 100644 --- a/ts/components/session/conversation/SessionRightPanel.tsx +++ b/ts/components/session/conversation/SessionRightPanel.tsx @@ -19,7 +19,9 @@ import { save } from '../../../types/Attachment'; interface Props { id: string; - name: string; + name?: string; + profileName?: string; + phoneNumber: string; memberCount: number; description: string; avatarPath: string; @@ -29,6 +31,7 @@ interface Props { amMod: boolean; isKickedFromGroup: boolean; isBlocked: boolean; + isGroup: boolean; memberAvatars?: Array; // this is added by usingClosedConversationDetails onGoBack: () => void; @@ -237,6 +240,7 @@ class SessionRightPanel extends React.Component { isAdmin, amMod, isBlocked, + isGroup, } = this.props; const { documents, media, onItemClick } = this.state; const showMemberCount = !!(memberCount && memberCount > 0); @@ -316,12 +320,14 @@ class SessionRightPanel extends React.Component { media={media} onItemClick={onItemClick} /> - + {isGroup && ( + + )} ); } @@ -337,12 +343,15 @@ class SessionRightPanel extends React.Component { isPublic, isKickedFromGroup, isBlocked, + name, + profileName, + phoneNumber, } = this.props; const showInviteContacts = (isPublic || isAdmin) && !isKickedFromGroup && !isBlocked; + const userName = name || profileName || phoneNumber; - const userName = id; return (