From 183c552520067aeb6d59bdfec5c84bafe3955463 Mon Sep 17 00:00:00 2001
From: Ben Gotow <bengotow@gmail.com>
Date: Mon, 10 Aug 2015 14:47:47 -0700
Subject: [PATCH] fix(composer): Remove unnecessary zIndex rules, fix wrapping
 around Cc/Bcc/Subject icons

Previously, we were adding 160px of padding to the entire To field. Now the buttons in the top right are floating inside the container and only impact the first line of participants.

I also stripped out a lot of zIndex rules on the participant fields, subject, body that I think were only necessary because "once you've started adding zindexes you need them everywhere".

Also changed the hover state of the buttons to be consistent.
---
 .../composer/lib/composer-view.cjsx           | 61 ++++++++++---------
 .../composer/lib/participants-text-field.cjsx |  2 +-
 .../composer/stylesheets/composer.less        | 27 +++-----
 static/components/tokenizing-text-field.less  |  1 +
 4 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/internal_packages/composer/lib/composer-view.cjsx b/internal_packages/composer/lib/composer-view.cjsx
index 29116e2f4..7ddff96d4 100644
--- a/internal_packages/composer/lib/composer-view.cjsx
+++ b/internal_packages/composer/lib/composer-view.cjsx
@@ -221,29 +221,6 @@ class ComposerView extends React.Component
         {@_renderBodyScrollbar()}
 
         <div className="composer-centered">
-          <div className="composer-participant-actions">
-            <span className="header-action"
-                  style={display: @state.showcc and 'none' or 'inline'}
-                  onClick={@_showAndFocusCc}>Cc</span>
-
-            <span className="header-action"
-                  style={display: @state.showbcc and 'none' or 'inline'}
-                  onClick={@_showAndFocusBcc}>Bcc</span>
-
-            <span className="header-action"
-                  style={display: @state.showsubject and 'none' or 'initial'}
-                  onClick={@_showAndFocusSubject}>Subject</span>
-
-            <span className="header-action"
-                  data-tooltip="Popout composer"
-                  style={{display: ((@props.mode is "fullwindow") and 'none' or 'initial'), paddingLeft: "1.5em"}}
-                  onClick={@_popoutComposer}>
-              <RetinaImg name="composer-popout.png"
-                mode={RetinaImg.Mode.ContentIsMask}
-                style={{position: "relative", top: "-2px"}}/>
-            </span>
-          </div>
-
           {@_renderFields()}
 
           <div className="compose-body" ref="composeBody" onClick={@_onClickComposeBody}>
@@ -263,13 +240,37 @@ class ComposerView extends React.Component
     # If they're hidden, shift-tab between fields breaks.
     fields = []
     fields.push(
-      <ParticipantsTextField
-        ref="textFieldTo"
-        key="to"
-        field='to'
-        change={@_onChangeParticipants}
-        participants={to: @state['to'], cc: @state['cc'], bcc: @state['bcc']}
-        tabIndex='102'/>
+      <div>
+        <div className="composer-participant-actions">
+          <span className="header-action"
+                style={display: @state.showcc and 'none' or 'inline'}
+                onClick={@_showAndFocusCc}>Cc</span>
+
+          <span className="header-action"
+                style={display: @state.showbcc and 'none' or 'inline'}
+                onClick={@_showAndFocusBcc}>Bcc</span>
+
+          <span className="header-action"
+                style={display: @state.showsubject and 'none' or 'initial'}
+                onClick={@_showAndFocusSubject}>Subject</span>
+
+          <span className="header-action"
+                data-tooltip="Popout composer"
+                style={{display: ((@props.mode is "fullwindow") and 'none' or 'initial'), paddingLeft: "1.5em"}}
+                onClick={@_popoutComposer}>
+            <RetinaImg name="composer-popout.png"
+              mode={RetinaImg.Mode.ContentIsMask}
+              style={{position: "relative", top: "-2px"}}/>
+          </span>
+        </div>
+        <ParticipantsTextField
+          ref="textFieldTo"
+          key="to"
+          field='to'
+          change={@_onChangeParticipants}
+          participants={to: @state['to'], cc: @state['cc'], bcc: @state['bcc']}
+          tabIndex='102'/>
+      </div>
     )
 
     if @state.showcc
diff --git a/internal_packages/composer/lib/participants-text-field.cjsx b/internal_packages/composer/lib/participants-text-field.cjsx
index 11ba049f7..85bb113c5 100644
--- a/internal_packages/composer/lib/participants-text-field.cjsx
+++ b/internal_packages/composer/lib/participants-text-field.cjsx
@@ -35,7 +35,7 @@ class ParticipantsTextField extends React.Component
   render: =>
     classSet = {}
     classSet[@props.field] = true
-    <div className="participants-text-field" style={zIndex: 1000-@props.tabIndex, display: 'inline'}>
+    <div className="participants-text-field">
       <TokenizingTextField
         ref="textField"
         tokens={@props.participants[@props.field]}
diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less
index 6bacecc0d..1169d95c3 100644
--- a/internal_packages/composer/stylesheets/composer.less
+++ b/internal_packages/composer/stylesheets/composer.less
@@ -39,7 +39,6 @@
 
   .composer-action-bar-wrap {
     position: relative;
-    z-index: 1;
     width: 100%;
     background: transparent;
     border-bottom: 0;
@@ -63,7 +62,6 @@
   }
 
   .composer-content-wrap {
-    z-index: 1;
     padding: 0;
     flex: 1;
     display: flex;
@@ -95,28 +93,24 @@
     padding-left: 1em;
     &:hover {
       color: @text-color-link;
-      cursor: pointer;
+      img.content-mask { background-color: @text-color-link; }
+      cursor: default;
     }
   }
 
   .composer-participant-actions {
-    position: absolute;
-    z-index: 900;
-    right: 23px;
-    .header-action {
-      position: relative;
-      top: 1em;
-    }
-  }
-
-  .tokenizing-field.to {
-    padding-right: 160px;
+    position: relative;
+    float: right;
+    z-index: 2;
+    cursor: default;
+    padding-right: @spacing-standard + @spacing-half;
+    padding-left: @spacing-standard;
+    padding-top: 12px;
   }
 
   input, textarea, div[contenteditable] {
     color: @text-color;
     position: relative;
-    z-index: 1;
     display: block;
     background: inherit;
     width: 100%;
@@ -126,7 +120,6 @@
 
   .compose-subject-wrap {
     position: relative;
-    z-index: 2;
     margin: 0 23px;
     border-bottom: 1px solid @border-color-divider;
     flex-shrink:0;
@@ -160,7 +153,6 @@
 
   .compose-body {
     flex: 1;
-    z-index: 1;
     cursor: text;
     overflow: auto;
     position: relative;
@@ -263,7 +255,6 @@
 //////////////////////////////////
 .participants-text-field {
   position: relative;
-  z-index: 2;
   padding: 5px @spacing-standard 0 @spacing-standard;
   margin: 0 8px;
   flex-shrink: 0;
diff --git a/static/components/tokenizing-text-field.less b/static/components/tokenizing-text-field.less
index 5f93a0699..9593670cf 100644
--- a/static/components/tokenizing-text-field.less
+++ b/static/components/tokenizing-text-field.less
@@ -26,6 +26,7 @@
     border-radius: @border-radius-small;
     background-color: @background-color;
     position: absolute;
+    z-index: 2;
   }
 
   .content-container.empty {