Add back button to compose view

10 years ago · 6d81011f6a
parent fedfdcdd7e
commit 6d81011f6a
6 changed files with 27 additions and 9 deletions
--- a/images/back.png
+++ b/images/back.png
--- a/index.html
+++ b/index.html
@ -15,6 +15,7 @@
    </head>
    <body class='signal index'>
        <div class='title-bar' id='header'>
+          <button class='back'></button>
        </div>
        <div class='notifications'>
            <div class='notification info'>
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@ -23,6 +23,7 @@
            this.$gutter = $('#gutter');
            this.$contacts = $('#contacts');
            this.$fab = this.$el.find('.fab');
+            this.$back = this.$el.find('.back');

            this.newConversationView = new Whisper.NewConversationView();
            this.newConversationView.$el.hide().appendTo(this.$gutter);
@ -45,6 +46,7 @@
            }.bind(this));
        },
        events: {
+            'click .back': 'hideCompose',
            'click .fab': 'showCompose',
            'keyup input.new-message': 'compose'
        },
@ -53,13 +55,17 @@
            this.$contacts.hide();
            this.newConversationView.$el.show();
            this.newConversationView.reset();
+            this.$back.show();
+        },
+        hideCompose: function() {
+            this.newConversationView.$el.hide();
+            this.$contacts.show();
+            this.$fab.show();
+            this.$back.hide();
        },
        compose: function(e) {
            if (e.keyCode === 27) {
-                // hide compose
-                this.newConversationView.$el.hide();
-                this.$contacts.show();
-                this.$fab.show();
+                this.hideCompose();
            }
        }
    });
--- a/stylesheets/index.scss
+++ b/stylesheets/index.scss
@ -15,6 +15,14 @@ input.new-message {
  width: 100%;
 }

+.back {
+  display: none;
+  float: left;
+  width: 36px;
+  height: 36px;
+  background: $blue url('/images/back.png') no-repeat center center;
+}
+
 .fab {
  z-index: 1;
  position: fixed;
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@ -9,6 +9,13 @@ input.new-message {
  box-sizing: border-box;
  width: 100%; }

+.back {
+  display: none;
+  float: left;
+  width: 36px;
+  height: 36px;
+  background: #2a92e7 url("/images/back.png") no-repeat center center; }
+
 .fab {
  z-index: 1;
  position: fixed;
@ -119,13 +126,11 @@ body {
  .title-bar button {
    height: 36px;
    line-height: 36px;
-    float: right;
    margin-right: 8px;
    padding: 0;
    border: 0;
    outline: 0;
-    color: white;
-    background: transparent; }
+    color: white; }

 button {
  cursor: pointer; }
--- a/stylesheets/view/_conversation.scss
+++ b/stylesheets/view/_conversation.scss
@ -24,13 +24,11 @@ body {
  button {
    height: 36px;
    line-height: 36px;
-    float: right;
    margin-right: 8px;
    padding: 0;
    border: 0;
    outline: 0;
    color: white;
-    background: transparent;
  }
 }