From 6b3489a4d30b6530091919b4c44617a3294ffdd2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 3 Dec 2018 08:03:11 +0300
Subject: search button for user finder

---
 src/components/user_finder/user_finder.vue | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

(limited to 'src/components/user_finder/user_finder.vue')

diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue
index f2556569..33b4c356 100644
--- a/src/components/user_finder/user_finder.vue
+++ b/src/components/user_finder/user_finder.vue
@@ -2,10 +2,13 @@
   <span class="user-finder-container">
     <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
     <a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden"/></a>
-    <span v-else>
+    <template v-else>
       <input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
+      <button class="btn search-button" @click="findUser(username)">
+        <i class="icon-search"/>
+      </button>
       <i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
-    </span>
+    </template>
   </span>
 </template>
 
@@ -15,13 +18,24 @@
 @import '../../_variables.scss';
 
 .user-finder-container {
-  height: 29px;
   max-width: 100%;
-}
+  display: inline-flex;
+  align-items: baseline;
+  vertical-align: baseline;
+
+
+  .user-finder-input,
+  .search-button {
+    height: 29px;
+  }
+  .user-finder-input {
+    max-width: 80%;
+  }
 
-.user-finder-input {
-  max-width: 80%;
-  vertical-align: middle;
+  .search-button {
+    margin-left: .5em;
+    margin-right: .5em;
+  }
 }
 
 </style>
-- 
cgit v1.2.3-70-g09d2