Large Message Composition

signalapp · Aug 21, 2019 · 79bba52 · 79bba52
1 parent 4d659f6
commit 79bba52
Show file tree

Hide file tree

Showing 14 changed files with 388 additions and 115 deletions.
diff --git a/background.html b/background.html
@@ -107,27 +107,18 @@ <h3>{{ welcomeToSignal }}</h3>
     <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 class='bar-container hide'>
+          <div class='bar active progress-bar-striped progress-bar'></div>
+        </div>
       </div>
 
       <div class='bottom-bar' id='footer'>
-          <div class='attachment-list'></div>
-          <div class='compose'>
-            <form class='send clearfix file-input'>
-              <div class='flex'>
-                <div class='composition-area-placeholder'></div>
-                <div class='capture-audio'>
-                    <button class='microphone'></button>
-                </div>
-                <div class='choose-file'>
-                    <button class='paperclip thumbnail'></button>
-                    <input type='file' class='file-input' multiple='multiple'>
-                </div>
-              </div>
-            </form>
-          </div>
+        <div class='compose'>
+          <form class='send clearfix file-input'>
+            <input type="file" class="file-input" multiple="multiple">
+            <div class='composition-area-placeholder'></div>
+          </form>
+        </div>
       </div>
     </div>
   </script>

diff --git a/images/collapse-down.svg b/images/collapse-down.svg
diff --git a/images/expand-up.svg b/images/expand-up.svg
diff --git a/images/send.svg b/images/send.svg
diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
@@ -181,8 +181,11 @@
       this.loadingScreen.$el.prependTo(this.$('.discussion-container'));
 
       this.window = options.window;
+      const attachmentListEl = $(
+        '<div class="module-composition-area__attachment-list"></div>'
+      );
       this.fileInput = new Whisper.FileInputView({
-        el: this.$('.attachment-list'),
+        el: attachmentListEl,
       });
       this.listenTo(
         this.fileInput,
@@ -221,7 +224,7 @@
       this.$('.send-message').blur(this.unfocusBottomBar.bind(this));
 
       this.setupHeader();
-      this.setupCompositionArea();
+      this.setupCompositionArea({ attachmentListEl: attachmentListEl[0] });
     },
 
     events: {
@@ -316,20 +319,33 @@
       this.$('.conversation-header').append(this.titleView.el);
     },
 
-    setupCompositionArea() {
+    setupCompositionArea({ attachmentListEl }) {
       const compositionApi = { current: null };
       this.compositionApi = compositionApi;
 
+      const micCellEl = $(`
+        <div class="capture-audio">
+          <button class="microphone"></button>
+        </div>
+      `)[0];
+      const attCellEl = $(`
+        <div class="choose-file">
+          <button class="paperclip thumbnail"></button>
+        </div>
+      `)[0];
+
       const props = {
         compositionApi,
         onClickAddPack: () => this.showStickerManager(),
         onPickSticker: (packId, stickerId) =>
           this.sendStickerMessage({ packId, stickerId }),
         onSubmit: message => this.sendMessage(message),
-        onDirtyChange: dirty => this.toggleMicrophone(dirty),
         onEditorStateChange: (msg, caretLocation) =>
           this.onEditorStateChange(msg, caretLocation),
         onEditorSizeChange: rect => this.onEditorSizeChange(rect),
+        micCellEl,
+        attCellEl,
+        attachmentListEl,
       };
 
       this.compositionAreaView = new Whisper.ReactWrapperView({
@@ -585,13 +601,10 @@
       }
     },
 
-    toggleMicrophone(dirty = false) {
-      if (dirty || this.fileInput.hasFiles()) {
-        this.$('.capture-audio').hide();
-      } else {
-        this.$('.capture-audio').show();
-      }
+    toggleMicrophone() {
+      this.compositionApi.current.setShowMic(!this.fileInput.hasFiles());
     },
+
     captureAudio(e) {
       e.preventDefault();
 
@@ -617,6 +630,7 @@
       view.on('send', this.handleAudioCapture.bind(this));
       view.on('closed', this.endCaptureAudio.bind(this));
       view.$el.appendTo(this.$('.capture-audio'));
+      this.compositionApi.current.setMicActive(true);
 
       this.disableMessageField();
       this.$('.microphone').hide();
@@ -633,6 +647,7 @@
       this.enableMessageField();
       this.$('.microphone').show();
       this.captureAudioView = null;
+      this.compositionApi.current.setMicActive(false);
     },
 
     unfocusBottomBar() {
@@ -1808,7 +1823,8 @@
       this.quoteView = new Whisper.ReactWrapperView({
         className: 'quote-wrapper',
         Component: window.Signal.Components.Quote,
-        elCallback: el => this.$('.send').prepend(el),
+        elCallback: el =>
+          this.$(this.compositionApi.current.attSlotRef.current).prepend(el),
         props: Object.assign({}, props, {
           withContentAbove: true,
           onClose: () => {
@@ -2262,7 +2278,8 @@
       this.previewView = new Whisper.ReactWrapperView({
         className: 'preview-wrapper',
         Component: window.Signal.Components.StagedLinkPreview,
-        elCallback: el => this.$('.send').prepend(el),
+        elCallback: el =>
+          this.$(this.compositionApi.current.attSlotRef.current).prepend(el),
         props,
         onInitialRender: () => {
           this.view.restoreBottomOffset();

diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
@@ -229,16 +229,15 @@
 //   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: 37px;
-  margin-right: 73px;
+  margin-left: 18px;
+  margin-right: 18px;
   margin-top: 3px;
-  margin-bottom: -5px;
 }
 
 .bottom-bar .preview-wrapper {
   margin-top: 3px;
-  margin-left: 37px;
-  margin-right: 73px;
+  margin-left: 12px;
+  margin-right: 12px;
   margin-bottom: 2px;
 }
 

diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
@@ -111,16 +111,14 @@ a {
     opacity: 0.5;
     border: none;
     background: transparent;
-    margin-top: 2px;
 
     &:before {
-      margin-top: 4px;
       content: '';
       display: inline-block;
       width: $button-height;
       height: $button-height;
       @include color-svg('../images/paperclip.svg', $grey);
-      transform: rotateZ(-45deg);
+      transform: rotateZ(-45deg) translateY(-2px);
     }
 
     &:focus,

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
@@ -829,10 +829,12 @@
 // Module: Quoted Reply
 
 .module-quote-container {
-  margin-left: -6px;
-  margin-right: -6px;
-  margin-top: -4px;
-  margin-bottom: 5px;
+  margin: {
+    left: -6px;
+    right: -6px;
+    top: -4px;
+    bottom: 5px;
+  }
 }
 
 .module-quote-container--with-content-above {
@@ -2630,10 +2632,6 @@
 
 // Module: Attachments
 
-.module-attachments {
-  border-top: 1px solid $color-black-015;
-}
-
 .module-attachments__header {
   height: 24px;
   position: relative;
@@ -2654,8 +2652,8 @@
 
 .module-attachments__rail {
   margin-top: 12px;
-  margin-left: 16px;
-  padding-right: 16px;
+  margin-left: 12px;
+  padding-right: 12px;
   overflow-x: scroll;
   max-height: 142px;
   white-space: nowrap;
@@ -4712,6 +4710,13 @@
       min-height: 32px;
       max-height: 80px;
       overflow: auto;
+      &--large {
+        max-height: 227px;
+        height: 227px;
+        .DraftEditor-root {
+          height: 227px - 2 * 7px; // subtract padding
+        }
+      }
     }
 
     @include light-theme() {
@@ -4808,25 +4813,96 @@
 
 // Module: CompositionArea
 .module-composition-area {
-  // Layout
-  display: flex;
-  flex-direction: row;
+  &__row {
+    display: flex;
+    flex-direction: row;
+    &--center {
+      justify-content: center;
+    }
+    &--padded {
+      padding: 0 12px;
+    }
+    &--control-row {
+      margin-top: 8px;
+    }
+    &--column {
+      flex-direction: column;
+    }
+    &--show-on-focus {
+      opacity: 0;
+      transition: opacity 250ms ease-out;
+    }
+  }
+
+  $this: &;
+  &:focus-within,
+  &:hover {
+    #{$this}__row--show-on-focus {
+      opacity: 1;
+    }
+  }
 
-  // Child Elements
   &__button-cell {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 44px;
     height: 100%;
     flex-shrink: 0;
-    &--microphone-active {
-      width: 100px;
+    &--mic-active {
+      width: 141px;
+      margin-right: 12px;
+    }
+    &--large-right {
+      margin-left: auto;
+    }
+  }
+  &__send-button {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: none;
+    border: none;
+    &:after {
+      display: block;
+      content: '';
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+      @include color-svg('../images/send.svg', $color-signal-blue);
     }
   }
   &__input {
     flex-grow: 1;
   }
+  &__toggle-large {
+    width: 20px;
+    height: 20px;
+    border: none;
+
+    @include light-theme() {
+      @include color-svg('../images/expand-up.svg', $color-gray-45);
+    }
+
+    @include dark-theme() {
+      @include color-svg('../images/expand-up.svg', $color-gray-45);
+    }
+
+    &--large-active {
+      @include light-theme() {
+        @include color-svg('../images/collapse-down.svg', $color-gray-45);
+      }
+
+      @include dark-theme() {
+        @include color-svg('../images/collapse-down.svg', $color-gray-45);
+      }
+    }
+  }
+  &__attachment-list {
+    width: 100%;
+  }
 }
 
 .composition-area-placeholder {

diff --git a/stylesheets/_recorder.scss b/stylesheets/_recorder.scss
@@ -2,14 +2,13 @@
   text-align: center;
 
   .microphone {
-    height: 36px;
-    width: 36px;
+    height: 32px;
+    width: 32px;
     text-align: center;
     opacity: 0.5;
     background: transparent;
     padding: 0;
     border: none;
-    margin-top: 2px;
 
     &:focus,
     &:hover {
@@ -26,18 +25,15 @@
   }
 }
 .recorder {
-  background: $color-white;
-
   button {
     float: right;
-    width: 36px;
-    height: 36px;
-    border-radius: 36px;
+    width: 32px;
+    height: 32px;
+    border-radius: 32px;
     margin-left: 5px;
     opacity: 0.5;
     text-align: center;
     padding: 0;
-    margin-top: 5px;
 
     &:focus,
     &:hover {
@@ -74,6 +70,7 @@
     float: right;
     line-height: 36px;
     padding: 0 10px;
+    transform: translateY(-2px);
 
     @keyframes pulse {
       0% {