Spotlight and messagePopup improvements

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()

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()

packages/rocketchat-ui-message/message/popup/messagePopup.html

@@ -14,6 +14,16 @@
 						</div>
 					{{/each}}
 				</div>
+				{{#unless data}}
+					{{#unless isLoading.get}}
+						{{#if emptyTemplate}}
+							{{> Template.dynamic template=emptyTemplate}}
+						{{/if}}
+					{{/unless}}
+				{{/unless}}
+				{{#if isLoading.get}}
+					{{> loading}}
+				{{/if}}
 			</div>
 		</div>
 	{{/if}}

packages/rocketchat-ui-sidenav/side-nav/toolbar.html

@@ -17,3 +17,7 @@
 		<span class="unread">{{unread}}</span>
 	{{/if}}
 </template>
+
+<template name="toolbarSearchListEmpty">
+	{{_ "Room_not_found"}}
+</template>

packages/rocketchat-ui-sidenav/side-nav/toolbar.js

+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();
+		}
 	}
 });
 

server/publications/spotlight.coffee

@@ -23,4 +23,4 @@ DDPRateLimiter.addRule
 	name: 'spotlight'
 	userId: (userId) ->
 		return true
-, 10, 10000
+, 100, 100000