Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Fade out ephemeral messages

Browse Source
This commit is contained in:
JC Brand 2019-06-12 06:56:20 +02:00
parent 91882e2b23
commit 73fd3d6a5f
3 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
sass/_core.scss
View File

@ -385,8 +385,6 @@ body.converse-fullscreen {
75% {background-color: rgba(255, 181, 162, 0.25);} 75% {background-color: rgba(255, 181, 162, 0.25);}
100% {background-color: transparent;} 100% {background-color: transparent;}
} }
@keyframes fadein { @keyframes fadein {
0% { opacity: 0 } 0% { opacity: 0 }
100% { opacity: 1 } 100% { opacity: 1 }
@ -395,15 +393,14 @@ body.converse-fullscreen {
0% { opacity: 0 } 0% { opacity: 0 }
100% { opacity: 1 } 100% { opacity: 1 }
} }
@-webkit-keyframes fadeOut { @-webkit-keyframes fadeOut {
0% { opacity: 1; visibility: visible; } 0% { opacity: 1; visibility: visible; }
100% { opacity: 0; visibility: hidden; } 100% { opacity: 0; visibility: hidden; }
} }
@keyframes fadeOut { @keyframes fadeOut {
0% { opacity: 1; visibility: visible; } 0% { opacity: 1; visibility: visible; }
100% { opacity: 0; visibility: hidden; } 100% { opacity: 0; visibility: hidden; }
} }
.fade-in { .fade-in {
@include fade-in; @include fade-in;
@ -423,10 +420,10 @@ body.converse-fullscreen {
} }
.fade-out { .fade-out {
animation-duration: 1s; animation-duration: 0.5s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-name: fadeOut; animation-name: fadeOut;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }
.collapsed { .collapsed {

3
src/converse-chatboxviews.js
View File

@ -72,7 +72,8 @@ converse.plugins.add('converse-chatboxviews', {
// Refer to docs/source/configuration.rst for explanations of these // Refer to docs/source/configuration.rst for explanations of these
// configuration settings. // configuration settings.
_converse.api.settings.update({ _converse.api.settings.update({
'theme': 'default', 'animate': true,
'theme': 'default'
}); });
_converse.ViewWithAvatar = Backbone.NativeView.extend(AvatarMixin); _converse.ViewWithAvatar = Backbone.NativeView.extend(AvatarMixin);

17
src/converse-message-view.js
View File

@ -97,7 +97,7 @@ converse.plugins.add('converse-message-view', {
this.debouncedRender(); this.debouncedRender();
}); });
this.model.on('change', this.onChanged, this); this.model.on('change', this.onChanged, this);
this.model.on('destroy', this.remove, this); this.model.on('destroy', this.fadeOut, this);
}, },
async render () { 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 () { onMessageEdited () {
if (this.model.get('is_archived')) { if (this.model.get('is_archived')) {
return; 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); u.addClass('onload', this.el);
}, },