From 098b9891414bc7106959c5f163c10986e8070ec5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Fri, 11 Dec 2015 10:20:18 +0100
Subject: [PATCH] Search Table layout

---
 app/coffee/modules/search.coffee              |  6 +-
 .../includes/modules/search-filter.jade       | 60 ++++++++++---------
 app/styles/modules/search/search-filter.scss  | 45 ++++++++------
 .../modules/search/search-result-table.scss   | 11 ++--
 4 files changed, 68 insertions(+), 54 deletions(-)

diff --git a/app/coffee/modules/search.coffee b/app/coffee/modules/search.coffee
index 022563b4..273eb58d 100644
--- a/app/coffee/modules/search.coffee
+++ b/app/coffee/modules/search.coffee
@@ -174,7 +174,7 @@ SearchDirective = ($log, $compile, $templatecache, $routeparams, $location) ->
     linkTable = ($scope, $el, $attrs, $ctrl) ->
         applyAutoTab = true
         activeSectionName = "userstories"
-        tabsDom = $el.find("section.search-filter")
+        tabsDom = $el.find(".search-filter")
         lastSearchResults = null
 
         getActiveSection = (data) ->
@@ -197,7 +197,7 @@ SearchDirective = ($log, $compile, $templatecache, $routeparams, $location) ->
                         maxVal = value.length
                         selectedSection.name = name
                         selectedSection.value = value
-                        break;
+                        break
 
             if maxVal == 0
                 return selectedSection
@@ -206,7 +206,7 @@ SearchDirective = ($log, $compile, $templatecache, $routeparams, $location) ->
 
         renderFilterTabs = (data) ->
             for name, value of data
-                continue if name == "count"
+                tabsDom.find("li.#{name}").show()
                 tabsDom.find("li.#{name} .num").html(value.length)
 
         markSectionTabActive = (section) ->
diff --git a/app/partials/includes/modules/search-filter.jade b/app/partials/includes/modules/search-filter.jade
index 22cb8f89..5c8c93ae 100644
--- a/app/partials/includes/modules/search-filter.jade
+++ b/app/partials/includes/modules/search-filter.jade
@@ -1,30 +1,36 @@
-section.search-filter
-    ul
-        li.userstories(data-name="userstories")
-            a.active(href="#")
-                span.icon.icon-bulk
-                span.num 0
-                span.name(translate="SEARCH.FILTER_USER_STORIES")
+ul.search-filter
+    li.userstories(data-name="userstories")
+        a.active(
+            href="#"
+            title="{{ 'SEARCH.FILTER_USER_STORIES' | translate }}"
+        )
+            span.icon.icon-bulk
+            span.num
+            span.name(translate="SEARCH.FILTER_USER_STORIES")
 
-        li.issues(data-name="issues")
-            a(href="#")
-                span.icon.icon-issues
-                span.num 0
-                span.name(translate="SEARCH.FILTER_ISSUES")
+    li.issues(data-name="issues")
+        a(
+            href="#"
+            title="{{ 'SEARCH.FILTER_ISSUES' | translate }}"
+        )
+            span.icon.icon-issues
+            span.num
+            span.name(translate="SEARCH.FILTER_ISSUES")
 
-        li.tasks(data-name="tasks")
-            a(href="#")
-                span.icon.icon-bulk
-                span.num 0
-                span.name(translate="SEARCH.FILTER_TASKS")
+    li.tasks(data-name="tasks")
+        a(
+            href="#"
+            title="{{ 'SEARCH.FILTER_TASKS' | translate }}"
+        )
+            span.icon.icon-bulk
+            span.num
+            span.name(translate="SEARCH.FILTER_TASKS")
 
-        li.wikipages(data-name="wikipages")
-            a(href="#")
-                span.icon.icon-wiki
-                span.num 0
-                span.name(translate="SEARCH.FILTER_WIKI")
-
-        //- li
-        //-     a(href="#")
-        //-         span.icon.icon-edit
-        //-         | 3 Users
+    li.wikipages(data-name="wikipages")
+        a(
+            href="#"
+            title="{{ 'SEARCH.FILTER_WIKI' | translate }}"
+        )
+            span.icon.icon-wiki
+            span.num
+            span.name(translate="SEARCH.FILTER_WIKI")
diff --git a/app/styles/modules/search/search-filter.scss b/app/styles/modules/search/search-filter.scss
index 55b88173..742bd0b7 100644
--- a/app/styles/modules/search/search-filter.scss
+++ b/app/styles/modules/search/search-filter.scss
@@ -1,26 +1,33 @@
 .search-filter {
-    ul {
-        border-bottom: 3px solid $gray-light;
-        display: flex;
-        padding-bottom: .5rem;
-    }
-    li {
-        margin-right: 1rem;
-    }
+    border-top: 1px solid $whitish;
+    display: flex;
+    margin-bottom: 0;
+    z-index: 9;
     a {
-        @extend %large;
-        @extend %title;
-        opacity: .2;
+        background: $white;
+        color: $gray-light;
+        display: inline-block;
+        margin-right: 1rem;
+        padding: 1rem 1.25rem;
         &:hover {
-            color: $gray;
-            opacity: 1;
-            transition: opacity .3s linear;
+            transition: color .3s linear;
+            .icon {
+                margin-right: .4rem;
+            }
+            .name {
+                padding-left: 5px;
+            }
+        }
+        &.active {
+            border-left: 1px solid $whitish;
+            border-right: 1px solid $whitish;
+            color: $grayer;
+            position: relative;
+            top: 1px;
+            .icon {
+                color: $primary-light;
+            }
         }
-    }
-    .active {
-        color: $gray;
-        opacity: 1;
-        transition: opacity .3s linear;
     }
     .icon {
         margin-right: .4rem;
diff --git a/app/styles/modules/search/search-result-table.scss b/app/styles/modules/search/search-result-table.scss
index 65371e7a..e970dfdf 100644
--- a/app/styles/modules/search/search-result-table.scss
+++ b/app/styles/modules/search/search-result-table.scss
@@ -1,14 +1,11 @@
 .search-result-table {
+    border-top: 1px solid $whitish;
     .row {
-        align-content: center;
         align-items: center;
         display: flex;
         justify-content: space-between;
         padding: .5rem;
-        &:hover {
-            background: lighten($primary, 60%);
-            transition: background .2s ease-in;
-        }
+
         .ref {
             flex-basis: 30px;
             flex-grow: 1;
@@ -83,6 +80,10 @@
     }
 }
 
+.search-result-table-header {
+    @extend %bold;
+}
+
 .empty-search-results {
     margin-top: 4rem;
     text-align: center;