Group options pane toggle

stylesheets/_session_conversation.scss

@@ -41,7 +41,6 @@ $composition-container-height: 60px;
 .conversation-item {
   display: flex;
   flex-grow: 1;
-  flex-direction: column;
   height: 100%;
   outline: none;
 
@@ -65,6 +64,27 @@ $composition-container-height: 60px;
       }
     }
   }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    outline: none;
+  }
+
+  &__options-pane {
+    position: absolute;
+    height: 100%;
+    right: 0vw;
+
+    transition: transform $session-transition-duration ease-in-out;
+    transform: translateX(100%);
+    will-change: transform;
+
+    &.show {
+      transform: none;
+      transition: transform $session-transition-duration ease-in-out;
+    }
+  }
 }
 
 .conversation-header {
@@ -179,7 +199,7 @@ $composition-container-height: 60px;
     display: flex;
     flex-grow: 1;
     min-height: $composition-container-height;
-    padding: $composition-container-height / 3 0px;
+    padding: 16px 0px;
 
     textarea {
       font-family: 'SF Pro Text';

stylesheets/_session_group_panel.scss

@@ -75,7 +75,7 @@
     margin-top: auto;
     width: 100%;
     border: none;
-    height: 3.5rem;
+    height: 60px;
     background-color: black;
     flex-shrink: 0;
     align-items: center;

ts/components/session/conversation/SessionConversation.tsx

@@ -11,8 +11,8 @@ import { TimerNotification } from '../../conversation/TimerNotification';
 
 import { getTimestamp } from './SessionConversationManager';
 
-
 import { SessionScrollButton } from '../SessionScrollButton';
+import { SessionGroupSettings } from './SessionGroupSettings';
 
 interface State {
   conversationKey: string;
@@ -26,6 +26,7 @@ interface State {
   displayScrollToBottomButton: boolean;
   messageFetchTimestamp: number;
   showRecordingView: boolean;
+  showOptionsPane: boolean;
 }
 
 export class SessionConversation extends React.Component<any, State> {
@@ -53,6 +54,7 @@ export class SessionConversation extends React.Component<any, State> {
       displayScrollToBottomButton: false,
       messageFetchTimestamp: 0,
       showRecordingView: false,
+      showOptionsPane: true,
     };
 
     this.handleScroll = this.handleScroll.bind(this);
@@ -63,6 +65,9 @@ export class SessionConversation extends React.Component<any, State> {
     this.renderTimerNotification = this.renderTimerNotification.bind(this);
     this.renderFriendRequest = this.renderFriendRequest.bind(this);
 
+    // Group options panels
+    this.toggleOptionsPane = this.toggleOptionsPane.bind(this);
+
     // Recording View render and unrender
     this.onLoadVoiceNoteView = this.onLoadVoiceNoteView.bind(this);
     this.onExitVoiceNoteView = this.onExitVoiceNoteView.bind(this);
@@ -88,7 +93,9 @@ export class SessionConversation extends React.Component<any, State> {
       }, 100);
     });
 
-    console.log(`[unread] Loaded conversation:`, this.props.conversations.conversationLookup[this.state.conversationKey]);
+    
+    //FIXME VINCE
+    // Only now should you renderGroupOptionsPane
   }
 
   public componentDidUpdate(){
@@ -113,7 +120,7 @@ export class SessionConversation extends React.Component<any, State> {
   public render() {
     console.log(`[vince][info] Props`, this.props);
 
-    const { messages, conversationKey, doneInitialScroll, showRecordingView } = this.state;
+    const { messages, conversationKey, doneInitialScroll, showRecordingView, showOptionsPane } = this.state;
     const loading = !doneInitialScroll || messages.length === 0;
     const selectionMode = !!this.state.selectedMessages.length;
 
@@ -124,50 +131,83 @@ export class SessionConversation extends React.Component<any, State> {
     const sendMessageFn = conversationModel.sendMessage.bind(conversationModel);
 
     return (
-      <div
+      <>
-        className={classNames('conversation-item', selectionMode && 'selection-mode')}
+        <div
-        tabIndex={0}
+          className={classNames('conversation-item__content', selectionMode && 'selection-mode')}
-        onKeyDown={this.onKeyDown}
+          tabIndex={0}
-      >
+          onKeyDown={this.onKeyDown}
-        <div className="conversation-header">
+        >
-          {this.renderHeader()}
+          <div className="conversation-header">
-        </div>
+            {this.renderHeader()}
-
+          </div>
-        <SessionProgress
-          visible={true}
-          value={this.state.sendingProgess}
-          prevValue={this.state.prevSendingProgess}
-        />
 
-        <div className="messages-wrapper">
+          <SessionProgress
-          { loading && (
+            visible={true}
-            <div className="messages-container__loading"></div>
+            value={this.state.sendingProgess}
-          )}
+            prevValue={this.state.prevSendingProgess}
+          />
 
-          <div
+          <div className="messages-wrapper">
-            className="messages-container"
+            { loading && (
-            onScroll={this.handleScroll}
+              <div className="messages-container__loading"></div>
-            ref={this.messageContainerRef}
+            )}
-          >
+
-            {this.renderMessages()}
+            <div
-            <div ref={this.messagesEndRef} />
+              className="messages-container"
+              onScroll={this.handleScroll}
+              ref={this.messageContainerRef}
+            >
+              {this.renderMessages()}
+              <div ref={this.messagesEndRef} />
+            </div>
+
+            <SessionScrollButton display={true} onClick={this.scrollToBottom}/>
+            { showRecordingView && (
+              <div className="messages-wrapper--blocking-overlay"></div>
+            )}
           </div>
-
+          
-          <SessionScrollButton display={true} onClick={this.scrollToBottom}/>
+          { !isRss && (
-          { showRecordingView && (
+            <SessionCompositionBox
-            <div className="messages-wrapper--blocking-overlay"></div>
+              sendMessage={sendMessageFn}
+              onLoadVoiceNoteView={this.onLoadVoiceNoteView}
+              onExitVoiceNoteView={this.onExitVoiceNoteView}
+            />
           )}
+          
         </div>
-        
+
-        { !isRss && (
+        <div className={classNames('conversation-item__options-pane', showOptionsPane && 'show')}>
-          <SessionCompositionBox
+          {/* Don't render this to the DOM unless it needs to be rendered */}
-            sendMessage={sendMessageFn}
+          {/* { showOptionsPane && ( */}
-            onLoadVoiceNoteView={this.onLoadVoiceNoteView}
+            <SessionGroupSettings
-            onExitVoiceNoteView={this.onExitVoiceNoteView}
+              id={conversationKey}
-          />
+              name={"asdfasd"}
-        )}
+              memberCount={345}
-        
+              description={"Super cool open group"}
-      </div>
+              avatarPath={conversation.avatarPath}
+              timerOptions={
+                window.Whisper.ExpirationTimerOptions.map((item: any) => ({
+                  name: item.getName(),
+                  value: item.get('seconds'),
+                }))
+              }
+              isPublic={conversation.isPublic}
+              isAdmin={conversation.isAdmin}
+              amMod={conversation.amMod}
+              onGoBack={this.toggleOptionsPane}
+              onInviteFriends={() => null}
+              onLeaveGroup={() => null}
+              onUpdateGroupName={() => null}
+              onUpdateGroupMembers={() => null}
+              onShowLightBox={(options: any) => null}
+              onSetDisappearingMessages={(seconds: number) => null}
+            />
+          {/* )} */}
+          
+        </div>
+
+      </>
     );
   }
 
@@ -251,6 +291,8 @@ export class SessionConversation extends React.Component<any, State> {
         onAddModerators={headerProps.onAddModerators}
         onRemoveModerators={headerProps.onRemoveModerators}
         onInviteFriends={headerProps.onInviteFriends}
+
+        onAvatarClick={headerProps.onAvatarClick}
       />
     );
   }
@@ -492,6 +534,10 @@ export class SessionConversation extends React.Component<any, State> {
     return null;
   }
 
+  public toggleOptionsPane() {
+    const { showOptionsPane } = this.state;
+    this.setState({ showOptionsPane: !showOptionsPane });
+  }
 
   public async handleScroll() {
     const messageContainer = this.messageContainerRef.current;
@@ -661,7 +707,7 @@ export class SessionConversation extends React.Component<any, State> {
             userPubKey: pubkey,
           });
         } else if (!conversation.isRss()) {
-          conversation.showGroupSettings();
+          this.toggleOptionsPane();
         }
       },
     };

ts/components/session/conversation/SessionGroupSettings.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
+import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
-import { Avatar } from '../Avatar';
+import { Avatar } from '../../Avatar';
 import {
   SessionButton,
   SessionButtonColor,
   SessionButtonType,
-} from './SessionButton';
+} from '../SessionButton';
-import { SessionDropdown } from './SessionDropdown';
+import { SessionDropdown } from '../SessionDropdown';
-import { MediaGallery } from '../conversation/media-gallery/MediaGallery';
+import { MediaGallery } from '../../conversation/media-gallery/MediaGallery';
 import _ from 'lodash';
-import { TimerOption } from '../conversation/ConversationHeader';
+import { TimerOption } from '../../conversation/ConversationHeader';
 
 interface Props {
   id: string;
@@ -312,7 +312,7 @@ export class SessionGroupSettings extends React.Component<Props, any> {
         <SessionIconButton
           iconType={SessionIconType.Chevron}
           iconSize={SessionIconSize.Medium}
-          iconRotation={90}
+          iconRotation={270}
           onClick={onGoBack}
         />
         <Avatar