feat: use outline icons

Signed-off-by: Luka Trovic <luka@nextcloud.com>

src/components/Controls.vue

@@ -263,10 +263,10 @@ import { mapState, mapGetters } from 'vuex'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover, NcModal } from '@nextcloud/vue'
 import labelStyle from '../mixins/labelStyle.js'
-import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
-import ImageIcon from 'vue-material-design-icons/ImageMultiple.vue'
+import ImageIcon from 'vue-material-design-icons/ImageMultipleOutline.vue'
-import FilterIcon from 'vue-material-design-icons/Filter.vue'
+import FilterIcon from 'vue-material-design-icons/FilterOutline.vue'
-import FilterOffIcon from 'vue-material-design-icons/FilterOff.vue'
+import FilterOffIcon from 'vue-material-design-icons/FilterOffOutline.vue'
 import TableColumnPlusAfter from 'vue-material-design-icons/TableColumnPlusAfter.vue'
 import ArrowCollapseVerticalIcon from 'vue-material-design-icons/ArrowCollapseVertical.vue'
 import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertical.vue'

src/components/board/BoardSidebar.vue

@@ -56,9 +56,9 @@ import DeletedTabSidebar from './DeletedTabSidebar.vue'
 import TimelineTabSidebar from './TimelineTabSidebar.vue'
 import { NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
 import ActivityIcon from 'vue-material-design-icons/LightningBolt.vue'
-import SharingIcon from 'vue-material-design-icons/ShareVariant.vue'
+import SharingIcon from 'vue-material-design-icons/ShareVariantOutline.vue'
-import TagsIcon from 'vue-material-design-icons/TagMultiple.vue'
+import TagsIcon from 'vue-material-design-icons/TagMultipleOutline.vue'
-import TrashIcon from 'vue-material-design-icons/Delete.vue'
+import TrashIcon from 'vue-material-design-icons/DeleteOutline.vue'
 const capabilities = window.OC.getCapabilities()
 
 export default {

src/components/board/Stack.vue

@@ -137,7 +137,7 @@
 import ClickOutside from 'vue-click-outside'
 import { mapGetters, mapState } from 'vuex'
 import { Container, Draggable } from 'vue-smooth-dnd'
-import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
 import CardPlusOutline from 'vue-material-design-icons/CardPlusOutline.vue'
 import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
 import { showError, showUndo } from '@nextcloud/dialogs'

src/components/card/AssignmentSelector.vue

@@ -44,7 +44,7 @@
 <script>
 import { defineComponent } from 'vue'
 import { NcAvatar, NcSelect } from '@nextcloud/vue'
-import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
+import AccountMultiple from 'vue-material-design-icons/AccountMultipleOutline.vue'
 
 export default defineComponent({
 	name: 'AssignmentSelector',

src/components/card/CardSidebar.vue

@@ -12,6 +12,7 @@
 		:subtitle="subtitleTooltip"
 		:name-editable.sync="isEditingTitle"
 		@update:name="(value) => titleEditing = value"
+		@update:active="(value) => activeTabId = value"
 		@dismiss-editing="titleEditing = currentCard.title"
 		@submit-name="handleSubmitTitle"
 		@opened="focusHeader"
@@ -37,7 +38,8 @@
 			:name="t('deck', 'Details')">
 			<CardSidebarTabDetails :card="currentCard" />
 			<template #icon>
-				<HomeIcon :size="20" />
+				<HomeIcon v-if="activeTabId === 'details'" :size="20" />
+				<HomeOutlineIcon v-else :size="20" />
 			</template>
 		</NcAppSidebarTab>
 
@@ -54,7 +56,8 @@
 			:order="2"
 			:name="t('deck', 'Comments')">
 			<template #icon>
-				<CommentIcon :size="20" />
+				<CommentIcon v-if="activeTabId === 'comments'" :size="20" />
+				<CommentOutlineIcon v-else :size="20" />
 			</template>
 			<CardSidebarTabComments :card="currentCard" :tab-query="tabQuery" />
 		</NcAppSidebarTab>
@@ -84,7 +87,9 @@ import relativeDate from '../../mixins/relativeDate.js'
 import moment from '@nextcloud/moment'
 import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
 import HomeIcon from 'vue-material-design-icons/Home.vue'
+import HomeOutlineIcon from 'vue-material-design-icons/HomeOutline.vue'
 import CommentIcon from 'vue-material-design-icons/Comment.vue'
+import CommentOutlineIcon from 'vue-material-design-icons/CommentOutline.vue'
 import ActivityIcon from 'vue-material-design-icons/LightningBolt.vue'
 
 import { showError, showWarning } from '@nextcloud/dialogs'
@@ -107,7 +112,9 @@ export default {
 		ActivityIcon,
 		AttachmentIcon,
 		CommentIcon,
+		CommentOutlineIcon,
 		HomeIcon,
+		HomeOutlineIcon,
 		CardMenuEntries,
 	},
 	mixins: [relativeDate],
@@ -133,6 +140,7 @@ export default {
 			titleEditing: '',
 			hasActivity: capabilities && capabilities.activity,
 			locale: getLocale(),
+			activeTabId: this.tabId || 'details',
 		}
 	},
 	computed: {

src/components/card/CommentItem.vue

@@ -82,7 +82,7 @@ import CommentForm from './CommentForm.vue'
 import { getCurrentUser } from '@nextcloud/auth'
 import md5 from 'blueimp-md5'
 import relativeDate from '../../mixins/relativeDate.js'
-import ReplyIcon from 'vue-material-design-icons/Reply.vue'
+import ReplyIcon from 'vue-material-design-icons/ReplyOutline.vue'
 import moment from 'moment'
 
 const AtMention = {

src/components/card/DueDateSelector.vue

@@ -99,10 +99,10 @@ import {
 import readableDate from '../../mixins/readableDate.js'
 import { getDayNamesMin, getFirstDay, getMonthNamesShort } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
-import Calendar from 'vue-material-design-icons/Calendar.vue'
+import Calendar from 'vue-material-design-icons/CalendarOutline.vue'
-import CalendarCheck from 'vue-material-design-icons/CalendarCheck.vue'
+import CalendarCheck from 'vue-material-design-icons/CalendarCheckOutline.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import ClearIcon from 'vue-material-design-icons/Close.vue'
 import CardDetailEntry from './CardDetailEntry.vue'

src/components/card/TagSelector.vue

@@ -44,7 +44,7 @@
 <script>
 import { NcSelect } from '@nextcloud/vue'
 import Color from '../../mixins/color.js'
-import TagMultiple from 'vue-material-design-icons/TagMultiple.vue'
+import TagMultiple from 'vue-material-design-icons/TagMultipleOutline.vue'
 
 export default {
 	name: 'TagSelector',

src/components/cards/AvatarList.vue

@@ -70,7 +70,7 @@
 <script>
 import { NcAvatar, NcPopover } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
-import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
+import AccountMultiple from 'vue-material-design-icons/AccountMultipleOutline.vue'
 
 export default {
 	name: 'AvatarList',

src/components/cards/CardBadges.vue

@@ -49,8 +49,8 @@ import CardId from './badges/CardId.vue'
 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 CommentIcon from 'vue-material-design-icons/CommentOutline.vue'
-import CommentUnreadIcon from 'vue-material-design-icons/CommentAccount.vue'
+import CommentUnreadIcon from 'vue-material-design-icons/CommentAccountOutline.vue'
 import DueDate from './badges/DueDate.vue'
 
 export default {

src/components/cards/CardMenuEntries.vue

@@ -63,9 +63,9 @@
 <script>
 import { NcActionButton } from '@nextcloud/vue'
 import { mapGetters, mapState } from 'vuex'
-import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
-import CardBulletedIcon from 'vue-material-design-icons/CardBulleted.vue'
+import CardBulletedIcon from 'vue-material-design-icons/CardBulletedOutline.vue'
-import PencilIcon from 'vue-material-design-icons/Pencil.vue'
+import PencilIcon from 'vue-material-design-icons/PencilOutline.vue'
 import { generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import { showUndo } from '@nextcloud/dialogs'

src/components/navigation/AppNavigation.vue

@@ -10,7 +10,8 @@
 				:exact="true"
 				to="/">
 				<template #icon>
-					<CalendarIcon :size="20" />
+					<CalendarIcon v-if="$route.path === '/'" :size="20" />
+					<CalendarOutlineIcon v-else :size="20" />
 				</template>
 			</NcAppNavigationItem>
 			<AppNavigationBoardCategory id="deck-navigation-all"
@@ -29,7 +30,8 @@
 				:text="t('deck', 'Archived boards')"
 				:boards="archivedBoards">
 				<template #icon>
-					<ArchiveIcon :size="20" decorative />
+					<ArchiveIcon v-if="$route.path === '/board/archived'" :size="20" decorative />
+					<ArchiveOutlineIcon v-else :size="20" decorative />
 				</template>
 			</AppNavigationBoardCategory>
 			<AppNavigationBoardCategory id="deck-navigation-shared"
@@ -112,9 +114,11 @@ import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import ArchiveOutlineIcon from 'vue-material-design-icons/ArchiveOutline.vue'
 import CalendarIcon from 'vue-material-design-icons/Calendar.vue'
+import CalendarOutlineIcon from 'vue-material-design-icons/CalendarOutline.vue'
 import DeckIcon from './../icons/DeckIcon.vue'
-import ShareVariantIcon from 'vue-material-design-icons/Share.vue'
+import ShareVariantIcon from 'vue-material-design-icons/ShareOutline.vue'
 import HelpModal from './../modals/HelpModal.vue'
 import { subscribe } from '@nextcloud/event-bus'
 import AppNavigationImportBoard from './AppNavigationImportBoard.vue'
@@ -133,7 +137,9 @@ export default {
 		NcSelect,
 		NcAppNavigationItem,
 		ArchiveIcon,
+		ArchiveOutlineIcon,
 		CalendarIcon,
+		CalendarOutlineIcon,
 		DeckIcon,
 		ShareVariantIcon,
 		HelpModal,

src/components/navigation/AppNavigationBoard.vue

@@ -154,9 +154,9 @@
 <script>
 import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcButton, NcTextField, NcActionButton } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
-import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
 import CloneIcon from 'vue-material-design-icons/ContentDuplicate.vue'
-import AccountIcon from 'vue-material-design-icons/Account.vue'
+import AccountIcon from 'vue-material-design-icons/AccountOutline.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 

src/views/CardReferenceWidget.vue

@@ -66,7 +66,7 @@
 </template>
 
 <script>
-import CalendarBlankIcon from 'vue-material-design-icons/CalendarBlank.vue'
+import CalendarBlankIcon from 'vue-material-design-icons/CalendarBlankOutline.vue'
 import TextIcon from 'vue-material-design-icons/Text.vue'
 import CardBulletedOutlineIcon from 'vue-material-design-icons/CardBulletedOutline.vue'
 

src/views/CommentReferenceWidget.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import CalendarBlankIcon from 'vue-material-design-icons/CalendarBlank.vue'
+import CalendarBlankIcon from 'vue-material-design-icons/CalendarBlankOutline.vue'
 import TextIcon from 'vue-material-design-icons/Text.vue'
 import CardBulletedOutlineIcon from 'vue-material-design-icons/CardBulletedOutline.vue'
 import CommentProcessingOutlineIcon from 'vue-material-design-icons/CommentProcessingOutline.vue'