Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
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);}
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 {

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
// configuration settings.
_converse.api.settings.update({
'theme': 'default',
'animate': true,
'theme': 'default'
});
_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.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);
},