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