New UI for search field

Michel Felipe
1 parent f75c68d0
Showing 13 changed files with 177 additions and 18 deletions Show diff stats
src/app/layout/language-selector/language-selector.html
src/app/layout/navbar/navbar.html
src/app/layout/navbar/navbar.scss
src/app/layout/scss/_mixins.scss
src/app/layout/scss/skins/_whbl.scss
src/app/search/search-form/search-form.component.spec.ts
src/app/search/search-form/search-form.html
src/app/search/search-form/search-form.scss
src/app/search/search.component.ts
src/app/search/search.html
src/app/search/search.scss
src/languages/en.json
src/languages/pt.json
-<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>
@@ -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>
@@ -50,4 +50,10 @@
     	}
     }
   }
+
+  .btn-nav {
+    border-radius: 0px;
+    height: 50px;
+    border: none;
+  }
 }
@@ -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;
+	}
+}
@@ -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;
@@ -21,8 +21,8 @@ describe(&quot;Components&quot;, () =&gt; {
             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", () => {
-<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>
@@ -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;
+  }
+}
@@ -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() {
 <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">
@@ -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
+}
@@ -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!",
@@ -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!",
1	-<li class="dropdown profile-menu" uib-dropdown>	1	+<li class="dropdown profile-menu btn-nav" uib-dropdown>
2	<a href="#" class="dropdown-toggle" aria-expanded="false" uib-dropdown-toggle>	2	<a href="#" class="dropdown-toggle" aria-expanded="false" uib-dropdown-toggle>
3	<span>{{"language.selector" \| translate}}</span> <b class="caret"></b>	3	<span>{{"language.selector" \| translate}}</span> <b class="caret"></b>
4	</a>	4	</a>
	@@ -50,4 +50,10 @@		@@ -50,4 +50,10 @@
50	}	50	}
51	}	51	}
52	}	52	}
		53	+
		54	+ .btn-nav {
		55	+ border-radius: 0px;
		56	+ height: 50px;
		57	+ border: none;
		58	+ }
53	}	59	}
	@@ -15,3 +15,36 @@		@@ -15,3 +15,36 @@
15	content: $content;	15	content: $content;
16	border: $border;	16	border: $border;
17	}	17	}
		18	+
		19	+@mixin opacity($opacity) {
		20	+ /* Netscape */
		21	+ -moz-opacity: $opacity;
		22	+
		23	+ /* Safari 1.x */
		24	+ -khtml-opacity: $opacity;
		25	+
		26	+ /* Good browsers */
		27	+ opacity: $opacity;
		28	+}
		29	+
		30	+@mixin transition($args...) {
		31	+
		32	+ $duration: 300ms;
		33	+ $keys: keywords($args);
		34	+ @if map-has-key($keys, duration) {
		35	+ $duration: map-get($keys, duration);
		36	+ }
		37	+
		38	+ -webkit-transition: $args;
		39	+ -o-transition: $args;
		40	+ transition: $args;
		41	+ -webkit-transition-duration: $duration;
		42	+ transition-duration: $duration;
		43	+}
		44	+
		45	+@mixin outline($style: none, $width: 0px) {
		46	+ &:focus {
		47	+ outline-style: $style;
		48	+ outline-width: $width;
		49	+ }
		50	+}
	@@ -7,6 +7,15 @@ $whbl-font-color: #16191c;		@@ -7,6 +7,15 @@ $whbl-font-color: #16191c;
7	#header-navbar {	7	#header-navbar {
8	background-color: $whbl-primary-color;	8	background-color: $whbl-primary-color;
9	}	9	}
		10	+
		11	+ .navbar {
		12	+ .btn-nav {
		13	+ &:hover {
		14	+ background-color: #1b86ba;
		15	+ }
		16	+ }
		17	+ }
		18	+
10	.navbar > .container .navbar-brand {	19	.navbar > .container .navbar-brand {
11	background-color: transparent;	20	background-color: transparent;
12	width: 221px;	21	width: 221px;
1	-<form class="navbar-form search-form" role="search" ng-if="!ctrl.isSearchPage()">
2	- <div class="input-group">
3	- <input type="text" class="search-input form-control" placeholder="Search" name="q" ng-model="ctrl.query">
4	- <div class="input-group-btn">
5	- <button class="btn btn-default" type="submit" (click)="ctrl.search()"><i class="fa fa-search fa-fw"></i></button>	1	+<a class="btn btn-nav" ng-click="showSearch = !showSearch">
		2	+ <i class="fa fa-search btn-search-nav" aria-hidden="true"></i>
		3	+</a>
		4	+<form class="navbar-form search-form" role="search">
		5	+ <div class="ng-scope" ng-class="{'top-search-wrap': !showSearch, 'top-search-toggled': showSearch}">
		6	+ <div class="tsw-inner">
		7	+ <i id="top-search-close" class="fa fa-chevron-left" aria-hidden="true" ng-click="showSearch = false"></i>
		8	+ <input type="text" placeholder="{{ 'search.label' \| translate }}" name="q" ng-model="ctrl.query">
		9	+ <i class="fa fa-search btn-search" aria-hidden="true" (click)="ctrl.search()"></i>
		10	+ <button type="submit" (click)="ctrl.search()"></i>
6	</div>	11	</div>
7	</div>	12	</div>
8	</form>	13	</form>
@@ -0,0 +1,107 @@		@@ -0,0 +1,107 @@
	1	+/**
	2	+* TODO: Remove the temporary reimport mixins
	3	+* Maybe the cause for this is in gulp/styles.js
	4	+* task on compile sass order.
	5	+*/
	6	+@import "../../layout/scss/mixins";
	7	+
	8	+@mixin search-wrap-btn {
	9	+ @include border-radius(2px 0px 0px 2px);
	10	+ @content;
	11	+ font-size: 23px;
	12	+ font-style: normal;
	13	+ width: 45px;
	14	+ text-align: center;
	15	+ cursor: pointer;
	16	+ height: 40px;
	17	+ padding-top: 9px;
	18	+
	19	+ background-color: #e3e3e3;
	20	+ &:hover {
	21	+ background-color: #D1D1D1;
	22	+ }
	23	+
	24	+ @include outline(none);
	25	+}
	26	+
	27	+.top-search-wrap {
	28	+ @include opacity(0);
	29	+ @include transition(all);
	30	+
	31	+ position: absolute;
	32	+ top: -65px;
	33	+ left: 0;
	34	+ width: 100%;
	35	+ height: 70px;
	36	+ background: #fff;
	37	+ z-index: 10;
	38	+
	39	+ .tsw-inner {
	40	+ position: relative;
	41	+ padding: 15px;
	42	+ max-width: 700px;
	43	+ display: block;
	44	+ margin: 0 auto;
	45	+ }
	46	+
	47	+ #top-search-close {
	48	+ @include border-radius(2px 0px 0px 2px);
	49	+ @include search-wrap-btn {
	50	+ position: absolute;
	51	+ top: 15px;
	52	+ left: 15px;
	53	+ }
	54	+
	55	+ @include outline(none);
	56	+ }
	57	+
	58	+ .btn-search {
	59	+ display: inline;
	60	+ float: right;
	61	+
	62	+ @include search-wrap-btn {
	63	+ position: relative;
	64	+ top: -40px;
	65	+ left: 0px;
	66	+ }
	67	+
	68	+ }
	69	+
	70	+ input[type="text"] {
	71	+ @include border-radius(2px);
	72	+ border: 0;
	73	+ height: 40px;
	74	+ padding: 0 10px 0 55px;
	75	+ font-size: 18px;
	76	+ width: 500px;
	77	+ background-color: #efefef;
	78	+ width: 100%;
	79	+
	80	+ @include outline(none);
	81	+ }
	82	+
	83	+}
	84	+
	85	+.top-search-toggled {
	86	+ @extend .top-search-wrap;
	87	+ @include opacity(1);
	88	+ position: fixed;
	89	+ top: 0;
	90	+ box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
	91	+}
	92	+
	93	+.btn-nav {
	94	+ .btn-search-nav {
	95	+ font-size: 25px;
	96	+ color: #FFF;
	97	+ cursor: pointer;
	98	+ padding: 1px;
	99	+ }
	100	+}
	101	+
	102	+
	103	+.search-form {
	104	+ button[type="submit"] {
	105	+ visibility: hidden;
	106	+ }
	107	+}
	@@ -23,7 +23,7 @@ export class SearchComponent {		@@ -23,7 +23,7 @@ export class SearchComponent {
23	}	23	}
24		24
25	search() {	25	search() {
26	- this.$state.go('main.environment.search', { query: this.query });	26	+ this.$state.go('main.environment.search', { query: this.query });
27	}	27	}
28		28
29	loadPage() {	29	loadPage() {
1	<form ng-submit="ctrl.search()">	1	<form ng-submit="ctrl.search()">
2	<label for="query" ng-bind-html="'search.results.query.label' \| translate"></label>	2	<label for="query" ng-bind-html="'search.results.query.label' \| translate"></label>
3	-<input id="query" placeholder="{{'search.results.query.placeholder' \| translate}}" type="search" class="search-box-title" ng-model="ctrl.query">	3	+<h3 id="query" class="search-box-title">{{ctrl.query}}</h3>
4	</form>	4	</form>
5	<div class="search-results">	5	<div class="search-results">
6	<div class="summary">	6	<div class="summary">