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'}} - +
- - - + + + @@ -57,9 +57,9 @@
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') }}
- - - + + + 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)`);
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" }}