SCSS cleanup

css/deck.css

@@ -0,0 +1,16 @@
+.icon-deck {
+  background-image: url(../img/deck-dark.svg);
+}
+
+.icon-deck-white, .icon-deck.icon-white {
+  background-image: url(../img/deck.svg);
+}
+
+body[data-theme-dark] .icon-deck {
+  background-image: url(../img/deck.svg);
+}
+
+body[data-theme-dark] .icon-deck-white,
+body[data-theme-dark] .icon-deck.icon-white {
+  background-image: url(../img/deck-dark.svg);
+}

package.json

@@ -57,6 +57,7 @@
 		"vue-click-outside": "^1.1.0",
 		"vue-easymde": "^2.0.0",
 		"vue-infinite-loading": "^2.4.5",
+		"vue-material-design-icons": "^5.1.2",
 		"vue-router": "^3.5.4",
 		"vue-smooth-dnd": "^0.8.1",
 		"vuex": "^3.6.2",

src/App.vue

@@ -42,7 +42,6 @@
 </template>
 
 <script>
-
 import { mapState } from 'vuex'
 import AppNavigation from './components/navigation/AppNavigation'
 import { Modal, Content, AppContent } from '@nextcloud/vue'
@@ -157,6 +156,37 @@ export default {
 </style>
 
 <style lang="scss">
+	@import "../css/print";
+
+	.icon-activity {
+		background-image: url(../img/activity-dark.svg);
+
+		body[data-theme-dark] & {
+			background-image: url(../img/activity.svg);
+		}
+	}
+
+	.avatardiv.circles {
+		background: var(--color-primary);
+	}
+
+	.icon-circles {
+		background-image: url(../img/circles-dark.svg);
+		opacity: 1;
+		background-size: 20px;
+		background-position: center center;
+	}
+
+	.icon-circles-white, .icon-circles.icon-white {
+		background-image: url(../img/circles.svg);
+		opacity: 1;
+		background-size: 20px;
+		background-position: center center;
+	}
+
+	.icon-colorpicker {
+		background-image: url('../img/color_picker.svg');
+	}
 
 	.multiselect {
 		width: 100%;

src/components/Controls.vue

@@ -76,10 +76,16 @@
 						:aria-label="t('deck', 'Active filters')"
 						@show="filterVisible=true"
 						@hide="filterVisible=false">
-						<Actions slot="trigger" :title="t('deck', 'Apply filter')">
-							<ActionButton v-if="isFilterActive" icon="icon-filter_set" />
-							<ActionButton v-else icon="icon-filter" />
-						</Actions>
+						<!-- We cannot use Actions here are the popover trigger does not update on reactive icons -->
+						<Button slot="trigger"
+							:title="t('deck', 'Apply filter')"
+							class="filter-button"
+							type="tertiary-no-background">
+							<template #icon>
+								<FilterIcon v-if="isFilterActive" :size="20" decorative />
+								<FilterOffIcon v-else :size="20" decorative />
+							</template>
+						</Button>
 
 						<div v-if="filterVisible" class="filter">
 							<h3>{{ t('deck', 'Filter by tag') }}</h3>
@@ -179,18 +185,20 @@
 				</div>
 
 				<Actions>
-					<ActionButton icon="icon-archive"
-						@click="toggleShowArchived">
+					<ActionButton @click="toggleShowArchived">
+						<template #icon>
+							<ArchiveIcon :size="20" decorative />
+						</template>
 						{{ showArchived ? t('deck', 'Hide archived cards') : t('deck', 'Show archived cards') }}
 					</ActionButton>
 					<ActionButton v-if="compactMode"
-						icon="icon-toggle-compact-collapsed"
 						@click="toggleCompactMode">
+						<ArrowExpandVerticalIcon slot="icon" :size="20" decorative />
 						{{ t('deck', 'Toggle compact mode') }}
 					</ActionButton>
 					<ActionButton v-else
-						icon="icon-toggle-compact-expanded"
 						@click="toggleCompactMode">
+						<ArrowCollapseVerticalIcon slot="icon" :size="20" decorative />
 						{{ t('deck', 'Toggle compact mode') }}
 					</ActionButton>
 				</Actions>
@@ -208,11 +216,26 @@ import { mapState, mapGetters } from 'vuex'
 import { Actions, ActionButton, Avatar, Button, Popover } from '@nextcloud/vue'
 import labelStyle from '../mixins/labelStyle'
 import CardCreateDialog from '../CardCreateDialog'
+import ArchiveIcon from 'vue-material-design-icons/Archive'
+import FilterIcon from 'vue-material-design-icons/Filter'
+import FilterOffIcon from 'vue-material-design-icons/FilterOff'
+import ArrowCollapseVerticalIcon from 'vue-material-design-icons/ArrowCollapseVertical'
+import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertical'
 
 export default {
 	name: 'Controls',
 	components: {
-		Actions, ActionButton, Avatar, Button, Popover, CardCreateDialog,
+		Actions,
+		ActionButton,
+		Button,
+		Popover,
+		Avatar,
+		CardCreateDialog,
+		ArchiveIcon,
+		FilterIcon,
+		FilterOffIcon,
+		ArrowCollapseVerticalIcon,
+		ArrowExpandVerticalIcon,
 	},
 	mixins: [labelStyle],
 	props: {
@@ -255,10 +278,7 @@ export default {
 			}
 		},
 		isFilterActive() {
-			if (this.filter.tags.length !== 0 || this.filter.users.length !== 0 || this.filter.due !== '') {
-				return true
-			}
-			return false
+			return this.filter.tags.length !== 0 || this.filter.users.length !== 0 || this.filter.due !== ''
 		},
 		labelsSorted() {
 			return [...this.board.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
@@ -443,6 +463,17 @@ export default {
 		margin-top: 0px;
 		margin-bottom: 5px;
 	}
+
+	.filter-button {
+	  padding: 0;
+	  border-radius: 50%;
+	  width: 44px;
+	  height: 44px;
+
+		&:hover, &:focus {
+			background-color: rgba(127,127,127,0.25) !important;
+		}
+	}
 </style>
 <style lang="scss">
 	.popover:focus {

src/components/board/Stack.vue

@@ -50,7 +50,10 @@
 				</form>
 			</transition>
 			<Actions v-if="canManage && !isArchived" :force-menu="true">
-				<ActionButton icon="icon-archive" @click="modalArchivAllCardsShow=true">
+				<ActionButton @click="modalArchivAllCardsShow=true">
+					<template #icon>
+						<ArchiveIcon decorative />
+					</template>
 					{{ t('deck', 'Archive all cards') }}
 				</ActionButton>
 				<ActionButton icon="icon-delete" @click="deleteStack(stack)">
@@ -130,6 +133,7 @@ import { showError, showUndo } from '@nextcloud/dialogs'
 import CardItem from '../cards/CardItem'
 
 import '@nextcloud/dialogs/styles/toast.scss'
+import ArchiveIcon from 'vue-material-design-icons/Archive'
 
 export default {
 	name: 'Stack',
@@ -140,6 +144,7 @@ export default {
 		Container,
 		Draggable,
 		Modal,
+		ArchiveIcon,
 	},
 
 	props: {

src/components/card/CardSidebar.vue

@@ -57,8 +57,10 @@
 
 		<AppSidebarTab id="attachments"
 			:order="1"
-			:name="t('deck', 'Attachments')"
-			icon="icon-attach">
+			:name="t('deck', 'Attachments')">
+			<template #icon>
+				<AttachmentIcon size="20" decorative />
+			</template>
 			<CardSidebarTabAttachments :card="currentCard" />
 		</AppSidebarTab>
 
@@ -89,6 +91,7 @@ import CardSidebarTabComments from './CardSidebarTabComments'
 import CardSidebarTabActivity from './CardSidebarTabActivity'
 import relativeDate from '../../mixins/relativeDate'
 import moment from '@nextcloud/moment'
+import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { getLocale } from '@nextcloud/l10n'
@@ -105,6 +108,7 @@ export default {
 		CardSidebarTabComments,
 		CardSidebarTabActivity,
 		CardSidebarTabDetails,
+		AttachmentIcon,
 	},
 	mixins: [relativeDate],
 	props: {

src/components/card/CommentItem.vue

@@ -25,7 +25,10 @@
 				{{ comment.actorDisplayName }}
 			</span>
 			<Actions v-show="!edit" :force-menu="true">
-				<ActionButton icon="icon-reply" :close-after-click="true" @click="replyTo()">
+				<ActionButton :close-after-click="true" @click="replyTo()">
+					<template #icon>
+						<ReplyIcon decorative />
+					</template>
 					{{ t('deck', 'Reply') }}
 				</ActionButton>
 				<ActionButton v-if="canEdit"
@@ -67,6 +70,7 @@ import CommentForm from './CommentForm'
 import { getCurrentUser } from '@nextcloud/auth'
 import md5 from 'blueimp-md5'
 import relativeDate from '../../mixins/relativeDate'
+import ReplyIcon from 'vue-material-design-icons/Reply'
 
 const AtMention = {
 	name: 'AtMention',
@@ -90,6 +94,7 @@ export default {
 		ActionButton,
 		CommentForm,
 		RichText,
+		ReplyIcon,
 	},
 	mixins: [relativeDate],
 	props: {