From 55832cb8903efd1f4a1abb33cddc74fb66b7518d Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 24 Feb 2020 00:17:24 +0300
Subject: [PATCH] Add search input

---
 src/views/moderation_log/index.vue            |  1 +
 src/views/settings/index.vue                  | 20 +++++++++++++
 src/views/settings/styles/main.scss           | 28 ++++++++++++++-----
 .../users/components/ModerationDropdown.vue   |  2 +-
 src/views/users/index.vue                     |  7 ++++-
 5 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/src/views/moderation_log/index.vue b/src/views/moderation_log/index.vue
index 6dba06f6..82077098 100644
--- a/src/views/moderation_log/index.vue
+++ b/src/views/moderation_log/index.vue
@@ -25,6 +25,7 @@
         <el-input
           v-model="search"
           placeholder="Search logs"
+          prefix-icon="el-icon-search"
           clearable
           @input="handleDebounceSearchInput" />
       </el-col>
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index 3d0bbcdb..93b21a0e 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -23,6 +23,15 @@
               </span>
             </el-button>
           </el-link>
+          <el-autocomplete
+            v-model="state2"
+            :fetch-suggestions="querySearch"
+            :trigger-on-focus="false"
+            placeholder="Search"
+            prefix-icon="el-icon-search"
+            class="settings-search-input"
+            @select="handleSelect"
+          />
         </div>
       </div>
       <el-tabs v-model="activeTab" tab-position="left">
@@ -119,6 +128,17 @@
           </el-button>
         </el-link>
       </div>
+      <div class="settings-search-input-container">
+        <el-autocomplete
+          v-model="state2"
+          :fetch-suggestions="querySearch"
+          :trigger-on-focus="false"
+          placeholder="Search"
+          prefix-icon="el-icon-search"
+          class="settings-search-input"
+          @select="handleSelect"
+        />
+      </div>
       <activity-pub v-if="activeTab === 'activityPub'"/>
       <authentication v-if="activeTab === 'auth'"/>
       <auto-linker v-if="activeTab === 'autoLinker'"/>
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index a6658b55..cc90ba7a 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -277,6 +277,10 @@
     padding: 10px;
     margin-right: 5px;
   }
+  .settings-search-input {
+    width: 350px;
+    margin-left: 5px;
+  }
   .single-input {
     margin-right: 10px
   }
@@ -396,6 +400,13 @@
     .limit-input {
       width: 45%;
     }
+    .nav-container {
+      display: flex;
+      height: 36px;
+      justify-content: space-between;
+      align-items: center;
+      margin: 15px;
+    }
     .proxy-url-input {
       flex-direction: column;
       align-items: flex-start;
@@ -436,12 +447,12 @@
     .settings-header-container {
       margin: 15px;
     }
-    .nav-container {
-      display: flex;
-      height: 36px;
-      justify-content: space-between;
-      align-items: center;
-      margin: 15px;
+    .settings-search-input {
+      width: 100%;
+      margin-left: 0;
+    }
+    .settings-search-input-container {
+      margin: 0 15px 15px 15px;
     }
     .settings-menu {
       width: 163px;
@@ -521,7 +532,6 @@
     }
   }
   @media only screen and (max-width:801px) and (min-width: 481px) {
-
     .delete-setting-button {
       margin: 4px 0 0 10px;
       height: 28px;
@@ -565,5 +575,9 @@
     .settings-delete-button {
       float: right;
     }
+    .settings-search-input {
+      width: 250px;
+      margin: 0 0 15px 15px;
+    }
   }
 }
diff --git a/src/views/users/components/ModerationDropdown.vue b/src/views/users/components/ModerationDropdown.vue
index e4a974c1..fad336c3 100644
--- a/src/views/users/components/ModerationDropdown.vue
+++ b/src/views/users/components/ModerationDropdown.vue
@@ -172,7 +172,7 @@ export default {
 <style rel='stylesheet/scss' lang='scss'>
   .moderate-user-button {
     text-align: left;
-    width: 200px;
+    width: 350px;
     padding: 10px;
   }
   .moderate-user-button-container {
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 2940f776..1c0678e1 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -6,7 +6,12 @@
     </h1>
     <div class="filter-container">
       <users-filter/>
-      <el-input :placeholder="$t('users.search')" v-model="search" class="search" @input="handleDebounceSearchInput"/>
+      <el-input
+        :placeholder="$t('users.search')"
+        v-model="search"
+        prefix-icon="el-icon-search"
+        class="search"
+        @input="handleDebounceSearchInput"/>
     </div>
     <div class="actions-container">
       <el-button class="actions-button" @click="createAccountDialogOpen = true">