Add back button to compose view
This commit is contained in:
parent
fedfdcdd7e
commit
6d81011f6a
6 changed files with 27 additions and 9 deletions
BIN
images/back.png
Normal file
BIN
images/back.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 240 B |
|
@ -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'>
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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; }
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue