nitweb/ng: enhance search results display

Signed-off-by: Alexandre Terrasa <alexandre@moz-code.org>

diff --git a/share/nitweb/directives/search/card.html b/share/nitweb/directives/search/card.html
new file mode 100644 (file)
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 (file)
--- 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 (file)
--- 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 (file)
--- 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 {