Conversations now better take advantage of wide screens

_locales/en/messages.json

@@ -695,6 +695,16 @@
     "description":
       "When rendering an address, used to provide context to a post office box"
   },
+  "downloadAttachment": {
+    "message": "Download Attachment",
+    "description":
+      "Shown in a message's triple-dot menu if there isn't room for a dedicated download button"
+  },
+  "replyToMessage": {
+    "message": "Reply to Message",
+    "description":
+      "Shown in triple-dot menu next to message to allow user to start crafting a message with a quotation"
+  },
   "originalMessageNotFound": {
     "message": "Original message not found",
     "description":

stylesheets/_conversation.scss

@@ -37,6 +37,7 @@
       }
 
       .message-list {
+        -webkit-padding-start: 0px;
         position: absolute;
         top: 0;
         height: 100%;
@@ -44,6 +45,7 @@
         margin: 0;
         padding: 10px 0 0 0;
         overflow-y: auto;
+        overflow-x: hidden;
       }
     }
   }
@@ -135,9 +137,6 @@
   list-style: none;
 
   li {
-    max-width: 736px;
-    margin-left: auto;
-    margin-right: auto;
     margin-bottom: 10px;
 
     .message-wrapper {

stylesheets/_modules.scss

@@ -9,6 +9,7 @@
 // Module: Message
 
 .module-message {
+  position: relative;
   display: inline-flex;
   flex-direction: row;
   align-items: stretch;
@@ -36,11 +37,21 @@
   }
 }
 
+// Spec: container < 438px
+.module-message--incoming {
+  margin-left: 0;
+  margin-right: 32px;
+}
 .module-message--outgoing {
   float: right;
+  margin-right: 0;
+  margin-left: 32px;
 }
 
 .module-message__buttons {
+  position: absolute;
+  top: 0;
+  bottom: 0;
   display: inline-flex;
   flex-direction: row;
   align-items: center;
@@ -51,6 +62,13 @@
   opacity: 1;
 }
 
+.module-message__buttons--incoming {
+  left: 100%;
+}
+.module-message__buttons--outgoing {
+  right: 100%;
+}
+
 .module-message__buttons__download {
   height: 24px;
   width: 24px;
@@ -136,7 +154,6 @@
   padding-left: 12px;
   padding-top: 10px;
   padding-bottom: 10px;
-  max-width: 386px;
 }
 
 .module-message__container--outgoing {
@@ -230,8 +247,6 @@
 }
 
 .module-message__img-attachment {
-  max-width: 386px;
-
   object-fit: cover;
   width: 100%;
   min-width: 200px;
@@ -2250,3 +2265,79 @@
   > .react-contextmenu-item.react-contextmenu-item--selected:after {
   color: $color-white;
 }
+
+// All media query widths have 300px added to account for the left pane
+// And have been tweaked for smoother transitions
+
+// To hide in small breakpoints
+.module-message__buttons__download {
+  display: none;
+}
+.module-message__buttons__reply {
+  display: none;
+}
+
+/* Spec: container > 438px and container < 593px*/
+@media (min-width: 800px) and (max-width: 925px) {
+  .module-message {
+    max-width: 374px;
+  }
+
+  // Spec: container < 438px
+  .module-message--incoming {
+    margin-left: 0;
+    margin-right: auto;
+  }
+  .module-message--outgoing {
+    margin-right: 0;
+    margin-left: auto;
+  }
+
+  // To hide in small breakpoints
+  .module-message__buttons__download {
+    display: inline-block;
+  }
+  .module-message__buttons__reply {
+    display: inline-block;
+  }
+
+  // To hide in larger breakpoints
+  .module-message__context__download {
+    display: none;
+  }
+  .module-message__context__reply {
+    display: none;
+  }
+}
+
+// Spec: container > 593px
+@media (min-width: 926px) {
+  .module-message {
+    max-width: 66%;
+  }
+
+  .module-message--incoming {
+    margin-left: 0;
+    margin-right: auto;
+  }
+  .module-message--outgoing {
+    margin-right: 0;
+    margin-left: auto;
+  }
+
+  // To hide in small breakpoints
+  .module-message__buttons__download {
+    display: inline-block;
+  }
+  .module-message__buttons__reply {
+    display: inline-block;
+  }
+
+  // To hide in larger breakpoints
+  .module-message__context__download {
+    display: none;
+  }
+  .module-message__context__reply {
+    display: none;
+  }
+}

ts/components/conversation/Message.tsx

@@ -785,7 +785,12 @@ export class Message extends React.Component<Props, State> {
     const last = direction === 'incoming' ? menuButton : downloadButton;
 
     return (
-      <div className="module-message__buttons">
+      <div
+        className={classNames(
+          'module-message__buttons',
+          `module-message__buttons--${direction}`
+        )}
+      >
         {first}
         {replyButton}
         {last}
@@ -795,9 +800,12 @@ export class Message extends React.Component<Props, State> {
 
   public renderContextMenu(triggerId: string) {
     const {
+      attachment,
       direction,
       status,
       onDelete,
+      onDownload,
+      onReply,
       onRetrySend,
       onShowDetail,
       i18n,
@@ -807,11 +815,50 @@ export class Message extends React.Component<Props, State> {
 
     return (
       <ContextMenu id={triggerId}>
-        <MenuItem onClick={onShowDetail}>{i18n('moreInfo')}</MenuItem>
-        {showRetry ? (
-          <MenuItem onClick={onRetrySend}>{i18n('retrySend')}</MenuItem>
+        {attachment ? (
+          <MenuItem
+            attributes={{
+              className: 'module-message__context__download',
+            }}
+            onClick={onDownload}
+          >
+            {i18n('downloadAttachment')}
+          </MenuItem>
         ) : null}
-        <MenuItem onClick={onDelete}>{i18n('deleteMessage')}</MenuItem>
+        <MenuItem
+          attributes={{
+            className: 'module-message__context__reply',
+          }}
+          onClick={onReply}
+        >
+          {i18n('replyToMessage')}
+        </MenuItem>
+        <MenuItem
+          attributes={{
+            className: 'module-message__context__more-info',
+          }}
+          onClick={onShowDetail}
+        >
+          {i18n('moreInfo')}
+        </MenuItem>
+        {showRetry ? (
+          <MenuItem
+            attributes={{
+              className: 'module-message__context__retry-send',
+            }}
+            onClick={onRetrySend}
+          >
+            {i18n('retrySend')}
+          </MenuItem>
+        ) : null}
+        <MenuItem
+          attributes={{
+            className: 'module-message__context__delete-message',
+          }}
+          onClick={onDelete}
+        >
+          {i18n('deleteMessage')}
+        </MenuItem>
       </ContextMenu>
     );
   }