OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

show a spinner while searching

pull/21833/head
Bruno Windels 2019-01-15 18:45:56 +01:00
parent 77a62b9174
commit c07470be7b
2 changed files with 42 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
res/css/structures/_RoomView.scss
View File

@ -95,12 +95,10 @@ limitations under the License.
flex-direction: column; flex-direction: column;
} }
.mx_RoomView_body .mx_RoomView_messagePanel { .mx_RoomView_body {
order: 2; .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner{
} order: 2;
}
.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
order: 2;
} }
.mx_RoomView_body .mx_RoomView_statusArea { .mx_RoomView_body .mx_RoomView_statusArea {
@ -116,6 +114,29 @@ limitations under the License.
overflow-y: auto; 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 { .mx_RoomView_messageListWrapper {
min-height: 100%; min-height: 100%;

30
src/components/structures/RoomView.js
View File

@ -1135,11 +1135,6 @@ module.exports = React.createClass({
// XXX: todo: merge overlapping results somehow? // XXX: todo: merge overlapping results somehow?
// XXX: why doesn't searching on name work? // XXX: why doesn't searching on name work?
if (this.state.searchResults.results === undefined) {
// awaiting results
return [];
}
const ret = []; const ret = [];
if (this.state.searchInProgress) { if (this.state.searchInProgress) {
@ -1820,16 +1815,21 @@ module.exports = React.createClass({
let hideMessagePanel = false; let hideMessagePanel = false;
if (this.state.searchResults) { if (this.state.searchResults) {
searchResultsPanel = ( // show searching spinner
<ScrollPanel ref="searchResultsPanel" if (this.state.searchResults.results === undefined) {
className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel" searchResultsPanel = (<div className="mx_RoomView_messagePanel mx_RoomView_messagePanelSearchSpinner" />);
onFillRequest={this.onSearchResultsFillRequest} } else {
onResize={this.onSearchResultsResize} searchResultsPanel = (
> <ScrollPanel ref="searchResultsPanel"
<li className={scrollheader_classes}></li> className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
{ this.getSearchResultTiles() } onFillRequest={this.onSearchResultsFillRequest}
</ScrollPanel> onResize={this.onSearchResultsResize}
); >
<li className={scrollheader_classes}></li>
{ this.getSearchResultTiles() }
</ScrollPanel>
);
}
hideMessagePanel = true; hideMessagePanel = true;
} }