Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Redesign: search makeover #2448

Merged
merged 8 commits into from
Jan 17, 2019
Merged

Redesign: search makeover #2448

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
77a62b9
style search bar
bwindels Jan 15, 2019
c07470b
show a spinner while searching
bwindels Jan 15, 2019
cbe3afa
resubmit query when switching between "This Room" / "All Rooms"
bwindels Jan 16, 2019
8d16ac1
make room name header smaller
bwindels Jan 16, 2019
b14d436
make cancel button icon slightly larger
bwindels Jan 16, 2019
924e1f9
don't show event search results with underline/blue
bwindels Jan 16, 2019
899ee26
Merge branch 'experimental' into bwindels/searchmakeover
bwindels Jan 16, 2019
622b11f
remove commented out code from shifting things around
bwindels Jan 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 36 additions & 8 deletions res/css/structures/_RoomView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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%;

Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/rooms/_RoomHeader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ limitations under the License.
font-size: 18px;
margin: 0 7px;
border-bottom: 1px solid transparent;
display: flex;
}

.mx_RoomHeader_nametext {
Expand All @@ -111,7 +112,6 @@ limitations under the License.
}

.mx_RoomHeader_searchStatus {
display: inline-block;
font-weight: normal;
opacity: 0.6;
}
Expand Down
99 changes: 41 additions & 58 deletions res/css/views/rooms/_SearchBar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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_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_unselected {
color: $input-darker-fg-color;
border-color: transparent;
}

.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;
}
}
32 changes: 16 additions & 16 deletions src/components/structures/RoomView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -1196,7 +1191,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;
}
Expand Down Expand Up @@ -1820,16 +1815,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;
}

Expand Down
18 changes: 13 additions & 5 deletions src/components/views/rooms/SearchBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ module.exports = React.createClass({
},

onThisRoomClick: function() {
this.setState({ scope: 'Room' });
this.setState({ scope: 'Room' }, () => this._searchIfQuery());
bwindels marked this conversation as resolved.
Show resolved Hide resolved
},

onAllRoomsClick: function() {
this.setState({ scope: 'All' });
this.setState({ scope: 'All' }, () => this._searchIfQuery());
},

onSearchChange: function(e) {
Expand All @@ -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);
},
Expand All @@ -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>
);
},
Expand Down