Replacing css icons with md components

Signed-off-by: dartcafe <github@dartcafe.de>

4 files changed, 103 insertions, 20 deletions

diff --git a/src/js/views/Navigation.vue b/src/js/views/Navigation.vue
index 8dc116b1..be3a618a 100644
--- a/src/js/views/Navigation.vue
+++ b/src/js/views/Navigation.vue
@@ -27,15 +27,18 @@
 			:text="t('polls', 'Add new Poll')"
 			@click="toggleCreateDlg" />
 		<CreateDlg v-show="createDlg" ref="createDlg" @close-create="closeCreate()" />
+
 		<template #list>
 			<AppNavigationItem v-for="(pollCategory) in pollCategories"
 				:key="pollCategory.id"
 				:title="pollCategory.title"
 				:allow-collapse="true"
 				:pinned="pollCategory.pinned"
-				:icon="pollCategory.icon"
 				:to="{ name: 'list', params: {type: pollCategory.id}}"
 				:open="false">
+				<template #icon>
+					<Component :is="getIconComponent(pollCategory.id)" :size="iconSize" />
+				</template>
 				<ul>
 					<PollNavigationItems v-for="(poll) in filteredPolls(pollCategory.id)"
 						:key="poll.id"
@@ -46,16 +49,28 @@
 				</ul>
 			</AppNavigationItem>
 		</template>
+
 		<template #footer>
 			<AppNavigationItem v-if="isComboActivated"
 				:title="t('polls', 'Combine polls')"
-				icon="icon-mask-md-navigation-combo"
-				:to="{ name: 'combo' }" />
+				:to="{ name: 'combo' }">
+				<template #icon>
+					<ComboIcon :size="iconSize" />
+				</template>
+			</AppNavigationItem>
 			<AppNavigationItem v-if="showAdminSection"
 				:title="t('polls', 'Administration')"
-				icon="icon-mask-md-navigation-administration"
-				:to="{ name: 'administration' }" />
-			<AppNavigationItem :title="t('polls', 'Personal settings')" icon="icon-mask-md-navigation-personal-settings" @click="showSettings()" />
+				:to="{ name: 'administration' }">
+				<template #icon>
+					<AdministrationIcon :size="iconSize" />
+				</template>
+			</AppNavigationItem>
+			<AppNavigationItem :title="t('polls', 'Personal settings')"
+				@click="showSettings()">
+				<template #icon>
+					<SettingsIcon :size="iconSize" />
+				</template>
+			</AppNavigationItem>
 		</template>
 	</AppNavigation>
 </template>
@@ -69,6 +84,17 @@ import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import CreateDlg from '../components/Create/CreateDlg.vue'
 import PollNavigationItems from '../components/Navigation/PollNavigationItems.vue'
+import ComboIcon from 'vue-material-design-icons/VectorCombine.vue'
+import AdministrationIcon from 'vue-material-design-icons/Cog.vue'
+import SettingsIcon from 'vue-material-design-icons/AccountCog.vue'
+import RelevantIcon from 'vue-material-design-icons/ExclamationThick.vue'
+import MyPollsIcon from 'vue-material-design-icons/Crown.vue'
+import PrivatePollsIcon from 'vue-material-design-icons/Key.vue'
+import ParticipatedIcon from 'vue-material-design-icons/AccountCheck.vue'
+import OpenPollIcon from 'vue-material-design-icons/Earth.vue'
+import AllPollsIcon from 'vue-material-design-icons/Poll.vue'
+import ClosedPollsIcon from 'vue-material-design-icons/Lock.vue'
+import ArchivedPollsIcon from 'vue-material-design-icons/Archive.vue'
 
 export default {
 	name: 'Navigation',
@@ -78,11 +104,25 @@ export default {
 		AppNavigationItem,
 		CreateDlg,
 		PollNavigationItems,
+		ComboIcon,
+		SettingsIcon,
+		AdministrationIcon,
 	},
 
 	data() {
 		return {
+			iconSize: 20,
 			createDlg: false,
+			icons: [
+				{ id: 'relevant', iconComponent: RelevantIcon },
+				{ id: 'my', iconComponent: MyPollsIcon },
+				{ id: 'private', iconComponent: PrivatePollsIcon },
+				{ id: 'participated', iconComponent: ParticipatedIcon },
+				{ id: 'open', iconComponent: OpenPollIcon },
+				{ id: 'all', iconComponent: AllPollsIcon },
+				{ id: 'closed', iconComponent: ClosedPollsIcon },
+				{ id: 'archived', iconComponent: ArchivedPollsIcon },
+			],
 		}
 	},
 
@@ -115,6 +155,10 @@ export default {
 			this.createDlg = false
 		},
 
+		getIconComponent(iconId) {
+			return this.icons.find((icon) => icon.id === iconId).iconComponent
+		},
+
 		toggleCreateDlg() {
 			this.createDlg = !this.createDlg
 			if (this.createDlg) {
diff --git a/src/js/views/PollList.vue b/src/js/views/PollList.vue
index 2493cd30..8c0d5c83 100644
--- a/src/js/views/PollList.vue
+++ b/src/js/views/PollList.vue
@@ -53,31 +53,39 @@
 					<template #actions>
 						<Actions force-menu>
 							<ActionButton v-if="isPollCreationAllowed"
-								icon="icon-mask-md-clone-poll"
 								:close-after-click="true"
 								@click="clonePoll(poll.id)">
+								<template #icon>
+									<ClonePollIcon />
+								</template>
 								{{ t('polls', 'Clone poll') }}
 							</ActionButton>
 
 							<ActionButton v-if="poll.allowEdit && !poll.deleted"
-								icon="icon-mask-md-archive-poll"
 								:close-after-click="true"
 								@click="toggleArchive(poll.id)">
+								<template #icon>
+									<ArchivePollIcon />
+								</template>
 								{{ t('polls', 'Archive poll') }}
 							</ActionButton>
 
 							<ActionButton v-if="poll.allowEdit && poll.deleted"
-								icon="icon-mask-md-restore-poll"
 								:close-after-click="true"
 								@click="toggleArchive(poll.id)">
+								<template #icon>
+									<RestorePollIcon />
+								</template>
 								{{ t('polls', 'Restore poll') }}
 							</ActionButton>
 
 							<ActionButton v-if="poll.allowEdit && poll.deleted"
-								icon="icon-mask-md-delete-poll"
 								class="danger"
 								:close-after-click="true"
 								@click="deletePoll(poll.id)">
+								<template #icon>
+									<DeletePollIcon />
+								</template>
 								{{ t('polls', 'Delete poll') }}
 							</ActionButton>
 						</Actions>
@@ -95,6 +103,10 @@ import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { Actions, ActionButton, AppContent, EmptyContent } from '@nextcloud/vue'
 import HeaderBar from '../components/Base/HeaderBar.vue'
+import DeletePollIcon from 'vue-material-design-icons/Delete.vue'
+import ClonePollIcon from 'vue-material-design-icons/ContentCopy.vue'
+import ArchivePollIcon from 'vue-material-design-icons/Archive.vue'
+import RestorePollIcon from 'vue-material-design-icons/Recycle.vue'
 
 export default {
 	name: 'PollList',
@@ -105,6 +117,10 @@ export default {
 		ActionButton,
 		EmptyContent,
 		HeaderBar,
+		DeletePollIcon,
+		ClonePollIcon,
+		ArchivePollIcon,
+		RestorePollIcon,
 		LoadingOverlay: () => import('../components/Base/LoadingOverlay.vue'),
 		PollItem: () => import('../components/PollList/PollItem.vue'),
 	},
diff --git a/src/js/views/SideBar.vue b/src/js/views/SideBar.vue
index 1a3e20e2..40686457 100644
--- a/src/js/views/SideBar.vue
+++ b/src/js/views/SideBar.vue
@@ -28,24 +28,30 @@
 		<AppSidebarTab v-if="acl.allowEdit"
 			:id="'configuration'"
 			:order="1"
-			:name="t('polls', 'Configuration')"
-			icon="icon-mask-md-sidebar-configuration">
+			:name="t('polls', 'Configuration')">
+			<template #icon>
+				<SidebarConfigurationIcon />
+			</template>
 			<SideBarTabConfiguration />
 		</AppSidebarTab>
 
 		<AppSidebarTab v-if="acl.allowEdit"
 			:id="'options'"
 			:order="2"
-			:name="t('polls', 'Options')"
-			icon="icon-mask-md-sidebar-options">
+			:name="t('polls', 'Options')">
+			<template #icon>
+				<SidebarOptionsIcon />
+			</template>
 			<SideBarTabOptions />
 		</AppSidebarTab>
 
 		<AppSidebarTab v-if="acl.allowEdit"
 			:id="'sharing'"
 			:order="3"
-			:name="t('polls', 'Sharing')"
-			icon="icon-mask-md-sidebar-share">
+			:name="t('polls', 'Sharing')">
+			<template #icon>
+				<SidebarShareIcon />
+			</template>
 			<SideBarTabShare />
 		</AppSidebarTab>
 
@@ -60,8 +66,10 @@
 		<AppSidebarTab v-if="acl.allowComment"
 			:id="'comments'"
 			:order="5"
-			:name="t('polls', 'Comments')"
-			icon="icon-mask-md-sidebar-comments">
+			:name="t('polls', 'Comments')">
+			<template #icon>
+				<SidebarCommentsIcon />
+			</template>
 			<SideBarTabComments />
 		</AppSidebarTab>
 
@@ -79,6 +87,10 @@
 import { AppSidebar, AppSidebarTab } from '@nextcloud/vue'
 import { mapState } from 'vuex'
 import { emit } from '@nextcloud/event-bus'
+import SidebarConfigurationIcon from 'vue-material-design-icons/Wrench.vue'
+import SidebarOptionsIcon from 'vue-material-design-icons/FormatListChecks.vue'
+import SidebarShareIcon from 'vue-material-design-icons/ShareVariant.vue'
+import SidebarCommentsIcon from 'vue-material-design-icons/CommentProcessing.vue'
 
 export default {
 	name: 'SideBar',
@@ -92,6 +104,10 @@ export default {
 		SideBarTabActivity: () => import('../components/SideBar/SideBarTabActivity.vue'),
 		AppSidebar,
 		AppSidebarTab,
+		SidebarConfigurationIcon,
+		SidebarOptionsIcon,
+		SidebarShareIcon,
+		SidebarCommentsIcon,
 	},
 
 	props: {
diff --git a/src/js/views/Vote.vue b/src/js/views/Vote.vue
index 52e0023b..3cb5fb54 100644
--- a/src/js/views/Vote.vue
+++ b/src/js/views/Vote.vue
@@ -44,7 +44,11 @@
 			<div class="area__main" :class="viewMode">
 				<VoteTable v-show="options.length" :view-mode="viewMode" />
 
-				<EmptyContent v-if="!options.length" :icon="pollTypeIcon">
+				<EmptyContent v-if="!options.length">
+					<template #icon>
+						<TextPollIcon v-if="poll.type === 'textPoll'" />
+						<DatePollIcon v-else />
+					</template>
 					{{ t('polls', 'No vote options available') }}
 					<template #desc>
 						<button v-if="acl.allowEdit" @click="openOptions">
@@ -84,6 +88,8 @@ import MarkUpDescription from '../components/Poll/MarkUpDescription.vue'
 import PollInfoLine from '../components/Poll/PollInfoLine.vue'
 import PollHeaderButtons from '../components/Poll/PollHeaderButtons.vue'
 import HeaderBar from '../components/Base/HeaderBar.vue'
+import DatePollIcon from 'vue-material-design-icons/CalendarBlank.vue'
+import TextPollIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 
 export default {
 	name: 'Vote',
@@ -94,6 +100,8 @@ export default {
 		MarkUpDescription,
 		PollHeaderButtons,
 		PollInfoLine,
+		DatePollIcon,
+		TextPollIcon,
 		LoadingOverlay: () => import('../components/Base/LoadingOverlay.vue'),
 		OptionProposals: () => import('../components/Options/OptionProposals.vue'),
 		PublicRegisterModal: () => import('../components/Poll/PublicRegisterModal.vue'),
@@ -117,7 +125,6 @@ export default {
 		...mapGetters({
 			closed: 'poll/isClosed',
 			options: 'options/rankedOptions',
-			pollTypeIcon: 'poll/typeIcon',
 			viewMode: 'poll/viewMode',
 			proposalsAllowed: 'poll/proposalsAllowed',
 			proposalsOpen: 'poll/proposalsOpen',