diff --git a/packages/rocketchat-theme/client/imports/base.less b/packages/rocketchat-theme/client/imports/base.less index 9e7c88f689c..1f429c14618 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; @@ -1336,6 +1336,8 @@ label.required::after { direction: ltr; padding-left: 8px; padding-bottom: 1em; + position: relative; + padding-top: 50px; } } @@ -1370,7 +1372,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 +1382,7 @@ label.required::after { position: absolute; top: 18px; right: 8px; - z-index: 2; + z-index: 3; cursor: pointer; } @@ -1393,7 +1395,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; @@ -1585,7 +1587,7 @@ label.required::after { -webkit-justify-content: center; &.top-unread-rooms { - top: 60px; + top: 105px; } &.bottom-unread-rooms { @@ -1611,6 +1613,43 @@ label.required::after { } } +.toolbar { + position: fixed; + width: 244px; + z-index: 3; + top: 60px; + padding-top: 10px; +} + +.toolbar-search { + padding-right: 8px; + position: relative; +} + +.toolbar-search__icon { + position: absolute; + top: 0; + left: 0; + line-height: 35px; + width: 35px; + text-align: center; +} + +.toolbar-search__icon--cancel { + left: auto; + right: 8px; + opacity: 0; + transition: opacity 0.3s; +} + +.toolbar-search__input { + padding: 6px 35px !important; + + &:focus + .toolbar-search__icon--cancel { + opacity: 1; + } +} + .new-room-highlight a { -webkit-animation: highlight 2s infinite; -moz-animation: highlight 2s infinite; @@ -1700,90 +1739,6 @@ 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; - - > .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); - - > input { - box-shadow: none; - border-width: 0; - line-height: 46px; - height: 46px; - padding: 0 10px 0 46px; - } - - > i { - position: absolute; - z-index: 10; - line-height: 46px; - width: 46px; - text-align: center; - font-weight: 100; - } - - .message-popup { - position: relative; - box-shadow: none; - border-radius: 0; - - .popup-item { - border-top: 1px solid #eaeaea; - line-height: 40px; - font-size: 20px; - padding: 0 10px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - - i { - margin-right: 4px; - line-height: 28px; - display: inline-block; - border-radius: 20px; - width: 28px; - } - - &.selected { - i { - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); - } - } - - 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; - } - } - } - } -} - // MAIN CONTENT + MAIN PAGES // .main-content { @@ -2506,11 +2461,30 @@ 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: calc(~"100vh - 200px"); + overflow-y: auto; + box-shadow: none; + border-radius: 0; + + .popup-item { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-left: 6px; + } + + .unread { + top: 8px; + } + } } .message-popup-title { 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 737a4c43284..c1d83738c3a 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__input { + &: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 { @@ -529,7 +543,8 @@ a:hover { background-color: @tertiary-font-color; } - .rooms-list { + .rooms-list, + .toolbar { background-color: lighten(@primary-background-color, 2.5%); } @@ -567,6 +582,14 @@ a:hover { } } +.message-popup.search-results-list { + background-color: lighten(@primary-background-color, 2.5%); + + .popup-item.selected { + background-color: @transparent-darker; + } +} + /** ---------------------------------------------------------------------------- * Flex tabs / admin fly-out panels */ 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..3c757092ced 100644 --- a/packages/rocketchat-ui-master/master/main.coffee +++ b/packages/rocketchat-ui-master/master/main.coffee @@ -7,10 +7,7 @@ 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() - - if e.keyCode is 27 - spotlight.hide() + toolbarSearch.focus() 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}}
{{/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/package.js b/packages/rocketchat-ui-sidenav/package.js index d58478b389e..4615b5b5982 100644 --- a/packages/rocketchat-ui-sidenav/package.js +++ b/packages/rocketchat-ui-sidenav/package.js @@ -36,6 +36,7 @@ Package.onUse(function(api) { api.addFiles('side-nav/privateGroupsFlex.html', 'client'); api.addFiles('side-nav/sideNav.html', 'client'); api.addFiles('side-nav/starredRooms.html', 'client'); + api.addFiles('side-nav/toolbar.html', 'client'); api.addFiles('side-nav/unreadRooms.html', 'client'); api.addFiles('side-nav/userStatus.html', 'client'); @@ -55,6 +56,7 @@ Package.onUse(function(api) { api.addFiles('side-nav/privateGroupsFlex.coffee', 'client'); api.addFiles('side-nav/sideNav.coffee', 'client'); api.addFiles('side-nav/starredRooms.coffee', 'client'); + api.addFiles('side-nav/toolbar.js', 'client'); api.addFiles('side-nav/unreadRooms.coffee', 'client'); }); diff --git a/packages/rocketchat-ui-sidenav/side-nav/sideNav.html b/packages/rocketchat-ui-sidenav/side-nav/sideNav.html index 4d15c91a242..9a2ca2abb77 100644 --- a/packages/rocketchat-ui-sidenav/side-nav/sideNav.html +++ b/packages/rocketchat-ui-sidenav/side-nav/sideNav.html @@ -9,6 +9,7 @@