[IMPROVE] jump to selected message on open thread (#14460)

* jump to selected message on open thread * Update app/threads/client/flextab/thread.js Co-Authored-By: Tasso Evangelista <tasso@tassoevan.me> * Update app/threads/client/flextab/thread.js Co-Authored-By: Tasso Evangelista <tasso@tassoevan.me>
RocketChat · May 14, 2019 · 59ab8b6 · 59ab8b6
1 parent 0f2f417
commit 59ab8b6
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 22 deletions.
diff --git a/app/threads/client/flextab/thread.html b/app/threads/client/flextab/thread.html
@@ -17,9 +17,9 @@ <h2 class="contextual-bar__header-title">
 			<ul class="thread">
 				{{# with messageContext}}
 				{{#if isLoading}}
-				<li class="load-more">
-					{{> loading}}
-				</li>
+					<li class="load-more">
+						{{> loading}}
+					</li>
 				{{else}}
 						{{> message groupable=false hideRoles=true msg=mainMessage room=room subscription=subscription settings=settings customClass="thread-message" templatePrefix='thread-' customClass="thread-main" u=u ignored=false}}
 						{{#each msg in messages}}

diff --git a/app/threads/client/flextab/thread.js b/app/threads/client/flextab/thread.js
@@ -27,7 +27,7 @@ Template.thread.events({
 	'scroll .js-scroll-thread': _.throttle(({ currentTarget: e }, i) => {
 		lazyloadtick();
 		i.atBottom = e.scrollTop >= e.scrollHeight - e.clientHeight;
-	}, 500),
+	}, 50),
 	'load img'() {
 		const { atBottom } = this;
 		atBottom && this.sendToBottom();
@@ -96,14 +96,6 @@ Template.thread.onRendered(function() {
 		this.chatMessages.wrapper.scrollTop = this.chatMessages.wrapper.scrollHeight;
 	}, 300);
 
-	this.autorun(() => {
-		const tmid = this.state.get('tmid');
-		this.state.set({
-			tmid,
-		});
-		this.loadMore();
-	});
-
 	this.autorun(() => {
 		const tmid = this.state.get('tmid');
 		this.threadsObserve && this.threadsObserve.stop();
@@ -127,6 +119,8 @@ Template.thread.onRendered(function() {
 			},
 			removed: ({ _id }) => this.Threads.remove(_id),
 		});
+
+		this.loadMore();
 	});
 
 	this.autorun(() => {
@@ -135,15 +129,37 @@ Template.thread.onRendered(function() {
 		this.chatMessages.initializeInput(this.find('.js-input-message'), { rid, tmid });
 	});
 
-	Tracker.afterFlush(() => {
-		this.autorun(async () => {
-			const { mainMessage } = Template.currentData();
-			this.state.set({
-				tmid: mainMessage._id,
-				rid: mainMessage.rid,
-			});
+
+	this.autorun(() => {
+		const { mainMessage, jump } = Template.currentData();
+		this.state.set({
+			tmid: mainMessage._id,
+			rid: mainMessage.rid,
+			jump,
 		});
 	});
+
+	this.autorun(() => {
+		const jump = this.state.get('jump');
+		const loading = this.state.get('loading');
+
+		if (jump && loading === false) {
+			this.find('.js-scroll-thread').style.scrollBehavior = 'smooth';
+			this.state.set('jump', null);
+			Tracker.afterFlush(() => {
+				const message = this.find(`#thread-${ jump }`);
+				message.classList.add('highlight');
+				const removeClass = () => {
+					message.classList.remove('highlight');
+					message.removeEventListener('animationend', removeClass);
+				};
+				message.addEventListener('animationend', removeClass);
+				setTimeout(() => {
+					message.scrollIntoView();
+				}, 300);
+			});
+		}
+	});
 });
 
 Template.thread.onCreated(async function() {

diff --git a/app/threads/client/flextab/threads.html b/app/threads/client/flextab/threads.html
@@ -33,7 +33,7 @@ <h2 class="thread-empty">{{_ "No_Threads"}}</h2>
 		{{/unless}}
 		{{#if msg}}
 		<div class="rc-user-info-container flex-nav">
-			{{> thread mainMessage=msg room=room subscription=subscription settings=settings close=close}}
+			{{> thread mainMessage=msg room=room subscription=subscription settings=settings close=close jump=jump }}
 		</div>
 		{{/if}}
 	{{/with}}

diff --git a/app/threads/client/flextab/threads.js b/app/threads/client/flextab/threads.js
@@ -20,8 +20,9 @@ const sort = { tlm: -1 };
 
 Template.threads.events({
 	'click .js-open-thread'(e, instance) {
-		const { msg } = messageArgs(this);
+		const { msg, jump } = messageArgs(this);
 		instance.state.set('mid', msg._id);
+		instance.state.set('jump', jump);
 		e.preventDefault();
 		e.stopPropagation();
 		return false;
@@ -35,6 +36,9 @@ Template.threads.events({
 });
 
 Template.threads.helpers({
+	jump() {
+		return Template.instance().state.get('jump');
+	},
 	subscription() {
 		return Template.currentData().subscription;
 	},
@@ -103,12 +107,13 @@ Template.threads.onCreated(async function() {
 
 	Tracker.afterFlush(() => {
 		this.autorun(async () => {
-			const { rid, mid } = Template.currentData();
+			const { rid, mid, jump } = Template.currentData();
 
 			this.state.set({
 				close: !!mid,
 				mid,
 				rid,
+				jump,
 			});
 		});
 	});

diff --git a/app/ui/client/views/app/room.js b/app/ui/client/views/app/room.js
@@ -603,6 +603,7 @@ Template.room.events({
 			subscription: subscription.get(),
 			msg,
 			rid,
+			jump: tmid && tmid !== _id && _id,
 			mid: tmid || _id,
 			label: 'Threads',
 			icon: 'thread',