oxen-io/session-desktop
1
0
Fork 0
mirror of https://github.com/oxen-io/session-desktop.git synced 2023-12-14 02:12:57 +01:00
Code Issues Projects Releases Wiki Activity

Hourglass can start at any percentage

Browse source 
This breaks the css-purity of our mixin but is necessary in order to
apply the initial offset of the hourglass animation dynamically, since
jquery can't manipulate arbitrary css on psuedo elements.
This commit is contained in:
lilia 2016-09-23 16:19:29 -07:00
parent 5f92ccd524
commit bd713352e3
4 changed files with 19 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
background.html
View file

@ -157,7 +157,7 @@
<div class='meta'>
<span class='timestamp' data-timestamp={{ timestamp }}></span>
<span class='status hide'></span>
<span class='timer hourglass'></span>
<span class='timer hourglass'><span class='sand'></span></span>
</div>
</div>
</script>

6
js/views/message_view.js
View file

@ -135,7 +135,11 @@
},
renderExpiring: function() {
if (this.model.isExpiring()) {
this.$('.hourglass').css('animation-duration', this.model.msTilExpire()*0.001 + 's');
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');
}
},

14
stylesheets/_hourglass.scss
View file

@ -5,32 +5,28 @@
@include color-svg('/images/hourglass_full.svg', transparent);
background-size: 100%;
&, &:before, &:after {
&, .sand, &:before, &:after {
width: $width;
height: $height;
}
&:before, &:after {
.sand, &:before, &:after {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
&:before {
.sand {
background: $color;
animation: moveDown 5s linear;
animation-duration: inherit;
animation: moveDown linear;
animation-fill-mode: forwards;
}
&:after {
@include color-svg('/images/hourglass_empty.svg', $color);
}
@keyframes moveDown {
from {
transform: translateY(0);
}
to {
transform: translateY($height);
transform: translateY(100%);
}
}
}

17
stylesheets/manifest.css
View file

@ -1234,13 +1234,15 @@ li.entry .error-icon-container {
-webkit-mask-size: 100%;
background-color: transparent;
background-size: 100%; }
.message-container .expiring .timer, .message-container .expiring .timer:before, .message-container .expiring .timer:after,
.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:before, .message-container .expiring .timer:after,
.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: '';
@ -1248,11 +1250,10 @@ li.entry .error-icon-container {
position: absolute;
top: 0;
left: 0; }
.message-container .expiring .timer:before,
.message-list .expiring .timer:before {
.message-container .expiring .timer .sand,
.message-list .expiring .timer .sand {
background: #999;
animation: moveDown 5s linear;
animation-duration: inherit;
animation: moveDown linear;
animation-fill-mode: forwards; }
.message-container .expiring .timer:after,
.message-list .expiring .timer:after {
@ -1260,10 +1261,8 @@ li.entry .error-icon-container {
-webkit-mask-size: 100%;
background-color: #999; }
@keyframes moveDown {
from {
transform: translateY(0); }
to {
transform: translateY(11px); } }
transform: translateY(100%); } }
.message-container .control .bubble .content,
.message-list .control .bubble .content {
font-style: italic; }