From 39ae284abf29e602ff9c7a8bc625b4d20f1c6690 Mon Sep 17 00:00:00 2001
From: Michel Felipe <mfelipeof@gmail.com>
Date: Wed, 22 Jun 2016 19:24:46 -0300
Subject: [PATCH] New UI for search field

---
 src/app/layout/language-selector/language-selector.html  |   2 +-
 src/app/layout/navbar/navbar.html                        |   4 ++--
 src/app/layout/navbar/navbar.scss                        |   6 ++++++
 src/app/layout/scss/_mixins.scss                         |  33 +++++++++++++++++++++++++++++++++
 src/app/layout/scss/skins/_whbl.scss                     |   9 +++++++++
 src/app/search/search-form/search-form.component.spec.ts |   4 ++--
 src/app/search/search-form/search-form.html              |  15 ++++++++++-----
 src/app/search/search-form/search-form.scss              | 107 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/app/search/search.component.ts                       |   2 +-
 src/app/search/search.html                               |   2 +-
 src/app/search/search.scss                               |   3 +--
 src/languages/en.json                                    |   4 ++--
 src/languages/pt.json                                    |   4 ++--
 13 files changed, 177 insertions(+), 18 deletions(-)
 create mode 100644 src/app/search/search-form/search-form.scss

diff --git a/src/app/layout/language-selector/language-selector.html b/src/app/layout/language-selector/language-selector.html
index 452acaf..f2fbf86 100644
--- a/src/app/layout/language-selector/language-selector.html
+++ b/src/app/layout/language-selector/language-selector.html
@@ -1,4 +1,4 @@
-<li class="dropdown profile-menu" uib-dropdown>
+<li class="dropdown profile-menu btn-nav" uib-dropdown>
   <a href="#" class="dropdown-toggle" aria-expanded="false" uib-dropdown-toggle>
     <span>{{"language.selector" | translate}}</span> <b class="caret"></b>
   </a>
diff --git a/src/app/layout/navbar/navbar.html b/src/app/layout/navbar/navbar.html
index 26cc7e0..bc01adc 100644
--- a/src/app/layout/navbar/navbar.html
+++ b/src/app/layout/navbar/navbar.html
@@ -16,7 +16,7 @@
       </ul>
 
       <ul class="nav navbar-nav navbar-right">
-        <li ng-show="!ctrl.currentUser">
+        <li class="btn-nav" ng-show="!ctrl.currentUser">
           <a ng-href="#" ng-click="ctrl.openLogin()">{{"navbar.login" | translate}}</a>
         </li>
 
@@ -51,4 +51,4 @@
   </div>
 </nav>
 <div ui-view="toolbar">
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/layout/navbar/navbar.scss b/src/app/layout/navbar/navbar.scss
index 9bb908b..737d2b3 100644
--- a/src/app/layout/navbar/navbar.scss
+++ b/src/app/layout/navbar/navbar.scss
@@ -50,4 +50,10 @@
     	}
     }
   }
+
+  .btn-nav {
+    border-radius: 0px;
+    height: 50px;
+    border: none;
+  }
 }
diff --git a/src/app/layout/scss/_mixins.scss b/src/app/layout/scss/_mixins.scss
index dcb23e5..7b23a03 100644
--- a/src/app/layout/scss/_mixins.scss
+++ b/src/app/layout/scss/_mixins.scss
@@ -15,3 +15,36 @@
 	content: $content;
 	border: $border;
 }
+
+@mixin opacity($opacity) {
+	/* Netscape */
+  -moz-opacity: $opacity;
+
+  /* Safari 1.x */
+  -khtml-opacity: $opacity;
+
+  /* Good browsers */
+	opacity: $opacity;
+}
+
+@mixin transition($args...) {
+
+	$duration: 300ms;
+	$keys: keywords($args);
+	@if map-has-key($keys, duration) {
+		$duration: map-get($keys, duration);
+	}
+
+	-webkit-transition: $args;
+  -o-transition: $args;
+  transition: $args;
+  -webkit-transition-duration: $duration;
+  transition-duration: $duration;
+}
+
+@mixin outline($style: none, $width: 0px) {
+	&:focus {
+		outline-style: $style;
+		outline-width: $width;
+	}
+}
diff --git a/src/app/layout/scss/skins/_whbl.scss b/src/app/layout/scss/skins/_whbl.scss
index 1b15d03..2d42de2 100644
--- a/src/app/layout/scss/skins/_whbl.scss
+++ b/src/app/layout/scss/skins/_whbl.scss
@@ -7,6 +7,15 @@ $whbl-font-color: #16191c;
 	#header-navbar {
 		background-color: $whbl-primary-color;
 	}
+
+	.navbar {
+		.btn-nav {
+			&:hover {
+	      background-color: #1b86ba;
+	    }
+		}
+	}
+
 	.navbar > .container .navbar-brand {
 		background-color: transparent;
 		width: 221px;
diff --git a/src/app/search/search-form/search-form.component.spec.ts b/src/app/search/search-form/search-form.component.spec.ts
index 0a718bd..f8428be 100644
--- a/src/app/search/search-form/search-form.component.spec.ts
+++ b/src/app/search/search-form/search-form.component.spec.ts
@@ -21,8 +21,8 @@ describe("Components", () => {
             helper = new ComponentTestHelper<SearchFormComponent>(cls, done);
         });
 
-        it("render a input for search query", () => {
-            expect(helper.find(".search-input").length).toEqual(1);
+        it("render a button that open a search query field", () => {
+            expect(helper.find(".btn-search-nav").length).toEqual(1);
         });
 
         it("go to search page when click on search button", () => {
diff --git a/src/app/search/search-form/search-form.html b/src/app/search/search-form/search-form.html
index e1878b5..3560632 100644
--- a/src/app/search/search-form/search-form.html
+++ b/src/app/search/search-form/search-form.html
@@ -1,8 +1,13 @@
-<form class="navbar-form search-form" role="search" ng-if="!ctrl.isSearchPage()">
-  <div class="input-group">
-    <input type="text" class="search-input form-control" placeholder="Search" name="q" ng-model="ctrl.query">
-    <div class="input-group-btn">
-      <button class="btn btn-default" type="submit" (click)="ctrl.search()"><i class="fa fa-search fa-fw"></i></button>
+<a class="btn btn-nav" ng-click="showSearch = !showSearch">
+  <i class="fa fa-search btn-search-nav" aria-hidden="true"></i>
+</a>
+<form class="navbar-form search-form" role="search">
+  <div class="ng-scope" ng-class="{'top-search-wrap': !showSearch, 'top-search-toggled': showSearch}">
+    <div class="tsw-inner">
+      <i id="top-search-close" class="fa fa-chevron-left" aria-hidden="true" ng-click="showSearch = false"></i>
+      <input type="text" placeholder="{{ 'search.label' | translate }}" name="q" ng-model="ctrl.query">
+      <i class="fa fa-search btn-search" aria-hidden="true" (click)="ctrl.search()"></i>
+      <button type="submit" (click)="ctrl.search()"></i>
     </div>
   </div>
 </form>
diff --git a/src/app/search/search-form/search-form.scss b/src/app/search/search-form/search-form.scss
new file mode 100644
index 0000000..ff1a27b
--- /dev/null
+++ b/src/app/search/search-form/search-form.scss
@@ -0,0 +1,107 @@
+/**
+* TODO: Remove the temporary reimport mixins
+*       Maybe the cause for this is in gulp/styles.js
+*       task on compile sass order.
+*/
+@import "../../layout/scss/mixins";
+
+@mixin search-wrap-btn {
+  @include border-radius(2px 0px 0px 2px);
+  @content;
+  font-size: 23px;
+  font-style: normal;
+  width: 45px;
+  text-align: center;
+  cursor: pointer;
+  height: 40px;
+  padding-top: 9px;
+
+  background-color: #e3e3e3;
+  &:hover {
+    background-color: #D1D1D1;
+  }
+
+  @include outline(none);
+}
+
+.top-search-wrap {
+  @include opacity(0);
+  @include transition(all);
+
+  position: absolute;
+  top: -65px;
+  left: 0;
+  width: 100%;
+  height: 70px;
+  background: #fff;
+  z-index: 10;
+
+  .tsw-inner {
+    position: relative;
+    padding: 15px;
+    max-width: 700px;
+    display: block;
+    margin: 0 auto;
+  }
+
+  #top-search-close {
+    @include border-radius(2px 0px 0px 2px);
+    @include search-wrap-btn {
+      position: absolute;
+      top: 15px;
+      left: 15px;
+    }
+
+    @include outline(none);
+  }
+
+  .btn-search {
+    display: inline;
+    float: right;
+
+    @include search-wrap-btn {
+      position: relative;
+      top: -40px;
+      left: 0px;
+    }
+
+  }
+
+  input[type="text"] {
+    @include border-radius(2px);
+    border: 0;
+    height: 40px;
+    padding: 0 10px 0 55px;
+    font-size: 18px;
+    width: 500px;
+    background-color: #efefef;
+    width: 100%;
+
+    @include outline(none);
+  }
+
+}
+
+.top-search-toggled {
+    @extend .top-search-wrap;
+    @include opacity(1);
+    position: fixed;
+    top: 0;
+    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+.btn-nav {
+  .btn-search-nav {
+    font-size: 25px;
+    color: #FFF;
+    cursor: pointer;
+    padding: 1px;
+  }
+}
+
+
+.search-form {
+  button[type="submit"] {
+    visibility: hidden;
+  }
+}
diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts
index 6e67f6a..0500be1 100644
--- a/src/app/search/search.component.ts
+++ b/src/app/search/search.component.ts
@@ -23,7 +23,7 @@ export class SearchComponent {
     }
 
     search() {
-         this.$state.go('main.environment.search', { query: this.query });
+        this.$state.go('main.environment.search', { query: this.query });
     }
 
     loadPage() {
diff --git a/src/app/search/search.html b/src/app/search/search.html
index ee69c3c..48d2dfc 100644
--- a/src/app/search/search.html
+++ b/src/app/search/search.html
@@ -1,6 +1,6 @@
 <form ng-submit="ctrl.search()">
 <label for="query" ng-bind-html="'search.results.query.label' | translate"></label>
-<input id="query" placeholder="{{'search.results.query.placeholder' | translate}}" type="search" class="search-box-title" ng-model="ctrl.query">
+<h3 id="query" class="search-box-title">{{ctrl.query}}</h3>
 </form>
 <div class="search-results">
   <div class="summary">
diff --git a/src/app/search/search.scss b/src/app/search/search.scss
index 3d3d5e8..23513b4 100644
--- a/src/app/search/search.scss
+++ b/src/app/search/search.scss
@@ -2,7 +2,6 @@
   .summary {
     color: #bbbbbb;
     font-size: 13px;
-    border-top: 1px solid #ececec;
   }
   .result {
     margin: 25px 0;
@@ -45,4 +44,4 @@
 
 .search-box-title:focus {
   outline: none;
-}
\ No newline at end of file
+}
diff --git a/src/languages/en.json b/src/languages/en.json
index 371e9fc..d3b6ce5 100644
--- a/src/languages/en.json
+++ b/src/languages/en.json
@@ -81,8 +81,8 @@
   "designMode.toggle.ON": "ON",
   "designMode.toggle.OFF": "OFF",
   "search.results.summary": "{results, plural, one{result} other{# results}}",
-  "search.results.query.label": "Search for:",
-  "search.results.query.placeholder": "Search",
+  "search.results.query.label": "Search therm:",
+  "search.label": "Search",
   "block.edit": "Edit",
   "block.edition.title": "Edit Block",
   "block.edition.success.title": "Good job!",
diff --git a/src/languages/pt.json b/src/languages/pt.json
index 972363f..15e60a2 100644
--- a/src/languages/pt.json
+++ b/src/languages/pt.json
@@ -81,8 +81,8 @@
   "designMode.toggle.ON": "Ligado",
   "designMode.toggle.OFF": "Desligado",
   "search.results.summary": "{results, plural, one{# resultado} other{# resultados}}",
-  "search.results.query.label": "Buscar:",
-  "search.results.query.placeholder": "Informe aqui sua busca",
+  "search.results.query.label": "Termo da busca:",
+  "search.label": "Pesquisar",
   "block.edit": "Editar",
   "block.edition.title": "Editar Bloco",
   "block.edition.success.title": "Bom trabalho!",
--
libgit2 0.21.2