From 0fb7e2c101ad8581f1d7bdc3f6f0f39582f0bb6a Mon Sep 17 00:00:00 2001
From: Evan Morikawa <evan@evanmorikawa.com>
Date: Tue, 10 Mar 2015 18:14:20 -0700
Subject: [PATCH] feat(composer): add popout icon and header styles

---
 .../composer/lib/composer-view.cjsx           |  16 ++++++------
 .../composer/stylesheets/composer.less        |   2 +-
 src/flux/stores/file-upload-store.coffee      |   1 +
 static/images/toolbar/toolbar-popout@2x.png   | Bin 0 -> 1350 bytes
 static/type.less                              |  23 +++++++-----------
 5 files changed, 18 insertions(+), 24 deletions(-)
 create mode 100644 static/images/toolbar/toolbar-popout@2x.png

diff --git a/internal_packages/composer/lib/composer-view.cjsx b/internal_packages/composer/lib/composer-view.cjsx
index 2d06e1398..b20de1295 100644
--- a/internal_packages/composer/lib/composer-view.cjsx
+++ b/internal_packages/composer/lib/composer-view.cjsx
@@ -118,19 +118,13 @@ ComposerView = React.createClass
         <div className="composer-action-bar-content">
           <button className="btn btn-toolbar pull-right btn-trash"
                   onClick={@_destroyDraft}><RetinaImg name="toolbar-trash.png" /></button>
-        
+
           <button className="btn btn-toolbar pull-right btn-attach"
                   onClick={@_attachFile}><RetinaImg name="toolbar-attach.png"/></button>
 
-          <div className="text-actions pull-right">
-            <span className="header-action"
+          <button className="btn btn-toolbar pull-right btn-popout"
                   style={display: (@props.mode is "fullwindow") and 'none' or 'initial'}
-                  onClick={@_popoutComposer}>Popout</span>
-            <br/>
-            <span className="header-action"
-                  style={display: @state.showsubject and 'none' or 'initial'}
-                  onClick={=> @setState {showsubject: true}}>Change Subject</span>
-          </div>
+                  onClick={@_popoutComposer}><RetinaImg name="toolbar-popout.png"/></button>
 
           <button className="btn btn-toolbar btn-send"
                   tabIndex="110"
@@ -149,6 +143,10 @@ ComposerView = React.createClass
           <span className="header-action"
                 style={display: @state.showbcc and 'none' or 'inline'}
                 onClick={=> @setState {showbcc: true}}>Bcc</span>
+
+          <span className="header-action"
+                style={display: @state.showsubject and 'none' or 'initial'}
+                onClick={=> @setState {showsubject: true}}>Subject</span>
         </div>
 
         <ParticipantsTextField
diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less
index b9420c5dc..393a677b2 100644
--- a/internal_packages/composer/stylesheets/composer.less
+++ b/internal_packages/composer/stylesheets/composer.less
@@ -76,7 +76,7 @@
   }
 
   .tokenizing-field.to {
-    padding-right: 60px;
+    padding-right: 120px;
   }
 
   input, textarea, div[contenteditable] {
diff --git a/src/flux/stores/file-upload-store.coffee b/src/flux/stores/file-upload-store.coffee
index 6b7b8d3d5..c2b4bbfa5 100644
--- a/src/flux/stores/file-upload-store.coffee
+++ b/src/flux/stores/file-upload-store.coffee
@@ -38,6 +38,7 @@ FileUploadStore = Reflux.createStore
 
     # When the dialog closes, it triggers `Actions.pathsToOpen`
     atom.showOpenDialog {properties: ['openFile', 'multiSelections']}, (pathsToOpen) ->
+      return if not pathsToOpen?
       pathsToOpen = [pathsToOpen] if _.isString(pathsToOpen)
       for path in pathsToOpen
         # When this task runs, we expect to hear `uploadStateChanged` actions.
diff --git a/static/images/toolbar/toolbar-popout@2x.png b/static/images/toolbar/toolbar-popout@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..48997accd4c7a3e39a6aa5212dc8a9b87ceddc1d
GIT binary patch
literal 1350
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC$r9IylHmNblJdl&R0hYC{G?O`
z&)mfH)S%SFl*+=BsWuD@%o>>?5hW46K32*3xq68pHF_1f1wh>l3^w)^1&PVosU-?Y
zsp*+{wo31J?^jaDOtDo8H}y5}EpSfF$n>ZxN)4{^3rViZPPR-@vbR&PsjvbXkegbP
zs8ErclUHn2VXFi-*9yo63F|8<fR&VF+bTgE72zA8;GAESs$i;TrkiYFXrf?lsb^?v
zW^QS&qhJK&>l;|;8yV;tSX!AHTNxNBK!Fm_wxX0Ys~{IQs9ivwtx`rwNr9EVetCJh
zUb(Seeo?x<p{1pzzJZaxk&!M?g>G?WUP)qwZeFo6%mkOz;^d;tf|AVqJOz-6iAnjT
zCALaHmqNUdTL3pUuNWFkzyQ;)NG#Ad)H48i38v837r)ZnT)67ulAu(Cd$Af^98y`3
zsvneEoL^d$42-xmWsp?`R?bDKi6!|(A^G_^uuu%h$S=t+&d4uNaCQcVnu3OJVsd64
zNKg~3%h%V+Gq1QLF)umQ)5TT^XpUZHW{Q=ov!l6*g{iBPo2iANp{t3blewXVk%^<J
zg^QW9tAPPbuS<S%X>Mv>2~2MaLa!T6y`Th<TL84#CABECEH%ZgC_h&L>~X71+-`Bk
zX&zK>3U0T!;MA)Rbc{YIdXb_VCIn1FASOKV0y*&HpPC0u^F_eK9V?)=fq{W>i>HfY
zNX4zBKmY&R9}Zyi;c=GfsY<xQyjV`+>wyDIVge7}J$244-rBH3x?^tRjJaNE|JWWi
zJH#*^Nq1zj-k!VAlczzZo~L8)iWe0E39L!t3U*9KrfC>9uvs+Bn9R~#&-gK1rOsO5
z^JRmp4R@}y9@+My@_@*z-T4lG`dDnZ&oZg2e9Ke_V@q=5+NdIs?`(9PtK;T`<O2d7
z{0xTTqD~#`ov|!OzOP7l#;xGT_$b|@m0x4(pQfV@(o<#n`Q!pGu6b_Zt*EfUS?D(3
zk&`=2c&=43Sbk~md0ZHp;(YAmV&Bd{ez1oQ-)AlgG4XDSldI@I@{To$RcnSO?~&q(
zKk5^76U3w{7_MaXv~4=u@WYPx%?-}4EWSw#WIE<wGKk#Qx~)huLzLNnp<+Dmk#!C_
zPO8QC9cTa1b@<aTO)jBf+wINn-4_*~HU1CylW4-`W@~UjZh{O$xktb&#wR_-?Ly2e
zFZfhAcBP3ed1cRa>YLPqx{qZ=Neh}n=3nNx({yc%%JBoq3TAANs@P62tWuaO`%kK4
xyO9IijeC<8O)M;#RSJ!a73@Hxr!YD+Ffv4G20Ax(T+0WQY@V)uF6*2UngETI((C{L

literal 0
HcmV?d00001

diff --git a/static/type.less b/static/type.less
index bd766d48f..1457f5029 100644
--- a/static/type.less
+++ b/static/type.less
@@ -9,8 +9,7 @@
 // Headings
 // -------------------------
 
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6 {
+h1, h2, h3, h4, h5, h6 {
   font-family: @font-family-heading;
   line-height: @line-height-heading;
   color: @text-color-heading;
@@ -21,22 +20,20 @@ h1, h2, h3, h4, h5, h6,
   }
 }
 
-h1, .h1 {
+h1 {
   font-size:   @font-size-h1;
   font-weight: @font-weight-semi-bold;
 }
-h2, .h2 {
+h2 {
   font-size:   @font-size-h2;
   font-weight: @font-weight-blond;
 }
-h3, .h3 { font-size: @font-size-h3; }
-h4, .h4 { font-size: @font-size-h4; }
-h5, .h5 { font-size: @font-size-h5; }
-h6, .h6 { font-size: @font-size-h6; }
+h3 { font-size: @font-size-h3; }
+h4 { font-size: @font-size-h4; }
+h5 { font-size: @font-size-h5; }
+h6 { font-size: @font-size-h6; }
 
-h1, .h1,
-h2, .h2,
-h3, .h3 {
+h1, h2, h3{
   margin-top: @line-height-computed;
   margin-bottom: (@line-height-computed / 2);
 
@@ -45,9 +42,7 @@ h3, .h3 {
     font-size: 65%;
   }
 }
-h4, .h4,
-h5, .h5,
-h6, .h6 {
+h4, h5, h6 {
   margin-top: (@line-height-computed / 2);
   margin-bottom: (@line-height-computed / 2);