Some style and interaction fine-tuning

_locales/en/messages.json

@@ -551,6 +551,16 @@
     "description":
       "Shown in toast when user attempts to send .exe file, for example"
   },
+  "stagedImageAttachment": {
+    "message": "Staged image attachment: $path$",
+    "description": "Alt text for staged attachments",
+    "placeholders": {
+      "path": {
+        "content": "$1",
+        "example": "dog.jpg"
+      }
+    }
+  },
   "maxOneAttachmentToast": {
     "message": "The limit is one attachment per message.",
     "description":

libtextsecure/message_receiver.js

@@ -263,7 +263,6 @@ MessageReceiver.prototype.extend({
     // We do the message decryption here, instead of in the ordered pending queue,
     // to avoid exposing the time it took us to process messages through the time-to-ack.
 
-    // TODO: handle different types of requests.
     if (request.path !== '/api/v1/message') {
       window.log.info('got request', request.verb, request.path);
       request.respond(200, 'OK');

stylesheets/_conversation.scss

@@ -184,15 +184,10 @@
 //   things in the composition area. A margin on an inner div won't be included in that
 //   height calculation.
 .bottom-bar .quote-wrapper {
-  margin-right: 5px;
-  margin-bottom: 6px;
-  margin-top: 3px;
-}
-
-.send .quote-wrapper {
   margin-left: 37px;
   margin-right: 73px;
-  margin-bottom: 5px;
+  margin-top: 3px;
+  margin-bottom: -5px;
 }
 
 .bottom-bar {
@@ -206,6 +201,7 @@
   }
 
   form.send {
+    margin-bottom: 0px;
     background: $color-white;
 
     &.video-attachment {
@@ -277,6 +273,7 @@
     display: block;
     max-height: 100px;
     padding: 10px;
+    margin-top: 3px;
     margin-bottom: 6px;
     border-radius: 20px;
     background-color: $color-light-02;

stylesheets/_emoji.scss

@@ -88,8 +88,10 @@ button.emoji {
   opacity: 0.5;
   border: none;
   background: transparent;
+  margin-top: 3px;
 
   &:before {
+    margin-top: 4px;
     content: '';
     display: inline-block;
     width: $button-height;
@@ -114,7 +116,6 @@ button.emoji {
 
 .emoji-panel-container {
   height: 0px;
-  margin-bottom: 3px;
 
   .ep-emojies {
     background-color: $color-white;

stylesheets/_global.scss

@@ -108,8 +108,10 @@ a {
     opacity: 0.5;
     border: none;
     background: transparent;
+    margin-top: 2px;
 
     &:before {
+      margin-top: 4px;
       content: '';
       display: inline-block;
       width: $button-height;

stylesheets/_index.scss

@@ -31,11 +31,13 @@
 
   float: left;
   width: 300px;
+
   .content {
     overflow-y: scroll;
     max-height: calc(100% - 88px);
   }
 }
+
 .network-status-container {
   .network-status {
     background: url('../images/error_red.svg') no-repeat left 10px center;

stylesheets/_modules.scss

@@ -784,6 +784,7 @@
   flex: initial;
   min-width: 54px;
   width: 54px;
+  max-height: 54px;
   position: relative;
 
   img {
@@ -2297,7 +2298,7 @@
   height: 20px;
 
   z-index: 2;
-  @include color-svg('../images/x-16.svg', $color-black);
+  @include color-svg('../images/x.svg', $color-black);
 }
 
 .module-attachments__rail {
@@ -2412,10 +2413,10 @@
 
   top: 12px;
   right: 16px;
-  width: 24px;
+  width: 30px;
-  height: 24px;
+  height: 30px;
   z-index: 2;
-  @include color-svg('../images/x-16.svg', $color-white);
+  @include color-svg('../images/x.svg', $color-white);
 }
 
 .module-caption-editor__media-container {
@@ -2488,6 +2489,10 @@
   &::placeholder {
     color: $color-white-07;
   }
+  &:focus {
+    border: 1px solid $color-signal-blue;
+    outline: none;
+  }
 }
 
 // Third-party module: react-contextmenu

stylesheets/_recorder.scss

@@ -9,6 +9,7 @@
     background: transparent;
     padding: 0;
     border: none;
+    margin-top: 2px;
 
     &:focus,
     &:hover {
@@ -16,6 +17,7 @@
     }
 
     &:before {
+      margin-top: 4px;
       content: '';
       display: inline-block;
       height: 24px;
@@ -36,6 +38,7 @@
     opacity: 0.5;
     text-align: center;
     padding: 0;
+    margin-top: 5px;
 
     &:focus,
     &:hover {

stylesheets/_theme_dark.scss

@@ -230,50 +230,6 @@ body.dark-theme {
     }
   }
 
-  .dropoff {
-    outline: solid 1px $blue;
-  }
-
-  .avatar {
-    color: $color-white;
-    background-color: $grey;
-  }
-
-  .group-info-input {
-    background: $color-white;
-
-    .thumbnail:after {
-      border-bottom: 10px solid $grey;
-      border-left: 10px solid transparent;
-    }
-
-    input.name {
-      border: solid 1px #ccc;
-    }
-  }
-
-  .group-member-list,
-  .new-group-update {
-    .members .contact {
-      border-bottom: 1px solid $color-dark-60;
-    }
-  }
-
-  .banner {
-    // what's the right color?
-    background-color: $blue_l;
-    color: black;
-    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
-
-    .warning {
-      @include color-svg('../images/warning.svg', black);
-    }
-
-    .dismiss {
-      @include color-svg('../images/x.svg', black);
-    }
-  }
-
   .contact-details {
     .number {
       color: $color-dark-30;
@@ -318,15 +274,6 @@ body.dark-theme {
     }
   }
 
-  input[type='text'],
-  input[type='search'],
-  textarea {
-    &:active,
-    &:focus {
-      outline: 1px solid $blue;
-    }
-  }
-
   .expiredAlert {
     background: #f3f3a7;
 
@@ -714,14 +661,9 @@ body.dark-theme {
   }
 
   .module-message__generic-attachment__icon {
-    // TODO: this will eventually be a different image
     // background: url('../images/file-gradient.svg') no-repeat center;
   }
 
-  .module-message__generic-attachment__icon__extension {
-    // TODO: probably need color
-  }
-
   .module-message__generic-attachment__file-name {
     color: $color-dark-05;
   }
@@ -1012,10 +954,6 @@ body.dark-theme {
     @include color-svg('../images/movie.svg', $color-signal-blue);
   }
 
-  .module-quote__generic-file__icon {
-    // TODO: this will eventually be a different icon
-    // background: url('../images/file-gradient.svg');
-  }
   .module-quote__generic-file__text {
     color: $color-dark-05;
   }
@@ -1368,6 +1306,10 @@ body.dark-theme {
     color: $color-dark-05;
   }
 
+  // Module: Image
+
+  // Module: Image Grid
+
   // Module: Typing Animation
 
   .module-typing-animation__dot {
@@ -1378,6 +1320,36 @@ body.dark-theme {
     background-color: $color-white;
   }
 
+  // Module: Attachments
+
+  .module-attachments {
+    border-top: 1px solid $color-gray-75;
+  }
+
+  .module-attachments__close-button {
+    @include color-svg('../images/x.svg', $color-gray-45);
+  }
+
+  // Module: Staged Generic Attachment
+
+  .module-staged-generic-attachment {
+    box-shadow: inset 0px 0px 0px 1px $color-gray-45;
+    background-color: $color-gray-75;
+    color: $color-dark-05;
+  }
+
+  .module-staged-generic-attachment__close-button {
+    @include color-svg('../images/x.svg', $color-gray-45);
+  }
+
+  .module-staged-generic-attachment__icon {
+    background: url('../images/file-gradient.svg') no-repeat center;
+  }
+
+  .module-staged-generic-attachment__icon__extension {
+    color: $color-gray-90;
+  }
+
   // Third-party module: react-contextmenu
 
   .react-contextmenu {

ts/components/conversation/AttachmentList.md

@@ -9,18 +9,19 @@ const attachments = [
     height: 240,
   },
 ];
-
+<util.ConversationContext theme={util.theme}>
-<AttachmentList
+  <AttachmentList
-  attachments={attachments}
+    attachments={attachments}
-  onClose={() => console.log('onClose')}
+    onClose={() => console.log('onClose')}
-  onClickAttachment={attachment => {
+    onClickAttachment={attachment => {
-    console.log('onClickAttachment', attachment);
+      console.log('onClickAttachment', attachment);
-  }}
+    }}
-  onCloseAttachment={attachment => {
+    onCloseAttachment={attachment => {
-    console.log('onCloseAttachment', attachment);
+      console.log('onCloseAttachment', attachment);
-  }}
+    }}
-  i18n={util.i18n}
+    i18n={util.i18n}
-/>;
+  />;
+</util.ConversationContext>;
 ```
 
 ### Four images
@@ -53,7 +54,7 @@ const attachments = [
   },
 ];
 
-<div>
+<util.ConversationContext theme={util.theme}>
   <AttachmentList
     attachments={attachments}
     onClose={() => console.log('onClose')}
@@ -65,7 +66,7 @@ const attachments = [
     }}
     i18n={util.i18n}
   />
-</div>;
+</util.ConversationContext>;
 ```
 
 ### A mix of attachment types
@@ -90,7 +91,7 @@ const attachments = [
   },
 ];
 
-<div>
+<util.ConversationContext theme={util.theme}>
   <AttachmentList
     attachments={attachments}
     onClose={() => console.log('onClose')}
@@ -102,7 +103,7 @@ const attachments = [
     }}
     i18n={util.i18n}
   />
-</div>;
+</util.ConversationContext>;
 ```
 
 ### No attachments provided

ts/components/conversation/AttachmentList.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// import classNames from 'classnames';
 
 import {
   isImageTypeSupported,
@@ -28,7 +27,6 @@ export class AttachmentList extends React.Component<Props> {
     const {
       attachments,
       i18n,
-      // onError,
       onClickAttachment,
       onCloseAttachment,
       onClose,
@@ -59,7 +57,9 @@ export class AttachmentList extends React.Component<Props> {
               return (
                 <Image
                   key={getUrl(attachment) || attachment.fileName || index}
-                  alt={`TODO: attachment number ${index}`}
+                  alt={i18n('stagedImageAttachment', [
+                    getUrl(attachment) || attachment.fileName,
+                  ])}
                   i18n={i18n}
                   attachment={attachment}
                   softCorners={true}

ts/components/conversation/StagedGenericAttachment.md

@@ -6,11 +6,13 @@ const attachment = {
   fileName: 'manifesto.txt',
 };
 
-<StagedGenericAttachment
+<util.ConversationContext theme={util.theme}>
-  attachment={attachment}
+  <StagedGenericAttachment
-  i18n={util.i18n}
+    attachment={attachment}
-  onClose={attachment => console.log('onClose', attachment)}
+    i18n={util.i18n}
-/>;
+    onClose={attachment => console.log('onClose', attachment)}
+  />
+</util.ConversationContext>;
 ```
 
 File with long name
@@ -21,11 +23,13 @@ const attachment = {
   fileName: 'this-is-my-very-important-manifesto-you-must-read-it.txt',
 };
 
-<StagedGenericAttachment
+<util.ConversationContext theme={util.theme}>
-  attachment={attachment}
+  <StagedGenericAttachment
-  i18n={util.i18n}
+    attachment={attachment}
-  onClose={attachment => console.log('onClose', attachment)}
+    i18n={util.i18n}
-/>;
+    onClose={attachment => console.log('onClose', attachment)}
+  />
+</util.ConversationContext>;
 ```
 
 File with long extension
@@ -36,9 +40,11 @@ const attachment = {
   fileName: 'manifesto.reallylongtxt',
 };
 
-<StagedGenericAttachment
+<util.ConversationContext theme={util.theme}>
-  attachment={attachment}
+  <StagedGenericAttachment
-  i18n={util.i18n}
+    attachment={attachment}
-  onClose={attachment => console.log('onClose', attachment)}
+    i18n={util.i18n}
-/>;
+    onClose={attachment => console.log('onClose', attachment)}
+  />
+</util.ConversationContext>;
 ```