jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Breakout timer rendering into its own view 

Make width and height constant.
This commit is contained in:
lilia 2016-09-23 16:50:03 -07:00
parent bd713352e3
commit e809a0cf8b
6 changed files with 118 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
background.html
View File

@ -157,10 +157,13 @@
<div class='meta'>
<span class='timestamp' data-timestamp={{ timestamp }}></span>
<span class='status hide'></span>
<span class='timer hourglass'><span class='sand'></span></span>
<span class='timer'></span>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='hourglass'>
<span class='hourglass'><span class='sand'></span></span>
</script>
<script type='text/x-tmpl-mustache' id='new-group-update'>
<div class='conversation-header'>
<button class='back'></button>

26
js/views/message_view.js
View File

@ -25,6 +25,23 @@
resend: i18n('resend')
}
});
var TimerView = Whisper.View.extend({
templateName: 'hourglass',
className: 'timer',
initialize: function() {
if (this.model.isExpiring()) {
this.render();
var totalTime = this.model.get('expireTimer') * 1000;
var remainingTime = this.model.msTilExpire();
var elapsed = (totalTime - remainingTime) / totalTime;
this.$('.sand')
.css('animation-duration', remainingTime*0.001 + 's')
.css('transform', 'translateY(' + elapsed*100 + '%)');
this.$el.show();
}
return this;
}
});
Whisper.MessageView = Whisper.View.extend({
tagName: 'li',
@ -134,14 +151,7 @@
}
},
renderExpiring: function() {
if (this.model.isExpiring()) {
var totalTime = this.model.get('expireTimer') * 1000;
var remainingTime = this.model.msTilExpire();
this.$('.hourglass .sand')
.css('animation-duration', remainingTime*0.001 + 's')
.css('transform', 'translateY(' + 100*(1 - (remainingTime / totalTime)) + '%)');
this.$el.addClass('expiring');
}
new TimerView({ model: this.model, el: this.$('.timer') });
},
render: function() {
var contact = this.model.isIncoming() ? this.model.getContact() : null;

6
stylesheets/_conversation.scss
View File

@ -395,10 +395,8 @@ li.entry .error-icon-container {
animation: shake 0.2s linear 3;
}
.timer { display: none; }
.expiring .timer {
display: inline-block;
@include hourglass(13px, 11px, #999);
.timer {
display: none;
}
.control {

11
stylesheets/_hourglass.scss
View File

@ -1,13 +1,12 @@
@mixin hourglass($width, $height, $color) {
@mixin hourglass($color) {
display: inline-block;
position: relative;
vertical-align: text-bottom;
@include color-svg('/images/hourglass_full.svg', transparent);
background-size: 100%;
&, .sand, &:before, &:after {
width: $width;
height: $height;
width: 13px;
height: 11px;
}
.sand, &:before, &:after {
content: '';
@ -25,8 +24,6 @@
@include color-svg('/images/hourglass_empty.svg', $color);
}
@keyframes moveDown {
to {
transform: translateY(100%);
}
to { transform: translateY(100%); }
}
}

9
stylesheets/_themes.scss
View File

@ -170,6 +170,9 @@ $ios-border-color: rgba(0,0,0,0.1);
}
margin-bottom: 1px;
}
.hourglass {
@include hourglass(#999);
}
}
.android {
@ -204,6 +207,12 @@ $ios-border-color: rgba(0,0,0,0.1);
.outgoing .bubble {
background-color: $grey_l;
}
.outgoing .hourglass {
@include hourglass(#999);
}
.incoming .hourglass {
@include hourglass(#fff);
}
.incoming .bubble {
.sender, .content, .body, .meta, a {

121
stylesheets/manifest.css
View File

@ -1224,45 +1224,6 @@ li.entry .error-icon-container {
.message-container .timer,
.message-list .timer {
display: none; }
.message-container .expiring .timer,
.message-list .expiring .timer {
display: inline-block;
display: inline-block;
position: relative;
vertical-align: text-bottom;
-webkit-mask: url("/images/hourglass_full.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: transparent;
background-size: 100%; }
.message-container .expiring .timer, .message-container .expiring .timer .sand, .message-container .expiring .timer:before, .message-container .expiring .timer:after,
.message-list .expiring .timer,
.message-list .expiring .timer .sand,
.message-list .expiring .timer:before,
.message-list .expiring .timer:after {
width: 13px;
height: 11px; }
.message-container .expiring .timer .sand, .message-container .expiring .timer:before, .message-container .expiring .timer:after,
.message-list .expiring .timer .sand,
.message-list .expiring .timer:before,
.message-list .expiring .timer:after {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: 0; }
.message-container .expiring .timer .sand,
.message-list .expiring .timer .sand {
background: #999;
animation: moveDown linear;
animation-fill-mode: forwards; }
.message-container .expiring .timer:after,
.message-list .expiring .timer:after {
-webkit-mask: url("/images/hourglass_empty.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: #999; }
@keyframes moveDown {
to {
transform: translateY(100%); } }
.message-container .control .bubble .content,
.message-list .control .bubble .content {
font-style: italic; }
@ -1530,7 +1491,33 @@ li.entry .error-icon-container {
margin-bottom: 1px; }
.ios .attachment a {
border-radius: 15px; }
.ios .hourglass {
display: inline-block;
position: relative;
-webkit-mask: url("/images/hourglass_full.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: transparent;
background-size: 100%; }
.ios .hourglass, .ios .hourglass .sand, .ios .hourglass:before, .ios .hourglass:after {
width: 13px;
height: 11px; }
.ios .hourglass .sand, .ios .hourglass:before, .ios .hourglass:after {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: 0; }
.ios .hourglass .sand {
background: #999;
animation: moveDown linear;
animation-fill-mode: forwards; }
.ios .hourglass:after {
-webkit-mask: url("/images/hourglass_empty.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: #999; }
@keyframes moveDown {
to {
transform: translateY(100%); } }
.android #header {
background-color: #2090ea;
color: white;
@ -1584,6 +1571,60 @@ li.entry .error-icon-container {
box-shadow: 0 3px 3px -4px black; }
.android .outgoing .bubble {
background-color: #f3f3f3; }
.android .outgoing .hourglass {
display: inline-block;
position: relative;
-webkit-mask: url("/images/hourglass_full.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: transparent;
background-size: 100%; }
.android .outgoing .hourglass, .android .outgoing .hourglass .sand, .android .outgoing .hourglass:before, .android .outgoing .hourglass:after {
width: 13px;
height: 11px; }
.android .outgoing .hourglass .sand, .android .outgoing .hourglass:before, .android .outgoing .hourglass:after {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: 0; }
.android .outgoing .hourglass .sand {
background: #999;
animation: moveDown linear;
animation-fill-mode: forwards; }
.android .outgoing .hourglass:after {
-webkit-mask: url("/images/hourglass_empty.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: #999; }
@keyframes moveDown {
to {
transform: translateY(100%); } }
.android .incoming .hourglass {
display: inline-block;
position: relative;
-webkit-mask: url("/images/hourglass_full.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: transparent;
background-size: 100%; }
.android .incoming .hourglass, .android .incoming .hourglass .sand, .android .incoming .hourglass:before, .android .incoming .hourglass:after {
width: 13px;
height: 11px; }
.android .incoming .hourglass .sand, .android .incoming .hourglass:before, .android .incoming .hourglass:after {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: 0; }
.android .incoming .hourglass .sand {
background: #fff;
animation: moveDown linear;
animation-fill-mode: forwards; }
.android .incoming .hourglass:after {
-webkit-mask: url("/images/hourglass_empty.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: #fff; }
@keyframes moveDown {
to {
transform: translateY(100%); } }
.android .incoming .bubble .sender, .android .incoming .bubble .content, .android .incoming .bubble .body, .android .incoming .bubble .meta, .android .incoming .bubble a {
color: white; }
.android .incoming .bubble .sender::selection, .android .incoming .bubble .content::selection, .android .incoming .bubble .body::selection, .android .incoming .bubble .meta::selection, .android .incoming .bubble a::selection {