diff --git a/packages/rocketchat-theme/client/imports/base.less b/packages/rocketchat-theme/client/imports/base.less
index 7338298ba73a7727030d9b566c653d206b5b309d..9fb4ccfd7ad9ab80af0209ec4afce488726d44c5 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 23519c92ef40e6db6519edcf902dc42c3775d807..ccf2f5836350c28736935047748f09449d489745 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 d6ba340f6921bfdb8e0123aae113048484888b4b..c1d83738c3ac6b10036dd6c8c7abd643099d2267 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 8bab8b1ec648818e9c7b510a6ab83d4472114639..5dfacccea109eb35b6754f0fc67e55d6cf7da152 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 9a4964b660ddb07b29d9de087493c64421cc35e9..86d3474d1d571d7ab339fafa65f8ef5b744c4971 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/toolbar.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/toolbar.html
@@ -1,8 +1,19 @@
<template name="toolbar">
<div class="toolbar">
- <i class="toolbar--search-icon icon-search secondary-font-color"></i>
- <input type="text" name="toolbar-search" class="toolbar--search background-transparent-light color-content-background-color border-transparent-lighter" placeholder="{{_ "Search"}}">
+ <div class="toolbar-search">
+ <i class="toolbar-search__icon icon-search"></i>
+ <input type="text" name="toolbar-input" class="toolbar-search__input background-transparent-light color-content-background-color border-transparent-lighter" placeholder="{{_ "Search"}}">
+ <i class="toolbar-search__icon toolbar-search__icon--cancel icon-cancel"></i>
+ </div>
{{> messagePopup popupConfig}}
</div>
</template>
+
+<template name="toolbarSearchList">
+ <i class="{{icon}} {{userStatus}}"></i>
+ {{name}}
+ {{#if unread}}
+ <span class="unread">{{unread}}</span>
+ {{/if}}
+</template>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/toolbar.js b/packages/rocketchat-ui-sidenav/side-nav/toolbar.js
index 2dd33197f5cb600ee32e49b54fa1996b2f99d0b9..0cd0bbb9e05af65528db0b92d52db7e8eb92c0c2 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 3b868ee1e7709c3f76cc592065ddc5b583d37810..82eb53d0e43afb2173cd9536a948ebb12728d80b 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 5a07bbff3ff47ed787a818ded4e05ab48b69a8d1..0000000000000000000000000000000000000000
--- 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 5e43e46d9b80968ff9173a55585fc00203fc82bf..0000000000000000000000000000000000000000
--- 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 f291a1bbf9eb2b8dceb585499cfad05cee2ae663..0000000000000000000000000000000000000000
--- a/packages/rocketchat-ui/views/app/spotlight/spotlight.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<template name="spotlight">
- <div class="spotlight hidden background-transparent-darker">
- <div class="spotlight-input secondary-background-color secondary-font-color">
- <i class="icon-search secondary-font-color"></i>
- <input type="text" name="spotlight">
- {{> messagePopup popupConfig}}
- </div>
- </div>
-</template>
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 f121f78f42dbb1165f2d661a3e79254229629102..0000000000000000000000000000000000000000
--- a/packages/rocketchat-ui/views/app/spotlight/spotlightTemplate.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<template name="spotlightTemplate">
- <i class="{{icon}} {{userStatus}}"></i>
- {{name}}
- {{#if unread}}
- <span class="unread">{{unread}}</span>
- {{/if}}
-</template>
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 631931f6eb687ad6b912eac2f5ed7cc893300062..0000000000000000000000000000000000000000
--- 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');
- }
- }
-});