Style elements for compose flow
This commit is contained in:
lilia
parent
17deb69a91
commit
fedfdcdd7e
Binary file not shown.
|
After Width: | Height: | Size: 272 B |
|
|
@ -15,7 +15,6 @@
|
|||
</head>
|
||||
<body class='signal index'>
|
||||
<div class='title-bar' id='header'>
|
||||
<input type='text' class='new-message' placeholder="Name or phone number" />
|
||||
</div>
|
||||
<div class='notifications'>
|
||||
<div class='notification info'>
|
||||
|
|
@ -23,6 +22,7 @@
|
|||
</div>
|
||||
<div id='gutter' class='gutter'>
|
||||
<div id='contacts'></div>
|
||||
<span class='fab'></span>
|
||||
</div>
|
||||
<script type="text/x-tmpl-mustache" id="phone-number">
|
||||
<div class="phone-input-form">
|
||||
|
|
@ -47,8 +47,11 @@
|
|||
</div>
|
||||
</script>
|
||||
<script type='text/x-tmpl-mustache' id='new-conversation'>
|
||||
<div class='new-contact'></div>
|
||||
<div class='contacts'></div>
|
||||
<input type='text' class='new-message' placeholder="Name or phone number" />
|
||||
<div class='results'>
|
||||
<div class='new-contact'></div>
|
||||
<div class='contacts'></div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/javascript" src="js/components.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
initialize: function () {
|
||||
this.$gutter = $('#gutter');
|
||||
this.$contacts = $('#contacts');
|
||||
this.$fab = this.$el.find('.fab');
|
||||
|
||||
this.newConversationView = new Whisper.NewConversationView();
|
||||
this.newConversationView.$el.hide().appendTo(this.$gutter);
|
||||
|
|
@ -44,14 +45,22 @@
|
|||
}.bind(this));
|
||||
},
|
||||
events: {
|
||||
'change input.new-message': 'compose',
|
||||
'click .fab': 'showCompose',
|
||||
'keyup input.new-message': 'compose'
|
||||
},
|
||||
compose: function() {
|
||||
var query = this.$el.find('input.new-message').val();
|
||||
this.$contacts.toggle(!query.length);
|
||||
this.newConversationView.$el.toggle(!!query.length);
|
||||
this.newConversationView.filterContacts(query);
|
||||
showCompose: function() {
|
||||
this.$fab.hide();
|
||||
this.$contacts.hide();
|
||||
this.newConversationView.$el.show();
|
||||
this.newConversationView.reset();
|
||||
},
|
||||
compose: function(e) {
|
||||
if (e.keyCode === 27) {
|
||||
// hide compose
|
||||
this.newConversationView.$el.hide();
|
||||
this.$contacts.show();
|
||||
this.$fab.show();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -41,42 +41,53 @@ var Whisper = Whisper || {};
|
|||
Whisper.NewConversationView = Backbone.View.extend({
|
||||
className: 'new-conversation',
|
||||
initialize: function() {
|
||||
this.template = $('#new-conversation').html();
|
||||
Mustache.parse(this.template);
|
||||
this.$el.html($(Mustache.render(this.template)));
|
||||
this.input = new Whisper.PhoneInputView({
|
||||
el: this.$el.find('div.phone-number-input')
|
||||
});
|
||||
this.template = $('#new-conversation').html();
|
||||
Mustache.parse(this.template);
|
||||
this.$el.html($(Mustache.render(this.template)));
|
||||
this.$input = this.$el.find('input.new-message');
|
||||
|
||||
this.typeahead_collection = new typeahead();
|
||||
this.typeahead_view = new Whisper.ConversationListView({
|
||||
collection : new Whisper.ConversationCollection(),
|
||||
className: 'typeahead'
|
||||
});
|
||||
this.typeahead_collection = new typeahead();
|
||||
this.typeahead_view = new Whisper.ConversationListView({
|
||||
collection : new Whisper.ConversationCollection(),
|
||||
className: 'typeahead'
|
||||
});
|
||||
|
||||
this.typeahead_view.$el.appendTo(this.$el.find('.contacts'));
|
||||
this.typeahead_collection.fetch();
|
||||
this.typeahead_view.$el.appendTo(this.$el.find('.contacts'));
|
||||
this.typeahead_collection.fetch();
|
||||
|
||||
this.new_contact = new Whisper.ConversationListItemView({
|
||||
model: new Whisper.Conversation({
|
||||
active_at: null
|
||||
})
|
||||
});
|
||||
this.new_contact.render().$el.hide();
|
||||
this.$el.find('.new-contact').append(this.new_contact.el);
|
||||
this.new_contact = new Whisper.ConversationListItemView({
|
||||
model: new Whisper.Conversation({
|
||||
active_at: null
|
||||
})
|
||||
}).render();
|
||||
this.$el.find('.new-contact').append(this.new_contact.el);
|
||||
},
|
||||
|
||||
filterContacts: function(query) {
|
||||
if (this.maybeNumber(query)) {
|
||||
this.new_contact.model.set('name', query);
|
||||
this.new_contact.$el.show();
|
||||
} else {
|
||||
this.new_contact.$el.hide();
|
||||
}
|
||||
events: {
|
||||
'change input.new-message': 'filterContacts',
|
||||
'keyup input.new-message': 'filterContacts'
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
this.new_contact.$el.hide();
|
||||
this.$input.val('').focus();
|
||||
this.typeahead_view.collection.reset(this.typeahead_collection.models);
|
||||
},
|
||||
|
||||
filterContacts: function() {
|
||||
var query = this.$input.val();
|
||||
if (query.length) {
|
||||
if (this.maybeNumber(query)) {
|
||||
this.new_contact.model.set('name', query);
|
||||
this.new_contact.$el.show();
|
||||
} else {
|
||||
this.new_contact.$el.hide();
|
||||
}
|
||||
this.typeahead_view.collection.reset(
|
||||
this.typeahead_collection.typeahead(query)
|
||||
);
|
||||
} else {
|
||||
this.reset();
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,34 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
input.new-message {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fab {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: 22px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border: 0;
|
||||
border-radius: (60px / 2);
|
||||
outline: 0;
|
||||
font: 300 36px $roboto;
|
||||
color: white;
|
||||
background: $blue url('/images/pencil.png') no-repeat center center;
|
||||
box-shadow: 0 8px 8px -8px rgba(darken($blue, 50%), 0.8);
|
||||
transition: box-shadow 0.33s, transform 0.33s, background 0.33s;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($blue, 3%);
|
||||
box-shadow: 0 8px 18px -8px rgba(darken($blue, 50%), 0.9);
|
||||
transform: translate3d(0, -1px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.new-contact,
|
||||
.typeahead {
|
||||
.last-message, .last-timestamp {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,30 @@
|
|||
.contact .checkbox {
|
||||
display: none; }
|
||||
|
||||
input.new-message {
|
||||
box-sizing: border-box;
|
||||
width: 100%; }
|
||||
|
||||
.fab {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: 22px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border: 0;
|
||||
border-radius: 30px;
|
||||
outline: 0;
|
||||
font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
color: white;
|
||||
background: #2a92e7 url("/images/pencil.png") no-repeat center center;
|
||||
box-shadow: 0 8px 8px -8px rgba(2, 10, 16, 0.8);
|
||||
transition: box-shadow 0.33s, transform 0.33s, background 0.33s; }
|
||||
.fab:hover {
|
||||
background-color: #1c8be5;
|
||||
box-shadow: 0 8px 18px -8px rgba(2, 10, 16, 0.9);
|
||||
transform: translate3d(0, -1px, 0); }
|
||||
|
||||
.new-contact .last-message, .new-contact .last-timestamp,
|
||||
.typeahead .last-message,
|
||||
.typeahead .last-timestamp {
|
||||
|
|
@ -103,26 +127,6 @@ body {
|
|||
color: white;
|
||||
background: transparent; }
|
||||
|
||||
.fab {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: 22px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border: 0;
|
||||
border-radius: 30px;
|
||||
outline: 0;
|
||||
font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
color: white;
|
||||
background: #2a92e7;
|
||||
box-shadow: 0 8px 8px -8px rgba(2, 10, 16, 0.8);
|
||||
transition: box-shadow 0.33s, transform 0.33s, background 0.33s; }
|
||||
.fab:hover {
|
||||
background: #1c8be5;
|
||||
box-shadow: 0 8px 18px -8px rgba(2, 10, 16, 0.9);
|
||||
transform: translate3d(0, -1px, 0); }
|
||||
|
||||
button {
|
||||
cursor: pointer; }
|
||||
|
||||
|
|
|
|||
|
|
@ -34,28 +34,6 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.fab {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: 22px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border: 0;
|
||||
border-radius: (60px / 2);
|
||||
outline: 0;
|
||||
font: 300 36px $roboto;
|
||||
color: white;
|
||||
background: $blue;
|
||||
box-shadow: 0 8px 8px -8px rgba(darken($blue, 50%), 0.8);
|
||||
transition: box-shadow 0.33s, transform 0.33s, background 0.33s;
|
||||
|
||||
&:hover {
|
||||
background: darken($blue, 3%);
|
||||
box-shadow: 0 8px 18px -8px rgba(darken($blue, 50%), 0.9);
|
||||
transform: translate3d(0, -1px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
Loading…
Reference in New Issue