From fb35ed844ab3a6cd5c19de2f47f2c0672a93c8c6 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Wed, 20 Dec 2017 10:02:01 +0000 Subject: [PATCH] Avoid flashing when opening chat room. --- css/converse.css | 55 ++++++++++++++++----------------- css/inverse.css | 67 ++++++++++++++++++++-------------------- sass/_core.scss | 16 +++++----- src/converse-chatview.js | 31 +++++++++++++++---- src/converse-mam.js | 4 +-- src/converse-muc.js | 12 +++++++ 6 files changed, 107 insertions(+), 78 deletions(-) diff --git a/css/converse.css b/css/converse.css index be403d7d7..5716f25ef 100644 --- a/css/converse.css +++ b/css/converse.css @@ -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; diff --git a/css/inverse.css b/css/inverse.css index c776c15b8..789b9f0f5 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -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; diff --git a/sass/_core.scss b/sass/_core.scss index d80866254..70a59e531 100644 --- a/sass/_core.scss +++ b/sass/_core.scss @@ -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; diff --git a/src/converse-chatview.js b/src/converse-chatview.js index aa17a022a..3d7fbf947 100644 --- a/src/converse-chatview.js +++ b/src/converse-chatview.js @@ -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}); } diff --git a/src/converse-mam.js b/src/converse-mam.js index 3fd41c6ec..8a1f13dca 100644 --- a/src/converse-mam.js +++ b/src/converse-mam.js @@ -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)); } diff --git a/src/converse-muc.js b/src/converse-muc.js index 806c2f57f..e912488ef 100755 --- a/src/converse-muc.js +++ b/src/converse-muc.js @@ -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);