mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
Hourglass can start at any percentage
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:
parent
5f92ccd524
commit
bd713352e3
|
@ -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>
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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; }
|
||||
|
|
Loading…
Reference in a new issue