Filters refactor shared

app/partials/issues.jade

@@ -4,8 +4,10 @@ block head
     title Taiga  Project management web application with scrum in mind!
 
 block content
-    div.wrapper(tg-issues, ng-controller="IssuesController as ctrl",
+    div.wrapper.issues(tg-issues, ng-controller="IssuesController as ctrl", ng-init="section='issues'")
-                ng-init="section='issues'")
+        sidebar.menu-secondary.extrabar.filters-bar
+            include views/modules/filters
+        //
             sidebar.menu-secondary.sidebar.filters-container
                 // TODO: maybe everything related to this section
                 // should be done in one unique include?

app/partials/views/modules/filters.jade

@@ -1,10 +1,41 @@
 section.filters
     div.filters-inner
-        h1 filters
+        h1
+            a(href="", title="back to categories") filters
+            a.subfilter(href="", title="cat-name")
+                span.icon.icon-arrow-right
+                span status
         form
             fieldset
                 input(type="text", placeholder="Filter Filters", ng-model="filtersSearch.$")
                 a.icon.icon-search(href="", title="search")
+        //- First step for selecting category
+        div.filters-step-cat
+            //- $(.filters-applied) only visible when filters are being applied
+            div.filters-applied
+                a.single-filter.selected
+                    span.name Filter23
+                    span.icon.icon-delete
+            div.filters-cats
+                ul
+                    li
+                        a(href="", title="status")
+                            span Status
+                            span.icon.icon-arrow-right
+                    li
+                        a(href="", title="type")
+                            span Type
+                            span.icon.icon-arrow-right
+                    li
+                        a(href="", title="Severity")
+                            span Severity
+                            span.icon.icon-arrow-right
+                    li
+                        a(href="", title="blablabla")
+                            span Blablabla
+                            span.icon.icon-arrow-right
+
+        //- Second step for selecting single filters to apply
         div.filter-list
             a.single-filter(ng-repeat="tag in filters.tags|filter:filtersSearch:strict" ng-class="{selected: tag.selected}")
                 span.name(tg-bo-html="tag.name")

app/styles/components/filter.scss

@@ -13,7 +13,8 @@
         color: $grayer;
         opacity: 1;
     }
-    &.selected {
+    &.selected,
+    &.active {
         @include transition (opacity .2s linear);
         color: $grayer;
         opacity: 1;
@@ -33,4 +34,15 @@
         right: 0;
         top: 0;
     }
+    .icon-delete {
+        @include transition(color .3s linear);
+        color: $grayer;
+        position: absolute;
+        right: .5rem;
+        top: .5rem;
+        &:hover {
+            @include transition(color .3s linear);
+            color: $red;
+        }
+    }
 }

app/styles/layout/issues.scss

@@ -0,0 +1,9 @@
+.issues {
+    .filters-bar {
+        @include table-flex-child(1, 260px, 0, 260px);
+    }
+    .filters-inner {
+        opacity: 1;
+        padding: 2em 1em;
+    }
+}

app/styles/main.scss

@@ -72,3 +72,4 @@ $prefix-for-spec:      true;
 @import 'layout/admin-membership';
 @import 'layout/project-colors';
 @import 'layout/kanban';
+@import 'layout/issues';

app/styles/modules/filters.scss

@@ -17,6 +17,18 @@
 }
 
 .filters {
+    h1 {
+        vertical-align: middle;
+        .subfilter {
+            @extend %large;
+        }
+        .icon {
+            margin: 0;
+        }
+        a {
+            vertical-align: middle;
+        }
+    }
     form {
         margin-bottom: 2rem;
         .icon-search {
@@ -31,3 +43,30 @@
     opacity: 0;
     @include transition (all .1s ease-in);
 }
+
+.filters-cats {
+    li {
+        border-bottom: 1px solid $gray-light;
+        text-transform: uppercase;
+    }
+    a {
+        @include transition (color .2s ease-in);
+        color: $grayer;
+        display: block;
+        padding: 1rem 0 1rem 1rem;
+        &:hover {
+            @include transition (color .2s ease-in);
+            color: $green-taiga;
+            .icon {
+                @include transition (opacity .2s ease-in);
+                opacity: 1;
+            }
+        }
+    }
+    .icon {
+        @include transition (opacity .2s ease-in);
+        color: $grayer;
+        float: right;
+        opacity: 0;
+    }
+}

app/styles/modules/nav.scss

@@ -12,7 +12,8 @@
 }
 
 .logo {
-    margin-bottom: 2rem;
+    line-height: inherit;
+    margin: .5rem 0 2rem;
     img {
         width: 100%;
     }