use md icons with ConfigBox

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

2 files changed, 77 insertions, 13 deletions

diff --git a/src/js/components/SideBar/SideBarTabConfiguration.vue b/src/js/components/SideBar/SideBarTabConfiguration.vue
index de60eaec..5d8b3989 100644
--- a/src/js/components/SideBar/SideBarTabConfiguration.vue
+++ b/src/js/components/SideBar/SideBarTabConfiguration.vue
@@ -28,15 +28,24 @@
 
 		<ConfigBox v-if="!isOwner" :title="t('polls', 'As an admin you may edit this poll')" icon-class="icon-checkmark" />
 
-		<ConfigBox :title="t('polls', 'Title')" icon-class="icon-sound">
+		<ConfigBox :title="t('polls', 'Title')">
+			<template #icon>
+				<SpeakerIcon />
+			</template>
 			<ConfigTitle @change="writePoll" />
 		</ConfigBox>
 
-		<ConfigBox :title="t('polls', 'Description')" icon-class="icon-edit">
+		<ConfigBox :title="t('polls', 'Description')">
+			<template #icon>
+				<DescriptionIcon />
+			</template>
 			<ConfigDescription @change="writePoll" />
 		</ConfigBox>
 
-		<ConfigBox :title="t('polls', 'Poll configurations')" icon-class="icon-category-customization">
+		<ConfigBox :title="t('polls', 'Poll configurations')">
+			<template #icon>
+				<PollConfigIcon />
+			</template>
 			<ConfigAllowComment @change="writePoll" />
 			<ConfigAllowMayBe @change="writePoll" />
 			<ConfigUseNo @change="writePoll" />
@@ -46,13 +55,22 @@
 			<ConfigOptionLimit @change="writePoll" />
 		</ConfigBox>
 
-		<ConfigBox :title="t('polls', 'Poll closing status')" :icon-class="closed ? 'icon-polls-closed' : 'icon-polls-open'">
+		<ConfigBox :title="t('polls', 'Poll closing status')">
+			<template #icon>
+				<LockedIcon v-if="closed" />
+				<UnlockedIcon v-else />
+			</template>
 			<ConfigClosing @change="writePoll" />
 			<ConfigAutoReminder v-if="pollType === 'datePoll' || hasEpiration"
 				@change="writePoll" />
 		</ConfigBox>
 
-		<ConfigBox :title="t('polls', 'Result display')" icon-class="icon-screen">
+		<ConfigBox :title="t('polls', 'Result display')">
+			<template #icon>
+				<ShowResultsIcon v-if="showResults === 'always'" />
+				<HieResultsUntilClosedIcon v-if="showResults === 'closed'" />
+				<ShowResultsNeverIcon v-if="showResults === 'never'" />
+			</template>
 			<ConfigShowResults @change="writePoll" />
 		</ConfigBox>
 
@@ -85,11 +103,27 @@ import ConfigTitle from '../Configuration/ConfigTitle'
 import ConfigUseNo from '../Configuration/ConfigUseNo'
 import ConfigVoteLimit from '../Configuration/ConfigVoteLimit'
 import { writePoll } from '../../mixins/writePoll'
+import SpeakerIcon from 'vue-material-design-icons/Bullhorn.vue'
+import DescriptionIcon from 'vue-material-design-icons/TextBox.vue'
+import PollConfigIcon from 'vue-material-design-icons/Wrench.vue'
+import LockedIcon from 'vue-material-design-icons/Lock.vue'
+import UnlockedIcon from 'vue-material-design-icons/LockOpenVariant.vue'
+import ShowResultsIcon from 'vue-material-design-icons/Monitor.vue'
+import HieResultsUntilClosedIcon from 'vue-material-design-icons/MonitorLock.vue'
+import ShowResultsNeverIcon from 'vue-material-design-icons/MonitorOff.vue'
 
 export default {
 	name: 'SideBarTabConfiguration',
 
 	components: {
+		DescriptionIcon,
+		ShowResultsIcon,
+		HieResultsUntilClosedIcon,
+		ShowResultsNeverIcon,
+		LockedIcon,
+		UnlockedIcon,
+		PollConfigIcon,
+		SpeakerIcon,
 		ConfigBox,
 		ConfigAllowComment,
 		ConfigAllowMayBe,
@@ -113,6 +147,7 @@ export default {
 			pollId: (state) => state.poll.id,
 			hasEpiration: (state) => state.poll.expire,
 			isOwner: (state) => state.poll.acl.isOwner,
+			showResults: (state) => state.poll.showResults,
 		}),
 
 		...mapGetters({
diff --git a/src/js/components/SideBar/SideBarTabOptions.vue b/src/js/components/SideBar/SideBarTabOptions.vue
index 8181e117..fb09a11a 100644
--- a/src/js/components/SideBar/SideBarTabOptions.vue
+++ b/src/js/components/SideBar/SideBarTabOptions.vue
@@ -22,22 +22,43 @@
 
 <template>
 	<div class="side-bar-tab-options">
-		<ConfigBox v-if="!isOwner" :title="t('polls', 'As an admin you may edit this poll')" icon-class="icon-checkmark" />
-		<ConfigBox :title="t('polls', 'Allow proposals from users')" icon-class="icon-category-customization">
+		<ConfigBox v-if="!isOwner" :title="t('polls', 'As an admin you may edit this poll')" />
+		<ConfigBox :title="t('polls', 'Allow proposals from users')">
+			<template #icon>
+				<AddDateIcon />
+			</template>
 			<ConfigProposals />
 		</ConfigBox>
 
-		<ConfigBox v-if="pollType === 'datePoll' && countOptions && !closed" :title="t('polls', 'Shift all date options')" icon-class="icon-polls-move">
+		<ConfigBox v-if="pollType === 'datePoll' && countOptions && !closed" :title="t('polls', 'Shift all date options')">
+			<template #icon>
+				<ShiftDateIcon />
+			</template>
 			<OptionsDateShift />
 		</ConfigBox>
 
-		<ConfigBox :title="t('polls', 'Available Options')" :icon-class="pollTypeIcon">
+		<ConfigBox v-if="pollType === 'datePoll'" :title="t('polls', 'Available Options')">
+			<template #icon>
+				<DateOptionsIcon />
+			</template>
+
+			<OptionsDate />
+
+			<template #actions>
+				<OptionsDateAdd v-if="!closed" />
+			</template>
+		</ConfigBox>
+
+		<ConfigBox v-if="pollType === 'textPoll'" :title="t('polls', 'Available Options')">
+			<template #icon>
+				<TextOptionsIcon />
+			</template>
+
+			<OptionsText />
+
 			<template #actions>
-				<OptionsTextAddBulk v-if="pollType === 'textPoll' && !closed" />
-				<OptionsDateAdd v-if="pollType === 'datePoll' && !closed" />
+				<OptionsTextAddBulk v-if="!closed" />
 			</template>
-			<OptionsDate v-if="pollType === 'datePoll'" />
-			<OptionsText v-if="pollType === 'textPoll'" />
 		</ConfigBox>
 	</div>
 </template>
@@ -49,11 +70,19 @@ import OptionsDate from '../Options/OptionsDate'
 import OptionsDateShift from '../Options/OptionsDateShift'
 import OptionsText from '../Options/OptionsText'
 import ConfigProposals from '../Configuration/ConfigProposals'
+import AddDateIcon from 'vue-material-design-icons/CalendarPlus.vue'
+import DateOptionsIcon from 'vue-material-design-icons/CalendarMonth.vue'
+import ShiftDateIcon from 'vue-material-design-icons/CalendarStart.vue'
+import TextOptionsIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 
 export default {
 	name: 'SideBarTabOptions',
 
 	components: {
+		AddDateIcon,
+		DateOptionsIcon,
+		ShiftDateIcon,
+		TextOptionsIcon,
 		ConfigBox,
 		ConfigProposals,
 		OptionsDate,