[FIX] Directory sort and column sizes were wrong (#10403)

* better css table and disabled sort by users

* fix scroll directory

* Update directory.css

fix indentation

* i18

packages/rocketchat-theme/client/imports/components/modal/directory.css

 .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;

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;
-	}
-}

packages/rocketchat-ui/client/views/app/directory.html

@@ -19,12 +19,12 @@
 		{{/header}}
 		<div class="rc-directory-content">
 			{{#if $eq searchType 'channels'}}
-				<table class="rc-table">
+				<table class="rc-table rc-table--fixed">
 					<thead class="rc-table-head">
 						<tr class="rc-table-tr">
-							<td class="rc-table-td js-sort" data-sort="name">Name {{> icon icon=(sortIcon 'name')}}</td>
-							<td class="rc-table-td js-sort" data-sort="usernames">Users {{> icon icon=(sortIcon 'usernames') }}</td>
-							<td class="rc-table-td js-sort" data-sort="createdAt">Created At {{> icon icon=(sortIcon 'createdAt') }}</td>
+							<td class="rc-table-td js-sort" data-sort="name">{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}</td>
+							<td class="rc-table-td rc-table-td--users">{{_ "Users"}}</td>
+							<td class="rc-table-td js-sort rc-table-td--createdAt" data-sort="createdAt">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</td>
 						</tr>
 					</thead>
 					<tbody class="rc-table-body">
@@ -57,9 +57,9 @@
 				<table class="rc-table">
 					<thead class="rc-table-head">
 						<tr class="rc-table-tr">
-							<td class="rc-table-td js-sort" data-sort="username">Username {{> icon icon="sort" }}</td>
-							<td class="rc-table-td js-sort" data-sort="name">Name {{> icon icon="sort" }}</td>
-							<td class="rc-table-td js-sort" data-sort="createdAt">Created At {{> icon icon="sort" }}</td>
+							<td class="rc-table-td js-sort" data-sort="name">{{_ "Name"}} {{> icon icon="sort" }}</td>
+							<td class="rc-table-td js-sort" data-sort="username">{{_ "Username"}} {{> icon icon="sort" }}</td>
+							<td class="rc-table-td js-sort" data-sort="createdAt">{{_ "Created_at"}} {{> icon icon="sort" }}</td>
 						</tr>
 					</thead>
 					<tbody class="rc-table-body">

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)`);