Add back button to compose view

This commit is contained in:
lilia 2015-01-25 21:55:32 -10:00
parent fedfdcdd7e
commit 6d81011f6a
6 changed files with 27 additions and 9 deletions

BIN
images/back.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 240 B

View file

@ -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'>

View file

@ -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();
}
}
});

View file

@ -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;

View file

@ -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; }

View file

@ -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;
}
}