be able to show right panel for users too (and display convo medias)

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,

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();

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;

ts/components/session/conversation/SessionConversation.tsx

@@ -108,8 +108,8 @@ export class SessionConversation extends React.Component<Props, State> {
     this.dragCounter = 0;
 
     // Group settings panel
-    this.toggleGroupSettingsPane = this.toggleGroupSettingsPane.bind(this);
+    this.toggleRightPanel = this.toggleRightPanel.bind(this);
-    this.getGroupSettingsProps = this.getGroupSettingsProps.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<Props, State> {
     // TODO VINCE: OPTIMISE FOR NEW SENDING???
     const sendMessageFn = conversationModel.sendMessage.bind(conversationModel);
 
-    const shouldRenderGroupSettings =
+    const shouldRenderRightPanel = !conversationModel.isRss();
-      !conversationModel.isPrivate() && !conversationModel.isRss();
 
     const showSafetyNumber = this.state.infoViewState === 'safetyNumber';
     const showMessageDetails = this.state.infoViewState === 'messageDetails';
@@ -307,14 +306,14 @@ export class SessionConversation extends React.Component<Props, State> {
           )}
         </div>
 
-        {shouldRenderGroupSettings && (
+        {shouldRenderRightPanel && (
           <div
             className={classNames(
               'conversation-item__options-pane',
               showOptionsPane && 'show'
             )}
           >
-            <SessionRightPanelWithDetails {...this.getGroupSettingsProps()} />
+            <SessionRightPanelWithDetails {...this.getRightPanelProps()} />
           </div>
         )}
       </SessionTheme>
@@ -485,12 +484,8 @@ export class SessionConversation extends React.Component<Props, State> {
       },
 
       onAvatarClick: (pubkey: any) => {
-        if (conversation.isPrivate()) {
+        if (!conversation.isRss()) {
-          window.Whisper.events.trigger('onShowUserDetails', {
+          this.toggleRightPanel();
-            userPubKey: pubkey,
-          });
-        } else if (!conversation.isRss()) {
-          this.toggleGroupSettingsPane();
         }
       },
     };
@@ -525,7 +520,7 @@ export class SessionConversation extends React.Component<Props, State> {
     };
   }
 
-  public getGroupSettingsProps() {
+  public getRightPanelProps() {
     const { conversationKey } = this.props;
     const conversation = window.ConversationController.getOrThrow(
       conversationKey
@@ -567,7 +562,7 @@ export class SessionConversation extends React.Component<Props, State> {
       },
 
       onGoBack: () => {
-        this.toggleGroupSettingsPane();
+        this.toggleRightPanel();
       },
 
       onUpdateGroupName: () => {
@@ -589,7 +584,7 @@ export class SessionConversation extends React.Component<Props, State> {
     };
   }
 
-  public toggleGroupSettingsPane() {
+  public toggleRightPanel() {
     const { showOptionsPane } = this.state;
     this.setState({ showOptionsPane: !showOptionsPane });
   }

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<ConversationAvatar>; // this is added by usingClosedConversationDetails
 
   onGoBack: () => void;
@@ -237,6 +240,7 @@ class SessionRightPanel extends React.Component<Props, State> {
       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<Props, State> {
           media={media}
           onItemClick={onItemClick}
         />
-        <SessionButton
+        {isGroup && (
-          text={leaveGroupString}
+          <SessionButton
-          buttonColor={SessionButtonColor.Danger}
+            text={leaveGroupString}
-          buttonType={SessionButtonType.SquareOutline}
+            buttonColor={SessionButtonColor.Danger}
-          onClick={onLeaveGroup}
+            buttonType={SessionButtonType.SquareOutline}
-        />
+            onClick={onLeaveGroup}
+          />
+        )}
       </div>
     );
   }
@@ -337,12 +343,15 @@ class SessionRightPanel extends React.Component<Props, State> {
       isPublic,
       isKickedFromGroup,
       isBlocked,
+      name,
+      profileName,
+      phoneNumber,
     } = this.props;
 
     const showInviteContacts =
       (isPublic || isAdmin) && !isKickedFromGroup && !isBlocked;
+    const userName = name || profileName || phoneNumber;
 
-    const userName = id;
     return (
       <div className="group-settings-header">
         <SessionIconButton