include the channel settings panel on right of conversation

background.html

@@ -90,35 +90,42 @@
   </script>
 
   <script type='text/x-tmpl-mustache' id='conversation'>
-    <div class='conversation-header'></div>
-    <div class='main panel'>
-      <div class='discussion-container'>
-          <div class='bar-container hide'>
-            <div class='bar active progress-bar-striped progress-bar'></div>
+    <div class='conversation-content'>
+      <div class='conversation-content-left'>
+        <div class='conversation-header'></div>
+        <div class='main panel'>
+          <div class='discussion-container'>
+              <div class='bar-container hide'>
+                <div class='bar active progress-bar-striped progress-bar'></div>
+              </div>
           </div>
-      </div>
 
-      <div class='bottom-bar' id='footer'>
-          <div class='emoji-panel-container'></div>
-          <div class='member-list-container'></div>
-          <div id='bulk-edit-view'></div>
-          <div class='attachment-list'></div>
-          <div class='compose'>
-            <form class='send clearfix file-input'>
-              <div class='flex'>
-                <button class='emoji' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
-                <textarea maxlength='2000' class='send-message' placeholder='{{ send-message }}' rows='1' dir='auto' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></textarea>
-                <div class='capture-audio'>
-                    <button class='microphone' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
-                </div>
-                <div id='choose-file' class='choose-file'>
-                    <button class='paperclip thumbnail' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
-                    <input type='file' class='file-input' multiple='multiple'>
-                </div>
+          <div class='bottom-bar' id='footer'>
+              <div class='emoji-panel-container'></div>
+              <div class='member-list-container'></div>
+              <div id='bulk-edit-view'></div>
+              <div class='attachment-list'></div>
+              <div class='compose'>
+                <form class='send clearfix file-input'>
+                  <div class='flex'>
+                    <button class='emoji' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
+                    <textarea maxlength='2000' class='send-message' placeholder='{{ send-message }}' rows='1' dir='auto' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></textarea>
+                    <div class='capture-audio'>
+                        <button class='microphone' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
+                    </div>
+                    <div id='choose-file' class='choose-file'>
+                        <button class='paperclip thumbnail' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
+                        <input type='file' class='file-input' multiple='multiple'>
+                    </div>
+                  </div>
+                </form>
               </div>
-            </form>
           </div>
+        </div>
       </div>
+      <div class='conversation-content-right'>
+      </div>
+
     </div>
   </script>
 

js/modules/signal.js

@@ -33,6 +33,9 @@ const { ContactName } = require('../../ts/components/conversation/ContactName');
 const {
   ConversationHeader,
 } = require('../../ts/components/conversation/ConversationHeader');
+const {
+  SessionChannelSettings,
+} = require('../../ts/components/session/SessionChannelSettings');
 const {
   EmbeddedContact,
 } = require('../../ts/components/conversation/EmbeddedContact');
@@ -256,6 +259,7 @@ exports.setup = (options = {}) => {
     ContactListItem,
     ContactName,
     ConversationHeader,
+    SessionChannelSettings,
     EmbeddedContact,
     Emojify,
     FriendRequest,

js/views/conversation_view.js

@@ -264,10 +264,57 @@
               window.Whisper.events.trigger('onShowUserDetails', {
                 userPubKey: pubkey,
               });
+            } else {
+              this.showGroupSettings();
             }
           },
         };
       };
+      const getGroupSettingsProp = () => {
+        /* 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(),
+          color: this.model.getColor(),
+          avatarPath: this.model.getAvatarPath(),
+          isGroup: !this.model.isPrivate(),
+          isPublic: this.model.isPublic(),
+          isRss: this.model.isRss(),
+          memberCount: members.length,
+          /* timerOptions: Whisper.ExpirationTimerOptions.map(item => ({
+            name: item.getName(),
+            value: item.get('seconds'),
+          })),
+
+          onSetDisappearingMessages: seconds =>
+            this.setDisappearingMessages(seconds),
+
+           */
+          onGoBack: () => {
+            this.$('.conversation-content-right').hide();
+          },
+
+          onUpdateGroup: () => {
+            window.Whisper.events.trigger('updateGroup', this.model);
+          },
+
+          onLeaveGroup: () => {
+            window.Whisper.events.trigger('leaveGroup', this.model);
+          },
+
+          onInviteFriends: () => {
+            window.Whisper.events.trigger('inviteFriends', this.model);
+          },
+        };
+      };
       this.titleView = new Whisper.ReactWrapperView({
         className: 'title-wrapper',
         Component: window.Signal.Components.ConversationHeader,
@@ -289,6 +336,22 @@
         onClicked: this.selectMember.bind(this),
       });
 
+      this.showGroupSettings = () => {
+        if(!this.groupSettings) {
+          this.groupSettings = new Whisper.ReactWrapperView({
+            className: 'group-settings',
+            Component: window.Signal.Components.SessionChannelSettings,
+            props: getGroupSettingsProp(this.model),
+          });
+          this.$('.conversation-content-right').append(this.groupSettings.el);
+        }
+        this.$('.conversation-content-right').show();
+      }
+
+      this.hideGroupSettings = () => {
+        this.$('.conversation-content-right').hide();
+      }
+
       this.memberView.render();
 
       this.bulkEditView = new Whisper.BulkEditView({

stylesheets/_session_group_panel.scss

@@ -123,3 +123,13 @@
         }
     }
 }
+
+
+.conversation-content {
+    display: flex;
+    height: inherit;
+
+    &-left {
+        flex-grow: 1;
+    }
+}

ts/components/session/SessionChannelSettings.tsx

@@ -7,13 +7,14 @@ import _ from 'lodash';
 
 
 interface Props {
-    channelPubKey: string;
-    channelName: string;
+    id: string;
+    name: string;
     memberCount: number;
     description: string;
+    avatarPath: string;
 
-    onHidePanel: () => void;
-    onAddPeopleToGroup: () => void;
+    onGoBack: () => void;
+    onInviteFriends: () => void;
     onLeaveGroup: () => void;
 }
 
@@ -44,7 +45,7 @@ export class SessionChannelSettings extends React.Component<Props, any> {
         // into memory right away. Revisit this once we have infinite scrolling:
         const DEFAULT_MEDIA_FETCH_COUNT = 50;
         const DEFAULT_DOCUMENTS_FETCH_COUNT = 150;
-        const conversationId = this.props.channelPubKey;
+        const conversationId = this.props.id;
         const rawMedia = await window.Signal.Data.getMessagesWithVisualMediaAttachments(
             conversationId,
             {
@@ -170,34 +171,32 @@ export class SessionChannelSettings extends React.Component<Props, any> {
 
 
     public render() {
-        const { memberCount, channelName } = this.props;
-        const { documents, media, onItemClick} = this.state;
+        const { memberCount, name, onLeaveGroup } = this.props;
+        const { documents, media, onItemClick } = this.state;
 
         return (
         <div className="group-settings">
             {this.renderHeader()}
-            <h2>{channelName}</h2>
-            <div className="text-subtle">{window.i18n('members', memberCount)}</div>
+            <h2>{name}</h2>
+            {memberCount && <div className="text-subtle">{window.i18n('members', memberCount)}</div>}
             <input className="description" placeholder={window.i18n('description')} />
 
             <div className="group-settings-item" >{window.i18n('notifications')}</div>
             <div className="group-settings-item" >{window.i18n('disappearingMessages')}</div>
             <MediaGallery documents={documents} media={media} onItemClick={onItemClick} />
-
-
-            <SessionButton text={window.i18n('leaveGroup')} buttonColor={SessionButtonColor.Danger} buttonType={SessionButtonType.SquareOutline} />
+            <SessionButton text={window.i18n('leaveGroup')} buttonColor={SessionButtonColor.Danger} buttonType={SessionButtonType.SquareOutline} onClick={onLeaveGroup}/>
         </div>);
     }
 
 
     private renderHeader() {
-        const { channelPubKey } = this.props;
+        const { id, onGoBack, onInviteFriends, avatarPath } = this.props;
 
         return (
             <div className="group-settings-header">
-                <SessionIconButton iconType={SessionIconType.Chevron} iconSize={SessionIconSize.Medium} iconRotation={90} />
-                <Avatar phoneNumber={channelPubKey} conversationType="group" size={80} />
-                <SessionIconButton iconType={SessionIconType.AddUser} iconSize={SessionIconSize.Medium} />
+                <SessionIconButton iconType={SessionIconType.Chevron} iconSize={SessionIconSize.Medium} iconRotation={90} onClick={onGoBack} />
+                <Avatar avatarPath={avatarPath} phoneNumber={id} conversationType="group" size={80} />
+                <SessionIconButton iconType={SessionIconType.AddUser} iconSize={SessionIconSize.Medium} onClick={onInviteFriends} />
             </div>
         );
     }