Move to vue-material-design-iconsbugfix/noid/icon-css

Signed-off-by: Julius Härtl <jus@bitgrid.net>

12 files changed, 155 insertions, 46 deletions

diff --git a/src/App.vue b/src/App.vue
index 10b1aed0..b1d044f3 100644
--- a/src/App.vue
+++ b/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%;
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index 4f451737..a214bdd3 100644
--- a/src/components/Controls.vue
+++ b/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 {
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 8d3fecd6..52f24d70 100644
--- a/src/components/board/Stack.vue
+++ b/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: {
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index afa28943..c5fca415 100644
--- a/src/components/card/CardSidebar.vue
+++ b/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: {
diff --git a/src/components/card/CommentItem.vue b/src/components/card/CommentItem.vue
index f1f1da7f..5b1ad9f6 100644
--- a/src/components/card/CommentItem.vue
+++ b/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: {
diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue
index 1cc02303..4e7f49f6 100644
--- a/src/components/card/Description.vue
+++ b/src/components/card/Description.vue
@@ -39,7 +39,10 @@
 				</ActionButton>
 			</Actions>
 			<Actions v-if="canEdit">
-				<ActionButton v-if="descriptionEditing" icon="icon-attach" @click="showAttachmentModal()">
+				<ActionButton v-if="descriptionEditing" @click="showAttachmentModal()">
+					<template #icon>
+						<PaperclipIcon :size="24" decorative />
+					</template>
 					{{ t('deck', 'Add Attachment') }}
 				</ActionButton>
 			</Actions>
@@ -80,6 +83,7 @@ import { Actions, ActionButton, Modal } from '@nextcloud/vue'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
 import { mapState, mapGetters } from 'vuex'
+import PaperclipIcon from 'vue-material-design-icons/Paperclip'
 
 const markdownIt = new MarkdownIt({
 	linkify: true,
@@ -101,6 +105,7 @@ export default {
 		ActionButton,
 		Modal,
 		AttachmentList,
+		PaperclipIcon,
 	},
 	props: {
 		card: {
diff --git a/src/components/cards/AvatarList.vue b/src/components/cards/AvatarList.vue
index 3dd4d506..1ee7a2da 100644
--- a/src/components/cards/AvatarList.vue
+++ b/src/components/cards/AvatarList.vue
@@ -31,6 +31,7 @@
 					:user="user.participant.uid"
 					:display-name="user.participant.displayname"
 					:disable-menu="true"
+					:show-user-status="false"
 					:size="32" />
 				<Avatar v-if="user.type === 1"
 					:user="user.participant.uid"
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index e3c18d73..643ec435 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -24,19 +24,23 @@
 	<div v-if="card" class="badges">
 		<div v-if="card.commentsCount > 0"
 			v-tooltip="commentsHint"
-			class="icon icon-comment"
-			:class="{ 'icon-comment--unread': card.commentsUnread > 0 }"
+			class="icon-badge"
 			@click.stop="openComments">
-			{{ card.commentsCount }}
+			<CommentUnreadIcon v-if="card.commentsUnread > 0" size="16" />
+			<CommentIcon v-else size="16" />
+			<span>{{ card.commentsCount }}</span>
 		</div>
 
-		<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
-			{{ checkListCheckedCount }}/{{ checkListCount }}
+		<div v-if="card.description && checkListCount > 0" class="icon-badge">
+			<CheckmarkIcon :size="16" :title="t('deck', 'Todo items')" />
+			<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
 		</div>
-		<div v-else-if="card.description.trim() && checkListCount == 0" class="icon icon-description" />
 
-		<div v-if="card.attachmentCount > 0" class="icon-attach icon icon-attach-dark">
-			{{ card.attachmentCount }}
+		<TextIcon v-else-if="card.description.trim() && checkListCount == 0" size="16" decorative />
+
+		<div v-if="card.attachmentCount > 0" class="icon-badge">
+			<AttachmentIcon size="16" />
+			<span>{{ card.attachmentCount }}</span>
 		</div>
 
 		<AvatarList :users="card.assignedUsers" />
@@ -47,10 +51,15 @@
 <script>
 import AvatarList from './AvatarList'
 import CardMenu from './CardMenu'
+import TextIcon from 'vue-material-design-icons/Text.vue'
+import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
+import CheckmarkIcon from 'vue-material-design-icons/CheckboxMarked.vue'
+import CommentIcon from 'vue-material-design-icons/Comment.vue'
+import CommentUnreadIcon from 'vue-material-design-icons/CommentAccount.vue'
 
 export default {
 	name: 'CardBadges',
-	components: { AvatarList, CardMenu },
+	components: { AvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon },
 	props: {
 		card: {
 			type: Object,
@@ -89,18 +98,13 @@ export default {
 		width: 100%;
 		flex-grow: 1;
 
-		.icon {
-			opacity: 0.5;
-			padding: 10px 20px;
-			padding-right: 4px;
-			margin-right: 5px;
-			background-position: left;
-			background-size: 16px;
+		.icon-badge {
+			opacity: .7;
+			display: flex;
+			margin-right: 2px;
+
 			span {
-				margin-left: 18px;
-			}
-			&.icon-comment--unread {
-				opacity: 1;
+				padding: 10px 2px;
 			}
 		}
 	}
diff --git a/src/components/cards/CardMenu.vue b/src/components/cards/CardMenu.vue
index dd999c5f..4ed0a49b 100644
--- a/src/components/cards/CardMenu.vue
+++ b/src/components/cards/CardMenu.vue
@@ -40,9 +40,13 @@
 					{{ t('deck', 'Move card') }}
 				</ActionButton>
 				<ActionButton icon="icon-settings-dark" :close-after-click="true" @click="openCard">
+					<CardBulletedIcon slot="icon" :size="20" decorative />
 					{{ t('deck', 'Card details') }}
 				</ActionButton>
-				<ActionButton icon="icon-archive" :close-after-click="true" @click="archiveUnarchiveCard()">
+				<ActionButton :close-after-click="true" @click="archiveUnarchiveCard()">
+					<template #icon>
+						<ArchiveIcon :size="20" decorative />
+					</template>
 					{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
 				</ActionButton>
 				<ActionButton v-if="showArchived === false"
@@ -90,10 +94,12 @@ import { generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import { showUndo } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/styles/toast.scss'
+import ArchiveIcon from 'vue-material-design-icons/Archive'
+import CardBulletedIcon from 'vue-material-design-icons/CardBulleted'
 
 export default {
 	name: 'CardMenu',
-	components: { Actions, ActionButton, Modal, Multiselect },
+	components: { Actions, ActionButton, Modal, Multiselect, ArchiveIcon, CardBulletedIcon },
 	props: {
 		card: {
 			type: Object,
diff --git a/src/components/navigation/AppNavigation.vue b/src/components/navigation/AppNavigation.vue
index 51aff3fc..2f10317d 100644
--- a/src/components/navigation/AppNavigation.vue
+++ b/src/components/navigation/AppNavigation.vue
@@ -36,8 +36,11 @@
 			<AppNavigationBoardCategory id="deck-navigation-archived"
 				to="/board/archived"
 				:text="t('deck', 'Archived boards')"
-				:boards="archivedBoards"
-				icon="icon-archive" />
+				:boards="archivedBoards">
+				<template #icon>
+					<ArchiveIcon :size="20" decorative />
+				</template>
+			</AppNavigationBoardCategory>
 			<AppNavigationBoardCategory id="deck-navigation-shared"
 				to="/board/shared"
 				:text="t('deck', 'Shared with you')"
@@ -98,6 +101,7 @@ import AppNavigationBoardCategory from './AppNavigationBoardCategory'
 import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
+import ArchiveIcon from 'vue-material-design-icons/Archive'
 
 const canCreateState = loadState('deck', 'canCreate')
 
@@ -110,6 +114,7 @@ export default {
 		AppNavigationBoardCategory,
 		Multiselect,
 		AppNavigationItem,
+		ArchiveIcon,
 	},
 	directives: {
 		ClickOutside,
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index 753bacbc..ed7cb82c 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -47,21 +47,27 @@
 					{{ t('deck', 'Edit board') }}
 				</ActionButton>
 				<ActionButton v-if="canManage && !board.archived"
-					icon="icon-clone"
 					:close-after-click="true"
 					@click="actionClone">
+					<template #icon>
+						<CloneIcon :size="20" decorative />
+					</template>
 					{{ t('deck', 'Clone board') }}
 				</ActionButton>
 				<ActionButton v-if="canManage && board.archived"
-					icon="icon-archive"
 					:close-after-click="true"
 					@click="actionUnarchive">
+					<template #icon>
+						<ArchiveIcon :size="20" decorative />
+					</template>
 					{{ t('deck', 'Unarchive board') }}
 				</ActionButton>
 				<ActionButton v-else-if="canManage && !board.archived"
-					icon="icon-archive"
 					:close-after-click="true"
 					@click="actionArchive">
+					<template #icon>
+						<ArchiveIcon :size="20" decorative />
+					</template>
 					{{ t('deck', 'Archive board') }}
 				</ActionButton>
 
@@ -133,6 +139,8 @@
 <script>
 import { AppNavigationIconBullet, AppNavigationCounter, AppNavigationItem, ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
+import ArchiveIcon from 'vue-material-design-icons/Archive'
+import CloneIcon from 'vue-material-design-icons/ContentDuplicate'
 
 export default {
 	name: 'AppNavigationBoard',
@@ -143,6 +151,8 @@ export default {
 		ColorPicker,
 		Actions,
 		ActionButton,
+		ArchiveIcon,
+		CloneIcon,
 	},
 	directives: {
 		ClickOutside,
diff --git a/src/components/navigation/AppNavigationBoardCategory.vue b/src/components/navigation/AppNavigationBoardCategory.vue
index 1914e8b1..be308e6c 100644
--- a/src/components/navigation/AppNavigationBoardCategory.vue
+++ b/src/components/navigation/AppNavigationBoardCategory.vue
@@ -28,6 +28,9 @@
 		:allow-collapse="collapsible"
 		:open="opened">
 		<AppNavigationBoard v-for="board in boardsSorted" :key="board.id" :board="board" />
+		<template #icon>
+			<slot name="icon" />
+		</template>
 	</AppNavigationItem>
 </template>