From 5bced7ad23436413273fb050a9e8b8678667dfd8 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Tue, 10 Apr 2018 11:36:01 -0300 Subject: [PATCH 1/4] better css table and disabled sort by users --- .../imports/components/modal/directory.css | 28 +++++++++++++++++-- .../client/imports/components/table.css | 26 ++++------------- .../rocketchat-ui-master/public/icons.svg | 2 ++ .../client/views/app/directory.html | 8 +++--- .../client/views/app/directory.js | 8 ++++++ 5 files changed, 45 insertions(+), 27 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css index 436c6b315100..7ea142f7bf0e 100644 --- a/packages/rocketchat-theme/client/imports/components/modal/directory.css +++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css @@ -34,6 +34,8 @@ display: flex; align-items: center; margin: 0 -9px; + + overflow: hidden; } &-avatar { @@ -41,6 +43,8 @@ height: 60px; margin: 0 9px; + flex: 0 0 auto; + background-size: contain; background-repeat: no-repeat; background-position: center center; @@ -48,14 +52,22 @@ &-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 { @@ -80,6 +92,18 @@ } } +.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-master/public/icons.svg b/packages/rocketchat-ui-master/public/icons.svg index 99ac982a06b4..f1b1d85eebce 100644 --- a/packages/rocketchat-ui-master/public/icons.svg +++ b/packages/rocketchat-ui-master/public/icons.svg @@ -103,4 +103,6 @@ + + diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html index 1095fa858637..81f12c9c7ba1 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'}} - +
- - - + + + diff --git a/packages/rocketchat-ui/client/views/app/directory.js b/packages/rocketchat-ui/client/views/app/directory.js index a8e67817e01f..dc9f3da99aec 100644 --- a/packages/rocketchat-ui/client/views/app/directory.js +++ b/packages/rocketchat-ui/client/views/app/directory.js @@ -41,6 +41,14 @@ Template.directory.helpers({ }, searchType() { return Template.instance().searchType.get(); + }, + sortIcon(key) { + const { + sortDirection, + searchSortBy + } = Template.instance(); + + return key === searchSortBy.get() && sortDirection.get() !== 'asc' ? 'sort-up' : 'sort-down'; } }); From f66a247b85ce7b8c78c272b652ab3a307d943412 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Tue, 10 Apr 2018 19:48:12 -0300 Subject: [PATCH 2/4] fix scroll directory --- .../imports/components/modal/directory.css | 5 ++- .../client/views/app/directory.js | 34 +++++++++++++------ 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css index 7ea142f7bf0e..e1e8d98d5198 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; @@ -84,8 +86,9 @@ } .rc-directory-content { - width: 100%; overflow-x: auto; + flex: 1 1 100%; + height: 100vh; & .js-sort { cursor: pointer; 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)`); From ab3764231628200ed0834c637b84a58d77c63c6b Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Tue, 17 Apr 2018 15:06:56 -0300 Subject: [PATCH 3/4] Update directory.css fix indentation --- .../client/imports/components/modal/directory.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css index e1e8d98d5198..2730b761d9fd 100644 --- a/packages/rocketchat-theme/client/imports/components/modal/directory.css +++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css @@ -60,8 +60,8 @@ flex-grow: 1; white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + overflow: hidden; + text-overflow: ellipsis; } &-name { @@ -76,7 +76,7 @@ margin-top: 0.625rem; color: var(--rc-color-primary-light); overflow: hidden; - text-overflow: ellipsis; + text-overflow: ellipsis; max-width: 200px; } From 21a876e2971a18193d5185e6cd2627420f81866b Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Wed, 18 Apr 2018 17:31:24 -0300 Subject: [PATCH 4/4] i18 --- .../rocketchat-ui/client/views/app/directory.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html index b310af2232a1..d01649835135 100644 --- a/packages/rocketchat-ui/client/views/app/directory.html +++ b/packages/rocketchat-ui/client/views/app/directory.html @@ -22,9 +22,9 @@
Name {{> icon icon="sort" }}Users {{> icon icon="sort" }}Created At {{> icon icon="sort" }}Name {{> icon icon=(sortIcon 'name')}}UsersCreated At {{> icon icon=(sortIcon 'createdAt') }}
- - - + + + @@ -57,9 +57,9 @@
Name {{> icon icon=(sortIcon 'name')}}UsersCreated At {{> icon icon=(sortIcon 'createdAt') }}{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}{{_ "Users"}}{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}
- - - + + +
Name {{> icon icon="sort" }}Username {{> icon icon="sort" }}Created At {{> icon icon="sort" }}{{_ "Name"}} {{> icon icon="sort" }}{{_ "Username"}} {{> icon icon="sort" }}{{_ "Created_at"}} {{> icon icon="sort" }}