From 75f95c00ef222e14aaa18c587d2c6ef49118843b Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Fri, 20 Jan 2017 19:09:10 -0200 Subject: [PATCH 1/6] add toolbar search --- .../rocketchat-theme/client/imports/base.less | 152 +++++++++--------- packages/rocketchat-theme/server/colors.less | 16 +- packages/rocketchat-theme/server/lesshat.less | 2 +- .../rocketchat-ui-master/master/main.coffee | 4 +- .../rocketchat-ui-master/master/main.html | 1 - packages/rocketchat-ui-sidenav/package.js | 2 + .../side-nav/sideNav.html | 1 + .../side-nav/toolbar.html | 10 ++ .../rocketchat-ui-sidenav/side-nav/toolbar.js | 80 +++++++++ 9 files changed, 190 insertions(+), 78 deletions(-) create mode 100644 packages/rocketchat-ui-sidenav/side-nav/toolbar.html create mode 100644 packages/rocketchat-ui-sidenav/side-nav/toolbar.js diff --git a/packages/rocketchat-theme/client/imports/base.less b/packages/rocketchat-theme/client/imports/base.less index 371ba2a9d42..02e2be5f8ea 100644 --- a/packages/rocketchat-theme/client/imports/base.less +++ b/packages/rocketchat-theme/client/imports/base.less @@ -1110,7 +1110,7 @@ label.required::after { top: 0; left: 0; height: 100%; - z-index: 2; + z-index: 3; overflow-y: auto; overflow-x: hidden; width: @rooms-box-width; @@ -1370,7 +1370,7 @@ label.required::after { top: 0; left: 0; width: 100%; - z-index: 1; + z-index: 2; cursor: pointer; min-height: @header-min-height; height: @header-min-height; @@ -1380,7 +1380,7 @@ label.required::after { position: absolute; top: 18px; right: 8px; - z-index: 2; + z-index: 3; cursor: pointer; } @@ -1393,7 +1393,7 @@ label.required::after { text-align: right; min-height: @footer-min-height; height: @footer-min-height; - z-index: 1; + z-index: 2; .logo { display: block; @@ -1611,6 +1611,25 @@ label.required::after { } } +.toolbar { + position: relative; + padding-right: 8px; + margin-top: 10px; +} + +.toolbar--search-icon { + position: absolute; + top: 0; + left: 0; + line-height: 35px; + width: 35px; + text-align: center; +} + +.toolbar--search { + padding-left: 35px !important; +} + .new-room-highlight a { -webkit-animation: highlight 2s infinite; -moz-animation: highlight 2s infinite; @@ -1701,89 +1720,76 @@ label.required::after { } .spotlight { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 1000; - display: flex; - display: -webkit-flex; - justify-content: center; - padding: 0 40px; + padding-right: 8px; + margin-top: 10px; +} - > .spotlight-input { - position: relative; - width: 100%; - max-width: 600px; - font-size: 24px; - margin-top: 6%; - margin-bottom: auto; - border-radius: 5px; - overflow: hidden; - box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5); +.spotlight-wrapper { + width: 100%; - > input { - box-shadow: none; - border-width: 0; - line-height: 46px; - height: 46px; - padding: 0 10px 0 46px; - } + > i { + position: absolute; + line-height: 35px; + width: 35px; + text-align: center; + z-index: 1; + color: #a0a0a0 !important; + } - > i { - position: absolute; - z-index: 10; - line-height: 46px; - width: 46px; - text-align: center; - font-weight: 100; - } + .message-popup { + position: absolute; + box-shadow: none; + border-radius: 0 0 5px 5px; + top: 35px; + left: 0; + width: 100%; - .message-popup { - position: relative; - box-shadow: none; - border-radius: 0; + &.popup-down { + top: -3px; + } - .popup-item { - border-top: 1px solid #eaeaea; - line-height: 40px; - font-size: 20px; - padding: 0 10px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; + .popup-item { + border-top: 1px solid #eaeaea; + line-height: 30px; + font-size: 14px; + padding: 0 10px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + color: #000; - i { - margin-right: 4px; - line-height: 28px; - display: inline-block; - border-radius: 20px; - width: 28px; - } + &.selected { + color: #fff; + } - &.selected { - i { - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); - } + i { + margin-right: 4px; + line-height: 28px; + display: inline-block; + border-radius: 20px; + width: 28px; + &.status-offline { + color: #a0a0a0 !important; } + } - span { - float: right; - border-radius: 2px; - margin-top: 10px; - min-width: 20px; - padding: 0 2px; - text-align: center; - font-size: 14px; - line-height: 20px; - font-weight: 800; - } + span { + float: right; + min-width: 20px; + padding: 0 2px; + text-align: center; + font-size: 14px; + line-height: 30px; + font-weight: 800; } } } } +.spotlight-input { + padding-left: 35px !important; +} + // MAIN CONTENT + MAIN PAGES // .main-content { diff --git a/packages/rocketchat-theme/server/colors.less b/packages/rocketchat-theme/server/colors.less index 737a4c43284..ae9018e043f 100755 --- a/packages/rocketchat-theme/server/colors.less +++ b/packages/rocketchat-theme/server/colors.less @@ -179,6 +179,10 @@ background-color: @transparent-light; } +.border-transparent-lighter { + border-color: @transparent-lighter; +} + .background-transparent-lightest { background-color: @transparent-lightest; } @@ -241,8 +245,18 @@ .input-shade(@primary-font-color, @content-background-color); +.toolbar--search { + &:focus { + border-color: fade(@primary-background-contrast, 50%); + } + + &::placeholder { + color: @transparent-lighter; + } +} + .flex-nav { - .input-shade(@primary-background-contrast, @primary-background-color); + .input-shade(@primary-background-contrast, @transparent-lighter); input { &:focus { diff --git a/packages/rocketchat-theme/server/lesshat.less b/packages/rocketchat-theme/server/lesshat.less index cf7cf4758d6..b56ab5c59d4 100644 --- a/packages/rocketchat-theme/server/lesshat.less +++ b/packages/rocketchat-theme/server/lesshat.less @@ -34,7 +34,7 @@ } } - .diabled label, + .disabled label, [disabled] label { color: mix(@color, @bg, 75%); } diff --git a/packages/rocketchat-ui-master/master/main.coffee b/packages/rocketchat-ui-master/master/main.coffee index dca917d4fcf..93408b96dde 100644 --- a/packages/rocketchat-ui-master/master/main.coffee +++ b/packages/rocketchat-ui-master/master/main.coffee @@ -7,10 +7,10 @@ Template.body.onRendered -> if e.keyCode is 80 and (e.ctrlKey is true or e.metaKey is true) and e.shiftKey is false e.preventDefault() e.stopPropagation() - spotlight.show() + toolbarSearch.focus() if e.keyCode is 27 - spotlight.hide() + toolbarSearch.clear() unread = Session.get('unread') if e.keyCode is 27 and e.shiftKey is true and unread? and unread isnt '' diff --git a/packages/rocketchat-ui-master/master/main.html b/packages/rocketchat-ui-master/master/main.html index 216d506f849..7434df1c065 100644 --- a/packages/rocketchat-ui-master/master/main.html +++ b/packages/rocketchat-ui-master/master/main.html @@ -42,7 +42,6 @@ {{#if requirePasswordChange}} {{> loginLayout center="resetPassword"}} {{else}} - {{> spotlight}} {{> videoCall overlay=true}}
+ {{> toolbar}} {{> unreadRooms }} {{#each roomType}} diff --git a/packages/rocketchat-ui-sidenav/side-nav/toolbar.html b/packages/rocketchat-ui-sidenav/side-nav/toolbar.html new file mode 100644 index 00000000000..35d0817db7f --- /dev/null +++ b/packages/rocketchat-ui-sidenav/side-nav/toolbar.html @@ -0,0 +1,10 @@ + diff --git a/packages/rocketchat-ui-sidenav/side-nav/toolbar.js b/packages/rocketchat-ui-sidenav/side-nav/toolbar.js new file mode 100644 index 00000000000..f0741a34f24 --- /dev/null +++ b/packages/rocketchat-ui-sidenav/side-nav/toolbar.js @@ -0,0 +1,80 @@ +this.toolbarSearch = { + clear: () => { + console.log('clear!'); + $('.toolbar').removeClass('active shortcut'); + $('.toolbar--search').val(''); + }, + focus: () => { + console.log('focus!'); + $('.toolbar--search').val(''); + $('.toolbar--search').focus(); + $('.toolbar').removeClass('active shortcut'); + } +}; + +Template.toolbar.helpers({ + results() { + return Template.instance().resultsList.get(); + } +}); + +Template.toolbar.events({ + 'keyup .toolbar--search': (e, t) => { + const searchVal = $(e.currentTarget).val().trim(); + + const resultsFromClient = RocketChat.models.Subscriptions + .find({name: new RegExp((RegExp.escape(searchVal)), 'i'), rid: {$ne: Session.get('openedRoom')}}, {limit: 10, sort: {unread: -1, ls: -1}}).fetch(); + + t.resultsList.set(resultsFromClient); + + + const resultsFromClientLength = resultsFromClient.length; + const usernamesFromClient = [Meteor.user().username]; + + for (let i = 0; i < resultsFromClientLength; i++) { + if (resultsFromClient[i].t === 'd') { + usernamesFromClient.push(resultsFromClient[i].name); + } + } + + t.getFromServer(searchVal, usernamesFromClient); + } +}); + +Template.toolbar.onCreated(function() { + this.resultsList = new ReactiveVar([]); + this.getFromServer = _.throttle((filter, usernames) => { + Meteor.call('spotlight', filter, usernames, (err, results) => { + 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 + }); + } + } + + if (roomsLength) { + for (let i = 0; i < roomsLength; i++) { + resultsFromServer.push({ + _id: results.rooms[i]._id, + t: results.rooms[i].t, + name: results.rooms[i].name + }); + } + } + + this.resultsList.set(this.resultsList.get().concat(resultsFromServer)); + }); + }, 500); +}); From 11f0b522b0fcada933650d84a580187389cb904a Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Fri, 20 Jan 2017 20:53:00 -0200 Subject: [PATCH 2/6] back to messages-dropdown --- .../rocketchat-theme/client/imports/base.less | 36 +++- packages/rocketchat-theme/server/colors.less | 4 + .../side-nav/toolbar.html | 4 +- .../rocketchat-ui-sidenav/side-nav/toolbar.js | 186 +++++++++++++----- .../app/spotlight/spotlightTemplate.html | 2 +- 5 files changed, 170 insertions(+), 62 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/base.less b/packages/rocketchat-theme/client/imports/base.less index 02e2be5f8ea..7338298ba73 100644 --- a/packages/rocketchat-theme/client/imports/base.less +++ b/packages/rocketchat-theme/client/imports/base.less @@ -1615,6 +1615,17 @@ label.required::after { position: relative; padding-right: 8px; margin-top: 10px; + + &.active { + position: absolute; + width: 100%; + background: #044b76; + height: 97%; + z-index: 1; + left: 0; + margin-left: 8px; + padding-right: 16px; + } } .toolbar--search-icon { @@ -2512,11 +2523,28 @@ label.required::after { 0 -1px 10px 0 rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.16); border-radius: 5px; -} -.message-popup.popup-down { - bottom: auto; - top: 0; + &.popup-down { + bottom: auto; + top: 0; + } + + &.search-results-list { + top: 25px; + height: 500px; + box-shadow: none; + border-radius: 0; + + .popup-item { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .unread { + top: 8px; + } + } } .message-popup-title { diff --git a/packages/rocketchat-theme/server/colors.less b/packages/rocketchat-theme/server/colors.less index ae9018e043f..d6ba340f692 100755 --- a/packages/rocketchat-theme/server/colors.less +++ b/packages/rocketchat-theme/server/colors.less @@ -581,6 +581,10 @@ a:hover { } } +.message-popup.search-results-list { + background-color: lighten(@primary-background-color, 2.5%); +} + /** ---------------------------------------------------------------------------- * Flex tabs / admin fly-out panels */ diff --git a/packages/rocketchat-ui-sidenav/side-nav/toolbar.html b/packages/rocketchat-ui-sidenav/side-nav/toolbar.html index 35d0817db7f..9a4964b660d 100644 --- a/packages/rocketchat-ui-sidenav/side-nav/toolbar.html +++ b/packages/rocketchat-ui-sidenav/side-nav/toolbar.html @@ -3,8 +3,6 @@ - {{#each results}} -

{{name}}

- {{/each}} + {{> messagePopup popupConfig}}
diff --git a/packages/rocketchat-ui-sidenav/side-nav/toolbar.js b/packages/rocketchat-ui-sidenav/side-nav/toolbar.js index f0741a34f24..2dd33197f5c 100644 --- a/packages/rocketchat-ui-sidenav/side-nav/toolbar.js +++ b/packages/rocketchat-ui-sidenav/side-nav/toolbar.js @@ -1,80 +1,158 @@ this.toolbarSearch = { clear: () => { - console.log('clear!'); - $('.toolbar').removeClass('active shortcut'); $('.toolbar--search').val(''); }, focus: () => { - console.log('focus!'); $('.toolbar--search').val(''); $('.toolbar--search').focus(); - $('.toolbar').removeClass('active shortcut'); } }; +const getFromServer = (filter, usernames, records, cb) => { + Meteor.call('spotlight', filter, usernames, (err, results) => { + 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 + }); + } + } + + if (roomsLength) { + for (let i = 0; i < roomsLength; i++) { + resultsFromServer.push({ + _id: results.rooms[i]._id, + t: results.rooms[i].t, + name: results.rooms[i].name + }); + } + } + + if (resultsFromServer.length) { + cb(records.concat(resultsFromServer)); + } + }); +}; + +const getFromServerDelayed = _.throttle(getFromServer, 500); + Template.toolbar.helpers({ results() { return Template.instance().resultsList.get(); + }, + popupConfig() { + const config = { + cls: 'search-results-list', + collection: RocketChat.models.Subscriptions, + template: 'spotlightTemplate', + input: '.toolbar--search', + getFilter: function(collection, filter, cb) { + const resultsFromClient = collection.find({name: new RegExp((RegExp.escape(filter)), 'i'), rid: {$ne: Session.get('openedRoom')}}, {limit: 10, sort: {unread: -1, ls: -1}}).fetch(); + + const resultsFromClientLength = resultsFromClient.length; + const usernamesFromClient = [Meteor.user().username]; + + for (let i = 0; i < resultsFromClientLength; i++) { + if (resultsFromClient[i].t === 'd') { + usernamesFromClient.push(resultsFromClient[i].name); + } + } + + cb(resultsFromClient); + + getFromServerDelayed(filter, usernamesFromClient, resultsFromClient, cb); + }, + getValue: function(_id, collection, records) { + const doc = _.findWhere(records, {_id: _id}); + + RocketChat.roomTypes.openRouteLink(doc.t, doc, FlowRouter.current().queryParams); + toolbarSearch.hide(); + } + }; + + return config; } }); -Template.toolbar.events({ - 'keyup .toolbar--search': (e, t) => { - const searchVal = $(e.currentTarget).val().trim(); +// Template.toolbar.events({ +// 'keyup .toolbar--search, change .toolbar--search': (e, t) => { +// const searchVal = $(e.currentTarget).val().trim(); - const resultsFromClient = RocketChat.models.Subscriptions - .find({name: new RegExp((RegExp.escape(searchVal)), 'i'), rid: {$ne: Session.get('openedRoom')}}, {limit: 10, sort: {unread: -1, ls: -1}}).fetch(); +// if (!$('.toolbar').hasClass('shortcut')) { +// if (searchVal === '') { +// $('.toolbar').removeClass('active'); +// t.resultsList.set([]); +// return false; +// } +// } - t.resultsList.set(resultsFromClient); +// $('.toolbar').addClass('active'); +// const resultsFromClient = RocketChat.models.Subscriptions +// .find({name: new RegExp((RegExp.escape(searchVal)), 'i'), rid: {$ne: Session.get('openedRoom')}}, {limit: 10, sort: {unread: -1, ls: -1}}).fetch(); - const resultsFromClientLength = resultsFromClient.length; - const usernamesFromClient = [Meteor.user().username]; +// t.resultsList.set(resultsFromClient); - for (let i = 0; i < resultsFromClientLength; i++) { - if (resultsFromClient[i].t === 'd') { - usernamesFromClient.push(resultsFromClient[i].name); - } - } - t.getFromServer(searchVal, usernamesFromClient); - } -}); +// const resultsFromClientLength = resultsFromClient.length; +// const usernamesFromClient = [Meteor.user().username]; -Template.toolbar.onCreated(function() { - this.resultsList = new ReactiveVar([]); - this.getFromServer = _.throttle((filter, usernames) => { - Meteor.call('spotlight', filter, usernames, (err, results) => { - if (err) { - console.log(err); - return false; - } +// for (let i = 0; i < resultsFromClientLength; i++) { +// if (resultsFromClient[i].t === 'd') { +// usernamesFromClient.push(resultsFromClient[i].name); +// } +// } - 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 - }); - } - } +// t.getFromServer(searchVal, usernamesFromClient); +// } +// }); - if (roomsLength) { - for (let i = 0; i < roomsLength; i++) { - resultsFromServer.push({ - _id: results.rooms[i]._id, - t: results.rooms[i].t, - name: results.rooms[i].name - }); - } - } +// Template.toolbar.onCreated(function() { +// this.resultsList = new ReactiveVar([]); +// this.getFromServer = _.throttle((filter, usernames) => { +// Meteor.call('spotlight', filter, usernames, (err, results) => { +// if (err) { +// console.log(err); +// return false; +// } - this.resultsList.set(this.resultsList.get().concat(resultsFromServer)); - }); - }, 500); -}); +// 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 +// }); +// } +// } + +// if (roomsLength) { +// for (let i = 0; i < roomsLength; i++) { +// resultsFromServer.push({ +// _id: results.rooms[i]._id, +// t: results.rooms[i].t, +// name: results.rooms[i].name +// }); +// } +// } + +// this.resultsList.set(this.resultsList.get().concat(resultsFromServer)); +// console.log(this.resultsList.get()); +// }); +// }, 500); +// }); diff --git a/packages/rocketchat-ui/views/app/spotlight/spotlightTemplate.html b/packages/rocketchat-ui/views/app/spotlight/spotlightTemplate.html index c0860daa368..f121f78f42d 100644 --- a/packages/rocketchat-ui/views/app/spotlight/spotlightTemplate.html +++ b/packages/rocketchat-ui/views/app/spotlight/spotlightTemplate.html @@ -2,6 +2,6 @@ {{name}} {{#if unread}} - {{unread}} + {{unread}} {{/if}} From af42f26f2ddfb49938e47187cad8812ccfbdb720 Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Mon, 23 Jan 2017 17:24:02 -0200 Subject: [PATCH 3/6] toolbar search --- .../rocketchat-theme/client/imports/base.less | 122 +++++------------- .../rocketchat-theme/client/imports/rtl.less | 27 ++-- packages/rocketchat-theme/server/colors.less | 9 +- .../message/popup/messagePopup.coffee | 16 ++- .../side-nav/toolbar.html | 15 ++- .../rocketchat-ui-sidenav/side-nav/toolbar.js | 120 ++++++----------- packages/rocketchat-ui/package.js | 5 - .../app/spotlight/mobileMessageMenu.coffee | 59 --------- .../views/app/spotlight/spotlight.coffee | 64 --------- .../views/app/spotlight/spotlight.html | 9 -- .../app/spotlight/spotlightTemplate.html | 7 - .../views/app/spotlight/spotlightTemplate.js | 13 -- 12 files changed, 120 insertions(+), 346 deletions(-) delete mode 100644 packages/rocketchat-ui/views/app/spotlight/mobileMessageMenu.coffee delete mode 100644 packages/rocketchat-ui/views/app/spotlight/spotlight.coffee delete mode 100644 packages/rocketchat-ui/views/app/spotlight/spotlight.html delete mode 100644 packages/rocketchat-ui/views/app/spotlight/spotlightTemplate.html delete mode 100644 packages/rocketchat-ui/views/app/spotlight/spotlightTemplate.js diff --git a/packages/rocketchat-theme/client/imports/base.less b/packages/rocketchat-theme/client/imports/base.less index 7338298ba73..9fb4ccfd7ad 100644 --- a/packages/rocketchat-theme/client/imports/base.less +++ b/packages/rocketchat-theme/client/imports/base.less @@ -1336,6 +1336,8 @@ label.required::after { direction: ltr; padding-left: 8px; padding-bottom: 1em; + position: relative; + padding-top: 50px; } } @@ -1585,7 +1587,7 @@ label.required::after { -webkit-justify-content: center; &.top-unread-rooms { - top: 60px; + top: 105px; } &.bottom-unread-rooms { @@ -1612,33 +1614,40 @@ label.required::after { } .toolbar { - position: relative; - padding-right: 8px; - margin-top: 10px; + position: fixed; + width: 244px; + z-index: 3; + top: 60px; + padding-top: 10px; +} - &.active { - position: absolute; - width: 100%; - background: #044b76; - height: 97%; - z-index: 1; - left: 0; - margin-left: 8px; - padding-right: 16px; - } +.toolbar-search { + padding-right: 8px; + position: relative; } -.toolbar--search-icon { +.toolbar-search__icon { position: absolute; top: 0; left: 0; line-height: 35px; - width: 35px; - text-align: center; + width: 35px; + text-align: center; +} + +.toolbar-search__icon--cancel { + left: auto; + right: 8px; + opacity: 0; + transition: opacity 0.3s; } -.toolbar--search { - padding-left: 35px !important; +.toolbar-search__input { + padding: 6px 35px !important; + + &:focus + .toolbar-search__icon--cancel { + opacity: 1; + } } .new-room-highlight a { @@ -1730,77 +1739,6 @@ label.required::after { } } -.spotlight { - padding-right: 8px; - margin-top: 10px; -} - -.spotlight-wrapper { - width: 100%; - - > i { - position: absolute; - line-height: 35px; - width: 35px; - text-align: center; - z-index: 1; - color: #a0a0a0 !important; - } - - .message-popup { - position: absolute; - box-shadow: none; - border-radius: 0 0 5px 5px; - top: 35px; - left: 0; - width: 100%; - - &.popup-down { - top: -3px; - } - - .popup-item { - border-top: 1px solid #eaeaea; - line-height: 30px; - font-size: 14px; - padding: 0 10px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - color: #000; - - &.selected { - color: #fff; - } - - i { - margin-right: 4px; - line-height: 28px; - display: inline-block; - border-radius: 20px; - width: 28px; - &.status-offline { - color: #a0a0a0 !important; - } - } - - span { - float: right; - min-width: 20px; - padding: 0 2px; - text-align: center; - font-size: 14px; - line-height: 30px; - font-weight: 800; - } - } - } -} - -.spotlight-input { - padding-left: 35px !important; -} - // MAIN CONTENT + MAIN PAGES // .main-content { @@ -2531,7 +2469,8 @@ label.required::after { &.search-results-list { top: 25px; - height: 500px; + height: calc(~"100vh - 200px"); + overflow-y: auto; box-shadow: none; border-radius: 0; @@ -2539,6 +2478,7 @@ label.required::after { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + padding-left: 6px; } .unread { diff --git a/packages/rocketchat-theme/client/imports/rtl.less b/packages/rocketchat-theme/client/imports/rtl.less index 23519c92ef4..ccf2f583635 100644 --- a/packages/rocketchat-theme/client/imports/rtl.less +++ b/packages/rocketchat-theme/client/imports/rtl.less @@ -802,19 +802,22 @@ .left(12px); } - .spotlight { - > .spotlight-input { - .icon-search { - left: 0; - } + .toolbar-search { + padding: 0 0 0 8px; + } - .message-popup { - .popup-item { - span { - float: left; - } - } - } + .toolbar-search__icon { + right: 0; + } + + .toolbar-search__icon--cancel { + right: auto; + left: 0; + } + + .message-popup.search-results-list { + .popup-item { + padding-right: 6px; } } } diff --git a/packages/rocketchat-theme/server/colors.less b/packages/rocketchat-theme/server/colors.less index d6ba340f692..c1d83738c3a 100755 --- a/packages/rocketchat-theme/server/colors.less +++ b/packages/rocketchat-theme/server/colors.less @@ -245,7 +245,7 @@ .input-shade(@primary-font-color, @content-background-color); -.toolbar--search { +.toolbar-search__input { &:focus { border-color: fade(@primary-background-contrast, 50%); } @@ -543,7 +543,8 @@ a:hover { background-color: @tertiary-font-color; } - .rooms-list { + .rooms-list, + .toolbar { background-color: lighten(@primary-background-color, 2.5%); } @@ -583,6 +584,10 @@ a:hover { .message-popup.search-results-list { background-color: lighten(@primary-background-color, 2.5%); + + .popup-item.selected { + background-color: @transparent-darker; + } } /** ---------------------------------------------------------------------------- diff --git a/packages/rocketchat-ui-message/message/popup/messagePopup.coffee b/packages/rocketchat-ui-message/message/popup/messagePopup.coffee index 8bab8b1ec64..5dfacccea10 100644 --- a/packages/rocketchat-ui-message/message/popup/messagePopup.coffee +++ b/packages/rocketchat-ui-message/message/popup/messagePopup.coffee @@ -96,23 +96,31 @@ Template.messagePopup.onCreated -> if template.open.curValue isnt true or template.hasData.curValue isnt true return - if event.which in [keys.ARROW_UP, keys.ARROW_DOWN] - event.preventDefault() - event.stopPropagation() - if event.which in [keys.ENTER, keys.TAB] + console.log('ENTER') + template.open.set false template.enterValue() event.preventDefault() event.stopPropagation() + return if event.which is keys.ARROW_UP template.up() + + event.preventDefault() + event.stopPropagation() + return + else if event.which is keys.ARROW_DOWN template.down() + event.preventDefault() + event.stopPropagation() + return + template.setTextFilter = _.debounce (value) -> template.textFilter.set(value) , template.textFilterDelay diff --git a/packages/rocketchat-ui-sidenav/side-nav/toolbar.html b/packages/rocketchat-ui-sidenav/side-nav/toolbar.html index 9a4964b660d..86d3474d1d5 100644 --- a/packages/rocketchat-ui-sidenav/side-nav/toolbar.html +++ b/packages/rocketchat-ui-sidenav/side-nav/toolbar.html @@ -1,8 +1,19 @@ + + diff --git a/packages/rocketchat-ui-sidenav/side-nav/toolbar.js b/packages/rocketchat-ui-sidenav/side-nav/toolbar.js index 2dd33197f5c..0cd0bbb9e05 100644 --- a/packages/rocketchat-ui-sidenav/side-nav/toolbar.js +++ b/packages/rocketchat-ui-sidenav/side-nav/toolbar.js @@ -1,13 +1,16 @@ -this.toolbarSearch = { +const toolbarSearch = { clear: () => { - $('.toolbar--search').val(''); + $('.toolbar-search__input').val(''); + console.log('clear'); }, focus: () => { - $('.toolbar--search').val(''); - $('.toolbar--search').focus(); + $('.toolbar-search__input').val(''); + $('.toolbar-search__input').focus(); } }; +this.toolbarSearch = toolbarSearch; + const getFromServer = (filter, usernames, records, cb) => { Meteor.call('spotlight', filter, usernames, (err, results) => { if (err) { @@ -55,8 +58,8 @@ Template.toolbar.helpers({ const config = { cls: 'search-results-list', collection: RocketChat.models.Subscriptions, - template: 'spotlightTemplate', - input: '.toolbar--search', + template: 'toolbarSearchList', + input: '.toolbar-search__input', getFilter: function(collection, filter, cb) { const resultsFromClient = collection.find({name: new RegExp((RegExp.escape(filter)), 'i'), rid: {$ne: Session.get('openedRoom')}}, {limit: 10, sort: {unread: -1, ls: -1}}).fetch(); @@ -77,7 +80,7 @@ Template.toolbar.helpers({ const doc = _.findWhere(records, {_id: _id}); RocketChat.roomTypes.openRouteLink(doc.t, doc, FlowRouter.current().queryParams); - toolbarSearch.hide(); + toolbarSearch.clear(); } }; @@ -85,74 +88,35 @@ Template.toolbar.helpers({ } }); -// Template.toolbar.events({ -// 'keyup .toolbar--search, change .toolbar--search': (e, t) => { -// const searchVal = $(e.currentTarget).val().trim(); - -// if (!$('.toolbar').hasClass('shortcut')) { -// if (searchVal === '') { -// $('.toolbar').removeClass('active'); -// t.resultsList.set([]); -// return false; -// } -// } - -// $('.toolbar').addClass('active'); - -// const resultsFromClient = RocketChat.models.Subscriptions -// .find({name: new RegExp((RegExp.escape(searchVal)), 'i'), rid: {$ne: Session.get('openedRoom')}}, {limit: 10, sort: {unread: -1, ls: -1}}).fetch(); - -// t.resultsList.set(resultsFromClient); - - -// const resultsFromClientLength = resultsFromClient.length; -// const usernamesFromClient = [Meteor.user().username]; - -// for (let i = 0; i < resultsFromClientLength; i++) { -// if (resultsFromClient[i].t === 'd') { -// usernamesFromClient.push(resultsFromClient[i].name); -// } -// } - -// t.getFromServer(searchVal, usernamesFromClient); -// } -// }); - -// Template.toolbar.onCreated(function() { -// this.resultsList = new ReactiveVar([]); -// this.getFromServer = _.throttle((filter, usernames) => { -// Meteor.call('spotlight', filter, usernames, (err, results) => { -// 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 -// }); -// } -// } - -// if (roomsLength) { -// for (let i = 0; i < roomsLength; i++) { -// resultsFromServer.push({ -// _id: results.rooms[i]._id, -// t: results.rooms[i].t, -// name: results.rooms[i].name -// }); -// } -// } - -// this.resultsList.set(this.resultsList.get().concat(resultsFromServer)); -// console.log(this.resultsList.get()); -// }); -// }, 500); -// }); +Template.toolbar.events({ + 'click .toolbar-search__icon--cancel': () => { + $('.toolbar-search__input').trigger({ + type: 'keyup', + which: 27 + }); + toolbarSearch.clear(); + }, + 'keydown .toolbar-search__input': (event) => { + if (event.which === 13) { + $('.toolbar-search__input').trigger({ + type: 'keyup', + which: 27 + }); + toolbarSearch.clear(); + } + } +}); + +Template.toolbarSearchList.helpers({ + icon() { + return RocketChat.roomTypes.getIcon(this.t); + }, + + userStatus() { + if (this.t === 'd') { + return 'status-' + (Session.get(`user_${this.name}_status`) || 'offline'); + } else { + return 'status-' + (RocketChat.roomTypes.getUserStatus(this.t, this.rid || this._id) || 'offline'); + } + } +}); diff --git a/packages/rocketchat-ui/package.js b/packages/rocketchat-ui/package.js index 3b868ee1e77..82eb53d0e43 100644 --- a/packages/rocketchat-ui/package.js +++ b/packages/rocketchat-ui/package.js @@ -91,8 +91,6 @@ Package.onUse(function(api) { api.addFiles('views/app/roomSearch.html', 'client'); api.addFiles('views/app/secretURL.html', 'client'); api.addFiles('views/app/userSearch.html', 'client'); - api.addFiles('views/app/spotlight/spotlight.html', 'client'); - api.addFiles('views/app/spotlight/spotlightTemplate.html', 'client'); api.addFiles('views/app/videoCall/videoButtons.html', 'client'); api.addFiles('views/app/videoCall/videoCall.html', 'client'); @@ -106,9 +104,6 @@ Package.onUse(function(api) { api.addFiles('views/app/room.coffee', 'client'); api.addFiles('views/app/roomSearch.coffee', 'client'); api.addFiles('views/app/secretURL.coffee', 'client'); - api.addFiles('views/app/spotlight/mobileMessageMenu.coffee', 'client'); - api.addFiles('views/app/spotlight/spotlight.coffee', 'client'); - api.addFiles('views/app/spotlight/spotlightTemplate.js', 'client'); api.addFiles('views/app/videoCall/videoButtons.coffee', 'client'); api.addFiles('views/app/videoCall/videoCall.coffee', 'client'); }); diff --git a/packages/rocketchat-ui/views/app/spotlight/mobileMessageMenu.coffee b/packages/rocketchat-ui/views/app/spotlight/mobileMessageMenu.coffee deleted file mode 100644 index 5a07bbff3ff..00000000000 --- a/packages/rocketchat-ui/views/app/spotlight/mobileMessageMenu.coffee +++ /dev/null @@ -1,59 +0,0 @@ -@mobileMessageMenu = - show: (message, template, e, scope) -> - if not window.plugins?.actionsheet? - return - - options = - 'androidTheme': window.plugins.actionsheet.ANDROID_THEMES.THEME_HOLO_LIGHT - 'buttonLabels': [ - TAPi18n.__('Report Abuse') - ] - androidEnableCancelButton: true - addCancelButtonWithLabel: TAPi18n.__('Cancel') - # 'position': [20, 40] // for iPad pass in the [x, y] position of the popover - - buttonActions = [ - mobileMessageMenu.reportAbuse - ] - - buttons = RocketChat.MessageAction.getButtons message, (message.customClass or 'message-mobile') - for button in buttons - if button.id is 'delete-message' - options.addDestructiveButtonWithLabel = TAPi18n.__(button.i18nLabel) - buttonActions.unshift button.action - else - buttonActions.push button.action - options.buttonLabels.push TAPi18n.__(button.i18nLabel) - - window.plugins.actionsheet.show options, (buttonIndex) -> - if buttonActions[buttonIndex-1]? - buttonActions[buttonIndex-1].call scope, e, template, message - - reportAbuse: (e, t, message) -> - swal { - title: TAPi18n.__('Report_this_message_question_mark') - text: message.msg - inputPlaceholder: TAPi18n.__('Why_do_you_want_to_report_question_mark') - type: 'input' - showCancelButton: true - confirmButtonColor: '#DD6B55' - confirmButtonText: TAPi18n.__("Report_exclamation_mark") - cancelButtonText: TAPi18n.__('Cancel') - closeOnConfirm: false - html: false - }, (inputValue) -> - if inputValue is false - return false - - if inputValue is "" - swal.showInputError(TAPi18n.__("You_need_to_write_something")) - return false - - Meteor.call 'reportMessage', message, inputValue - - swal - title: TAPi18n.__("Report_sent") - text: TAPi18n.__("Thank_you_exclamation_mark") - type: 'success' - timer: 1000 - showConfirmButton: false diff --git a/packages/rocketchat-ui/views/app/spotlight/spotlight.coffee b/packages/rocketchat-ui/views/app/spotlight/spotlight.coffee deleted file mode 100644 index 5e43e46d9b8..00000000000 --- a/packages/rocketchat-ui/views/app/spotlight/spotlight.coffee +++ /dev/null @@ -1,64 +0,0 @@ -@spotlight = - hide: -> - $('.spotlight').addClass('hidden') - - show: -> - $('.spotlight input').val('') - $('.spotlight').removeClass('hidden') - $('.spotlight input').focus() - -getFromServer = (filter, records, cb) => - Meteor.call 'spotlight', filter, Meteor.user().username, (err, results) -> - if err? - return console.log err - - server = [] - - if results?.users?.length > 0 - for user in results.users when not _.findWhere(records, {t: 'd', name: user.username})? - server.push({ - _id: user._id - t: 'd', - name: user.username - }) - - if results?.rooms?.length > 0 - for room in results.rooms - server.push({ - _id: room._id - t: room.t, - name: room.name - }) - - if server.length > 0 - cb(records.concat(server)) - -getFromServerDelayed = _.throttle getFromServer, 500 - -Template.spotlight.helpers - popupConfig: -> - config = - cls: 'popup-down' - collection: RocketChat.models.Subscriptions - template: 'spotlightTemplate' - input: '[name=spotlight]' - getFilter: (collection, filter, cb) -> - exp = new RegExp("#{RegExp.escape filter}", 'i') - - records = collection.find({name: exp, rid: {$ne: Session.get('openedRoom')}}, {limit: 10, sort: {unread: -1, ls: -1}}).fetch() - - cb(records) - - if filter?.trim().length < 1 or records.length >= 5 - return - - getFromServerDelayed(filter, records, cb) - - getValue: (_id, collection, records, firstPartValue) -> - doc = _.findWhere(records, {_id: _id}) - - RocketChat.roomTypes.openRouteLink(doc.t, doc, FlowRouter.current().queryParams) - - spotlight.hide() - - return config diff --git a/packages/rocketchat-ui/views/app/spotlight/spotlight.html b/packages/rocketchat-ui/views/app/spotlight/spotlight.html deleted file mode 100644 index f291a1bbf9e..00000000000 --- a/packages/rocketchat-ui/views/app/spotlight/spotlight.html +++ /dev/null @@ -1,9 +0,0 @@ - diff --git a/packages/rocketchat-ui/views/app/spotlight/spotlightTemplate.html b/packages/rocketchat-ui/views/app/spotlight/spotlightTemplate.html deleted file mode 100644 index f121f78f42d..00000000000 --- a/packages/rocketchat-ui/views/app/spotlight/spotlightTemplate.html +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/packages/rocketchat-ui/views/app/spotlight/spotlightTemplate.js b/packages/rocketchat-ui/views/app/spotlight/spotlightTemplate.js deleted file mode 100644 index 631931f6eb6..00000000000 --- a/packages/rocketchat-ui/views/app/spotlight/spotlightTemplate.js +++ /dev/null @@ -1,13 +0,0 @@ -Template.spotlightTemplate.helpers({ - icon() { - return RocketChat.roomTypes.getIcon(this.t); - }, - - userStatus() { - if (this.t === 'd') { - return 'status-' + (Session.get(`user_${this.name}_status`) || 'offline'); - } else { - return 'status-' + (RocketChat.roomTypes.getUserStatus(this.t, this.rid || this._id) || 'offline'); - } - } -}); From 3d8af518b2ce80824584d16fc7338bfa2815dfb5 Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Mon, 23 Jan 2017 18:43:18 -0200 Subject: [PATCH 4/6] hide search results when enter in room --- .../message/popup/messagePopup.coffee | 7 ++++--- packages/rocketchat-ui-sidenav/side-nav/toolbar.js | 11 +---------- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/packages/rocketchat-ui-message/message/popup/messagePopup.coffee b/packages/rocketchat-ui-message/message/popup/messagePopup.coffee index 5dfacccea10..e59ea4304f5 100644 --- a/packages/rocketchat-ui-message/message/popup/messagePopup.coffee +++ b/packages/rocketchat-ui-message/message/popup/messagePopup.coffee @@ -99,13 +99,14 @@ Template.messagePopup.onCreated -> if event.which in [keys.ENTER, keys.TAB] console.log('ENTER') - template.open.set false - template.enterValue() event.preventDefault() event.stopPropagation() - return + setTimeout -> + template.open.set false + , 500 + return false if event.which is keys.ARROW_UP template.up() diff --git a/packages/rocketchat-ui-sidenav/side-nav/toolbar.js b/packages/rocketchat-ui-sidenav/side-nav/toolbar.js index 0cd0bbb9e05..1d65eac7820 100644 --- a/packages/rocketchat-ui-sidenav/side-nav/toolbar.js +++ b/packages/rocketchat-ui-sidenav/side-nav/toolbar.js @@ -80,7 +80,7 @@ Template.toolbar.helpers({ const doc = _.findWhere(records, {_id: _id}); RocketChat.roomTypes.openRouteLink(doc.t, doc, FlowRouter.current().queryParams); - toolbarSearch.clear(); + // toolbarSearch.clear(); } }; @@ -95,15 +95,6 @@ Template.toolbar.events({ which: 27 }); toolbarSearch.clear(); - }, - 'keydown .toolbar-search__input': (event) => { - if (event.which === 13) { - $('.toolbar-search__input').trigger({ - type: 'keyup', - which: 27 - }); - toolbarSearch.clear(); - } } }); From f13b6cad687dc3924677d7737d88481939cf7743 Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Mon, 23 Jan 2017 18:45:01 -0200 Subject: [PATCH 5/6] fix spaces --- packages/rocketchat-ui-sidenav/side-nav/toolbar.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/rocketchat-ui-sidenav/side-nav/toolbar.js b/packages/rocketchat-ui-sidenav/side-nav/toolbar.js index 1d65eac7820..b11824cd24d 100644 --- a/packages/rocketchat-ui-sidenav/side-nav/toolbar.js +++ b/packages/rocketchat-ui-sidenav/side-nav/toolbar.js @@ -59,7 +59,7 @@ Template.toolbar.helpers({ cls: 'search-results-list', collection: RocketChat.models.Subscriptions, template: 'toolbarSearchList', - input: '.toolbar-search__input', + input: '.toolbar-search__input', getFilter: function(collection, filter, cb) { const resultsFromClient = collection.find({name: new RegExp((RegExp.escape(filter)), 'i'), rid: {$ne: Session.get('openedRoom')}}, {limit: 10, sort: {unread: -1, ls: -1}}).fetch(); @@ -80,8 +80,7 @@ Template.toolbar.helpers({ const doc = _.findWhere(records, {_id: _id}); RocketChat.roomTypes.openRouteLink(doc.t, doc, FlowRouter.current().queryParams); - // toolbarSearch.clear(); - } + } }; return config; From ad1a1bfa3d52ee26fd44e96daf901b36d946b6fe Mon Sep 17 00:00:00 2001 From: Rodrigo Nascimento Date: Tue, 24 Jan 2017 21:19:57 -0200 Subject: [PATCH 6/6] Spotlight and messagePopup improvements --- .../rocketchat-ui-master/master/main.coffee | 3 - .../message/popup/messagePopup.coffee | 45 +++++++++--- .../message/popup/messagePopup.html | 10 +++ .../side-nav/toolbar.html | 4 ++ .../rocketchat-ui-sidenav/side-nav/toolbar.js | 69 ++++++++++++++----- server/publications/spotlight.coffee | 2 +- 6 files changed, 105 insertions(+), 28 deletions(-) diff --git a/packages/rocketchat-ui-master/master/main.coffee b/packages/rocketchat-ui-master/master/main.coffee index 93408b96dde..3c757092ced 100644 --- a/packages/rocketchat-ui-master/master/main.coffee +++ b/packages/rocketchat-ui-master/master/main.coffee @@ -9,9 +9,6 @@ Template.body.onRendered -> e.stopPropagation() toolbarSearch.focus() - if e.keyCode is 27 - toolbarSearch.clear() - unread = Session.get('unread') if e.keyCode is 27 and e.shiftKey is true and unread? and unread isnt '' e.preventDefault() diff --git a/packages/rocketchat-ui-message/message/popup/messagePopup.coffee b/packages/rocketchat-ui-message/message/popup/messagePopup.coffee index e59ea4304f5..23af63d165f 100644 --- a/packages/rocketchat-ui-message/message/popup/messagePopup.coffee +++ b/packages/rocketchat-ui-message/message/popup/messagePopup.coffee @@ -51,6 +51,10 @@ Template.messagePopup.onCreated -> template.triggerAnywhere = val(template.data.triggerAnywhere, true) + template.closeOnEsc = val(template.data.closeOnEsc, true) + + template.blurOnSelectItem = val(template.data.blurOnSelectItem, false) + template.prefix = val(template.data.prefix, template.trigger) template.suffix = val(template.data.suffix, '') @@ -97,16 +101,16 @@ Template.messagePopup.onCreated -> return if event.which in [keys.ENTER, keys.TAB] - console.log('ENTER') + if template.blurOnSelectItem is true + template.input.blur() + else + template.open.set false template.enterValue() event.preventDefault() event.stopPropagation() - setTimeout -> - template.open.set false - , 500 - return false + return if event.which is keys.ARROW_UP template.up() @@ -115,7 +119,7 @@ Template.messagePopup.onCreated -> event.stopPropagation() return - else if event.which is keys.ARROW_DOWN + if event.which is keys.ARROW_DOWN template.down() event.preventDefault() @@ -127,7 +131,7 @@ Template.messagePopup.onCreated -> , template.textFilterDelay template.onInputKeyup = (event) => - if template.open.curValue is true and event.which is keys.ESC + if template.closeOnEsc is true and template.open.curValue is true and event.which is keys.ESC template.open.set false event.preventDefault() event.stopPropagation() @@ -149,6 +153,27 @@ Template.messagePopup.onCreated -> Meteor.defer => template.verifySelection() + template.onFocus = (event) => + if template.open.curValue is true + return + + value = template.input.value + value = value.substr 0, getCursorPosition(template.input) + + if template.matchSelectorRegex.test value + template.setTextFilter value.match(template.selectorRegex)[1] + template.open.set true + Meteor.defer => + template.verifySelection() + else + template.open.set false + + template.onBlur = (event) => + if template.open.curValue is false + return + + template.open.set false + template.enterValue = -> if not template.value.curValue? then return @@ -197,11 +222,15 @@ Template.messagePopup.onRendered -> $(this.input).on 'keyup', this.onInputKeyup.bind this $(this.input).on 'keydown', this.onInputKeydown.bind this + $(this.input).on 'focus', this.onFocus.bind this + $(this.input).on 'blur', this.onBlur.bind this Template.messagePopup.onDestroyed -> $(this.input).off 'keyup', this.onInputKeyup $(this.input).off 'keydown', this.onInputKeydown + $(this.input).off 'focus', this.onFocus + $(this.input).off 'blur', this.onBlur Template.messagePopup.events @@ -229,7 +258,7 @@ Template.messagePopup.events Template.messagePopup.helpers isOpen: -> - Template.instance().open.get() and (Template.instance().hasData.get() or not Template.instance().parentTemplate(1).subscriptionsReady()) + Template.instance().open.get() and ((Template.instance().hasData.get() or Template.instance().data.emptyTemplate?) or not Template.instance().parentTemplate(1).subscriptionsReady()) data: -> template = Template.instance() diff --git a/packages/rocketchat-ui-message/message/popup/messagePopup.html b/packages/rocketchat-ui-message/message/popup/messagePopup.html index c81aff00d73..0f2f6dd9429 100644 --- a/packages/rocketchat-ui-message/message/popup/messagePopup.html +++ b/packages/rocketchat-ui-message/message/popup/messagePopup.html @@ -14,6 +14,16 @@
{{/each}} + {{#unless data}} + {{#unless isLoading.get}} + {{#if emptyTemplate}} + {{> Template.dynamic template=emptyTemplate}} + {{/if}} + {{/unless}} + {{/unless}} + {{#if isLoading.get}} + {{> loading}} + {{/if}} {{/if}} diff --git a/packages/rocketchat-ui-sidenav/side-nav/toolbar.html b/packages/rocketchat-ui-sidenav/side-nav/toolbar.html index 86d3474d1d5..5ffa0c4713f 100644 --- a/packages/rocketchat-ui-sidenav/side-nav/toolbar.html +++ b/packages/rocketchat-ui-sidenav/side-nav/toolbar.html @@ -17,3 +17,7 @@ {{unread}} {{/if}} + + diff --git a/packages/rocketchat-ui-sidenav/side-nav/toolbar.js b/packages/rocketchat-ui-sidenav/side-nav/toolbar.js index b11824cd24d..d44f7fc0198 100644 --- a/packages/rocketchat-ui-sidenav/side-nav/toolbar.js +++ b/packages/rocketchat-ui-sidenav/side-nav/toolbar.js @@ -1,18 +1,39 @@ +let isLoading; +let filterText = ''; +let usernamesFromClient; +let resultsFromClient; + +Meteor.startup(() => { + isLoading = new ReactiveVar(false); +}); + const toolbarSearch = { - clear: () => { + clear() { $('.toolbar-search__input').val(''); - console.log('clear'); + $('.toolbar-search__input').trigger({ + type: 'keyup', + which: 27 + }); }, - focus: () => { - $('.toolbar-search__input').val(''); + + focus() { $('.toolbar-search__input').focus(); } }; this.toolbarSearch = toolbarSearch; -const getFromServer = (filter, usernames, records, cb) => { - Meteor.call('spotlight', filter, usernames, (err, results) => { +const getFromServer = (cb) => { + isLoading.set(true); + const currentFilter = filterText; + + Meteor.call('spotlight', currentFilter, usernamesFromClient, (err, results) => { + if (currentFilter !== filterText) { + return; + } + + isLoading.set(false); + if (err) { console.log(err); return false; @@ -43,12 +64,12 @@ const getFromServer = (filter, usernames, records, cb) => { } if (resultsFromServer.length) { - cb(records.concat(resultsFromServer)); + cb(resultsFromClient.concat(resultsFromServer)); } }); }; -const getFromServerDelayed = _.throttle(getFromServer, 500); +const getFromServerThrottled = _.throttle(getFromServer, 500); Template.toolbar.helpers({ results() { @@ -59,12 +80,17 @@ Template.toolbar.helpers({ cls: 'search-results-list', collection: RocketChat.models.Subscriptions, template: 'toolbarSearchList', + emptyTemplate: 'toolbarSearchListEmpty', input: '.toolbar-search__input', + closeOnEsc: false, + blurOnSelectItem: true, + isLoading: isLoading, getFilter: function(collection, filter, cb) { - const resultsFromClient = collection.find({name: new RegExp((RegExp.escape(filter)), 'i'), rid: {$ne: Session.get('openedRoom')}}, {limit: 10, sort: {unread: -1, ls: -1}}).fetch(); + filterText = filter; + resultsFromClient = collection.find({name: new RegExp((RegExp.escape(filter)), 'i'), rid: {$ne: Session.get('openedRoom')}}, {limit: 10, sort: {unread: -1, ls: -1}}).fetch(); const resultsFromClientLength = resultsFromClient.length; - const usernamesFromClient = [Meteor.user().username]; + usernamesFromClient = [Meteor.user().username]; for (let i = 0; i < resultsFromClientLength; i++) { if (resultsFromClient[i].t === 'd') { @@ -74,7 +100,7 @@ Template.toolbar.helpers({ cb(resultsFromClient); - getFromServerDelayed(filter, usernamesFromClient, resultsFromClient, cb); + getFromServerThrottled(cb); }, getValue: function(_id, collection, records) { const doc = _.findWhere(records, {_id: _id}); @@ -88,12 +114,23 @@ Template.toolbar.helpers({ }); Template.toolbar.events({ - 'click .toolbar-search__icon--cancel': () => { - $('.toolbar-search__input').trigger({ - type: 'keyup', - which: 27 - }); + 'blur .toolbar-search__input'() { toolbarSearch.clear(); + }, + + 'keyup .toolbar-search__input'(e) { + if (e.which === 27) { + e.preventDefault(); + e.stopPropagation(); + + const $inputMessage = $('textarea.input-message'); + + if (0 === $inputMessage.length) { + return; + } + + $inputMessage.focus(); + } } }); diff --git a/server/publications/spotlight.coffee b/server/publications/spotlight.coffee index 9981a6dd5a6..6d9a20c1052 100644 --- a/server/publications/spotlight.coffee +++ b/server/publications/spotlight.coffee @@ -23,4 +23,4 @@ DDPRateLimiter.addRule name: 'spotlight' userId: (userId) -> return true -, 10, 10000 +, 100, 100000