From f051d44ce3e4f42811a7b56221d726762dc9878f Mon Sep 17 00:00:00 2001
From: Alexandre Terrasa <alexandre@moz-code.org>
Date: Thu, 25 Aug 2016 15:36:00 -0400
Subject: [PATCH] nitweb/ng: enhance search results display

Signed-off-by: Alexandre Terrasa <alexandre@moz-code.org>
---
 share/nitweb/directives/search/card.html |   13 +++++++++++++
 share/nitweb/index.html                  |    4 ++--
 share/nitweb/javascripts/ui.js           |   21 ++++++++++++++++++---
 share/nitweb/stylesheets/nitweb.css      |    7 ++++++-
 4 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 share/nitweb/directives/search/card.html

diff --git a/share/nitweb/directives/search/card.html b/share/nitweb/directives/search/card.html
new file mode 100644
index 0000000..7052c60
--- /dev/null
+++ b/share/nitweb/directives/search/card.html
@@ -0,0 +1,13 @@
+<div class='card card-search'>
+	<div class='card-left text-center'>
+		<entity-tag mentity='mentity' />
+	</div>
+	<div class='card-body'>
+		<h5 class='card-heading'>
+			<entity-signature mentity='mentity'/>
+			<br>
+			<small><entity-namespace namespace='mentity.namespace' /></small>
+		</h5>
+		<span class='synopsis' ng-bind-html='mentity.mdoc.html_synopsis' />
+	</div>
+</div>
diff --git a/share/nitweb/index.html b/share/nitweb/index.html
index b95524a..c7657bc 100644
--- a/share/nitweb/index.html
+++ b/share/nitweb/index.html
@@ -46,13 +46,13 @@
 					<form ng-controller='SearchCtrl as searchCtrl' >
 						<div class='form-group has-icon'>
 							<input placeholder='Search...' type='text' class='form-control search-input'
-								ng-model-options='{ debounce: 150 }' ng-model='query'
+								ng-model-options='{ debounce: 300 }' ng-model='query'
 								ng-keydown='update($event)' ng-change='search()'>
 							<span class='glyphicon glyphicon-search form-control-icon text-muted'></span>
 						</div>
 						<div ng-if='results.length > 0' class='search-results'>
 							<div class='card-list'>
-								<entity-card ng-click='reset()' ng-class='{active: activeItem == $index}' mentity='mentity' ng-repeat='mentity in results' />
+								<search-card ng-click='selectEnter()' ng-class='{active: activeItem == $index}' ng-mouseover='setActive($index)' mentity='mentity' ng-repeat='mentity in results' />
 							</div>
 						</div>
 					</form>
diff --git a/share/nitweb/javascripts/ui.js b/share/nitweb/javascripts/ui.js
index cd30d06..f33a439 100644
--- a/share/nitweb/javascripts/ui.js
+++ b/share/nitweb/javascripts/ui.js
@@ -18,7 +18,7 @@
 	angular
 		.module('ui', [ 'model' ])
 
-		.controller('SearchCtrl', ['Model', '$routeParams', '$scope', '$window', function(Model, $routeParams, $scope, $window) {
+		.controller('SearchCtrl', ['Model', '$routeParams', '$scope', '$location', function(Model, $routeParams, $scope, $location) {
 			$scope.query = '';
 
 			$scope.reset = function() {
@@ -50,8 +50,8 @@
 				}
 			}
 
-			$scope.selectEnter = function() {
-				$window.location.href = $scope.results[$scope.activeItem].web_url;
+			$scope.selectEnter = function(e) {
+				$location.url($scope.results[$scope.activeItem].web_url);
 				$scope.reset();
 			}
 
@@ -59,6 +59,10 @@
 				$scope.reset();
 			}
 
+			$scope.setActive = function(index) {
+				$scope.activeItem = index;
+			}
+
 			$scope.search = function() {
 				if(!$scope.query) {
 					$scope.reset();
@@ -77,6 +81,17 @@
 			$scope.reset();
 		}])
 
+		.directive('searchCard', function() {
+			return {
+				restrict: 'E',
+				scope: {
+					mentity: '='
+				},
+				replace: true,
+				templateUrl: '/directives/search/card.html'
+			};
+		})
+
 		.directive('uiFilters', function() {
 			return {
 				restrict: 'E',
diff --git a/share/nitweb/stylesheets/nitweb.css b/share/nitweb/stylesheets/nitweb.css
index 0443397..23facdf 100644
--- a/share/nitweb/stylesheets/nitweb.css
+++ b/share/nitweb/stylesheets/nitweb.css
@@ -75,7 +75,7 @@ a {
 }
 
 .card-title {
-    padding-left: 15px;
+    margin-top: 0;
 }
 
 /* ui */
@@ -159,6 +159,7 @@ entity-list:hover .btn-filter {
 
 .search-results {
 	position: absolute;
+	margin-top: 2px;
 	right: 15px;
 	left: 15px;
 }
@@ -168,6 +169,10 @@ entity-list:hover .btn-filter {
 	border-color: #eee;
 }
 
+.card-search {
+	cursor: pointer;
+}
+
 /* loading bar */
 
 #loading-bar .bar {
-- 
1.7.9.5