support search icon in mx_textinput, use in memberlist
parent
46389457e3
commit
064662380f
|
@ -43,41 +43,21 @@ limitations under the License.
|
||||||
.mx_MemberList form,
|
.mx_MemberList form,
|
||||||
.mx_GroupMemberList form,
|
.mx_GroupMemberList form,
|
||||||
.mx_GroupRoomList form {
|
.mx_GroupRoomList form {
|
||||||
margin: 8px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MemberList form > *:not(:first-child),
|
.mx_MemberList form > *,
|
||||||
.mx_GroupMemberList form > *:not(:first-child),
|
.mx_GroupMemberList form > *,
|
||||||
.mx_GroupRoomList form > *:not(:first-child) {
|
.mx_GroupRoomList form > * {
|
||||||
margin-left: 5px;
|
margin: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MemberList_query,
|
.mx_MemberList_query,
|
||||||
.mx_GroupMemberList_query,
|
.mx_GroupMemberList_query,
|
||||||
.mx_GroupRoomList_query {
|
.mx_GroupRoomList_query {
|
||||||
flex: 1 1 0;
|
flex: 1 1 0;
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: $font-family;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 9px;
|
|
||||||
color: $input-darker-fg-color;
|
|
||||||
background-color: $input-darker-bg-color;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_MemberList_query::-webkit-input-placeholder,
|
|
||||||
.mx_GroupMemberList_query::-webkit-input-placeholder,
|
|
||||||
.mx_GroupRoomList_query::-webkit-input-placeholder,
|
|
||||||
.mx_MemberList_query::-moz-placeholder,
|
|
||||||
.mx_GroupMemberList_query::-moz-placeholder,
|
|
||||||
.mx_GroupRoomList_query::-moz-placeholder {
|
|
||||||
color: $input-darker-fg-color;
|
|
||||||
opacity: 0.5;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MemberList h2, .mx_GroupMemberList h2 {
|
.mx_MemberList h2, .mx_GroupMemberList h2 {
|
||||||
|
|
|
@ -244,6 +244,17 @@ input[type=search] {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type=text].mx_textinput_icon,
|
||||||
|
input[type=search].mx_textinput_icon {
|
||||||
|
padding-left: 30px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 10px center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text].mx_textinput_icon.mx_textinput_search,
|
||||||
|
input[type=search].mx_textinput_icon.mx_textinput_search {
|
||||||
|
background-image: url('../../img/icons-search-copy.svg');
|
||||||
|
}
|
||||||
|
|
||||||
// dont search UI as not all browsers support it,
|
// dont search UI as not all browsers support it,
|
||||||
// we implement it ourselves where needed instead
|
// we implement it ourselves where needed instead
|
||||||
|
|
|
@ -449,7 +449,7 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
const filterAndButtons = (
|
const filterAndButtons = (
|
||||||
<form autoComplete="off">
|
<form autoComplete="off">
|
||||||
<input className="mx_MemberList_query" id="mx_MemberList_query" type="search"
|
<input className="mx_MemberList_query mx_textinput_icon mx_textinput_search" id="mx_MemberList_query" type="search"
|
||||||
onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
|
onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
|
||||||
placeholder={_t('Filter room members')} />
|
placeholder={_t('Filter room members')} />
|
||||||
{ inviteButton }
|
{ inviteButton }
|
||||||
|
|
Loading…
Reference in New Issue