From 1879057ced32a33c5204f5903f0e7c931d942b58 Mon Sep 17 00:00:00 2001
From: Alfredo Sumaran <alfredo@gitlab.com>
Date: Wed, 9 Mar 2016 15:52:15 -0500
Subject: [PATCH] Add icons

---
 app/assets/images/spinner.svg            |  1 +
 app/assets/stylesheets/pages/search.scss | 39 +++++++++++++++++++++++-
 app/views/layouts/_search.html.haml      |  1 +
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/images/spinner.svg

diff --git a/app/assets/images/spinner.svg b/app/assets/images/spinner.svg
new file mode 100644
index 00000000000..3dd110cfa0f
--- /dev/null
+++ b/app/assets/images/spinner.svg
@@ -0,0 +1 @@
+<svg width='24px' height='24px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(0 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(30 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(60 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(90 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(120 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(150 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(180 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(210 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(240 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(270 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(300 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#7f8fa4' transform='rotate(330 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
\ No newline at end of file
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 3c3313c911b..90c9d4de59d 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -37,6 +37,12 @@
       background-color: $input-border-focus;
       color: $white-light;
     }
+
+    .search-input-wrap {
+      i {
+        color: $input-border-focus;
+      }
+    }
   }
 
   form {
@@ -61,7 +67,7 @@
     font-size: 14px;
     outline: none;
     padding: 0;
-    margin-left: 2px;
+    margin-left: 5px;
     line-height: 25px;
     width: 100%;
   }
@@ -89,5 +95,36 @@
 
   .search-input-wrap {
     width: 100%;
+    position: relative;
+
+    .search-icon {
+      @extend .fa-search;
+      @include transition(color .15s);
+      position: absolute;
+      right: 5px;
+      color: #E7E9ED;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+
+      &:before {
+        font-family: FontAwesome;
+        font-weight: normal;
+        font-style: normal;
+      }
+    }
+
+    .ui-autocomplete-loading + .search-icon {
+      height: 25px;
+      width: 25px;
+      position: absolute;
+      right: 0;
+      background-image: image-url('spinner.svg');
+      fill: red;
+
+      &:before {
+        display: none;
+      }
+    }
   }
 }
diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml
index 58a3cdf955e..a004908fb6f 100644
--- a/app/views/layouts/_search.html.haml
+++ b/app/views/layouts/_search.html.haml
@@ -5,6 +5,7 @@
         = render 'shared/location_badge'
       .search-input-wrap
         = search_field_tag "search", nil, placeholder: 'Search', class: "search-input", spellcheck: false, tabindex: "1", autocomplete: 'off'
+        %i.search-icon
 
     = hidden_field_tag :group_id, @group.try(:id)
     = hidden_field_tag :project_id, @project && @project.persisted? ? @project.id : '', id: 'search_project_id'