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

View file

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

View file

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

View file

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

View file

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