mirror of https://github.com/vector-im/riot-web
style search bar
Bruno Windels
parent
177d9f245a
commit
77a62b9174
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,12 +60,44 @@ 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>
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
const clearButton = this.state.searchTerm.length > 0 ?
|
||||
(<AccessibleButton key="button"
|
||||
className="mx_SearchBox_closeButton"
|
||||
onClick={ () => {this._clearSearch("button")} }>
|
||||
</AccessibleButton>) : undefined;
|
||||
|
||||
return (
|
||||
<div className="mx_SearchBox mx_textinput">
|
||||
<input
|
||||
key="searchfield"
|
||||
type="text"
|
||||
ref="search"
|
||||
className="mx_textinput_icon mx_textinput_search"
|
||||
value={ this.state.searchTerm }
|
||||
onFocus={ this._onFocus }
|
||||
onChange={ this.onChange }
|
||||
onKeyDown={ this._onKeyDown }
|
||||
placeholder={ _t('Filter room names') }
|
||||
/>
|
||||
{ clearButton }
|
||||
</div>
|
||||
);
|
||||
*/
|
||||
|
||||
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue