change toolbar search

pull/9642/head
Karl Prieb 8 years ago
parent 9788ad1041
commit 359b92d196
  1. 28
      packages/rocketchat-theme/client/imports/components/modal/directory.css
  2. 17
      packages/rocketchat-theme/client/imports/components/table.css
  3. 1
      packages/rocketchat-ui-master/public/icons.svg
  4. 62
      packages/rocketchat-ui-sidenav/client/toolbar.js
  5. 14
      packages/rocketchat-ui/client/views/app/directory.html
  6. 15
      packages/rocketchat-ui/client/views/app/directory.js
  7. 2
      server/methods/browseChannels.js

@ -1,7 +1,6 @@
.rc-directory {
&-header {
margin: 0 -9px;
display: flex;
}
@ -14,12 +13,15 @@
height: 36px;
min-height: 36px;
padding: 0;
margin: 0 9px;
}
&-search {
max-width: 230px;
margin-left: 9px;
margin-right: 9px;
}
&-selector,
&-search,
&-plus {
margin: 0 0.5rem;
}
}
@ -64,4 +66,22 @@
.rc-directory-content {
width: 100%;
overflow-x: auto;
.js-sort {
cursor: pointer;
}
}
@media (width <= 500px) {
.rc-directory-content .rc-table-head {
display: none;
}
.rc-directory {
&-selector,
&-search,
&-plus {
padding: 0 0.3rem;
}
}
}

@ -4,8 +4,11 @@
width: 100%;
&-head {
font-weight: 600;
color: var(--rc-color-primary-light);
& .rc-icon {
fill: var(--rc-color-primary-light);
}
}
&-body .rc-table-tr {
@ -25,23 +28,27 @@
vertical-align: middle;
&:first-child {
padding-left: 1.875rem;
padding-left: 1rem;
}
&:last-child {
padding-right: 1.875rem;
padding-right: 1rem;
}
&--bold {
font-weight: 600;
}
}
}
.rtl .rc-table-td {
&:first-child {
padding-right: 1.875rem;
padding-right: 1rem;
padding-left: 0;
}
&:last-child {
padding-right: 0;
padding-left: 1.875rem;
padding-left: 1rem;
}
}

@ -89,4 +89,5 @@
<symbol viewBox="0 0 448 512" id="icon-pause"><path d="M48 479h96c26.5 0 48-21.5 48-48V79c0-26.5-21.5-48-48-48H48C21.5 31 0 52.5 0 79v352c0 26.5 21.5 48 48 48zM32 79c0-8.8 7.2-16 16-16h96c8.8 0 16 7.2 16 16v352c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V79zm272 400h96c26.5 0 48-21.5 48-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48zM288 79c0-8.8 7.2-16 16-16h96c8.8 0 16 7.2 16 16v352c0 8.8-7.2 16-16 16h-96c-8.8 0-16-7.2-16-16V79z"/></symbol>
<symbol viewBox="0 0 640 512" id="icon-volume-mute"><path d="M615.554 509.393L4.534 27.657c-5.188-4.124-6.051-11.673-1.927-16.861l4.978-6.263c4.124-5.188 11.673-6.051 16.861-1.927l611.021 481.736c5.188 4.124 6.051 11.673 1.927 16.861l-4.978 6.263c-4.125 5.189-11.674 6.051-16.862 1.927zM407.172 126.221C450.902 152.963 480 201.134 480 256c0 19.945-3.861 38.996-10.856 56.463l26.002 20.5C505.972 309.488 512 283.404 512 256c0-66.099-34.976-124.573-88.133-157.079-7.538-4.611-17.388-2.235-21.997 5.302-4.61 7.539-2.236 17.387 5.302 21.998zm-171.913 1.844L256 107.328v37.089l32 25.229v-81.63c0-21.466-25.963-31.979-40.97-16.971l-37.075 37.068 25.304 19.952zm221.925-83.804C528.548 87.899 576 166.532 576 256c0 42.442-10.685 82.442-29.529 117.428l25.467 20.078C594.94 352.775 608 305.811 608 256c0-100.587-53.23-189.576-134.123-239.04-7.541-4.61-17.389-2.235-21.997 5.304-4.609 7.539-2.235 17.387 5.304 21.997zM357.159 208.178c13.422 8.213 22.517 21.271 25.639 36.209l32.141 25.341a89.491 89.491 0 0 0 1.06-13.728c0-30.891-15.753-58.972-42.14-75.117-7.538-4.615-17.388-2.239-21.998 5.297-4.611 7.537-2.24 17.386 5.298 21.998zm128.318 239.41a248.52 248.52 0 0 1-28.293 20.151c-7.539 4.609-9.913 14.458-5.304 21.997 4.612 7.544 14.465 9.91 21.997 5.304a280.708 280.708 0 0 0 37.246-27.233l-25.646-20.219zM256 266.666V404.67l-77.659-77.643a24 24 0 0 0-16.969-7.028H64V192h97.296l-40.588-32H56c-13.255 0-24 10.745-24 24v144c0 13.255 10.745 24 24 24h102.059l88.971 88.952c15.029 15.028 40.97 4.465 40.97-16.971V291.895l-32-25.229zm151.123 119.147c-7.498 4.624-9.853 14.443-5.253 21.965 4.611 7.541 14.462 9.911 21.997 5.302a184.087 184.087 0 0 0 9.738-6.387l-26.482-20.88z"/></symbol>
<symbol viewBox="0 0 576 512" id="icon-volume"><path d="M576 256c0 100.586-53.229 189.576-134.123 239.04-7.532 4.606-17.385 2.241-21.997-5.304-4.609-7.539-2.235-17.388 5.304-21.997C496.549 424.101 544 345.467 544 256c0-89.468-47.452-168.101-118.816-211.739-7.539-4.609-9.913-14.458-5.304-21.997 4.608-7.539 14.456-9.914 21.997-5.304C522.77 66.424 576 155.413 576 256zm-96 0c0-66.099-34.976-124.572-88.133-157.079-7.538-4.611-17.388-2.235-21.997 5.302-4.61 7.539-2.236 17.388 5.302 21.998C418.902 152.963 448 201.134 448 256c0 54.872-29.103 103.04-72.828 129.779-7.538 4.61-9.912 14.459-5.302 21.998 4.611 7.541 14.462 9.911 21.997 5.302C445.024 380.572 480 322.099 480 256zm-138.14-75.117c-7.538-4.615-17.388-2.239-21.998 5.297-4.612 7.537-2.241 17.387 5.297 21.998C341.966 218.462 352 236.34 352 256s-10.034 37.538-26.841 47.822c-7.538 4.611-9.909 14.461-5.297 21.998 4.611 7.538 14.463 9.909 21.998 5.297C368.247 314.972 384 286.891 384 256s-15.753-58.972-42.14-75.117zM256 88.017v335.964c0 21.436-25.942 31.999-40.971 16.971L126.059 352H24c-13.255 0-24-10.745-24-24V184c0-13.255 10.745-24 24-24h102.059l88.971-88.954C230.037 56.038 256 66.551 256 88.017zm-32 19.311l-77.659 77.644A24.001 24.001 0 0 1 129.372 192H32v128h97.372a24.001 24.001 0 0 1 16.969 7.028L224 404.67V107.328z"/></symbol>
<symbol viewBox="0 0 320 512" id="icon-sort"><path d="M288 288H32c-28.4 0-42.8 34.5-22.6 54.6l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c20-20.1 5.7-54.6-22.7-54.6zM160 448L32 320h256L160 448zM32 224h256c28.4 0 42.8-34.5 22.6-54.6l-128-128c-12.5-12.5-32.8-12.5-45.3 0l-128 128C-10.7 189.5 3.6 224 32 224zM160 64l128 128H32L160 64z"/></symbol>
</svg>

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

@ -36,61 +36,6 @@ const toolbarSearch = {
this.toolbarSearch = toolbarSearch;
const getFromServer = (cb, type) => {
isLoading.set(true);
const currentFilter = filterText;
Meteor.call('spotlight', currentFilter, usernamesFromClient, type, (err, results) => {
if (currentFilter !== filterText) {
return;
}
isLoading.set(false);
if (err) {
console.log(err);
return false;
}
const resultsFromServer = [];
const usersLength = results.users.length;
const roomsLength = results.rooms.length;
if (usersLength) {
for (let i = 0; i < usersLength; i++) {
resultsFromServer.push({
_id: results.users[i]._id,
t: 'd',
name: results.users[i].username,
fname: results.users[i].name
});
}
}
if (roomsLength) {
for (let i = 0; i < roomsLength; i++) {
const alreadyOnClient = resultsFromClient.find(item => item._id === results.rooms[i]._id);
if (alreadyOnClient) {
continue;
}
resultsFromServer.push({
_id: results.rooms[i]._id,
t: results.rooms[i].t,
name: results.rooms[i].name,
lastMessage: results.rooms[i].lastMessage
});
}
}
if (resultsFromServer.length) {
cb(resultsFromClient.concat(resultsFromServer));
}
});
};
const getFromServerDebounced = _.debounce(getFromServer, 500);
Template.toolbar.helpers({
canCreate() {
return RocketChat.authz.hasAtLeastOnePermission(['create-c', 'create-p']);
@ -169,7 +114,7 @@ Template.toolbar.helpers({
{ fname: searchQuery }
];
resultsFromClient = collection.find(query, {limit: 20, sort: {unread: -1, ls: -1}}).fetch();
resultsFromClient = collection.find(query, {sort: {unread: -1, ls: -1}}).fetch();
const resultsFromClientLength = resultsFromClient.length;
const user = Meteor.user();
@ -184,11 +129,6 @@ Template.toolbar.helpers({
}
cb(resultsFromClient);
// Use `filter` here to get results for `#` or `@` filter only
if (resultsFromClient.length < 20) {
getFromServerDebounced(cb, type);
}
},
getValue(_id, collection, records) {

@ -2,7 +2,7 @@
<section class="rc-directory">
{{# header sectionName="Directory" hideHelp=true}}
<div class="rc-directory-header">
<select class="rc-input__element js-typeSelector" name="type">
<select class="rc-input__element rc-directory-selector js-typeSelector" name="type">
<option value="channels">Channels</option>
<option value="users">Users</option>
</select>
@ -22,9 +22,9 @@
<table class="rc-table">
<thead class="rc-table-head">
<tr class="rc-table-tr">
<td class="rc-table-td js-sort" data-sort="name">Name</td>
<td class="rc-table-td">Users</td>
<td class="rc-table-td js-sort" data-sort="createdAt">Created At</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="usernames">Users {{> 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">
@ -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="name">Name</td>
<td class="rc-table-td">Username</td>
<td class="rc-table-td js-sort" data-sort="createdAt">Created At</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">

@ -64,14 +64,19 @@ Template.directory.events({
FlowRouter.go(RocketChat.roomTypes.getRouteLink(searchType, routeConfig));
},
'click .js-sort'(e, t) {
const type = e.currentTarget.dataset.sort;
const el = e.currentTarget;
const type = el.dataset.sort;
$('.js-sort').removeClass('rc-table-td--bold');
$(el).addClass('rc-table-td--bold');
if (t.searchSortBy.get() === type) {
t.sortDirection.set(t.sortDirection.get() === 'asc' ? 'asc' : 'desc');
t.sortDirection.set(t.sortDirection.get() === 'asc' ? 'desc' : 'asc');
return;
}
t.searchSortBy.set(type);
t.sortDirection.set(null);
t.sortDirection.set('asc');
},
'click .rc-directory-plus'() {
FlowRouter.go('create-channel');
@ -81,8 +86,8 @@ Template.directory.events({
Template.directory.onCreated(function() {
this.searchText = new ReactiveVar('');
this.searchType = new ReactiveVar('channels');
this.searchSortBy = new ReactiveVar();
this.sortDirection = new ReactiveVar()
this.searchSortBy = new ReactiveVar('name');
this.sortDirection = new ReactiveVar('asc');
this.results = new ReactiveVar([]);

@ -35,7 +35,7 @@ Meteor.methods({
return;
}
if (!['name', 'createdAt'/*, ...type === 'channels'? ['userlenght'] : []*/].includes(sortBy)) {
if (!['name', 'createdAt', ...type === 'channels'? ['usernames'] : [], ...type === 'users' ? ['username'] : []].includes(sortBy)) {
return;
}

Loading…
Cancel
Save