Merge pull request #7748 from RocketChat/scroll-flex-tab

[FIX] scroll on flex-tab
RocketChat · Aug 21, 2017 · a58616a · a58616a
2 parents 2254327 + 906fac3
commit a58616a
Show file tree

Hide file tree

Showing 13 changed files with 97 additions and 70 deletions.
diff --git a/packages/rocketchat-mentions-flextab/client/views/mentionsFlexTab.html b/packages/rocketchat-mentions-flextab/client/views/mentionsFlexTab.html
@@ -1,5 +1,5 @@
 <template name="mentionsFlexTab">
-	<div class="list-view mentioned-messages-list">
+	<div class="list-view mentioned-messages-list flex-tab__header">
 		<div class="title">
 			<h2>{{_ "Mentions"}}</h2>
 		</div>
@@ -9,14 +9,16 @@ <h2>{{_ "No_mentions_found"}}</h2>
 			{{/unless}}
 		{{/if}}
 	</div>
-	<ul class="mentioned-messages-list list clearfix">
-		{{#each messages}}
+	<div class="flex-tab__result js-list">
+		<ul class="mentioned-messages-list list clearfix">
+			{{#each messages}}
 			{{#nrr nrrargs 'message' message}}{{/nrr}}
-		{{/each}}
-	</ul>
-	{{#if hasMore}}
+			{{/each}}
+		</ul>
+		{{#if hasMore}}
 		<div class="load-more">
 			{{> loading}}
 		</div>
-	{{/if}}
+		{{/if}}
+	</div>
 </template>
diff --git a/packages/rocketchat-mentions-flextab/client/views/mentionsFlexTab.js b/packages/rocketchat-mentions-flextab/client/views/mentionsFlexTab.js
@@ -57,7 +57,7 @@ Template.mentionsFlexTab.events({
 		const dropDown = t.$(`\#${ message_id } .message-dropdown`);
 		return dropDown.show();
 	},
-	'scroll .content': _.throttle(function(e, instance) {
+	'scroll .js-list': _.throttle(function(e, instance) {
 		if (e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight && instance.hasMore.get()) {
 			return instance.limit.set(instance.limit.get() + 50);
 		}

diff --git a/packages/rocketchat-message-pin/client/views/pinnedMessages.html b/packages/rocketchat-message-pin/client/views/pinnedMessages.html
@@ -1,5 +1,5 @@
 <template name="pinnedMessages">
-	<div class="list-view pinned-messages-list">
+	<div class="list-view pinned-messages-list flex-tab__header">
 		<div class="title">
 			<h2>{{_ "Pinned_Messages"}}</h2>
 		</div>
@@ -9,14 +9,17 @@ <h2>{{_ "No_pinned_messages"}}</h2>
 			{{/unless}}
 		{{/if}}
 	</div>
-	<ul class="list clearfix">
-		{{#each messages}}
-			{{#nrr nrrargs 'message' message}}{{/nrr}}
-		{{/each}}
-	</ul>
-	{{#if hasMore}}
-		<div class="load-more">
-			{{> loading}}
-		</div>
-	{{/if}}
+	<div class="flex-tab__result js-list">
+		<ul class="list clearfix">
+			{{#each messages}}
+				{{#nrr nrrargs 'message' message}}{{/nrr}}
+			{{/each}}
+		</ul>
+
+		{{#if hasMore}}
+			<div class="load-more">
+				{{> loading}}
+			</div>
+		{{/if}}
+	</div>
 </template>
diff --git a/packages/rocketchat-message-pin/client/views/pinnedMessages.js b/packages/rocketchat-message-pin/client/views/pinnedMessages.js
@@ -59,7 +59,7 @@ Template.pinnedMessages.events({
 		const dropDown = t.$(`\#${ message_id } .message-dropdown`);
 		return dropDown.show();
 	},
-	'scroll .content': _.throttle(function(e, instance) {
+	'scroll .js-list': _.throttle(function(e, instance) {
 		if (e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight && instance.hasMore.get()) {
 			return instance.limit.set(instance.limit.get() + 50);
 		}

diff --git a/packages/rocketchat-message-star/client/views/starredMessages.html b/packages/rocketchat-message-star/client/views/starredMessages.html
@@ -1,5 +1,5 @@
 <template name="starredMessages">
-	<div class="list-view starred-messages-list">
+	<div class="list-view starred-messages-list flex-tab__header">
 		<div class="title">
 			<h2>{{_ "Starred_Messages"}}</h2>
 		</div>
@@ -9,14 +9,16 @@ <h2>{{_ "No_starred_messages"}}</h2>
 			{{/unless}}
 		{{/if}}
 	</div>
-	<ul class="list clearfix">
-		{{#each messages}}
-			{{#nrr nrrargs 'message' message}}{{/nrr}}
-		{{/each}}
-	</ul>
-	{{#if hasMore}}
+	<div class="flex-tab__result js-list">
+		<ul class="list clearfix">
+			{{#each messages}}
+				{{#nrr nrrargs 'message' message}}{{/nrr}}
+			{{/each}}
+		</ul>
+		{{#if hasMore}}
 		<div class="load-more">
 			{{> loading}}
 		</div>
-	{{/if}}
+		{{/if}}
+	</div>
 </template>
diff --git a/packages/rocketchat-message-star/client/views/starredMessages.js b/packages/rocketchat-message-star/client/views/starredMessages.js
@@ -58,7 +58,7 @@ Template.starredMessages.events({
 		const dropDown = t.$(`\#${ message_id } .message-dropdown`);
 		return dropDown.show();
 	},
-	'scroll .content': _.throttle(function(e, instance) {
+	'scroll .js-list': _.throttle(function(e, instance) {
 		if (e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight) {
 			return instance.limit.set(instance.limit.get() + 50);
 		}

diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css
@@ -3630,14 +3630,6 @@ body:not(.is-cordova) {
 }
 
 .rc-old .list-view {
-	z-index: 10;
-
-	overflow-x: hidden;
-	overflow-y: auto;
-
-	padding: 20px;
-	-webkit-overflow-scrolling: touch;
-
 	& .list {
 		position: relative;
 
@@ -3652,7 +3644,9 @@ body:not(.is-cordova) {
 	}
 
 	& > .title {
-		margin: 0 0 20px;
+		&:not(:last-child) {
+			margin: 0 0 20px;
+		}
 
 		& h2 {
 			font-size: 20px;
@@ -5127,7 +5121,24 @@ body:not(.is-cordova) {
 	padding: 1rem 0;
 }
 
-.rc-old .search-messages-list {
+.rc-old .flex-tab {
+	&__content {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		padding: 20px;
+	}
+
+	&__header {
+		flex: 0 0 auto;
+		padding-bottom: 10px;
+	}
+
+	&__result {
+		flex: 1 1 auto;
+    overflow-y: auto;
+	}
+
 	& .message-cog-container {
 		& .message-action {
 			display: none !important;

diff --git a/packages/rocketchat-ui-flextab/client/flexTabBar.html b/packages/rocketchat-ui-flextab/client/flexTabBar.html
@@ -1,7 +1,7 @@
 <template name="flexTabBar">
 	<div class="flex-tab-container border-component-color {{opened}}">
 		<section class="flex-tab border-component-color">
-			<div class="content">
+			<div class="content flex-tab__content">
 				<button class="close-flex-tab secondary-font-color">
 					<span class="secondary-background-color"><i class="icon-cancel"></i></span>
 				</button>

diff --git a/packages/rocketchat-ui-flextab/client/tabs/membersList.html b/packages/rocketchat-ui-flextab/client/tabs/membersList.html
@@ -1,8 +1,9 @@
 <template name="membersList">
 	{{> videoCall}}
 	{{#if isGroupChat}}
-		<div class="list-view animated">
-			{{#with roomUsers}}
+	{{#with roomUsers}}
+		<div class="flex-tab__header">
+			<div class="list-view animated">
 				<div class="title">
 					<h2>{{_ "Members_List"}}</h2>
 					{{> videoButtons}}
@@ -23,28 +24,32 @@ <h2>{{_ "Members_List"}}</h2>
 						{{/unless}}
 					</p>
 				</div>
-				<ul class='list clearfix lines'>
-					{{#if loading}}
-						{{> loading}}
-					{{else}}
-						{{#each users}}
-							<li class='user-image user-card-room status-{{status}}'>
-								<button data-username="{{user.username}}" tabindex="0" title="{{displayName}}">
-									{{> avatar username=user.username}}
-									<p>{{displayName}} {{utcOffset}}</p>
-									{{#if muted}}
-										<i class="icon-mute" title="{{_ "User_muted"}}"></i>
-									{{/if}}
-								</button>
-							</li>
-						{{/each}}
-					{{/if}}
-				</ul>
-				{{#if hasMore}}
-					<button class="button show-more-users">{{_ "Show_more"}}</button>
+			</div>
+		</div>
+
+		<div class="flex-tab__result list-view">
+			<ul class='list clearfix lines'>
+				{{#if loading}}
+					{{> loading}}
+				{{else}}
+					{{#each users}}
+						<li class='user-image user-card-room status-{{status}}'>
+							<button data-username="{{user.username}}" tabindex="0" title="{{displayName}}">
+								{{> avatar username=user.username}}
+								<p>{{displayName}} {{utcOffset}}</p>
+								{{#if muted}}
+									<i class="icon-mute" title="{{_ "User_muted"}}"></i>
+								{{/if}}
+							</button>
+						</li>
+					{{/each}}
 				{{/if}}
-			{{/with}}
+			</ul>
+			{{#if hasMore}}
+				<button class="button show-more-users">{{_ "Show_more"}}</button>
+			{{/if}}
 		</div>
+		{{/with}}
 	{{/if}}
 	<div class="user-view animated{{#unless showUserInfo}} animated-hidden{{/unless}}">
 		{{> userInfo (userInfoDetail)}}

diff --git a/packages/rocketchat-ui-flextab/client/tabs/messageSearch.html b/packages/rocketchat-ui-flextab/client/tabs/messageSearch.html
@@ -1,5 +1,5 @@
 <template name="messageSearch">
-	<div class="list-view search-messages-list">
+	<div class="list-view flex-tab__header search-messages-list">
 		<div class="title">
 			<h2>{{_ "Search_Messages"}}</h2>
 			<p>{{_ "You_can_search_using_RegExp_eg"}} <code class="code-colors inline">/^text$/i</code></p>
@@ -20,16 +20,18 @@ <h2>{{_ "No_results_found"}}</h2>
 	</div>
 	{{#if currentSearchTerm}}
 		{{#if searchResultMessages}}
+		<div class="flex-tab__result js-list">
 			<ul class="list clearfix">
 				{{#each searchResultMessages}}
-					{{#nrr nrrargs 'message' message}}{{/nrr}}
+				{{#nrr nrrargs 'message' message}}{{/nrr}}
 				{{/each}}
 			</ul>
 			{{#if hasMore}}
-				<div class="load-more">
-					{{> loading}}
-				</div>
+			<div class="load-more">
+				{{> loading}}
+			</div>
 			{{/if}}
+		</div >
 		{{/if}}
 	{{/if}}
 </template>
diff --git a/packages/rocketchat-ui-flextab/client/tabs/messageSearch.js b/packages/rocketchat-ui-flextab/client/tabs/messageSearch.js
@@ -93,7 +93,7 @@ Template.messageSearch.events({
 		return t.search();
 	},
 
-	'scroll .content': _.throttle(function(e, t) {
+	'scroll .js-list': _.throttle(function(e, t) {
 		if (e.target.scrollTop >= (e.target.scrollHeight - e.target.clientHeight)) {
 			t.limit.set(t.limit.get() + 20);
 			return t.search();

diff --git a/packages/rocketchat-ui-flextab/client/tabs/uploadedFilesList.html b/packages/rocketchat-ui-flextab/client/tabs/uploadedFilesList.html
@@ -1,8 +1,10 @@
 <template name="uploadedFilesList">
-	<div class="list-view uploaded-files-list">
+	<div class=" list-view flex-tab__header">
 		<div class="title">
 			<h2>{{_ "Room_uploaded_file_list"}}</h2>
 		</div>
+	</div>
+	<div class="uploaded-files-list list-view flex-tab__result js-list">
 		<ul class="list clearfix lines">
 			{{#each files}}
 				<li>

diff --git a/packages/rocketchat-ui-flextab/client/tabs/uploadedFilesList.js b/packages/rocketchat-ui-flextab/client/tabs/uploadedFilesList.js
@@ -109,7 +109,7 @@ Template.uploadedFilesList.events({
 		});
 	},
 
-	'scroll .content': _.throttle(function(e, t) {
+	'scroll .js-list': _.throttle(function(e, t) {
 		if (e.target.scrollTop >= (e.target.scrollHeight - e.target.clientHeight)) {
 			return t.limit.set(t.limit.get() + 50);
 		}