From 77a62b917491b0d0209d0a8d547a7cf943e9a4c2 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 15 Jan 2019 16:20:04 +0100 Subject: [PATCH 1/7] style search bar --- res/css/views/rooms/_RoomHeader.scss | 2 +- res/css/views/rooms/_SearchBar.scss | 99 ++++++++++--------------- src/components/views/rooms/SearchBar.js | 38 +++++++++- 3 files changed, 77 insertions(+), 62 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 0697ccf40f..1359bc5f57 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -98,6 +98,7 @@ limitations under the License. font-size: 18px; margin: 0 7px; border-bottom: 1px solid transparent; + display: flex; } .mx_RoomHeader_nametext { @@ -111,7 +112,6 @@ limitations under the License. } .mx_RoomHeader_searchStatus { - display: inline-block; font-weight: normal; opacity: 0.6; } diff --git a/res/css/views/rooms/_SearchBar.scss b/res/css/views/rooms/_SearchBar.scss index 079ea16c68..612ad81fe5 100644 --- a/res/css/views/rooms/_SearchBar.scss +++ b/res/css/views/rooms/_SearchBar.scss @@ -15,69 +15,52 @@ limitations under the License. */ .mx_SearchBar { - padding-top: 5px; - padding-bottom: 5px; + height: 56px; display: flex; align-items: center; -} + border-bottom: 1px solid $primary-hairline-color; -.mx_SearchBar_input { - display: inline block; - border-radius: 3px 0px 0px 3px; - border: 1px solid $input-border-color; - font-size: 15px; - padding: 9px; - padding-left: 11px; - width: auto; - flex: 1 1 0; -} + .mx_SearchBar_input { + // border: 1px solid $input-border-color; + // font-size: 15px; + flex: 1 1 0; + margin-left: 22px; + } -.mx_SearchBar_searchButton { - cursor: pointer; - margin-right: 10px; - width: 37px; - height: 37px; - border-radius: 0px 3px 3px 0px; - background-color: $accent-color; -} + .mx_SearchBar_searchButton { + cursor: pointer; + width: 37px; + height: 37px; + background-color: $accent-color; + mask: url('../../../img/feather-icons/search-input.svg'); + mask-repeat: no-repeat; + mask-position: center; + } -@keyframes pulsate { - 0% { opacity: 1.0; } - 50% { opacity: 0.1; } - 100% { opacity: 1.0; } -} + .mx_SearchBar_button { + border: 0; + margin: 0 0 0 22px; + padding: 5px; + font-size: 15px; + cursor: pointer; + color: $primary-fg-color; + border-bottom: 2px solid $accent-color; + font-weight: 600; + } -.mx_SearchBar_searching img { - animation: pulsate 0.5s ease-out; - animation-iteration-count: infinite; -} + .mx_SearchBar_unselected { + color: $input-darker-fg-color; + border-color: transparent; + } -.mx_SearchBar_button { - display: inline; - border: 0px; - border-radius: 36px; - font-weight: 400; - font-size: 15px; - color: $accent-fg-color; - background-color: $accent-color; - width: auto; - margin: auto; - margin-left: 7px; - padding-top: 6px; - padding-bottom: 4px; - padding-left: 24px; - padding-right: 24px; - cursor: pointer; -} - -.mx_SearchBar_unselected { - background-color: $primary-bg-color; - color: $accent-color; - border: $accent-color 1px solid; -} - -.mx_SearchBar_cancel { - padding-left: 14px; - padding-right: 14px; - cursor: pointer; + .mx_SearchBar_cancel { + background-color: $warning-color; + mask: url('../../../img/cancel.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 12px; + padding: 10px; + margin: 0 12px 0 3px; + cursor: pointer; + } } diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.js index 05fc661c1c..d48cb0e08b 100644 --- a/src/components/views/rooms/SearchBar.js +++ b/src/components/views/rooms/SearchBar.js @@ -60,12 +60,44 @@ module.exports = React.createClass({ return (
- - {_t("Search")} {_t("This Room")} {_t("All Rooms")} - +
+ + +
+
); + + + + +/* +const clearButton = this.state.searchTerm.length > 0 ? + ( {this._clearSearch("button")} }> + ) : undefined; + + return ( +
+ + { clearButton } +
+ ); +*/ + + }, }); From c07470be7bf8f80e1ca34df9c9d538e7bc84dedc Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 15 Jan 2019 18:45:56 +0100 Subject: [PATCH 2/7] show a spinner while searching --- res/css/structures/_RoomView.scss | 33 ++++++++++++++++++++++----- src/components/structures/RoomView.js | 30 ++++++++++++------------ 2 files changed, 42 insertions(+), 21 deletions(-) diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 72dca953f9..900300b03d 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -95,12 +95,10 @@ limitations under the License. flex-direction: column; } -.mx_RoomView_body .mx_RoomView_messagePanel { - order: 2; -} - -.mx_RoomView_body .mx_RoomView_messagePanelSpinner { - order: 2; +.mx_RoomView_body { + .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner{ + order: 2; + } } .mx_RoomView_body .mx_RoomView_statusArea { @@ -116,6 +114,29 @@ limitations under the License. overflow-y: auto; } +.mx_RoomView_messagePanelSearchSpinner { + flex: 1; + background-image: url('../../img/typing-indicator-2x.gif'); + background-position: center 367px; + background-size: 25px; + background-repeat: no-repeat; + position: relative; +} + +.mx_RoomView_messagePanelSearchSpinner:before { + background-color: $greyed-fg-color; + mask: url('../../../img/feather-icons/search-input.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 50px; + content: ''; + position: absolute; + top: 286px; + left: 0; + right: 0; + height: 50px; +} + .mx_RoomView_messageListWrapper { min-height: 100%; diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 368aeb4f19..2511e80e05 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -1135,11 +1135,6 @@ module.exports = React.createClass({ // XXX: todo: merge overlapping results somehow? // XXX: why doesn't searching on name work? - if (this.state.searchResults.results === undefined) { - // awaiting results - return []; - } - const ret = []; if (this.state.searchInProgress) { @@ -1820,16 +1815,21 @@ module.exports = React.createClass({ let hideMessagePanel = false; if (this.state.searchResults) { - searchResultsPanel = ( - -
  • - { this.getSearchResultTiles() } -     - ); + // show searching spinner + if (this.state.searchResults.results === undefined) { + searchResultsPanel = (
    ); + } else { + searchResultsPanel = ( + +
  • + { this.getSearchResultTiles() } +     + ); + } hideMessagePanel = true; } From cbe3afaa1f5474a513ddc6d51ea60706f477c493 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 16 Jan 2019 11:13:35 +0100 Subject: [PATCH 3/7] resubmit query when switching between "This Room" / "All Rooms" --- src/components/views/rooms/SearchBar.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.js index d48cb0e08b..78c7e7bbb3 100644 --- a/src/components/views/rooms/SearchBar.js +++ b/src/components/views/rooms/SearchBar.js @@ -33,11 +33,11 @@ module.exports = React.createClass({ }, onThisRoomClick: function() { - this.setState({ scope: 'Room' }); + this.setState({ scope: 'Room' }, () => this._searchIfQuery()); }, onAllRoomsClick: function() { - this.setState({ scope: 'All' }); + this.setState({ scope: 'All' }, () => this._searchIfQuery()); }, onSearchChange: function(e) { @@ -49,6 +49,12 @@ module.exports = React.createClass({ } }, + _searchIfQuery: function() { + if (this.refs.search_term.value) { + this.onSearch(); + } + }, + onSearch: function() { this.props.onSearch(this.refs.search_term.value, this.state.scope); }, From 8d16ac1d3135ca66a50d80f5c8f30707ba0199d6 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 16 Jan 2019 11:14:05 +0100 Subject: [PATCH 4/7] make room name header smaller --- src/components/structures/RoomView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 2511e80e05..b73f85650d 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -1191,7 +1191,7 @@ module.exports = React.createClass({ const roomName = room ? room.name : _t("Unknown room %(roomId)s", { roomId: roomId }); ret.push(
  • -

    { _t("Room") }: { roomName }

    +

    { _t("Room") }: { roomName }

    • ); lastRoomId = roomId; } From b14d436e98c9d19321f352ef5dfe4b3f1a5f2e88 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 16 Jan 2019 11:14:19 +0100 Subject: [PATCH 5/7] make cancel button icon slightly larger --- res/css/views/rooms/_SearchBar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_SearchBar.scss b/res/css/views/rooms/_SearchBar.scss index 612ad81fe5..dddc87e5dd 100644 --- a/res/css/views/rooms/_SearchBar.scss +++ b/res/css/views/rooms/_SearchBar.scss @@ -58,8 +58,8 @@ limitations under the License. mask: url('../../../img/cancel.svg'); mask-repeat: no-repeat; mask-position: center; - mask-size: 12px; - padding: 10px; + mask-size: 14px; + padding: 9px; margin: 0 12px 0 3px; cursor: pointer; } From 924e1f9e4a0f92c955628bc3d2718e2bb2828c9f Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 16 Jan 2019 11:14:30 +0100 Subject: [PATCH 6/7] don't show event search results with underline/blue --- res/css/structures/_RoomView.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 900300b03d..d8926c68e4 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -147,8 +147,15 @@ limitations under the License. justify-content: flex-end; } -.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper { - justify-content: flex-start; +.mx_RoomView_searchResultsPanel { + .mx_RoomView_messageListWrapper { + justify-content: flex-start; + } + + a { + text-decoration: none; + color: inherit; + } } .mx_RoomView_empty { From 622b11fd9143c03e7ddd34a1dc86ae7601015def Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 16 Jan 2019 13:04:49 +0100 Subject: [PATCH 7/7] remove commented out code from shifting things around --- src/components/views/rooms/SearchBar.js | 30 ------------------------- 1 file changed, 30 deletions(-) diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.js index 78c7e7bbb3..fb9c3103ab 100644 --- a/src/components/views/rooms/SearchBar.js +++ b/src/components/views/rooms/SearchBar.js @@ -75,35 +75,5 @@ module.exports = React.createClass({
    ); - - - - -/* -const clearButton = this.state.searchTerm.length > 0 ? - ( {this._clearSearch("button")} }> - ) : undefined; - - return ( -
    - - { clearButton } -
    - ); -*/ - - }, });