apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

[IMPROVE] Listing of apps in the admin page (#11166)

Browse Source 
* table component

* table component: fixed header

* tabs component

* change directory header paddings

* add onItemClick to the table component

* remove table horizontal padding and add animation to tabs

* improve readability on table and directory methods

* show only channel/username column when access directory using mobile

* change sort icons

* debounce directory search

* fix active tab

* Css and structure changes for internal app directory (marketplace)

* put directory table header back on mobile

* directory table loading indicator

* better way to handle active state on tabs

* table methods: onResize, onScroll, onSort

* fixed table results when change tabs

* fix directory table sort

* fix user table columns on directory

* Improve internal marketplace layout

* CSS customization for internal apps marketplace

* Remove unused padding

* remove channel description on directory

* Update name and details for marketplace

* Update style based on improved directory css

* Fix text size on app list

* fix directory table on firefox

* fix directoru table header on electron

* indentation fix on table css

* fix style

* fix

* fix 2

* fix review
pull/11211/head
Gabriel Delavald 7 years ago committed by Rodrigo Nascimento
parent ee8633243f
commit 43ded769d3
8 changed files with 281 additions and 188 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 42
      package-lock.json
  2. 59
      packages/rocketchat-apps/assets/stylesheets/apps.css
  3. 103
      packages/rocketchat-apps/client/admin/apps.html
  4. 95
      packages/rocketchat-apps/client/admin/apps.js
  5. 74
      packages/rocketchat-theme/client/imports/components/modal/directory.css
  6. 74
      packages/rocketchat-theme/client/imports/components/table.css
  7. 20
      packages/rocketchat-ui/client/views/app/directory.html
  8. 2
      packages/rocketchat-ui/client/views/app/directory.js

42
package-lock.json generated
Unescape View File

@ -742,7 +742,7 @@
"autolinker": {
"version": "1.6.2",
"resolved": "https://registry.npmjs.org/autolinker/-/autolinker-1.6.2.tgz",
"integrity": "sha512-IKLGtYFb3jzGTtgCpb4bm//1sXmmmgmr0msKshhYoc7EsWmLCFvuyxLcEIfcZ5gbCgZGXrnXkOkcBblOFEnlog=="
"integrity": "sha1-Z66donLoCODY644Cy8jN4wOUdFc="
},
"autoprefixer": {
"version": "8.6.0",
@ -2957,7 +2957,7 @@
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
"dev": true,
"requires": {
"ms": "2.0.0"
@ -3002,7 +3002,7 @@
"mocha": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/mocha/-/mocha-4.1.0.tgz",
"integrity": "sha512-0RVnjg1HJsXY2YFDoTNzcc1NKhYuXKRrBAG2gDygmJJA136Cs2QlRliZG1mA0ap7cuaT30mw16luAeln+4RiNA==",
"integrity": "sha1-fYbPvPNcuCnidUwy4XNV7AUzh5Q=",
"dev": true,
"requires": {
"browser-stdout": "1.3.0",
@ -3020,13 +3020,13 @@
"commander": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
"integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==",
"integrity": "sha1-FXFS/R56bI2YpbcVzzdt+SgARWM=",
"dev": true
},
"glob": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
"integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
"integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=",
"dev": true,
"requires": {
"fs.realpath": "1.0.0",
@ -3054,7 +3054,7 @@
"supports-color": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.4.0.tgz",
"integrity": "sha512-rKC3+DyXWgK0ZLKwmRsrkyHVZAjNkfzeehuFWdGGcqGDTZFH73+RH6S/RDAAxl9GusSjZSUWYLmT9N5pzXFOXQ==",
"integrity": "sha1-iD992rwWUUKyphQn8zUt7RldGj4=",
"dev": true,
"requires": {
"has-flag": "2.0.0"
@ -6218,7 +6218,7 @@
"glob": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
"integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
"integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=",
"requires": {
"fs.realpath": "1.0.0",
"inflight": "1.0.6",
@ -8178,7 +8178,7 @@
"is-resolvable": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
"integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
"integrity": "sha1-+xj4fOH+uSUWnJpAfBkxijIG7Yg=",
"dev": true
},
"is-retry-allowed": {
@ -8776,7 +8776,7 @@
"lodash.merge": {
"version": "4.6.1",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.1.tgz",
"integrity": "sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ=="
"integrity": "sha1-rcJdnLmbk5HFliTzefu6YNcRHVQ="
},
"lodash.once": {
"version": "4.1.1",
@ -8944,7 +8944,7 @@
"mailsplit": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/mailsplit/-/mailsplit-4.1.2.tgz",
"integrity": "sha512-5UWjUfhKlC4OR5PqZKcl4h7vnz2EP4M3Zg2SBbrztvAYX5lM/rA7tvaXkZ6zRcvK32Uul0GkRA037icDbiJIOw==",
"integrity": "sha1-xhi8MRpM/IOyJqHtwbUD9akk0IM=",
"requires": {
"libbase64": "1.0.2",
"libmime": "3.1.0",
@ -8954,7 +8954,7 @@
"libbase64": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/libbase64/-/libbase64-1.0.2.tgz",
"integrity": "sha512-CyPjvTFbsGps2Sdvy9GVjSRPvUGpji8Hxb+iunp466guzxcd3QaK0k8Hur1sPkgD9FonW8V1z2F1y066YiliEg=="
"integrity": "sha1-L/E//mmx5AFZ9JNo4w0N2LsWNbU="
}
}
},
@ -9195,7 +9195,7 @@
"minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=",
"requires": {
"brace-expansion": "1.1.11"
}
@ -9601,7 +9601,7 @@
"npmlog": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
"integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
"integrity": "sha1-CKfyqL9zRgR3mp76StXMcXq7lUs=",
"requires": {
"are-we-there-yet": "1.1.5",
"console-control-strings": "1.1.0",
@ -10006,7 +10006,7 @@
"path-type": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
"integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
"integrity": "sha1-zvMdyOCho7sNEFwM2Xzzv0f0428=",
"requires": {
"pify": "3.0.0"
}
@ -10338,7 +10338,7 @@
"postcss-import": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-11.1.0.tgz",
"integrity": "sha512-5l327iI75POonjxkXgdRCUS+AlzAdBx4pOvMEhTKTCjb1p8IEeVR9yx3cPbmN7LIWJLbfnIXxAhoB4jpD0c/Cw==",
"integrity": "sha1-Vck2LJGSmU7GiGXSJEGd8dspgfA=",
"dev": true,
"requires": {
"postcss": "6.0.22",
@ -10387,7 +10387,7 @@
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
"dev": true
},
"supports-color": {
@ -11814,7 +11814,7 @@
"retry-request": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/retry-request/-/retry-request-3.3.1.tgz",
"integrity": "sha512-PjAmtWIxjNj4Co/6FRtBl8afRP3CxrrIAnUzb1dzydfROd+6xt7xAebFeskgQgkfFf8NmzrXIoaB3HxmswXyxw==",
"integrity": "sha1-+3EnYjWmF+l1Uem+c3q1uRWR+54=",
"requires": {
"request": "2.87.0",
"through2": "2.0.3"
@ -13014,7 +13014,7 @@
"stylelint-order": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-0.8.1.tgz",
"integrity": "sha512-8mp1P2wnI9XShYXVXDsxVigE2eXnc0C2O4ktbwUvTBwjCP4xZskIbUVxp1evSG3OK4R7hXVNl/2BnJCZkrcc/w==",
"integrity": "sha1-Nfca86FZVBVODpnlZGuj1vvjT40=",
"dev": true,
"requires": {
"lodash": "4.17.10",
@ -13062,7 +13062,7 @@
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
"dev": true
},
"supports-color": {
@ -13632,7 +13632,7 @@
"uc.micro": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.5.tgz",
"integrity": "sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg=="
"integrity": "sha1-DGXxX4FaoItWCmHOi023/8P0U3Y="
},
"uglify-js": {
"version": "2.8.29",
@ -14429,7 +14429,7 @@
"xml2js": {
"version": "0.4.19",
"resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
"integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",
"integrity": "sha1-aGwg8hMgnpSr8NG88e+qKRx4J6c=",
"requires": {
"sax": "1.2.1",
"xmlbuilder": "9.0.7"

59
packages/rocketchat-apps/assets/stylesheets/apps.css
Unescape View File

@ -1,28 +1,41 @@
input.app-author-name {
width: auto !important;
display: inline-block !important;
}
.rc-apps-marketplace {
.app-author-name {
width: auto !important;
display: inline-block !important;
}
div.app-enable-loading .loading-animation {
justify-content: left;
margin-left: 50px;
}
.rc-header .rc-button {
margin: 0;
min-height: 0;
}
div.apps-error {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: calc(100% - 60px);
padding: 25px 40px;
width: 100%;
font-size: 45px;
}
.app-enable-loading .loading-animation {
justify-content: left;
margin-left: 50px;
}
.preferences-page--apps .rc-table-tr {
opacity: 0.5;
}
.apps-error {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: calc(100% - 60px);
padding: 25px 40px;
width: 100%;
font-size: 45px;
}
.rc-table-avatar {
width: 40px;
height: 40px;
margin: 0 7px;
}
.rc-table-info {
margin: 0 7px;
}
.preferences-page--apps .rc-table-tr.active {
opacity: 1;
.rc-table-content {
padding: 0;
}
}

103
packages/rocketchat-apps/client/admin/apps.html
Unescape View File

@ -1,65 +1,78 @@
<template name="apps">
<!-- TODO: fix this class -->
<section class="preferences-page preferences-page--apps">
{{#header sectionName="Manage_Apps" hideHelp=true fixedHeight=true}}
<div class="rc-directory-header">
<div class="rc-input rc-input--small rc-directory-search">
<label class="rc-input__label">
<div class="rc-input__wrapper">
{{> icon icon="magnifier" block="rc-input__icon" }}
<input type="text" class="rc-input__element rc-input__element--small js-search" name="app-filter" id="app-filter" placeholder={{_ "Search"}} autocomplete="off">
</div>
</label>
</div>
<button class="rc-button rc-button--small rc-button--primary rc-directory-plus rc-tooltip rc-tooltip--down" data-button="install" aria-label="{{_ 'Install_package'}}">{{> icon icon="plus"}}</button>
</div>
<section class="rc-directory rc-apps-marketplace">
{{#header sectionName="Apps" hideHelp=true fixedHeight=true}}
<button class="rc-button rc-button--small rc-button--primary rc-directory-plus" data-button="install">{{> icon icon="plus"}}</button>
{{/header}}
<div class="rc-directory-content">
<div class="rc-table-content">
<!-- {{>tabs tabs=tabsData}} -->
<div class="rc-input rc-input--small rc-directory-search">
<label class="rc-input__label">
<div class="rc-input__wrapper">
{{> icon icon="magnifier" block="rc-input__icon" }}
<input type="text" class="rc-input__element rc-input__element--small js-search" name="message-search" id="message-search" placeholder={{#if $eq searchType 'channels'}}{{_ "Search_Channels"}}{{/if}}{{#if $eq searchType 'users'}}{{_ "Search_Users"}}{{/if}} autocomplete="off">
</div>
</label>
</div>
{{#requiresPermission 'manage-apps'}}
<table class="rc-table">
<thead class="rc-table-head">
<tr class="rc-table-tr">
<td class="rc-table-td">{{_ "Name"}}</td>
<td class="rc-table-td">{{_ "Version"}}</td>
<td class="rc-table-td">{{_ "Status"}}</td>
<td class="rc-table-td"></td>
{{#table fixed='true' onScroll=onTableScroll onResize=onTableResize onSort=onTableSort}}
<thead>
<tr>
<th class="js-sort rc-table-td--medium {{#if searchSortBy 'name'}}is-sorting{{/if}}" data-sort="name">
<div class="table-fake-th">{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}</div>
</th>
<th class="js-sort rc-table-td--medium {{#if searchSortBy 'category'}}is-sorting{{/if}}" data-sort="category">>
<div class="table-fake-th">{{_ "Category"}} {{> icon icon=(sortIcon 'category') }}</div>
</th>
<th class="rc-table-td">
<div class="table-fake-th">{{_ "Details"}} </div>
</th>
<th class="rc-table-td--small">
</th>
</tr>
</thead>
<tbody class="rc-table-body">
<tbody>
{{#each apps}}
<tr class="rc-table-tr {{activeClass status}}" data-name="{{name}}">
<td class="rc-table-td rc-table-td--name">
<div class="rc-directory-channel-wrapper">
<div class="rc-directory-channel-avatar" style="background-image:url({{iconFileContent}})"></div>
<div class="rc-directory-channel-info">
<span class="rc-directory-channel-name">
<tr class="rc-table-tr manage" data-name="{{name}}">
<td>
<div class="rc-table-wrapper">
<div class="rc-table-avatar" style="background-image:url({{iconFileContent}})"></div>
<div class="rc-table-info">
<span class="rc-table-title">
{{name}}
</span>
{{#if description}}
<span class="rc-directory-channel-description">{{description}}</span>
{{#if author.name}}
<span class="rc-table-subtitle">by {{author.name}}</span>
{{/if}}
</div>
</div>
</td>
<td class="rc-table-td rc-table-td--users">{{version}}</td>
<td class="rc-table-td">
{{parseStatus status}}
<td>{{category}}</td>
<td>
<p class="rc-table-title">
{{#if summary}}
{{summary}}
{{else}}
{{description}}
{{/if}}
</p>
{{#if summary}}
<p>
{{description}}
</p>
{{/if}}
</td>
<td class="rc-table-td">
<button class="rc-button rc-button--nude rc-tooltip manage" aria-label="{{_ "Manage_the_App"}}">
{{> icon icon="cog"}}
</button>
</td>
</tr>
{{else}}
<tr class="rc-table-tr" data-name="{{name}}">
<td class="rc-table-td rc-table-td--name">
{{_ "There_are_no_applications_installed"}}
<td>
</td>
</tr>
{{/each}}
{{#if isLoading}}
<tr>
<td colspan="3" style="position: relative;">{{> loading}}</td>
</tr>
{{/if}}
</tbody>
</table>
{{/table}}
{{/requiresPermission}}
</div>
</section>

95
packages/rocketchat-apps/client/admin/apps.js
Unescape View File

@ -1,21 +1,28 @@
import { AppEvents } from '../communication';
const ENABLED_STATUS = ['auto_enabled', 'manually_enabled'];
const enabled = ({status}) => ENABLED_STATUS.includes(status);
const sortByStatus = (a, b) => {
if (enabled(a)) {
if (enabled(b)) {
return a.name > b.name;
const sortByColumn = (array, column, inverted) => {
return array.sort((a, b) => {
if (a[column] < b[column] && !inverted) {
return -1;
}
return -1;
}
return 1;
return 1;
});
};
Template.apps.onCreated(function() {
const instance = this;
this.ready = new ReactiveVar(false);
this.apps = new ReactiveVar([]);
this.filter = new ReactiveVar('');
this.searchText = new ReactiveVar('');
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.isLoading = new ReactiveVar(false);
RocketChat.API.get('apps').then((result) => {
instance.apps.set(result.apps);
@ -66,31 +73,85 @@ Template.apps.helpers({
},
apps() {
const instance = Template.instance();
const filter = instance.filter.get().toLowerCase();
return instance.apps.get().filter(({name}) => name.toLowerCase().includes(filter)).sort(sortByStatus);
const searchText = instance.searchText.get().toLowerCase();
const sortColumn = instance.searchSortBy.get();
const inverted = instance.sortDirection.get() === 'desc';
return sortByColumn(instance.apps.get().filter(({name}) => name.toLowerCase().includes(searchText)), sortColumn, inverted);
},
parseStatus(status) {
return t(`App_status_${ status }`);
},
activeClass(status) {
return enabled({status}) ? 'active' : '';
isActive(status) {
return enabled({status});
},
searchResults() {
return Template.instance().results.get();
},
sortIcon(key) {
const {
sortDirection,
searchSortBy
} = Template.instance();
return key === searchSortBy.get() && sortDirection.get() !== 'asc' ? 'sort-up' : 'sort-down';
},
searchSortBy(key) {
return Template.instance().searchSortBy.get() === key;
},
isLoading() {
return Template.instance().isLoading.get();
},
onTableScroll() {
const instance = Template.instance();
if (instance.loading || instance.end.get()) {
return;
}
return function(currentTarget) {
if (currentTarget.offsetHeight + currentTarget.scrollTop >= currentTarget.scrollHeight - 100) {
return instance.page.set(instance.page.get() + 1);
}
};
},
onTableResize() {
const { limit } = Template.instance();
return function() {
limit.set(Math.ceil((this.$('.table-scroll').height() / 40) + 5));
};
},
onTableSort() {
const { end, page, sortDirection, searchSortBy } = Template.instance();
return function(type) {
end.set(false);
page.set(0);
if (searchSortBy.get() === type) {
sortDirection.set(sortDirection.get() === 'asc' ? 'desc' : 'asc');
return;
}
searchSortBy.set(type);
sortDirection.set('asc');
};
}
});
Template.apps.events({
'click .manage'() {
'click .manage'(e) {
e.preventDefault();
const rl = this;
if (rl && rl.id) {
FlowRouter.go(`/admin/apps/${ rl.id }`);
} else {
// show an error ? I don't think this should ever happen
}
},
'click [data-button="install"]'() {
FlowRouter.go('/admin/app/install');
},
'keyup #app-filter'(e, t) {
t.filter.set(e.currentTarget.value);
'keyup .js-search'(e, t) {
t.searchText.set(e.currentTarget.value);
},
'submit .js-search'(e) {
e.preventDefault();
}
});

74
packages/rocketchat-theme/client/imports/components/modal/directory.css
Unescape View File

@ -38,82 +38,14 @@
color: var(--color-dark-light);
}
.rc-directory-channel {
&-wrapper {
display: flex;
overflow: hidden;
align-items: center;
}
&-avatar {
flex: 0 0 auto;
width: 30px;
height: 30px;
padding: 2px 4px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
&-info {
display: flex;
overflow: hidden;
flex-direction: column;
width: 1%;
white-space: nowrap;
text-overflow: ellipsis;
flex-grow: 1;
margin: 0 4px;
}
&-name,
&-username {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--rc-color-primary);
& .rc-icon {
font-size: 1rem;
margin: 0 -4px;
}
}
&-description {
overflow: hidden;
max-width: 200px;
margin-top: 0.625rem;
text-overflow: ellipsis;
color: var(--rc-color-primary-light);
}
}
.rc-directory-content {
.rc-table-content {
display: flex;
overflow-x: auto;
flex-direction: column;
flex: 1 1 100%;
height: 100vh;
padding: 0 1rem;
& .js-sort {
cursor: pointer;
@ -152,7 +84,7 @@
}
@media (width <= 700px) {
.rc-directory-content {
.rc-table-content {
& th:not(:first-child),
& td:not(:first-child) {
display: none;

74
packages/rocketchat-theme/client/imports/components/table.css
Unescape View File

@ -58,6 +58,80 @@
white-space: nowrap;
text-overflow: ellipsis;
}
&-wrapper {
display: flex;
overflow: hidden;
align-items: stretch;
}
&-subtitle {
color: var(--rc-color-primary-light);
overflow: hidden;
text-overflow: ellipsis;
}
&-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--rc-color-primary);
& .rc-icon {
font-size: 1rem;
margin: 0 -4px;
}
}
&-avatar {
flex: 0 0 auto;
width: 30px;
height: 30px;
padding: 2px 4px;
border-radius: 2px;
flex: 0 0 auto;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
&-info {
display: flex;
overflow: hidden;
flex-direction: column;
width: 1%;
white-space: nowrap;
text-overflow: ellipsis;
flex-grow: 1;
margin: 0 4px;
justify-content: space-around;
}
&-td {
&--small {
width: 80px;
}
&--medium {
width: 200px;
}
}
}
.table-wrapper {

20
packages/rocketchat-ui/client/views/app/directory.html
Unescape View File

@ -1,7 +1,7 @@
<template name="directory">
<section class="rc-directory">
{{> header sectionName="Directory" hideHelp=true}}
<div class="rc-directory-content">
<div class="rc-table-content">
{{>tabs tabs=tabsData}}
<div class="rc-input rc-input--small rc-directory-search">
<label class="rc-input__label">
@ -38,10 +38,10 @@
{{#each searchResults}}
<tr data-name="{{name}}">
<td>
<div class="rc-directory-channel-wrapper">
<div class="rc-directory-channel-avatar">{{> avatar username=name roomIcon="true"}}</div>
<div class="rc-directory-channel-info">
<span class="rc-directory-channel-name">
<div class="rc-table-wrapper">
<div class="rc-table-avatar">{{> avatar username=name roomIcon="true"}}</div>
<div class="rc-table-info">
<span class="rc-table-title">
{{>icon icon="hashtag" block="rc-directory-icon"}}
{{name}}
</span>
@ -53,7 +53,7 @@
<td class="table-column-date">{{lastMessage}}</td>
{{/if}}
<td class="table-column-date">{{createdAt}}</td>
<td class="rc-directory-topic">{{topic}}</td>
<td>{{topic}}</td>
</tr>
{{/each}}
</tbody>
@ -78,10 +78,10 @@
{{#each searchResults}}
<tr data-name="{{name}}">
<td>
<div class="rc-directory-channel-wrapper">
<div class="rc-directory-channel-avatar">{{> avatar username=username}}</div>
<div class="rc-directory-channel-info">
<span class="rc-directory-channel-username">
<div class="rc-table-wrapper">
<div class="rc-table-avatar">{{> avatar username=username}}</div>
<div class="rc-table-info">
<span class="rc-table-title">
{{username}}
</span>
</div>

2
packages/rocketchat-ui/client/views/app/directory.js
Unescape View File

@ -198,5 +198,5 @@ Template.directory.onCreated(function() {
Template.directory.onRendered(function() {
$('.main-content').removeClass('rc-old');
$('.rc-directory-content').css('height', `calc(100vh - ${ document.querySelector('.rc-directory .rc-header').offsetHeight }px)`);
$('.rc-table-content').css('height', `calc(100vh - ${ document.querySelector('.rc-directory .rc-header').offsetHeight }px)`);
});

Write Preview
Loading…
Cancel
Save