thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Style elements for compose flow

Browse source
This commit is contained in:
lilia 2015-01-25 21:44:53 -10:00
parent 17deb69a91
commit fedfdcdd7e
7 changed files with 111 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
images/pencil.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 272 B

9
index.html
View file

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

21
js/views/inbox_view.js
View file

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

65
js/views/new_conversation_view.js
View file

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

28
stylesheets/index.scss
View file

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

44
stylesheets/manifest.css
View file

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

22
stylesheets/view/_conversation.scss
View file

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