From 8d0251b825ae6c53dc74e922987408789f831632 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Tue, 17 Nov 2015 11:36:48 -0500
Subject: [PATCH] update search animation

---
 dashboard-ui/css/search.css         | 28 +++++++++------------
 dashboard-ui/scripts/librarymenu.js |  1 -
 dashboard-ui/scripts/searchmenu.js  | 38 ++++++++++++-----------------
 3 files changed, 27 insertions(+), 40 deletions(-)

diff --git a/dashboard-ui/css/search.css b/dashboard-ui/css/search.css
index 9d8e85d20..3718f30ca 100644
--- a/dashboard-ui/css/search.css
+++ b/dashboard-ui/css/search.css
@@ -108,26 +108,20 @@
 }
 
 .headerSearchInput {
-    margin: 0!important;
-    background: #222!important;
-    border: 0!important;
-    color: #ddd!important;
-    border-radius: 3px!important;
-    padding: 4px 0 3px 0!important;
-    text-indent: 50px!important;
+    margin: 0 !important;
+    background: #222 !important;
+    border: 0 !important;
+    color: #eee !important;
+    border-radius: 0 !important;
+    padding: 7px 0 6px 0 !important;
+    text-indent: 10px !important;
     font-size: 16px;
     font-family: inherit;
     outline: none;
     vertical-align: middle;
-    width: 85%!important;
-    display: inline-block!important;
-}
-
-.searchInputIcon {
-    position: absolute;
-    left: 20px;
-    top: 18px;
-    color: #ddd !important;
+    width: 85% !important;
+    display: inline-block !important;
+    height: 100%!important;
 }
 
 .viewMenuSearch {
@@ -163,7 +157,7 @@
 
 .viewMenuSearchForm {
     max-width: none;
-    padding: 10px;
+    padding: 5px;
 }
 
 .searchResultsOverlay {
diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js
index 1e7a45ae3..9060ca7dc 100644
--- a/dashboard-ui/scripts/librarymenu.js
+++ b/dashboard-ui/scripts/librarymenu.js
@@ -24,7 +24,6 @@
             html += '<div class="viewMenuSearch hide">';
             html += '<form class="viewMenuSearchForm">';
             html += '<input type="text" data-role="none" data-type="search" class="headerSearchInput" autocomplete="off" spellcheck="off" />';
-            html += '<iron-icon class="searchInputIcon" icon="search"></iron-icon>';
             html += '<paper-icon-button icon="close" class="btnCloseSearch"></paper-icon-button>';
             html += '</form>';
             html += '</div>';
diff --git a/dashboard-ui/scripts/searchmenu.js b/dashboard-ui/scripts/searchmenu.js
index bbc1d0874..dd74119c8 100644
--- a/dashboard-ui/scripts/searchmenu.js
+++ b/dashboard-ui/scripts/searchmenu.js
@@ -11,20 +11,24 @@
             require(["jquery", "velocity"], function ($, Velocity) {
 
                 $('.btnCloseSearch').hide();
-                var elem = $('.viewMenuSearch')
-                    .css({ left: '100%' })
-                    .removeClass('hide')[0];
+                var elem = $('.viewMenuSearch').removeClass('hide')[0];
 
-                Velocity.animate(elem, { "left": "0px" },
-                {
-                    complete: function () {
-                        $('.headerSearchInput').focus();
-                        $('.btnCloseSearch').show();
-                    }
-                });
+                fadeIn(elem, 1).onfinish = function () {
+                    $('.headerSearchInput').focus();
+                    $('.btnCloseSearch').show();
+                };
             });
         };
 
+        function fadeIn(elem, iterations) {
+
+            var keyframes = [
+              { opacity: '0', offset: 0 },
+              { opacity: '1', offset: 1 }];
+            var timing = { duration: 200, iterations: iterations };
+            return elem.animate(keyframes, timing);
+        }
+
         self.hide = function () {
 
             var viewMenuSearch = document.querySelector('.viewMenuSearch');
@@ -34,18 +38,8 @@
             }
 
             if (!viewMenuSearch.classList.contains('hide')) {
-                require(["jquery", "velocity"], function ($, Velocity) {
-
-                    $('.btnCloseSearch').hide();
-                    viewMenuSearch.style.left = '0';
-
-                    Velocity.animate(viewMenuSearch, { "left": "100%" },
-                    {
-                        complete: function () {
-                            $('.viewMenuSearch').visible(false);
-                        }
-                    });
-                });
+                $('.btnCloseSearch').hide();
+                viewMenuSearch.classList.add('hide');
             }
         };