Move to vue-material-design-icons

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

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"

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

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,