From 8b8b1077ec4db1a353fcdb46ea5021ff71c48f34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Tue, 20 Sep 2016 13:18:30 +0200
Subject: [PATCH] Add filter warning in filters button

---
 app/locales/taiga/locale-en.json      |  1 +
 app/partials/kanban/kanban.jade       |  3 ++-
 app/partials/taskboard/taskboard.jade |  2 +-
 app/styles/components/buttons.scss    | 12 ++++++++++++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/locales/taiga/locale-en.json b/app/locales/taiga/locale-en.json
index 96549209..4b40b16b 100644
--- a/app/locales/taiga/locale-en.json
+++ b/app/locales/taiga/locale-en.json
@@ -205,6 +205,7 @@
             "TITLE_ACTION_SEARCH": "Search",
             "ACTION_SAVE_CUSTOM_FILTER": "save as custom filter",
             "PLACEHOLDER_FILTER_NAME": "Write the filter name and press enter",
+            "APPLIED_FILTERS_NUM": "filters applied",
             "CATEGORIES": {
                 "TYPE": "Type",
                 "STATUS": "Status",
diff --git a/app/partials/kanban/kanban.jade b/app/partials/kanban/kanban.jade
index 885fb31e..2e65ebe2 100644
--- a/app/partials/kanban/kanban.jade
+++ b/app/partials/kanban/kanban.jade
@@ -29,9 +29,10 @@ div.wrapper(tg-kanban, ng-controller="KanbanController as ctrl"
                 )
 
                 button.button-filter.e2e-open-filter(
-                    ng-class="{'button-filters-applied': !!ctrl.selectedFilters.length}"
                     ng-click="ctrl.openFilter = !ctrl.openFilter"
+                    title="{{ctrl.selectedFilters.length}} {{'COMMON.FILTERS.APPLIED_FILTERS_NUM' | translate}}"
                 )
+                    span.filter-num(ng-if="ctrl.selectedFilters.length") {{ctrl.selectedFilters.length}}
                     tg-svg(svg-icon="icon-filters")
 
         include ../includes/modules/kanban-table
diff --git a/app/partials/taskboard/taskboard.jade b/app/partials/taskboard/taskboard.jade
index 81274531..d9e85720 100644
--- a/app/partials/taskboard/taskboard.jade
+++ b/app/partials/taskboard/taskboard.jade
@@ -29,9 +29,9 @@ div.wrapper(tg-taskboard, ng-controller="TaskboardController as ctrl",
                     on-zoom-change="ctrl.setZoom(zoomLevel, zoom)"
                 )
                 button.button-filter.e2e-open-filter(
-                    ng-class="{'button-filters-applied': !!ctrl.selectedFilters.length}"
                     ng-click="ctrl.openFilter = !ctrl.openFilter"
                 )
+                    span.filter-num(ng-if="ctrl.selectedFilters.length") {{ctrl.selectedFilters.length}}
                     tg-svg(svg-icon="icon-filters")
 
         .taskboard-inner
diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss
index 2a6d9e27..96dbb3b5 100755
--- a/app/styles/components/buttons.scss
+++ b/app/styles/components/buttons.scss
@@ -161,8 +161,20 @@ a.button-gray {
     background: $whitish;
     margin-left: 1rem;
     padding: .4rem .5rem;
+    position: relative;
     &:hover {
         background: $gray-light;
         fill: $whitish;
     }
+    .filter-num {
+        @include font-size(small);
+        @include font-type(medium);
+        background: $red;
+        border-radius: 50%;
+        height: 1rem;
+        left: -.5rem;
+        position: absolute;
+        top: -.5rem;
+        width: 1rem;
+    }
 }