new filter icon

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>

css/icons.scss

@@ -60,6 +60,7 @@
 	@include icon-black-white('circles', 'deck', 1);
 	@include icon-black-white('clone', 'deck', 1);
 	@include icon-black-white('filter', 'deck', 1);
+	@include icon-black-white('filter_set', 'deck', 1);
 	@include icon-black-white('attach', 'deck', 1);
 	@include icon-black-white('reply', 'deck', 1);
 

img/filter_set.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.233 4.233" height="16" width="16"><path d="M.52.465h3.283L2.631 1.918h-.99zm1.122 1.453h.992v1.866l-.996-.455z" paint-order="stroke fill markers"/><ellipse ry=".691" rx=".674" cy="3.461" cx="3.45" fill-rule="evenodd"/></svg>

src/components/Controls.vue

@@ -54,8 +54,9 @@
 			</div>
 			<div class="board-action-buttons">
 				<Popover>
-					<Actions slot="trigger" :style="filterOpacity" :title="t('deck', 'Apply filter')">
-						<ActionButton icon="icon-filter" />
+					<Actions slot="trigger" :title="t('deck', 'Apply filter')">
+						<ActionButton v-if="isFilterActive" icon="icon-filter_set" />
+						<ActionButton v-else icon="icon-filter" />
 					</Actions>
 
 					<template>
@@ -218,11 +219,11 @@ export default {
 			}
 			return 'opacity: .5;'
 		},
-		filterOpacity() {
+		isFilterActive() {
 			if (this.filter.tags.length !== 0 || this.filter.users.length !== 0 || this.filter.due !== '') {
-				return 'opacity: 1;'
+				return true
 			}
-			return 'opacity: .5;'
+			return false
 		},
 		labelsSorted() {
 			return [...this.board.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)