Merge pull request #2448 from matrix-org/bwindels/searchmakeover

Redesign: search makeover

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%;
 
@@ -126,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 {

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;
 }

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: 14px;
+        padding: 9px;
+        margin: 0 12px 0 3px;
+        cursor: pointer;
+    }
 }

src/components/structures/RoomView.js

@@ -1136,11 +1136,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) {
@@ -1197,7 +1192,7 @@ module.exports = React.createClass({
                     const roomName = room ? room.name : _t("Unknown room %(roomId)s", { roomId: roomId });
 
                     ret.push(<li key={mxEv.getId() + "-room"}>
-                                 <h1>{ _t("Room") }: { roomName }</h1>
+                                 <h2>{ _t("Room") }: { roomName }</h2>
                              </li>);
                     lastRoomId = roomId;
                 }
@@ -1817,16 +1812,21 @@ module.exports = React.createClass({
         let hideMessagePanel = false;
 
         if (this.state.searchResults) {
-            searchResultsPanel = (
-                <ScrollPanel ref="searchResultsPanel"
-                    className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
-                    onFillRequest={this.onSearchResultsFillRequest}
-                    onResize={this.onSearchResultsResize}
-                >
-                    <li className={scrollheader_classes}></li>
-                    { this.getSearchResultTiles() }
-                </ScrollPanel>
-            );
+            // show searching spinner
+            if (this.state.searchResults.results === undefined) {
+                searchResultsPanel = (<div className="mx_RoomView_messagePanel mx_RoomView_messagePanelSearchSpinner" />);
+            } else {
+                searchResultsPanel = (
+                    <ScrollPanel ref="searchResultsPanel"
+                        className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
+                        onFillRequest={this.onSearchResultsFillRequest}
+                        onResize={this.onSearchResultsResize}
+                    >
+                        <li className={scrollheader_classes}></li>
+                        { this.getSearchResultTiles() }
+                    </ScrollPanel>
+                );
+            }
             hideMessagePanel = true;
         }
 

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);
     },
@@ -60,11 +66,13 @@ module.exports = React.createClass({
 
         return (
             <div className="mx_SearchBar">
-                <input ref="search_term" className="mx_SearchBar_input" type="text" autoFocus={true} placeholder={_t("Search…")} onKeyDown={this.onSearchChange} />
-                <AccessibleButton className={ searchButtonClasses } onClick={this.onSearch}><img src="img/search-button.svg" width="37" height="37" alt={_t("Search")} /></AccessibleButton>
                 <AccessibleButton className={ thisRoomClasses } onClick={this.onThisRoomClick}>{_t("This Room")}</AccessibleButton>
                 <AccessibleButton className={ allRoomsClasses } onClick={this.onAllRoomsClick}>{_t("All Rooms")}</AccessibleButton>
-                <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
+                <div className="mx_SearchBar_input mx_textinput">
+                    <input ref="search_term" type="text" autoFocus={true} placeholder={_t("Search…")} onKeyDown={this.onSearchChange} />
+                    <AccessibleButton className={ searchButtonClasses } onClick={this.onSearch}></AccessibleButton>
+                </div>
+                <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick}></AccessibleButton>
             </div>
         );
     },