From 064662380f181e8e8f29113762c427835f3516ed Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 5 Nov 2018 09:34:58 +0100
Subject: [PATCH] support search icon in mx_textinput, use in memberlist

---
 res/css/views/rooms/_MemberList.scss     | 30 ++++--------------------
 res/themes/dharma/css/_dharma.scss       | 11 +++++++++
 src/components/views/rooms/MemberList.js |  2 +-
 3 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
index 340954e5f6..cb0a541e23 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@@ -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 {
diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss
index 414731fc7b..b877d2cffb 100644
--- a/res/themes/dharma/css/_dharma.scss
+++ b/res/themes/dharma/css/_dharma.scss
@@ -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
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index 22e0794a3c..69e5dbb76c 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -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 }