From 368cd2f79adbf6c9f5c9238a6076b71b59799eb6 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Mon, 23 Feb 2015 12:50:07 -0800
Subject: [PATCH] Refactor back button style

Make it easier to reuse these styles.
---
 index.html                     |  4 ++--
 js/views/inbox_view.js         |  4 ++--
 stylesheets/_conversation.scss | 17 -------------
 stylesheets/_global.scss       | 25 +++++++++++++++++++
 stylesheets/_index.scss        | 15 ------------
 stylesheets/manifest.css       | 44 ++++++++++++++++------------------
 6 files changed, 50 insertions(+), 59 deletions(-)
diff --git a/index.html b/index.html
index 2c7e3ad1..3762e8b3 100644
--- a/index.html
+++ b/index.html
@@ -14,8 +14,8 @@
     </head>
     <body class='signal index'>
         <div class='title-bar' id='header'>
-          <div class='back'>
-            <button></button>
+          <div class='new-conversation-title hide'>
+            <button class='back'></button>
             <span class='title-text'>New Message</span>
           </div>
         </div>
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 7ae22908..cbe87ffa 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -24,7 +24,7 @@
             this.$gutter = $('#gutter');
             this.$contacts = $('#contacts');
             this.$fab = this.$el.find('.fab');
-            this.$back = this.$el.find('.back');
+            this.$back = this.$el.find('.new-conversation-title');
 
             this.newConversationView = new Whisper.NewConversationView();
             this.newConversationView.$el.hide().appendTo(this.$gutter);
@@ -40,7 +40,7 @@
         },
         events: {
             'keyup': 'keyup',
-            'click .back button': 'hideCompose',
+            'click .back': 'hideCompose',
             'click .fab': 'showCompose',
             'select #contacts .contact': 'openConversation',
             'open .new-conversation': 'openConversation'
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 507531ba..ba6087a6 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -19,23 +19,6 @@
   opacity: 0.8;
 }
 
-.title-bar {
-  button {
-    height: 36px;
-    line-height: 36px;
-    margin-right: 8px;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    color: white;
-  }
-}
-
-
-button {
-  cursor: pointer;
-}
-
 .timestamp {
   font-size: smaller;
 }
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 2f406633..534bb99f 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -23,6 +23,10 @@ body {
   clear: both;
 }
 
+.hide {
+  display: none;
+}
+
 #header {
   position: fixed;
   top: 0;
@@ -43,6 +47,27 @@ body {
   font-family: $roboto-light;
 }
 
+.title-bar button {
+  width: $header-height;
+  height: $header-height;
+  line-height: $header-height;
+  margin-right: 8px;
+  padding: 0;
+  border: 0;
+  outline: 0;
+}
+
+button { cursor: pointer; }
+
+button.back {
+  float: left;
+  background: $header-color url('/images/back.png') no-repeat center center;
+
+  & + .title-text {
+    text-indent: -$header-height;
+  }
+}
+
 .menu {
   position: relative;
   float: right;
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index 9fa8c83c..5f9f20cb 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -26,21 +26,6 @@ input.new-message {
   outline: 0;
 }
 
-.back {
-  display: none;
-  text-align: center;
-  button {
-    float: left;
-    width: $header-height;
-    height: $header-height;
-    background: $header-color url('/images/back.png') no-repeat center center;
-  }
-
-  span {
-    text-indent: -$header-height;
-  }
-}
-
 .new-conversation {
   .new-group-update-form {
     display: none;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 52dac337..9aa8f127 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -34,6 +34,9 @@ body {
 .clearfix:after {
   clear: both; }
 
+.hide {
+  display: none; }
+
 #header {
   position: fixed;
   top: 0;
@@ -52,6 +55,24 @@ body {
   line-height: 36px;
   font-family: Roboto-Light, "Helvetica Neue", Arial, Helvetica, sans-serif; }
 
+.title-bar button {
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+  margin-right: 8px;
+  padding: 0;
+  border: 0;
+  outline: 0; }
+
+button {
+  cursor: pointer; }
+
+button.back {
+  float: left;
+  background: #f2f2f2 url("/images/back.png") no-repeat center center; }
+  button.back + .title-text {
+    text-indent: -36px; }
+
 .menu {
   position: relative;
   float: right;
@@ -132,17 +153,6 @@ input.new-message {
   margin: 0;
   outline: 0; }
 
-.back {
-  display: none;
-  text-align: center; }
-  .back button {
-    float: left;
-    width: 36px;
-    height: 36px;
-    background: #f2f2f2 url("/images/back.png") no-repeat center center; }
-  .back span {
-    text-indent: -36px; }
-
 .new-conversation .new-group-update-form {
   display: none; }
   .new-conversation .new-group-update-form button.create-group {
@@ -284,18 +294,6 @@ input.new-message {
   font-size: smaller;
   opacity: 0.8; }
 
-.title-bar button {
-  height: 36px;
-  line-height: 36px;
-  margin-right: 8px;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  color: white; }
-
-button {
-  cursor: pointer; }
-
 .timestamp {
   font-size: smaller; }
 
