Merge pull request #2344 from nextcloud/enh/md-icons

Replace icons with material design icons

3 files changed, 112 insertions, 23 deletions

diff --git a/src/js/components/SideBar/SideBarTabComments.vue b/src/js/components/SideBar/SideBarTabComments.vue
index b3dedf04..9c101ae0 100644
--- a/src/js/components/SideBar/SideBarTabComments.vue
+++ b/src/js/components/SideBar/SideBarTabComments.vue
@@ -24,7 +24,7 @@
 	<div class="comments">
 		<CommentAdd v-if="acl.allowComment" />
 		<Comments v-if="!showEmptyContent" />
-		<EmptyContent v-else icon="icon-comment">
+		<EmptyContent v-else icon="icon-mask-md-sidebar-comments">
 			{{ t('polls', 'No comments') }}
 			<template #desc>
 				{{ t('polls', 'Be the first.') }}
diff --git a/src/js/components/SideBar/SideBarTabConfiguration.vue b/src/js/components/SideBar/SideBarTabConfiguration.vue
index de60eaec..fd3ccafc 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,31 +55,48 @@
 			<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'" />
+				<HideResultsUntilClosedIcon v-if="showResults === 'closed'" />
+				<ShowResultsNeverIcon v-if="showResults === 'never'" />
+			</template>
 			<ConfigShowResults @change="writePoll" />
 		</ConfigBox>
 
-		<ButtonDiv :icon="isPollArchived ? 'icon-history' : 'icon-category-app-bundles'"
-			:title="isPollArchived ? t('polls', 'Restore poll') : t('polls', 'Archive poll')"
-			@click="toggleArchive()" />
-
-		<ButtonDiv v-if="isPollArchived"
-			icon="icon-delete"
-			class="error"
-			:title="t('polls', 'Delete poll')"
-			@click="deletePoll()" />
+		<div class="delete-area">
+			<VueButton @click="toggleArchive()">
+				<template #icon>
+					<RestorePollIcon v-if="isPollArchived" />
+					<ArchivePollIcon v-else />
+				</template>
+				{{ isPollArchived ? t('polls', 'Restore poll') : t('polls', 'Archive poll') }}
+			</VueButton>
+
+			<VueButton v-if="isPollArchived" type="error" @click="deletePoll()">
+				<template #icon>
+					<DeletePollIcon />
+				</template>
+				{{ t('polls', 'Delete poll') }}
+			</VueButton>
+		</div>
 	</div>
 </template>
 
 <script>
 import { mapGetters, mapState } from 'vuex'
 import { showError } from '@nextcloud/dialogs'
+import { Button as VueButton } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import ConfigBox from '../Base/ConfigBox'
 import ConfigAllowComment from '../Configuration/ConfigAllowComment'
@@ -84,12 +110,36 @@ import ConfigShowResults from '../Configuration/ConfigShowResults'
 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 DeletePollIcon from 'vue-material-design-icons/Delete.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 HideResultsUntilClosedIcon from 'vue-material-design-icons/MonitorLock.vue'
+import ShowResultsNeverIcon from 'vue-material-design-icons/MonitorOff.vue'
+import RestorePollIcon from 'vue-material-design-icons/Recycle.vue'
+import ArchivePollIcon from 'vue-material-design-icons/Archive.vue'
+
 export default {
 	name: 'SideBarTabConfiguration',
 
 	components: {
+		ArchivePollIcon,
+		DeletePollIcon,
+		DescriptionIcon,
+		LockedIcon,
+		HideResultsUntilClosedIcon,
+		PollConfigIcon,
+		RestorePollIcon,
+		ShowResultsIcon,
+		ShowResultsNeverIcon,
+		SpeakerIcon,
+		UnlockedIcon,
 		ConfigBox,
 		ConfigAllowComment,
 		ConfigAllowMayBe,
@@ -102,6 +152,7 @@ export default {
 		ConfigTitle,
 		ConfigUseNo,
 		ConfigVoteLimit,
+		VueButton,
 	},
 
 	mixins: [writePoll],
@@ -113,6 +164,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({
@@ -143,3 +195,11 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss">
+.delete-area {
+	display: flex;
+	gap: 8px;
+	justify-content: space-between;
+}
+</style>
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,