Move to vue-material-design-icons

Signed-off-by: Julius Härtl <jus@bitgrid.net>
Move global deck icon to plain css
2022-05-11 21:39:54 +02:00 · 2022-05-11 16:13:57 +02:00
27 changed files with 178 additions and 122 deletions
--- a/css/deck.css
+++ b/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);
+}
--- a/css/deck.scss
+++ b/css/deck.scss
@@ -1 +0,0 @@
-@include icon-black-white('deck', 'deck', 1);
--- a/css/globalstyles.scss
+++ b/css/globalstyles.scss
@@ -1,28 +0,0 @@
-/*
- * @copyright Copyright (c) 2016 Julius Härtl <jus@bitgrid.net>
- *
- * @author Julius Härtl <jus@bitgrid.net>
- * @author Artem Anufrij <artem.anufrij@live.de>
- * @author Marin Treselj <marin@pixelipo.com>
- * @author Oskar Kurz <oskar.kurz@gmail.com>
- * @author Ryan Fletcher <ryan.fletcher@codepassion.ca>
- *
- * @license GNU AGPL version 3 or any later version
- *
- *  This program is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU Affero General Public License as
- *  published by the Free Software Foundation, either version 3 of the
- *  License, or (at your option) any later version.
- *
- *  This program is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU Affero General Public License for more details.
- *
- *  You should have received a copy of the GNU Affero General Public License
- *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-@import 'icons';
-@import 'print';
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -1,41 +0,0 @@
-/**
- * Custom icons
- */
-@include icon-black-white('deck', 'deck', 1);
-@include icon-black-white('archive', 'deck', 1);
-@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);
-@include icon-black-white('notifications-dark', 'deck', 1);
-@include icon-black-white('description', 'deck', 1);
-
-.icon-toggle-compact-collapsed {
-	@include icon-color('toggle-view-expand', 'deck', $color-black);
-}
-
-.icon-toggle-compact-expanded {
-	@include icon-color('toggle-view-collapse', 'deck', $color-black);
-}
-.icon-activity {
-	@include icon-color('activity-dark', 'activity', $color-black);
-}
-.icon-comment--unread {
-	@include icon-color('comment', 'actions', $color-primary, 1, true);
-}
-
-.avatardiv.circles {
-	background: var(--color-primary);
-}
-
-.icon-circles {
-	opacity: 1;
-	background-size: 20px;
-	background-position: center center;
-}
-
-.icon-colorpicker {
-	background-image: url('../img/color_picker.svg');
-}
--- a/img/activity-dark.svg
+++ b/img/activity-dark.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.0" viewbox="0 0 32 32">
+ <path d="m16 1-10 18h11l-1 12 10-18h-11z"/>
+</svg>
--- a/img/activity.svg
+++ b/img/activity.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.0" viewBox="0 0 32 32">
+ <path d="m16 1-10 18h11l-1 12 10-18h-11z" fill="#FFF"/>
+</svg>
--- a/img/archive-white.svg
+++ b/img/archive-white.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g transform="translate(0 -1036.362)" fill="#fff"><path d="M1.93 1041.296c-.185 0-.336.138-.336.31v9.842c0 .172.15.313.336.313h12.517c.185 0 .333-.14.333-.313v-9.842c0-.172-.148-.31-.333-.31H1.93zm4.124 1.507h4.223c.39 0 .705.314.705.704v.43c0 .39-.315.705-.705.705H6.054a.703.703 0 0 1-.705-.705v-.43c0-.39.314-.704.705-.704z"/><rect width="15.742" height="2.296" x=".136" y="1037.543" ry="0"/></g></svg>
--- a/img/archive.svg
+++ b/img/archive.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g transform="translate(0 -1036.362)"><path d="M1.93 1041.296c-.185 0-.336.138-.336.31v9.842c0 .172.15.313.336.313h12.517c.185 0 .333-.14.333-.313v-9.842c0-.172-.148-.31-.333-.31H1.93zm4.124 1.507h4.223c.39 0 .705.314.705.704v.43c0 .39-.315.705-.705.705H6.054a.703.703 0 0 1-.705-.705v-.43c0-.39.314-.704.705-.704z"/><rect width="15.742" height="2.296" x=".136" y="1037.543" ry=".42"/></g></svg>
--- a/img/circles-dark.svg
+++ b/img/circles-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58" width="512" height="512"><g fill="#000"><path d="M54.319 37.839C54.762 35.918 55 33.96 55 32c0-9.095-4.631-17.377-12.389-22.153a1 1 0 1 0-1.049 1.703C48.724 15.96 53 23.604 53 32c0 1.726-.2 3.451-.573 5.147A6.992 6.992 0 0 0 51 37c-3.86 0-7 3.141-7 7s3.14 7 7 7 7-3.141 7-7a7.006 7.006 0 0 0-3.681-6.161zM38.171 54.182A23.867 23.867 0 0 1 29 56a24.047 24.047 0 0 1-17.017-7.092A6.974 6.974 0 0 0 14 44c0-3.859-3.14-7-7-7s-7 3.141-7 7 3.14 7 7 7a6.952 6.952 0 0 0 3.381-.875C15.26 55.136 21.994 58 29 58c3.435 0 6.778-.663 9.936-1.971.51-.211.753-.796.542-1.307a1.001 1.001 0 0 0-1.307-.54zM4 31.213a1 1 0 0 0 1.068-.927c.712-10.089 7.586-18.52 17.22-21.314C23.142 11.874 25.825 14 29 14c3.86 0 7-3.141 7-7s-3.14-7-7-7c-3.851 0-6.985 3.127-6.999 6.975C11.42 9.922 3.851 19.12 3.073 30.146A.999.999 0 0 0 4 31.213z"/></g></svg>
--- a/img/circles.svg
+++ b/img/circles.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58" width="512" height="512"><g fill="#000"><path d="M54.319 37.839C54.762 35.918 55 33.96 55 32c0-9.095-4.631-17.377-12.389-22.153a1 1 0 1 0-1.049 1.703C48.724 15.96 53 23.604 53 32c0 1.726-.2 3.451-.573 5.147A6.992 6.992 0 0 0 51 37c-3.86 0-7 3.141-7 7s3.14 7 7 7 7-3.141 7-7a7.006 7.006 0 0 0-3.681-6.161zM38.171 54.182A23.867 23.867 0 0 1 29 56a24.047 24.047 0 0 1-17.017-7.092A6.974 6.974 0 0 0 14 44c0-3.859-3.14-7-7-7s-7 3.141-7 7 3.14 7 7 7a6.952 6.952 0 0 0 3.381-.875C15.26 55.136 21.994 58 29 58c3.435 0 6.778-.663 9.936-1.971.51-.211.753-.796.542-1.307a1.001 1.001 0 0 0-1.307-.54zM4 31.213a1 1 0 0 0 1.068-.927c.712-10.089 7.586-18.52 17.22-21.314C23.142 11.874 25.825 14 29 14c3.86 0 7-3.141 7-7s-3.14-7-7-7c-3.851 0-6.985 3.127-6.999 6.975C11.42 9.922 3.851 19.12 3.073 30.146A.999.999 0 0 0 4 31.213z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58" width="512" height="512"><g fill="#fff"><path d="M54.319 37.839C54.762 35.918 55 33.96 55 32c0-9.095-4.631-17.377-12.389-22.153a1 1 0 1 0-1.049 1.703C48.724 15.96 53 23.604 53 32c0 1.726-.2 3.451-.573 5.147A6.992 6.992 0 0 0 51 37c-3.86 0-7 3.141-7 7s3.14 7 7 7 7-3.141 7-7a7.006 7.006 0 0 0-3.681-6.161zM38.171 54.182A23.867 23.867 0 0 1 29 56a24.047 24.047 0 0 1-17.017-7.092A6.974 6.974 0 0 0 14 44c0-3.859-3.14-7-7-7s-7 3.141-7 7 3.14 7 7 7a6.952 6.952 0 0 0 3.381-.875C15.26 55.136 21.994 58 29 58c3.435 0 6.778-.663 9.936-1.971.51-.211.753-.796.542-1.307a1.001 1.001 0 0 0-1.307-.54zM4 31.213a1 1 0 0 0 1.068-.927c.712-10.089 7.586-18.52 17.22-21.314C23.142 11.874 25.825 14 29 14c3.86 0 7-3.141 7-7s-3.14-7-7-7c-3.851 0-6.985 3.127-6.999 6.975C11.42 9.922 3.851 19.12 3.073 30.146A.999.999 0 0 0 4 31.213z"/></g></svg>
--- a/img/clone.svg
+++ b/img/clone.svg
@@ -1 +0,0 @@
-<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M11.8 13.8H2.2V4.2h9.6m1.2 0c0-.67-.53-1.2-1.2-1.2H2.2C1.53 3 1 3.53 1 4.2v9.6c0 .67.53 1.2 1.2 1.2h9.6c.67 0 1.2-.53 1.2-1.2"/><path d="m4.2 1c-0.67 0-1.2 0.54-1.2 1.2h10.8v10.8c0.67 0 1.2-0.53 1.2-1.2v-9.6c0-0.67-0.53-1.2-1.2-1.2z"/></svg>
--- a/img/reply.svg
+++ b/img/reply.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M15 15s-.4-7.8-7-10V1L1 8l7 7v-4c5.1 0 7 4 7 4z"/></svg>
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
 				"vue-click-outside": "^1.1.0",
 				"vue-easymde": "^2.0.0",
 				"vue-infinite-loading": "^2.4.5",
+				"vue-material-design-icons": "^5.0.0",
 				"vue-router": "^3.5.3",
 				"vue-smooth-dnd": "^0.8.1",
 				"vuex": "^3.6.2",
--- a/package.json
+++ b/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.0.0",
 		"vue-router": "^3.5.3",
 		"vue-smooth-dnd": "^0.8.1",
 		"vuex": "^3.6.2",
--- 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,38 @@ 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%;
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -71,10 +71,11 @@
 			</div>
 			<div v-if="board" class="board-action-buttons">
 				<Popover @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">
+						<FilterIcon v-if="isFilterActive" :size="20" decorative />
+						<FilterOffIcon v-else :size="20" decorative />
+					</button>

 					<div v-if="filterVisible" class="filter">
 						<h3>{{ t('deck', 'Filter by tag') }}</h3>
@@ -173,18 +174,20 @@
 				</Popover>

 				<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>
@@ -202,11 +205,25 @@ import { mapState, mapGetters } from 'vuex'
 import { Actions, ActionButton, Popover, Avatar } 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, Popover, Avatar, CardCreateDialog,
+		Actions,
+		ActionButton,
+		Popover,
+		Avatar,
+		CardCreateDialog,
+		ArchiveIcon,
+		FilterIcon,
+		FilterOffIcon,
+		ArrowCollapseVerticalIcon,
+		ArrowExpandVerticalIcon,
 	},
 	mixins: [labelStyle],
 	props: {
@@ -249,10 +266,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)
@@ -442,6 +456,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">
 	.tooltip-inner.popover-inner {
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -43,7 +43,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)">
@@ -121,6 +124,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',
@@ -131,6 +135,7 @@ export default {
 		Container,
 		Draggable,
 		Modal,
+		ArchiveIcon,
 	},

 	props: {
--- 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: {
--- 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: {
--- 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: {
--- 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"
--- 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;
 			}
 		}
 	}
--- 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,
--- 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,
--- 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,
--- 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>

--- a/templates/main.php
+++ b/templates/main.php
@@ -22,7 +22,6 @@
 */


-style('deck', 'globalstyles');
 script('deck', 'deck-main');

 \OC::$server->getEventDispatcher()->dispatch('\OCP\Collaboration\Resources::loadAdditionalScripts');
Author	SHA1	Message	Date
Julius Härtl	89d0831ed3	Move to vue-material-design-icons Signed-off-by: Julius Härtl <jus@bitgrid.net>	2022-05-11 21:39:54 +02:00
Julius Härtl	0e9f916612	Move global deck icon to plain css Signed-off-by: Julius Härtl <jus@bitgrid.net>	2022-05-11 16:13:57 +02:00
				`@@ -1 +0,0 @@`
				`@include icon-black-white('deck', 'deck', 1);`
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g transform="translate(0 -1036.362)" fill="#fff"><path d="M1.93 1041.296c-.185 0-.336.138-.336.31v9.842c0 .172.15.313.336.313h12.517c.185 0 .333-.14.333-.313v-9.842c0-.172-.148-.31-.333-.31H1.93zm4.124 1.507h4.223c.39 0 .705.314.705.704v.43c0 .39-.315.705-.705.705H6.054a.703.703 0 0 1-.705-.705v-.43c0-.39.314-.704.705-.704z"/><rect width="15.742" height="2.296" x=".136" y="1037.543" ry="0"/></g></svg>`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58" width="512" height="512"><g fill="#000"><path d="M54.319 37.839C54.762 35.918 55 33.96 55 32c0-9.095-4.631-17.377-12.389-22.153a1 1 0 1 0-1.049 1.703C48.724 15.96 53 23.604 53 32c0 1.726-.2 3.451-.573 5.147A6.992 6.992 0 0 0 51 37c-3.86 0-7 3.141-7 7s3.14 7 7 7 7-3.141 7-7a7.006 7.006 0 0 0-3.681-6.161zM38.171 54.182A23.867 23.867 0 0 1 29 56a24.047 24.047 0 0 1-17.017-7.092A6.974 6.974 0 0 0 14 44c0-3.859-3.14-7-7-7s-7 3.141-7 7 3.14 7 7 7a6.952 6.952 0 0 0 3.381-.875C15.26 55.136 21.994 58 29 58c3.435 0 6.778-.663 9.936-1.971.51-.211.753-.796.542-1.307a1.001 1.001 0 0 0-1.307-.54zM4 31.213a1 1 0 0 0 1.068-.927c.712-10.089 7.586-18.52 17.22-21.314C23.142 11.874 25.825 14 29 14c3.86 0 7-3.141 7-7s-3.14-7-7-7c-3.851 0-6.985 3.127-6.999 6.975C11.42 9.922 3.851 19.12 3.073 30.146A.999.999 0 0 0 4 31.213z"/></g></svg>
				`@@ -1 +0,0 @@`
				`<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M11.8 13.8H2.2V4.2h9.6m1.2 0c0-.67-.53-1.2-1.2-1.2H2.2C1.53 3 1 3.53 1 4.2v9.6c0 .67.53 1.2 1.2 1.2h9.6c.67 0 1.2-.53 1.2-1.2"/><path d="m4.2 1c-0.67 0-1.2 0.54-1.2 1.2h10.8v10.8c0.67 0 1.2-0.53 1.2-1.2v-9.6c0-0.67-0.53-1.2-1.2-1.2z"/></svg>`