diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css
index 436c6b315100..2730b761d9fd 100644
--- a/packages/rocketchat-theme/client/imports/components/modal/directory.css
+++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css
@@ -1,4 +1,6 @@
.rc-directory {
+ display: flex;
+ flex-direction: column;
&-header {
display: flex;
@@ -34,6 +36,8 @@
display: flex;
align-items: center;
margin: 0 -9px;
+
+ overflow: hidden;
}
&-avatar {
@@ -41,6 +45,8 @@
height: 60px;
margin: 0 9px;
+ flex: 0 0 auto;
+
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
@@ -48,21 +54,29 @@
&-info {
display: flex;
- margin: 0 9px;
+
flex-direction: column;
- width: 100%;
+ width: 1%;
+ flex-grow: 1;
+
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
&-name {
font-size: 1rem;
font-weight: 500;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
&-description {
margin-top: 0.625rem;
color: var(--rc-color-primary-light);
overflow: hidden;
- text-overflow: ellipsis;
+ text-overflow: ellipsis;
max-width: 200px;
}
@@ -72,14 +86,27 @@
}
.rc-directory-content {
- width: 100%;
overflow-x: auto;
+ flex: 1 1 100%;
+ height: 100vh;
& .js-sort {
cursor: pointer;
}
}
+.rc-table-td--createdAt,
+.rc-table-td--users {
+ width: 120px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+.rc-table-td--users {
+ width: 80px;
+}
+
@media (width <= 500px) {
.rc-directory-content .rc-table-head {
display: none;
diff --git a/packages/rocketchat-theme/client/imports/components/table.css b/packages/rocketchat-theme/client/imports/components/table.css
index 4bd5f2c7bd62..3670b60ce613 100644
--- a/packages/rocketchat-theme/client/imports/components/table.css
+++ b/packages/rocketchat-theme/client/imports/components/table.css
@@ -3,6 +3,10 @@
color: var(--rc-color-primary);
width: 100%;
+ &--fixed {
+ table-layout:fixed;
+ }
+
&-head {
color: var(--rc-color-primary-light);
@@ -24,31 +28,11 @@
}
&-td {
- padding: 1.25rem 0;
+ padding: 1.25rem 1rem;
vertical-align: middle;
- &:first-child {
- padding-left: 1rem;
- }
-
- &:last-child {
- padding-right: 1rem;
- }
-
&--bold {
font-weight: 600;
}
}
}
-
-.rtl .rc-table-td {
- &:first-child {
- padding-right: 1rem;
- padding-left: 0;
- }
-
- &:last-child {
- padding-right: 0;
- padding-left: 1rem;
- }
-}
diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html
index cb65b2de46e8..62123671325a 100644
--- a/packages/rocketchat-ui/client/views/app/directory.html
+++ b/packages/rocketchat-ui/client/views/app/directory.html
@@ -19,12 +19,12 @@
{{/header}}
{{#if $eq searchType 'channels'}}
-
+
- Name {{> icon icon=(sortIcon 'name')}} |
- Users {{> icon icon=(sortIcon 'usernames') }} |
- Created At {{> icon icon=(sortIcon 'createdAt') }} |
+ {{_ "Name"}} {{> icon icon=(sortIcon 'name')}} |
+ {{_ "Users"}} |
+ {{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }} |
@@ -57,9 +57,9 @@
- Username {{> icon icon="sort" }} |
- Name {{> icon icon="sort" }} |
- Created At {{> icon icon="sort" }} |
+ {{_ "Name"}} {{> icon icon="sort" }} |
+ {{_ "Username"}} {{> icon icon="sort" }} |
+ {{_ "Created_at"}} {{> icon icon="sort" }} |
diff --git a/packages/rocketchat-ui/client/views/app/directory.js b/packages/rocketchat-ui/client/views/app/directory.js
index dc9f3da99aec..04c5a7b74f98 100644
--- a/packages/rocketchat-ui/client/views/app/directory.js
+++ b/packages/rocketchat-ui/client/views/app/directory.js
@@ -109,22 +109,20 @@ Template.directory.events({
}
});
-Template.directory.onCreated(function() {
- this.searchText = new ReactiveVar('');
- this.searchType = new ReactiveVar('channels');
- this.searchSortBy = new ReactiveVar('name');
- this.sortDirection = new ReactiveVar('asc');
- this.page = new ReactiveVar(0);
- this.end = new ReactiveVar(false);
-
- this.results = new ReactiveVar([]);
-
+Template.directory.onRendered(function() {
+ this.resize = () => {
+ const height = this.$('.rc-directory-content').height();
+ this.limit.set(Math.ceil((height / 100) + 5));
+ };
+ this.resize();
+ $(window).on('resize', this.resize);
Tracker.autorun(() => {
const searchConfig = {
text: this.searchText.get(),
type: this.searchType.get(),
sortBy: this.searchSortBy.get(),
sortDirection: this.sortDirection.get(),
+ limit: this.limit.get(),
page: this.page.get()
};
if (this.end.get() || this.loading) {
@@ -144,6 +142,22 @@ Template.directory.onCreated(function() {
});
});
+Template.directory.onDestroyed(function() {
+ $(window).on('off', this.resize);
+});
+
+Template.directory.onCreated(function() {
+ this.searchText = new ReactiveVar('');
+ this.searchType = new ReactiveVar('channels');
+ this.searchSortBy = new ReactiveVar('name');
+ this.sortDirection = new ReactiveVar('asc');
+ this.limit = new ReactiveVar(0);
+ this.page = new ReactiveVar(0);
+ this.end = new ReactiveVar(false);
+
+ this.results = new ReactiveVar([]);
+});
+
Template.directory.onRendered(function() {
$('.main-content').removeClass('rc-old');
$('.rc-directory-content').css('height', `calc(100vh - ${ document.querySelector('.rc-directory .rc-header').offsetHeight }px)`);