Avoid flashing when opening chat room.
This commit is contained in:
parent
3f94028377
commit
fb35ed844a
|
@ -1120,22 +1120,6 @@
|
|||
#conversejs {
|
||||
width: 100%;
|
||||
width: 100vw; } }
|
||||
#converse-embedded-chat .fade-in,
|
||||
#conversejs .fade-in {
|
||||
opacity: 0;
|
||||
/* make things invisible upon start */
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-name: fadein;
|
||||
animation-name: fadein;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 1s;
|
||||
-moz-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-timing-function: ease;
|
||||
-moz-animation-timing-function: ease;
|
||||
animation-timing-function: ease; }
|
||||
#converse-embedded-chat ::-webkit-input-placeholder,
|
||||
#conversejs ::-webkit-input-placeholder {
|
||||
/* Chrome/Opera/Safari */
|
||||
|
@ -1181,26 +1165,41 @@
|
|||
opacity: 0; }
|
||||
100% {
|
||||
opacity: 1; } }
|
||||
#converse-embedded-chat .visible,
|
||||
#conversejs .visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
#converse-embedded-chat .fade-in,
|
||||
#conversejs .fade-in {
|
||||
opacity: 0;
|
||||
/* make things invisible upon start */
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-name: fadein;
|
||||
animation-name: fadein;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 350ms;
|
||||
-moz-animation-duration: 350ms;
|
||||
animation-duration: 350ms;
|
||||
-webkit-animation-duration: 750;
|
||||
-moz-animation-duration: 750;
|
||||
animation-duration: 750;
|
||||
-webkit-animation-timing-function: ease;
|
||||
-moz-animation-timing-function: ease;
|
||||
animation-timing-function: ease; }
|
||||
#converse-embedded-chat .visible,
|
||||
#conversejs .visible {
|
||||
opacity: 0;
|
||||
/* make things invisible upon start */
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-name: fadein;
|
||||
animation-name: fadein;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 500ms;
|
||||
-moz-animation-duration: 500ms;
|
||||
animation-duration: 500ms;
|
||||
-webkit-animation-timing-function: ease;
|
||||
-moz-animation-timing-function: ease;
|
||||
animation-timing-function: ease; }
|
||||
#converse-embedded-chat .hidden,
|
||||
#conversejs .hidden {
|
||||
opacity: 0;
|
||||
display: none; }
|
||||
opacity: 0; }
|
||||
#converse-embedded-chat .collapsed,
|
||||
#conversejs .collapsed {
|
||||
height: 0 !important;
|
||||
|
@ -1935,9 +1934,9 @@
|
|||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 1s;
|
||||
-moz-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-duration: 750;
|
||||
-moz-animation-duration: 750;
|
||||
animation-duration: 750;
|
||||
-webkit-animation-timing-function: ease;
|
||||
-moz-animation-timing-function: ease;
|
||||
animation-timing-function: ease;
|
||||
|
|
|
@ -1120,22 +1120,6 @@
|
|||
#conversejs {
|
||||
width: 100%;
|
||||
width: 100vw; } }
|
||||
#converse-embedded-chat .fade-in,
|
||||
#conversejs .fade-in {
|
||||
opacity: 0;
|
||||
/* make things invisible upon start */
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-name: fadein;
|
||||
animation-name: fadein;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 1s;
|
||||
-moz-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-timing-function: ease;
|
||||
-moz-animation-timing-function: ease;
|
||||
animation-timing-function: ease; }
|
||||
#converse-embedded-chat ::-webkit-input-placeholder,
|
||||
#conversejs ::-webkit-input-placeholder {
|
||||
/* Chrome/Opera/Safari */
|
||||
|
@ -1181,26 +1165,41 @@
|
|||
opacity: 0; }
|
||||
100% {
|
||||
opacity: 1; } }
|
||||
#converse-embedded-chat .visible,
|
||||
#conversejs .visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
#converse-embedded-chat .fade-in,
|
||||
#conversejs .fade-in {
|
||||
opacity: 0;
|
||||
/* make things invisible upon start */
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-name: fadein;
|
||||
animation-name: fadein;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 350ms;
|
||||
-moz-animation-duration: 350ms;
|
||||
animation-duration: 350ms;
|
||||
-webkit-animation-duration: 750;
|
||||
-moz-animation-duration: 750;
|
||||
animation-duration: 750;
|
||||
-webkit-animation-timing-function: ease;
|
||||
-moz-animation-timing-function: ease;
|
||||
animation-timing-function: ease; }
|
||||
#converse-embedded-chat .visible,
|
||||
#conversejs .visible {
|
||||
opacity: 0;
|
||||
/* make things invisible upon start */
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-name: fadein;
|
||||
animation-name: fadein;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 500ms;
|
||||
-moz-animation-duration: 500ms;
|
||||
animation-duration: 500ms;
|
||||
-webkit-animation-timing-function: ease;
|
||||
-moz-animation-timing-function: ease;
|
||||
animation-timing-function: ease; }
|
||||
#converse-embedded-chat .hidden,
|
||||
#conversejs .hidden {
|
||||
opacity: 0;
|
||||
display: none; }
|
||||
opacity: 0; }
|
||||
#converse-embedded-chat .collapsed,
|
||||
#conversejs .collapsed {
|
||||
height: 0 !important;
|
||||
|
@ -1425,9 +1424,9 @@ body {
|
|||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 1s;
|
||||
-moz-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-duration: 750;
|
||||
-moz-animation-duration: 750;
|
||||
animation-duration: 750;
|
||||
-webkit-animation-timing-function: ease;
|
||||
-moz-animation-timing-function: ease;
|
||||
animation-timing-function: ease;
|
||||
|
@ -2021,9 +2020,9 @@ body {
|
|||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 1s;
|
||||
-moz-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-duration: 750;
|
||||
-moz-animation-duration: 750;
|
||||
animation-duration: 750;
|
||||
-webkit-animation-timing-function: ease;
|
||||
-moz-animation-timing-function: ease;
|
||||
animation-timing-function: ease;
|
||||
|
@ -2418,9 +2417,9 @@ body {
|
|||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 1s;
|
||||
-moz-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-duration: 750;
|
||||
-moz-animation-duration: 750;
|
||||
animation-duration: 750;
|
||||
-webkit-animation-timing-function: ease;
|
||||
-moz-animation-timing-function: ease;
|
||||
animation-timing-function: ease;
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
opacity:0; /* make things invisible upon start */
|
||||
@include animation-name(fadein);
|
||||
@include animation-fill-mode(forwards);
|
||||
@include animation-duration(1s);
|
||||
@include animation-duration(750);
|
||||
@include animation-timing-function(ease);
|
||||
}
|
||||
|
||||
|
@ -28,10 +28,6 @@
|
|||
width: 100vw;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
@include fade-in;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
color: $subdued-color;
|
||||
}
|
||||
|
@ -73,14 +69,18 @@
|
|||
100% { opacity: 1 }
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
@include fade-in;
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
opacity:0; /* make things invisible upon start */
|
||||
@include animation-name(fadein);
|
||||
@include animation-fill-mode(forwards);
|
||||
@include animation-duration(350ms);
|
||||
@include animation-duration(500ms);
|
||||
@include animation-timing-function(ease);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
|
|
|
@ -917,8 +917,11 @@
|
|||
},
|
||||
|
||||
focus () {
|
||||
this.el.querySelector('.chat-textarea').focus();
|
||||
_converse.emit('chatBoxFocused', this);
|
||||
const textarea_el = this.el.querySelector('.chat-textarea');
|
||||
if (!_.isNull(textarea_el)) {
|
||||
textarea_el.focus();
|
||||
_converse.emit('chatBoxFocused', this);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
|
@ -940,8 +943,9 @@
|
|||
}
|
||||
},
|
||||
|
||||
show (focus) {
|
||||
if (u.isVisible(this.el) && this.$el.css('opacity') === "1") {
|
||||
_show (focus) {
|
||||
/* Inner show method that gets debounced */
|
||||
if (u.isVisible(this.el)) {
|
||||
if (focus) { this.focus(); }
|
||||
return;
|
||||
}
|
||||
|
@ -952,6 +956,18 @@
|
|||
});
|
||||
},
|
||||
|
||||
show (focus) {
|
||||
if (_.isUndefined(this.debouncedShow)) {
|
||||
/* We wrap the method in a debouncer and set it on the
|
||||
* instance, so that we have it debounced per instance.
|
||||
* Debouncing it on the class-level is too broad.
|
||||
*/
|
||||
this.debouncedShow = _.debounce(this._show, 250, {'leading': true});
|
||||
}
|
||||
this.debouncedShow.apply(this, arguments);
|
||||
return this;
|
||||
},
|
||||
|
||||
hideNewMessagesIndicator () {
|
||||
const new_msgs_indicator = this.el.querySelector('.new-msgs-indicator');
|
||||
if (!_.isNull(new_msgs_indicator)) {
|
||||
|
@ -993,8 +1009,11 @@
|
|||
|
||||
_scrollDown () {
|
||||
/* Inner method that gets debounced */
|
||||
if (this.$content.is(':visible') && !this.model.get('scrolled')) {
|
||||
this.$content.scrollTop(this.$content[0].scrollHeight);
|
||||
if (_.isUndefined(this.content)) {
|
||||
return;
|
||||
}
|
||||
if (u.isVisible(this.content) && !this.model.get('scrolled')) {
|
||||
this.content.scrollTop = this.content.scrollHeight;
|
||||
this.onScrolledDown();
|
||||
this.model.save({'auto_scrolled': true});
|
||||
}
|
||||
|
|
|
@ -191,8 +191,8 @@
|
|||
this.model.on('change:connection_status', this.fetchArchivedMessagesIfNecessary, this);
|
||||
},
|
||||
|
||||
render () {
|
||||
const result = this.__super__.render.apply(this, arguments);
|
||||
renderChatArea () {
|
||||
const result = this.__super__.renderChatArea.apply(this, arguments);
|
||||
if (!this.disable_mam) {
|
||||
this.$content.on('scroll', _.debounce(this.onScroll.bind(this), 100));
|
||||
}
|
||||
|
|
|
@ -564,6 +564,18 @@
|
|||
this.occupantsview.setOccupantsHeight();
|
||||
},
|
||||
|
||||
show (focus) {
|
||||
if (u.isVisible(this.el)) {
|
||||
if (focus) { this.focus(); }
|
||||
return;
|
||||
}
|
||||
// Override from converse-chatview in order to not use
|
||||
// "fadeIn", which causes flashing.
|
||||
u.showElement(this.el);
|
||||
this.afterShown();
|
||||
if (focus) { this.focus(); }
|
||||
},
|
||||
|
||||
afterConnected () {
|
||||
if (this.model.get('connection_status') === converse.ROOMSTATUS.ENTERED) {
|
||||
this.setChatState(_converse.ACTIVE);
|
||||
|
|
Loading…
Reference in New Issue
Block a user