Commit 73fd3d6a authored by JC Brand's avatar JC Brand

Fade out ephemeral messages

parent 91882e2b
......@@ -385,8 +385,6 @@ body.converse-fullscreen {
75% {background-color: rgba(255, 181, 162, 0.25);}
100% {background-color: transparent;}
}
@keyframes fadein {
0% { opacity: 0 }
100% { opacity: 1 }
......@@ -395,15 +393,14 @@ body.converse-fullscreen {
0% { opacity: 0 }
100% { opacity: 1 }
}
@-webkit-keyframes fadeOut {
0% { opacity: 1; visibility: visible; }
100% { opacity: 0; visibility: hidden; }
}
0% { opacity: 1; visibility: visible; }
100% { opacity: 0; visibility: hidden; }
}
@keyframes fadeOut {
0% { opacity: 1; visibility: visible; }
100% { opacity: 0; visibility: hidden; }
}
0% { opacity: 1; visibility: visible; }
100% { opacity: 0; visibility: hidden; }
}
.fade-in {
@include fade-in;
......@@ -423,10 +420,10 @@ body.converse-fullscreen {
}
.fade-out {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-name: fadeOut;
animation-timing-function: ease-in-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-name: fadeOut;
animation-timing-function: ease-in-out;
}
.collapsed {
......
......@@ -72,7 +72,8 @@ converse.plugins.add('converse-chatboxviews', {
// Refer to docs/source/configuration.rst for explanations of these
// configuration settings.
_converse.api.settings.update({
'theme': 'default',
'animate': true,
'theme': 'default'
});
_converse.ViewWithAvatar = Backbone.NativeView.extend(AvatarMixin);
......
......@@ -97,7 +97,7 @@ converse.plugins.add('converse-message-view', {
this.debouncedRender();
});
this.model.on('change', this.onChanged, this);
this.model.on('destroy', this.remove, this);
this.model.on('destroy', this.fadeOut, this);
},
async render () {
......@@ -140,11 +140,24 @@ converse.plugins.add('converse-message-view', {
}
},
fadeOut () {
if (_converse.animate) {
this.el.addEventListener('animationend', () => this.remove(), {'once': true});
u.addClass('fade-out', this.el);
} else {
this.remove();
}
},
onMessageEdited () {
if (this.model.get('is_archived')) {
return;
}
this.el.addEventListener('animationend', () => u.removeClass('onload', this.el));
this.el.addEventListener(
'animationend',
() => u.removeClass('onload', this.el),
{'once': true}
);
u.addClass('onload', this.el);
},
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment