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

support search icon in mx_textinput, use in memberlist

pull/21833/head
Bruno Windels 2018-11-05 09:34:58 +01:00
parent 46389457e3
commit 064662380f
3 changed files with 17 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
res/css/views/rooms/_MemberList.scss
View File

@ -43,41 +43,21 @@ limitations under the License.
.mx_MemberList form,
.mx_GroupMemberList form,
.mx_GroupRoomList form {
margin: 8px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.mx_MemberList form > *:not(:first-child),
.mx_GroupMemberList form > *:not(:first-child),
.mx_GroupRoomList form > *:not(:first-child) {
margin-left: 5px;
.mx_MemberList form > *,
.mx_GroupMemberList form > *,
.mx_GroupRoomList form > * {
margin: 9px;
}
.mx_MemberList_query,
.mx_GroupMemberList_query,
.mx_GroupRoomList_query {
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 {

11
res/themes/dharma/css/_dharma.scss
View File

@ -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,
// we implement it ourselves where needed instead

2
src/components/views/rooms/MemberList.js
View File

@ -449,7 +449,7 @@ module.exports = React.createClass({
const filterAndButtons = (
<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}
placeholder={_t('Filter room members')} />
{ inviteButton }