Refactor back button style

Make it easier to reuse these styles.
10 years ago · 368cd2f79a
parent d0392a3e04
commit 368cd2f79a
6 changed files with 50 additions and 59 deletions
--- 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>
--- 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'
--- 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;
 }
--- 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;
--- 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;
--- 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; }