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

Add clock svg style

Browse source
This commit is contained in:
lilia 2016-09-26 23:15:20 -07:00
parent 7331d967d2
commit 4cd2c03687
11 changed files with 110 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
_locales/en/messages.json
View file

@ -346,5 +346,19 @@
"unblockToSend": {
"message": "Unblock this contact to send a message.",
"description": "Brief message shown when trying to message a blocked number"
},
"changedTheTimer": {
"message": "$name$ set the timer to $time$.",
"description": "Message displayed when someone changes the message expiration timer in a conversation.",
"placeholders": {
"name": {
"content": "$1",
"example": "Bob"
},
"time": {
"content": "$2",
"example": "10m"
}
}
}
}

3
background.html
View file

@ -164,6 +164,9 @@
<script type='text/x-tmpl-mustache' id='hourglass'>
<span class='hourglass'><span class='sand'></span></span>
</script>
<script type='text/x-tmpl-mustache' id='expirationTimerUpdate'>
<span class='content'>{{ content }}</span>
</script>
<script type='text/x-tmpl-mustache' id='new-group-update'>
<div class='conversation-header'>
<button class='back'></button>

1
images/clock.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M30 2H18v4h12V2zm-8 26h4V16h-4v12zm16.05-13.23l2.85-2.85c-.86-1.03-1.8-1.97-2.83-2.83l-2.85 2.85C32.15 9.48 28.24 8 23.99 8 14.04 8 6 16.06 6 26s8.04 18 17.99 18S42 35.94 42 26c0-4.25-1.48-8.15-3.95-11.23zM24 40c-7.73 0-14-6.27-14-14s6.27-14 14-14 14 6.27 14 14-6.27 14-14 14z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 377 B

15
js/models/conversations.js
View file

@ -166,6 +166,21 @@
}.bind(this));
},
addExpirationTimerUpdate: function(source, time) {
var now = Date.now();
var message = this.messageCollection.add({
conversationId : this.id,
type : 'expirationTimerUpdate',
sent_at : now,
received_at : now,
timerUpdate : {
expireTimer : time,
source : source
}
});
message.save();
},
isSearchable: function() {
return !this.get('left') || !!this.get('lastMessage');
},

9
js/models/messages.js
View file

@ -126,6 +126,15 @@
}
return c;
},
getModelForExpirationTimerUpdate: function() {
var id = this.get('timerUpdate').source;
var c = ConversationController.get(id);
if (!c) {
c = ConversationController.create({ id: id, type: 'private' });
c.fetch();
}
return c;
},
isOutgoing: function() {
return this.get('type') === 'outgoing';
},

29
js/views/message_list_view.js
View file

@ -43,21 +43,24 @@
this.$el.scrollTop(this.el.scrollHeight - this.bottomOffset);
},
addOne: function(model) {
if (this.itemView) {
var view = new this.itemView({model: model}).render();
var view;
if (model.get('type') === 'expirationTimerUpdate') {
view = new Whisper.ExpirationTimerUpdateView({model: model}).render();
} else {
view = new this.itemView({model: model}).render();
this.listenTo(view, 'beforeChangeHeight', this.measureScrollPosition);
this.listenTo(view, 'afterChangeHeight', this.scrollToBottomIfNeeded);
if (this.collection.indexOf(model) === this.collection.length - 1) {
// add to the bottom.
this.$el.append(view.el);
this.$el.scrollTop(this.el.scrollHeight); // TODO: Avoid scrolling if user has manually scrolled up?
this.measureScrollPosition();
} else {
// add to the top.
this.measureScrollPosition();
this.$el.prepend(view.el);
this.scrollToBottomIfNeeded();
}
}
if (this.collection.indexOf(model) === this.collection.length - 1) {
// add to the bottom.
this.$el.append(view.el);
this.$el.scrollTop(this.el.scrollHeight); // TODO: Avoid scrolling if user has manually scrolled up?
this.measureScrollPosition();
} else {
// add to the top.
this.measureScrollPosition();
this.$el.prepend(view.el);
this.scrollToBottomIfNeeded();
}
},
});

17
js/views/message_view.js
View file

@ -43,6 +43,23 @@
}
});
Whisper.ExpirationTimerUpdateView = Whisper.View.extend({
tagName: 'li',
className: 'expirationTimerUpdate advisory',
templateName: 'expirationTimerUpdate',
initialize: function() {
this.conversation = this.model.getModelForExpirationTimerUpdate();
this.listenTo(this.conversation, 'change', this.render);
},
render_attributes: function() {
return {
content: i18n('changedTheTimer',
this.conversation.getTitle(),
this.model.get('timerUpdate').time)
};
}
});
Whisper.MessageView = Whisper.View.extend({
tagName: 'li',
templateName: 'message',

10
stylesheets/_conversation.scss
View file

@ -185,6 +185,16 @@
.error-icon {
cursor: pointer;
}
.advisory {
text-align: center;
.content {
display: inline-block;
padding: 5px 10px;
background: #fff5c4;
border-radius: $border-radius;
}
}
}
li.entry .error-icon-container {
position: absolute;

3
stylesheets/_global.scss
View file

@ -120,6 +120,9 @@ button.back {
}
}
.clock {
@include header-icon-black('/images/clock.svg');
}
.inactive .menu .hamburger {
@include header-icon-black('/images/menu.svg');
}

6
stylesheets/_themes.scss
View file

@ -224,5 +224,11 @@ $ios-border-color: rgba(0,0,0,0.1);
}
}
}
.clock {
@include header-icon-white('/images/clock.svg');
}
.inactive .clock {
@include header-icon-black('/images/clock.svg');
}
}

16
stylesheets/manifest.css
View file

@ -117,6 +117,15 @@ button.back {
vertical-align: middle;
display: table-cell; }
.clock {
-webkit-mask: url("/images/clock.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(0, 0, 0, 0.5); }
.clock:focus, .clock:hover {
-webkit-mask: url("/images/clock.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: black; }
.inactive .menu .hamburger {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
@ -1036,6 +1045,13 @@ input.search {
.message-list .error-icon {
cursor: pointer; }
.message-list .advisory {
text-align: center; }
.message-list .advisory .content {
display: inline-block;
padding: 5px 10px;
background: #fff5c4;
border-radius: 5px; }
li.entry .error-icon-container {
position: absolute;