From 960754ef0414415df5f0a539568196f82dfcc044 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Fri, 18 Sep 2015 13:07:19 -0700
Subject: [PATCH] Restyle compose button

Move it to a tool bar at the top of the conversation list. This is also
where a search bar will live someday.

Fixes #357

// FREEBIE
---
 background.html          |   3 +++
 images/pencil.png        | Bin 272 -> 160 bytes
 js/views/inbox_view.js   |   2 +-
 stylesheets/_index.scss  |  34 +++++++++++++++-------------------
 stylesheets/manifest.css |  24 +++++++++---------------
 5 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/background.html b/background.html
index baccbe84..fc78138d 100644
--- a/background.html
+++ b/background.html
@@ -14,6 +14,9 @@
       <span class='socket-status'></span>
     </div>
     <div class='gutter'>
+        <div class='tool-bar clearfix'>
+          <button class='show-new-conversation'></button>
+        </div>
         <div class='conversations scrollable'></div>
         <span class='fab'></span>
     </div>
diff --git a/images/pencil.png b/images/pencil.png
index 85cff0b919dd765d6aa45557d1b47e081d447a4b..9efbaae2884ce2b15d160cbc1b1d3aa806545068 100644
GIT binary patch
delta 131
zcmV-}0DS+D0-ynqBz$K{L_t(|0oBf}4S+BdMd7m?|1*?1D%hcdIdKFqqzIlsHMgk%
zPVIM_#~&M52|4^A5}6V6M0-K`-2syg7Uh_e(Iy)e$$Go}o_LYl#DUI*W4aQ)zsuV)
lUXw1DlgoMV1}U9?uM1O(Y#Ug*VhR8N002ovPDHLkV1ix@I0FCx

delta 244
zcmZ3$IDu(`O1(m|N02WALzNl>LqiJ#!!HIP{epp^)PRBERRRNp)eHs(@q#(K0&Rd2
zOiAAEE)4(M`_JqL@;D1TB8wRqxP?KOkzv*x37}wyr;B5V#p$z`_wqI<2sk88`#fE;
zgpa#?LxG>Qve~mp4nf1JboDLoz4cm*XXIc1lgkj1#%8-=4MR`V1;KL)%-+olzb8y;
zNKIY*HAS(See3+c3b7~VJDlLZ<Z)i=`9%Z&1y!ftKbW=K#J_Pye4|po<I0o%6Q1q-
s5<T@N=aiqa7F>6kG(XqBDJd$SvU%mt>81WaKQJ(Oy85}Sb4q9e0Cc!qv;Y7A

diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 8d6ea238..2b673974 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -108,7 +108,7 @@
                 'click': 'closeMenu',
                 'click .hamburger': 'toggleMenu',
                 'click .show-debug-log': 'showDebugLog',
-                'click .fab': 'showCompose',
+                'click .show-new-conversation': 'showCompose',
                 'select .gutter .contact': 'openConversation'
             },
             openConversation: function(e, data) {
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index 3572a904..730971a1 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -22,6 +22,7 @@
   width: 300px;
   border-right: solid 1px #ddd;
   .conversations {
+    height: calc(100% - #{$header-height});
     width: 100%;
   }
 }
@@ -63,6 +64,7 @@
   }
 }
 
+.tool-bar,
 .conversation-header {
   background: $grey_l;
   border-bottom: solid 1px darken($grey_l, 10%);
@@ -89,26 +91,20 @@ input.search {
   outline: 0;
 }
 
-.fab {
-  z-index: 1;
-  position: fixed;
-  left: 215px;;
-  bottom: 22px;
-  height: 50px;
-  width: 50px;
-  border: 0;
-  border-radius: (60px / 2);
-  outline: 0;
-  font: 300 36px $roboto;
-  color: white;
-  background: $blue url('/images/pencil.png') no-repeat center center;
-  box-shadow: 0 8px 8px -8px rgba(darken($blue, 50%), 0.8);
-  transition: box-shadow 0.33s, transform 0.33s, background 0.33s;
+.tool-bar {
+  button.show-new-conversation {
+    float: right;
+    height: $header-height;
+    width: $header-height;
+    border: 0;
+    outline: 0;
+    font: 300 36px $roboto;
+    color: white;
+    background: url('/images/pencil.png') no-repeat center center;
 
-  &:hover {
-    background-color: darken($blue, 3%);
-    box-shadow: 0 8px 18px -8px rgba(darken($blue, 50%), 0.9);
-    transform: translate3d(0, -1px, 0);
+    &:hover {
+      background-color: darken($grey_l, 3%);
+    }
   }
 }
 
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index e6eb4ce5..8c48fee1 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -401,6 +401,7 @@ img.emoji {
   width: 300px;
   border-right: solid 1px #ddd; }
   .gutter .conversations {
+    height: calc(100% - 36px);
     width: 100%; }
 
 .socket-status {
@@ -429,6 +430,7 @@ img.emoji {
   .conversation-stack .conversation:first-child {
     display: block; }
 
+.tool-bar,
 .conversation-header {
   background: #f3f3f3;
   border-bottom: solid 1px #d9d9d9; }
@@ -449,25 +451,17 @@ input.search {
   margin: 0;
   outline: 0; }
 
-.fab {
-  z-index: 1;
-  position: fixed;
-  left: 215px;
-  bottom: 22px;
-  height: 50px;
-  width: 50px;
+.tool-bar button.show-new-conversation {
+  float: right;
+  height: 36px;
+  width: 36px;
   border: 0;
-  border-radius: 30px;
   outline: 0;
   font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
   color: white;
-  background: #2090ea url("/images/pencil.png") no-repeat center center;
-  box-shadow: 0 8px 8px -8px rgba(1, 6, 10, 0.8);
-  transition: box-shadow 0.33s, transform 0.33s, background 0.33s; }
-  .fab:hover {
-    background-color: #1689e5;
-    box-shadow: 0 8px 18px -8px rgba(1, 6, 10, 0.9);
-    transform: translate3d(0, -1px, 0); }
+  background: url("/images/pencil.png") no-repeat center center; }
+  .tool-bar button.show-new-conversation:hover {
+    background-color: #ebebeb; }
 
 .last-timestamp {
   font-size: smaller; }