Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FIX] scroll on flex-tab #7748

Merged
merged 5 commits into from
Aug 21, 2017
Merged

[FIX] scroll on flex-tab #7748

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7f4c744
fix scroll on flex-tab
ggazzo Aug 15, 2017
fc016c3
member list flex-tab
ggazzo Aug 15, 2017
39a254d
small fix
ggazzo Aug 15, 2017
d6deb75
fix review
ggazzo Aug 21, 2017
906fac3
fix search test
ggazzo Aug 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,6 @@
"prom-client": "^10.0.2",
"semver": "^5.3.0",
"toastr": "^2.1.2",
"wolfy87-eventemitter": "^5.1.0"
"wolfy87-eventemitter": "^5.2.2"
}
}
16 changes: 9 additions & 7 deletions packages/rocketchat-mentions-flextab/client/views/mentionsFlexTab.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
2 changes: 1 addition & 1 deletion packages/rocketchat-mentions-flextab/client/views/mentionsFlexTab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
25 changes: 14 additions & 11 deletions packages/rocketchat-message-pin/client/views/pinnedMessages.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
2 changes: 1 addition & 1 deletion packages/rocketchat-message-pin/client/views/pinnedMessages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
18 changes: 10 additions & 8 deletions packages/rocketchat-message-star/client/views/starredMessages.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
2 changes: 1 addition & 1 deletion packages/rocketchat-message-star/client/views/starredMessages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
31 changes: 21 additions & 10 deletions packages/rocketchat-theme/client/imports/general/base_old.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3634,14 +3634,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;

Expand All @@ -3656,7 +3648,9 @@ body:not(.is-cordova) {
}

& > .title {
margin: 0 0 20px;
&:not(:last-child) {
margin: 0 0 20px;
}

& h2 {
font-size: 20px;
Expand Down Expand Up @@ -5126,7 +5120,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;
Expand Down
2 changes: 1 addition & 1 deletion packages/rocketchat-ui-flextab/client/flexTabBar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
49 changes: 27 additions & 22 deletions packages/rocketchat-ui-flextab/client/tabs/membersList.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}}
Expand All @@ -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)}}
Expand Down
12 changes: 7 additions & 5 deletions packages/rocketchat-ui-flextab/client/tabs/messageSearch.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
2 changes: 1 addition & 1 deletion packages/rocketchat-ui-flextab/client/tabs/messageSearch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
4 changes: 3 additions & 1 deletion packages/rocketchat-ui-flextab/client/tabs/uploadedFilesList.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/rocketchat-ui-flextab/client/tabs/uploadedFilesList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down