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>
|
</head>
|
||||||
<body class='signal index'>
|
<body class='signal index'>
|
||||||
<div class='title-bar' id='header'>
|
<div class='title-bar' id='header'>
|
||||||
|
<button class='back'></button>
|
||||||
</div>
|
</div>
|
||||||
<div class='notifications'>
|
<div class='notifications'>
|
||||||
<div class='notification info'>
|
<div class='notification info'>
|
||||||
|
|
|
@ -23,6 +23,7 @@
|
||||||
this.$gutter = $('#gutter');
|
this.$gutter = $('#gutter');
|
||||||
this.$contacts = $('#contacts');
|
this.$contacts = $('#contacts');
|
||||||
this.$fab = this.$el.find('.fab');
|
this.$fab = this.$el.find('.fab');
|
||||||
|
this.$back = this.$el.find('.back');
|
||||||
|
|
||||||
this.newConversationView = new Whisper.NewConversationView();
|
this.newConversationView = new Whisper.NewConversationView();
|
||||||
this.newConversationView.$el.hide().appendTo(this.$gutter);
|
this.newConversationView.$el.hide().appendTo(this.$gutter);
|
||||||
|
@ -45,6 +46,7 @@
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
},
|
},
|
||||||
events: {
|
events: {
|
||||||
|
'click .back': 'hideCompose',
|
||||||
'click .fab': 'showCompose',
|
'click .fab': 'showCompose',
|
||||||
'keyup input.new-message': 'compose'
|
'keyup input.new-message': 'compose'
|
||||||
},
|
},
|
||||||
|
@ -53,13 +55,17 @@
|
||||||
this.$contacts.hide();
|
this.$contacts.hide();
|
||||||
this.newConversationView.$el.show();
|
this.newConversationView.$el.show();
|
||||||
this.newConversationView.reset();
|
this.newConversationView.reset();
|
||||||
|
this.$back.show();
|
||||||
|
},
|
||||||
|
hideCompose: function() {
|
||||||
|
this.newConversationView.$el.hide();
|
||||||
|
this.$contacts.show();
|
||||||
|
this.$fab.show();
|
||||||
|
this.$back.hide();
|
||||||
},
|
},
|
||||||
compose: function(e) {
|
compose: function(e) {
|
||||||
if (e.keyCode === 27) {
|
if (e.keyCode === 27) {
|
||||||
// hide compose
|
this.hideCompose();
|
||||||
this.newConversationView.$el.hide();
|
|
||||||
this.$contacts.show();
|
|
||||||
this.$fab.show();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -15,6 +15,14 @@ input.new-message {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
display: none;
|
||||||
|
float: left;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background: $blue url('/images/back.png') no-repeat center center;
|
||||||
|
}
|
||||||
|
|
||||||
.fab {
|
.fab {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
@ -9,6 +9,13 @@ input.new-message {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
|
|
||||||
|
.back {
|
||||||
|
display: none;
|
||||||
|
float: left;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background: #2a92e7 url("/images/back.png") no-repeat center center; }
|
||||||
|
|
||||||
.fab {
|
.fab {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
@ -119,13 +126,11 @@ body {
|
||||||
.title-bar button {
|
.title-bar button {
|
||||||
height: 36px;
|
height: 36px;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
float: right;
|
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
color: white;
|
color: white; }
|
||||||
background: transparent; }
|
|
||||||
|
|
||||||
button {
|
button {
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
|
|
|
@ -24,13 +24,11 @@ body {
|
||||||
button {
|
button {
|
||||||
height: 36px;
|
height: 36px;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
float: right;
|
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
color: white;
|
color: white;
|
||||||
background: transparent;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue