ConversationView in React

signalapp · Oct 5, 2021 · 5fdfa1c · 5fdfa1c
1 parent dddb312
commit 5fdfa1c
Show file tree

Hide file tree

Showing 22 changed files with 627 additions and 710 deletions.
diff --git a/background.html b/background.html
@@ -83,18 +83,7 @@ <h3>{{ welcomeToSignal }}</h3>
     </script>
 
     <script type="text/x-tmpl-mustache" id="conversation">
-      <div class='conversation-header'></div>
-      <div class='main panel'>
-        <div class='timeline-placeholder' aria-live='polite'></div>
-        <div class='bottom-bar' id='footer'>
-          <div class='compose'>
-            <form class='send clearfix file-input'>
-              <input type="file" class="file-input" multiple="multiple">
-              <div class='CompositionArea__placeholder'></div>
-            </form>
-          </div>
-        </div>
-      </div>
+      <div class="ConversationView__template"></div>
     </script>
 
     <script type="text/x-tmpl-mustache" id="recorder">

diff --git a/js/modules/signal.js b/js/modules/signal.js
@@ -59,19 +59,12 @@ const {
 const { WhatsNew } = require('../../ts/components/WhatsNew');
 
 // State
-const { createTimeline } = require('../../ts/state/roots/createTimeline');
 const {
   createChatColorPicker,
 } = require('../../ts/state/roots/createChatColorPicker');
-const {
-  createCompositionArea,
-} = require('../../ts/state/roots/createCompositionArea');
 const {
   createConversationDetails,
 } = require('../../ts/state/roots/createConversationDetails');
-const {
-  createConversationHeader,
-} = require('../../ts/state/roots/createConversationHeader');
 const { createApp } = require('../../ts/state/roots/createApp');
 const {
   createForwardMessageModal,
@@ -352,9 +345,7 @@ exports.setup = (options = {}) => {
   const Roots = {
     createApp,
     createChatColorPicker,
-    createCompositionArea,
     createConversationDetails,
-    createConversationHeader,
     createForwardMessageModal,
     createGroupLinkManagement,
     createGroupV1MigrationModal,
@@ -368,7 +359,6 @@ exports.setup = (options = {}) => {
     createShortcutGuideModal,
     createStickerManager,
     createStickerPreviewModal,
-    createTimeline,
   };
 
   const Ducks = {

diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
@@ -6,12 +6,10 @@
 @keyframes panel--in {
   from {
     transform: translateX(500px);
-    opacity: 0;
   }
 
   to {
     transform: translateX(0);
-    opacity: 1;
   }
 }
 
@@ -32,12 +30,12 @@
 
   .panel {
     height: calc(100% - #{$header-height} - var(--title-bar-drag-area-height));
-    overflow-y: scroll;
-    z-index: 1;
-    position: absolute;
     left: 0;
+    overflow-y: overlay;
+    position: absolute;
     top: calc(#{$header-height} + var(--title-bar-drag-area-height));
     width: 100%;
+    z-index: 1;
 
     @include light-theme() {
       background-color: $color-white;
@@ -50,51 +48,16 @@
 
   .panel {
     &:not(.main) {
-      animation: panel--in 250ms ease-out;
+      animation: panel--in 350ms cubic-bezier(0.17, 0.17, 0, 1);
     }
 
     &--static {
       animation: none;
     }
 
     &--remove {
-      transform: translateX(500px);
-      opacity: 0;
-      transition: all 250ms ease-out;
-    }
-
-    .container {
-      padding-top: 20px;
-      max-width: 750px;
-      margin: 0 auto;
-      padding: 20px;
-    }
-  }
-
-  .main.panel {
-    display: flex;
-    flex-direction: column;
-    overflow: initial;
-  }
-
-  .main.panel {
-    .timeline-placeholder {
-      flex-grow: 1;
-      position: relative;
-      max-width: 100%;
-      margin: 0;
-
-      .timeline-wrapper {
-        -webkit-padding-start: 0px;
-        position: absolute;
-        top: 0;
-        height: 100%;
-        width: 100%;
-        margin: 0;
-        padding: 0;
-        overflow-y: auto;
-        overflow-x: hidden;
-      }
+      transform: translateX(100%);
+      transition: transform 350ms cubic-bezier(0.17, 0.17, 0, 1);
     }
   }
 }
@@ -120,95 +83,6 @@
   padding-bottom: 40px;
 }
 
-// We need to use the wrapper because the conversation view calculates the height of all
-//   things in the composition area. A margin on an inner div won't be included in that
-//   height calculation.
-.bottom-bar .quote-wrapper {
-  margin-left: 18px;
-  margin-right: 18px;
-  margin-top: 3px;
-}
-
-.bottom-bar .preview-wrapper {
-  margin-top: 3px;
-  margin-left: 12px;
-  margin-right: 12px;
-  margin-bottom: 2px;
-}
-
-.bottom-bar {
-  box-sizing: content-box;
-  $button-width: 36px;
-
-  form.active {
-    textarea {
-      border: solid 1px $color-ultramarine;
-    }
-  }
-
-  form.send {
-    margin-bottom: 0px;
-    @include light-theme {
-      background: $color-white;
-    }
-    @include dark-theme {
-      background-color: $color-gray-95;
-    }
-  }
-
-  .flex {
-    display: flex;
-    flex-direction: row;
-
-    .send-message {
-      flex-grow: 1;
-    }
-  }
-
-  .choose-file {
-    float: left;
-    height: 36px;
-  }
-  .send-message {
-    display: block;
-    max-height: 100px;
-    padding: 10px;
-    margin-top: 3px;
-    margin-bottom: 6px;
-    border-radius: 20px;
-
-    resize: none;
-    font-size: 1em;
-    font-family: inherit;
-
-    @include light-theme {
-      background-color: $color-gray-02;
-      color: $color-gray-95;
-      border: 1px solid $color-black-alpha-20;
-      outline: 0;
-    }
-
-    @include dark-theme {
-      background-color: $color-gray-90;
-      color: $color-gray-02;
-      border: 1px solid $color-gray-60;
-      outline: 0;
-    }
-
-    &[disabled='disabled'] {
-      background: transparent;
-    }
-  }
-  .capture-audio {
-    float: right;
-    height: 36px;
-  }
-  .android-length-warning {
-    padding: 10px;
-    max-width: 150px;
-  }
-}
-
 .permissions-popup,
 .debug-log-window {
   .modal {

diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
@@ -159,55 +159,6 @@ a {
   color: $color-ultramarine;
 }
 
-.file-input {
-  position: relative;
-  .choose-file {
-    cursor: pointer;
-  }
-
-  .paperclip {
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    opacity: 0.5;
-    border: none;
-    background: transparent;
-
-    &:focus,
-    &:hover {
-      opacity: 1;
-    }
-
-    outline: none;
-
-    &:before {
-      content: '';
-      display: inline-block;
-      width: 24px;
-      height: 24px;
-
-      @include light-theme {
-        @include color-svg('../images/icons/v2/plus-24.svg', $color-gray-75);
-      }
-      @include dark-theme {
-        @include color-svg('../images/icons/v2/plus-24.svg', $color-gray-15);
-      }
-    }
-  }
-
-  input[type='file'] {
-    display: none;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    top: 0;
-    left: 0;
-    cursor: pointer;
-    z-index: 1;
-  }
-}
-
 .group-member-list {
   .container {
     outline: none;

diff --git a/stylesheets/components/CompositionArea.scss b/stylesheets/components/CompositionArea.scss
@@ -183,4 +183,34 @@
       }
     }
   }
+
+  &__attach-file {
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    opacity: 0.5;
+    border: none;
+    background: transparent;
+
+    &:focus,
+    &:hover {
+      opacity: 1;
+    }
+
+    outline: none;
+
+    &:before {
+      content: '';
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+
+      @include light-theme {
+        @include color-svg('../images/icons/v2/plus-24.svg', $color-gray-75);
+      }
+      @include dark-theme {
+        @include color-svg('../images/icons/v2/plus-24.svg', $color-gray-15);
+      }
+    }
+  }
 }
diff --git a/stylesheets/components/ConversationView.scss b/stylesheets/components/ConversationView.scss
@@ -0,0 +1,56 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.ConversationView {
+  display: flex;
+  flex-direction: column;
+  overflow: initial;
+
+  &__pane {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: initial;
+    position: absolute;
+    width: 100%;
+  }
+
+  &__timeline {
+    &--container {
+      flex-grow: 1;
+      margin: 0;
+      max-width: 100%;
+      position: relative;
+    }
+
+    -webkit-padding-start: 0px;
+    height: 100%;
+    margin: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  &__composition-area {
+    margin-bottom: 6px;
+
+    // We need to use the wrapper because the conversation view calculates the height of all
+    //   things in the composition area. A margin on an inner div won't be included in that
+    //   height calculation.
+    .quote-wrapper {
+      margin-left: 18px;
+      margin-right: 18px;
+      margin-top: 3px;
+    }
+
+    .preview-wrapper {
+      margin-top: 3px;
+      margin-left: 12px;
+      margin-right: 12px;
+      margin-bottom: 2px;
+    }
+  }
+}
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
@@ -53,6 +53,7 @@
 @import './components/ContactSpoofingReviewDialog.scss';
 @import './components/ContactSpoofingReviewDialogPerson.scss';
 @import './components/ConversationHeader.scss';
+@import './components/ConversationView.scss';
 @import './components/CustomColorEditor.scss';
 @import './components/CustomizingPreferredReactionsModal.scss';
 @import './components/DisappearingTimeDialog.scss';