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; + } }