From 8e3b436ba380fcc74eced18c58f8a4b5ded8d644 Mon Sep 17 00:00:00 2001
From: Evan Morikawa <evan@evanmorikawa.com>
Date: Fri, 30 Sep 2016 19:15:06 -0500
Subject: [PATCH] fix(composer): enable click regions on margins of composer

Change padding, margins, and borders to allow you to click on the left
margin of to, cc, bcc, from, subject fields as well as the composer
margins both above, left, and to the right of the composer.

Ensured attachments and other assets show up in correct spots

Ensure subject looks correct for mail merge
---
 .../composer/lib/account-contact-field.jsx    |  4 +-
 .../composer/stylesheets/composer.less        | 64 ++++++++++++++++---
 src/components/tokenizing-text-field.cjsx     |  2 +-
 static/components/tokenizing-text-field.less  |  5 +-
 4 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/internal_packages/composer/lib/account-contact-field.jsx b/internal_packages/composer/lib/account-contact-field.jsx
index cd9416b29..365658ba9 100644
--- a/internal_packages/composer/lib/account-contact-field.jsx
+++ b/internal_packages/composer/lib/account-contact-field.jsx
@@ -48,7 +48,7 @@ export default class AccountContactField extends React.Component {
 
   _renderAccountSpan = (label) => {
     return (
-      <span style={{position: "relative", top: 13, left: "0.5em"}}>
+      <span className="from-single-name" style={{position: "relative", top: 13, left: "0.5em"}}>
         {label}
       </span>
     );
@@ -95,7 +95,7 @@ export default class AccountContactField extends React.Component {
 
   render() {
     return (
-      <div className="composer-participant-field">
+      <div className="composer-participant-field from-field">
         <div className="composer-field-label">From:</div>
         {this._renderAccountSelector()}
         {this._renderFromFieldComponents()}
diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less
index 43189f4aa..565308482 100644
--- a/internal_packages/composer/stylesheets/composer.less
+++ b/internal_packages/composer/stylesheets/composer.less
@@ -30,6 +30,17 @@ body.platform-win32 {
   }
 }
 
+// Used to allow the click targets to extend into the margins
+.composer-field-bottom-border() {
+  width: calc(~"100% - 44px");
+  height: 1px;
+  position: absolute;
+  bottom: 0;
+  left: 23px;
+  content: " ";
+  background: @border-color-divider;
+}
+
 .composer-inner-wrap {
   position: relative;
   height: 100%;
@@ -178,7 +189,7 @@ body.platform-win32 {
   }
 
   .composer-body-wrap {
-    padding: 20px 14px 5px 14px;
+    padding: 0 0 5px 0;
   }
 
   .composer-header-actions {
@@ -223,6 +234,9 @@ body.platform-win32 {
     float: left;
     padding-top: 13px;
     display: block;
+    &:hover {
+      cursor: default;
+    }
   }
 
   .collapsed-composer-participants {
@@ -269,13 +283,22 @@ body.platform-win32 {
 
   .composer-subject {
     position: relative;
-    margin: 0 23px;
-    border-bottom: 1px solid @border-color-divider;
+    margin: 0;
     flex-shrink:0;
 
+    &:after {
+      .composer-field-bottom-border;
+    }
+
+    // for Mail Merge
+    div[contenteditable] {
+      padding-left: 22px;
+      padding-right: 22px;
+    }
+
     input {
       display: inline-block;
-      padding: 13px 0 9px 0;
+      padding: 13px 22px 9px 22px;
       min-width: 5em;
       background-color: transparent;
       border: none;
@@ -302,7 +325,7 @@ body.platform-win32 {
     cursor: text;
     overflow-x: auto;
     position: relative;
-    margin: 0 8px;
+    margin: 0;
 
     .quoted-text-control {
       position: relative;
@@ -310,7 +333,7 @@ body.platform-win32 {
       // div[contentedtiable] has 10px of bottom padding. It's better to
       // put the padding on the contenteditable so the bottom looks nice
       // in popout windows when there's no quoted text control.
-      margin: 0 @spacing-standard @spacing-standard 0;
+      margin: 0 @spacing-standard @spacing-standard 22px;
 
       .remove-quoted-text {
         display: none;
@@ -334,7 +357,10 @@ body.platform-win32 {
       }
     }
 
+    // All of the padding is placed on the contenteditable itself so
+    // clicks on the margins register within the region.
     div[contenteditable] {
+      padding: 20px 22px 0 22px;
       min-height: @compose-min-height;
     }
   }
@@ -349,7 +375,7 @@ body.platform-win32 {
   // TODO FIXME DRY From stylesheets/message-list.less
   .attachments-area {
     padding: 0;
-    margin: 0;
+    margin: 0 8px;
   }
 }
 
@@ -430,12 +456,32 @@ body.platform-win32 {
 //////////////////////////////////
 .composer-participant-field {
   position: relative;
-  margin: 0 8+@spacing-standard;
+  margin: 0;
   flex-shrink: 0;
-  border-bottom: 1px solid @border-color-divider;
   min-height: 46px;
   color: @text-color;
 
+  .tokenizing-field-wrap {
+    padding: 0 22px;
+  }
+  .content-container {
+    margin-left: 22px;
+    width: calc(~"100% - 44px");
+  }
+  &:after {
+    .composer-field-bottom-border;
+  }
+
+  &.from-field {
+    padding: 0 22px;
+  }
+
+  .from-single-name {
+    &:hover {
+      cursor: default;
+    }
+  }
+
   .button-dropdown {
     margin-left: 10px;
     padding-top: 11px;
diff --git a/src/components/tokenizing-text-field.cjsx b/src/components/tokenizing-text-field.cjsx
index 8361bc43e..51eff8020 100644
--- a/src/components/tokenizing-text-field.cjsx
+++ b/src/components/tokenizing-text-field.cjsx
@@ -303,7 +303,7 @@ class TokenizingTextField extends React.Component
     />
 
   _fieldComponent: =>
-    <div key="field-component" ref="field-drop-target" onClick={@_onClick} onDrop={@_onDrop}>
+    <div key="field-component" ref="field-drop-target" onClick={@_onClick} onDrop={@_onDrop} className="tokenizing-field-wrap">
       {@_renderPrompt()}
       <div className="tokenizing-field-input">
         {@_placeholder()}
diff --git a/static/components/tokenizing-text-field.less b/static/components/tokenizing-text-field.less
index 3864790a1..06a045919 100644
--- a/static/components/tokenizing-text-field.less
+++ b/static/components/tokenizing-text-field.less
@@ -127,11 +127,14 @@
     text-transform: capitalize;
     padding-top: 12px;
     display: block;
+    &:hover {
+      cursor: default;
+    }
   }
 
   .tokenizing-field-input {
     position: relative;
-    padding-left: 2.8em;
+    margin-left: 2.8em;
     padding-top: 9px;
     padding-bottom: 3px;