reactification conversationview bottombar initial

js/background.js

@@ -985,17 +985,16 @@
         window.toasts.get(finalToastID).fadeToast();
       }
 
+      return toastID;
+    };
+
+    window.renderConversationView = () => {
       const sessionConversation = new Whisper.SessionConversationView({
-        el: $('body'),
+        el: $('#main-view'),
       });
       sessionConversation.render();
-
-
-      return toastID;
     };
 
-
-
     window.getFriendsFromContacts = contacts => {
       // To call from TypeScript, input / output are both
       // of type Array<ConversationType>

js/views/session_conversation_view.js

@@ -1,4 +1,4 @@
-/* global Whisper $ */
+/* global Whisper */
 
 // eslint-disable-next-line func-names
 (function() {
@@ -9,13 +9,12 @@
     Whisper.SessionConversationView = Whisper.View.extend({
       initialize(options) {
         this.props = {
-            el: $('body'),
             ...options,
         };
       },
   
       render() {
-        this.conversationView = new Whisper.SessionConversationView({
+        this.conversationView = new Whisper.ReactWrapperView({
           className: 'session-conversation-wrapper',
           Component: window.Signal.Components.SessionConversation,
           props: this.props,
@@ -25,4 +24,5 @@
       },
     });
   })();
+  
   

package.json

@@ -111,6 +111,7 @@
     "proxy-agent": "3.0.3",
     "rc-slider": "^8.7.1",
     "react": "16.8.3",
+    "react-autosize-textarea": "^7.0.0",
     "react-contextmenu": "2.11.0",
     "react-dom": "16.8.3",
     "react-portal": "^4.2.0",

stylesheets/_session.scss

@@ -241,6 +241,7 @@ $session_message-container-border-radius: 5px;
   height: 100vh;
   display: flex;
   flex-grow: 1;
+  position: relative;
 
   .conversation-stack {
     display: block;
@@ -1360,41 +1361,6 @@ label {
   }
 }
 
-.bottom-bar {
-  .compose {
-    max-height: 200px;
-  }
-
-  .send-message-container {
-    display: flex;
-    flex-grow: 1;
-    height: 48px;
-    margin-bottom: -5px;
-  }
-
-  textarea.send-message {
-    background-color: $session-shade-4;
-    border: none;
-    margin: 0px;
-    padding: 0px $session-margin-lg;
-    font-size: $session-font-md;
-    line-height: 1.3em;
-    align-self: center;
-
-    @include session-color-subtle($session-color-white);
-  }
-}
-
-.bottom-bar form {
-  &.send {
-    background-color: $session-shade-4;
-  }
-
-  &.active textarea {
-    border: none;
-  }
-}
-
 .dark-theme .bottom-bar .send-message[disabled='disabled'] {
   background: $session-shade-4 !important;
 }

stylesheets/_session_conversation.scss

@@ -0,0 +1,69 @@
+$composition-container-height: 60px;
+
+.conversation-item {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    height: 100%;
+}
+
+.session-conversation-wrapper {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: $session-shade-2;
+}
+
+.messages-container{
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+}
+
+.composition-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: $session-shade-4;
+    padding: 0px $session-margin-md;
+    min-height: $composition-container-height;
+    
+    & > .session-icon-button {
+        margin-right: $session-margin-sm;
+    }
+    .session-icon-button {
+        opacity: 0.8;
+            
+        .send {
+            background-color: $session-shade-14;
+            padding: $session-margin-xs;
+            border-radius: 50%;
+            height: 30px;
+            width: 30px;
+        }
+    }
+    
+    .send-message-input {
+      display: flex;
+      flex-grow: 1;
+      min-height: $composition-container-height
+        
+      textarea {
+        min-height: $composition-container-height / 3;
+        max-height: 3 * $composition-container-height;
+        margin-right: $session-margin-md;
+        color: $session-color-white;
+        resize: none;
+        display: flex;
+        flex-grow: 1;
+        background: transparent;
+        outline: none;
+        border: none;
+        font-size: $session-font-md;
+        line-height: $session-font-h2;
+        padding: $composition-container-height / 3 0px;
+        
+      }
+    }
+}
+

stylesheets/manifest.scss

@@ -30,7 +30,8 @@
 @import 'session_left_pane';
 @import 'session_group_panel';
 
-@import 'session-slider';
+@import 'session_slider';
+@import 'session_conversation';
 
 // Installer
 @import 'options';

ts/components/session/LeftPaneMessageSection.tsx

@@ -124,7 +124,7 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
         key={key}
         style={style}
         {...conversation}
-        onClick={openConversationInternal}
+        onClick={window.renderConversationView}
         i18n={window.i18n}
       />
     );

ts/components/session/SessionConversation.tsx

@@ -1,6 +1,14 @@
 import React from 'react';
 
-interface Props{};
+import TextareaAutosize from 'react-autosize-textarea';
+
+import { ConversationHeader } from '../conversation/ConversationHeader';
+import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
+
+interface Props{
+    getHeaderProps: any;
+    
+};
 
 interface State{};
 
@@ -12,10 +20,101 @@ export class SessionConversation extends React.Component<Props, State> {
     }
 
     render() {
+        // const headerProps = this.props.getHeaderProps;
+
+        // TMEPORARY SOLUTION TO GETTING CONVERSATION UNTIL
+        // SessionConversationStack is created
+        const conversation = window.getConversations().models[0];
+
         return (
-            <div className="sesgbal">
+            <div className={`conversation-item conversation-${conversation.cid}`}>
-                THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW 
+
+                <div className="conversation-header">
+                    {this.renderHeader(conversation)}
+                </div>
+
+                <div className="messages-container">
+                    THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW 
+                </div>
+
+                <div className="composition-container">
+                    <SessionIconButton
+                        iconType={SessionIconType.CirclePlus}
+                        iconSize={SessionIconSize.Large}
+                    />
+                    <SessionIconButton
+                        iconType={SessionIconType.Microphone}
+                        iconSize={SessionIconSize.Large}
+                    />
+
+                    <div className="send-message-input">
+                        <TextareaAutosize
+                            rows={1}
+                            maxRows={6}
+                        />
+                    </div>
+
+                    <SessionIconButton
+                        iconType={SessionIconType.Emoji}
+                        iconSize={SessionIconSize.Large}
+                    />
+                    <div className="send-message-button">
+                        <SessionIconButton
+                            iconType={SessionIconType.Send}
+                            iconSize={SessionIconSize.Large}
+                            iconColor={'#FFFFFF'}
+                            iconRotation={90}
+                        />
+                    </div>
+                </div>
             </div>
         )
     }
+
+    renderHeader(conversation: any) {
+        return (
+          <ConversationHeader
+            id={conversation.cid}
+            phoneNumber={conversation.id}
+            isVerified={true}
+            isMe={false}
+            isFriend={true}
+            i18n={window.i18n}
+            isGroup={false}
+            isArchived={false}
+            isPublic={false}
+            isRss={false}
+            amMod={false}
+            members={[]}
+            showBackButton={false}
+            timerOptions={[]}
+            isBlocked={false}
+            hasNickname={false}
+            isFriendRequestPending={false}
+            isOnline={true}
+            selectedMessages={null}
+            onSetDisappearingMessages={() => null}
+            onDeleteMessages={() => null}
+            onDeleteContact={() => null}
+            onResetSession={() => null}
+            onCloseOverlay={() => null}
+            onDeleteSelectedMessages={() => null}
+            onArchive={() => null}
+            onMoveToInbox={() => null}
+            onShowSafetyNumber={() => null}
+            onShowAllMedia={() => null}
+            onShowGroupMembers={() => null}
+            onGoBack={() => null}
+            onBlockUser={() => null}
+            onUnblockUser={() => null}
+            onClearNickname={() => null}
+            onChangeNickname={() => null}
+            onCopyPublicKey={() => null}
+            onLeaveGroup={() => null}
+            onAddModerators={() => null}
+            onRemoveModerators={() => null}
+            onInviteFriends={() => null}
+          />
+        );
+    }
 }

ts/global.d.ts

@@ -2,6 +2,11 @@ interface Window {
   CONSTANTS: any;
   versionInfo: any;
 
+
+  renderConversationView: any;
+
+
+
   Events: any;
   Lodash: any;
   deleteAllData: any;

yarn.lock

@@ -976,6 +976,11 @@ autoprefixer@^6.3.1:
     postcss "^5.2.16"
     postcss-value-parser "^3.2.3"
 
+autosize@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/autosize/-/autosize-4.0.2.tgz#073cfd07c8bf45da4b9fd153437f5bafbba1e4c9"
+  integrity sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA==
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -2135,6 +2140,11 @@ compression@^1.7.3:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
+computed-style@~0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/computed-style/-/computed-style-0.1.4.tgz#7f344fd8584b2e425bedca4a1afc0e300bb05d74"
+  integrity sha1-fzRP2FhLLkJb7cpKGvwOMAuwXXQ=
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -5954,6 +5964,13 @@ lie@*:
   dependencies:
     immediate "~3.0.5"
 
+line-height@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/line-height/-/line-height-0.3.1.tgz#4b1205edde182872a5efa3c8f620b3187a9c54c9"
+  integrity sha1-SxIF7d4YKHKl76PI9iCzGHqcVMk=
+  dependencies:
+    computed-style "~0.1.3"
+
 linkify-it@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.0.3.tgz#d94a4648f9b1c179d64fa97291268bdb6ce9434f"
@@ -7997,7 +8014,7 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8350,6 +8367,15 @@ rc@^1.2.1, rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-autosize-textarea@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/react-autosize-textarea/-/react-autosize-textarea-7.0.0.tgz#4f633e4238de7ba73c1da8fdc307353c50f1c5ab"
+  integrity sha512-rGQLpGUaELvzy3NKzp0kkcppaUtZTptsyR0PGuLotaJDjwRbT0DpD000yCzETpXseJQ/eMsyVGDDHXjXP93u8w==
+  dependencies:
+    autosize "^4.0.2"
+    line-height "^0.3.1"
+    prop-types "^15.5.6"
+
 react-codemirror2@^4.2.1:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-4.3.0.tgz#e79aedca4da60d22402d2cd74f2885a3e5c009fd"