Merge pull request #3803 from nextcloud/bugfix/noid/icon-css

SCSS cleanup

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,

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,

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>