replace ButtonDiv with VueButton and last icons

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

6 files changed, 75 insertions, 115 deletions

diff --git a/src/js/components/Options/Confirmation.vue b/src/js/components/Options/Confirmation.vue
deleted file mode 100644
index 971a6573..00000000
--- a/src/js/components/Options/Confirmation.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de>
-  -
-  - @author René Gieling <github@dartcafe.de>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-
-<template>
-	<div class="confirmation" :class=" { 'icon-polls-confirmed': isConfirmed }">
-		<div class="confirmation--text">
-			{{ confirmations }}
-		</div>
-	</div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-export default {
-	name: 'Confirmation',
-
-	props: {
-		option: {
-			type: Object,
-			default: undefined,
-		},
-	},
-
-	computed: {
-		...mapGetters({
-			isClosed: 'poll/isClosed',
-		}),
-
-		isConfirmed() {
-			return this.option.confirmed && this.isClosed
-		},
-
-		confirmations() {
-			if (this.isConfirmed) {
-				return t('polls', 'Confirmed')
-			}
-			return ' '
-
-		},
-	},
-}
-
-</script>
-
-<style lang="scss">
-
-.confirmation {
-	align-items: center;
-	justify-content: center;
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: 21px;
-	font-size: 0;
-	align-self: stretch;
-	min-width: 24px;
-}
-
-.confirmation--text {
-	text-align: center;
-}
-
-</style>
diff --git a/src/js/components/Options/OptionCloneDate.vue b/src/js/components/Options/OptionCloneDate.vue
index 795d2295..36311627 100644
--- a/src/js/components/Options/OptionCloneDate.vue
+++ b/src/js/components/Options/OptionCloneDate.vue
@@ -38,8 +38,13 @@
 		</div>
 
 		<div class="modal__buttons">
-			<ButtonDiv :title="t('polls', 'Cancel')" @click="$emit('close')" />
-			<ButtonDiv :primary="true" :title="t('polls', 'OK')" @click="createSequence" />
+			<VueButton @click="$emit('close')">
+				{{ t('polls', 'Cancel') }}
+			</VueButton>
+
+			<VueButton type="primary" @click="createSequence()">
+				{{ t('polls', 'OK') }}
+			</VueButton>
 		</div>
 	</div>
 </template>
@@ -47,7 +52,7 @@
 <script>
 
 import moment from '@nextcloud/moment'
-import { Multiselect } from '@nextcloud/vue'
+import { Button as VueButton, Multiselect } from '@nextcloud/vue'
 import { dateUnits } from '../../mixins/dateMixins'
 
 export default {
@@ -55,6 +60,7 @@ export default {
 
 	components: {
 		Multiselect,
+		VueButton,
 	},
 
 	mixins: [dateUnits],
diff --git a/src/js/components/Options/OptionsDate.vue b/src/js/components/Options/OptionsDate.vue
index 37aec4f7..4a213813 100644
--- a/src/js/components/Options/OptionsDate.vue
+++ b/src/js/components/Options/OptionsDate.vue
@@ -36,23 +36,28 @@
 						:option="option"
 						class="owner" />
 				</template>
-				<template #actions>
-					<ActionDelete v-if="acl.allowEdit"
+				<template v-if="acl.allowEdit" #actions>
+					<ActionDelete v-if="!closed"
 						:title="t('polls', 'Delete option')"
 						@delete="removeOption(option)" />
-					<Actions v-if="acl.allowEdit" class="action">
+
+					<Actions v-if="!closed" class="action">
 						<ActionButton v-if="!closed" @click="cloneOptionModal(option)">
 							<template #icon>
 								<CloneDateIcon />
 							</template>
 							{{ t('polls', 'Clone option') }}
 						</ActionButton>
-						<ActionButton v-if="closed"
-							:icon="option.confirmed ? 'icon-polls-confirmed' : 'icon-polls-unconfirmed'"
-							@click="confirmOption(option)">
-							{{ option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option') }}
-						</ActionButton>
 					</Actions>
+					<VueButton v-if="closed"
+						v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')"
+						type="tertiary"
+						@click="confirmOption(option)">
+						<template #icon>
+							<UnconfirmIcon v-if="option.confirmed" />
+							<ConfirmIcon v-else />
+						</template>
+					</VueButton>
 				</template>
 			</OptionItem>
 		</transition-group>
@@ -72,19 +77,23 @@
 
 <script>
 import { mapGetters, mapState } from 'vuex'
-import { Actions, ActionButton, EmptyContent, Modal } from '@nextcloud/vue'
+import { Actions, ActionButton, Button as VueButton, EmptyContent, Modal } from '@nextcloud/vue'
 import ActionDelete from '../Actions/ActionDelete'
 import OptionCloneDate from './OptionCloneDate'
 import OptionItem from './OptionItem'
 import { confirmOption, removeOption } from '../../mixins/optionMixins'
 import { dateUnits } from '../../mixins/dateMixins'
 import CloneDateIcon from 'vue-material-design-icons/CalendarMultiple.vue'
+import UnconfirmIcon from 'vue-material-design-icons/CheckboxMarkedOutline.vue'
+import ConfirmIcon from 'vue-material-design-icons/CheckboxBlankOutline.vue'
 
 export default {
 	name: 'OptionsDate',
 
 	components: {
 		CloneDateIcon,
+		ConfirmIcon,
+		UnconfirmIcon,
 		Actions,
 		ActionButton,
 		ActionDelete,
@@ -92,6 +101,7 @@ export default {
 		Modal,
 		OptionCloneDate,
 		OptionItem,
+		VueButton,
 		OptionItemOwner: () => import('./OptionItemOwner'),
 	},
 
diff --git a/src/js/components/Options/OptionsDateShift.vue b/src/js/components/Options/OptionsDateShift.vue
index 6bf6ccf9..58270686 100644
--- a/src/js/components/Options/OptionsDateShift.vue
+++ b/src/js/components/Options/OptionsDateShift.vue
@@ -25,7 +25,7 @@
 		<div v-if="proposalsExist">
 			{{ t('polls', 'Shifting dates is disabled to prevent shifting of other user\'s proposals.') }}
 		</div>
-		<div v-else class="selectUnit">
+		<div v-else class="select-unit">
 			<InputDiv v-model="shift.step"
 				use-num-modifiers
 				@add="shift.step += 1"
@@ -34,8 +34,11 @@
 				:options="dateUnits"
 				label="name"
 				track-by="value" />
-			<ButtonDiv submit
-				@click="shiftDates(shift)" />
+			<VueButton class="submit"
+				type="tertiary"
+				@click="shiftDates(shift)">
+				<SubmitIcon />
+			</VueButton>
 		</div>
 	</div>
 </template>
@@ -44,15 +47,18 @@
 
 import { mapState, mapGetters } from 'vuex'
 import InputDiv from '../Base/InputDiv'
-import { Multiselect } from '@nextcloud/vue'
+import { Button as VueButton, Multiselect } from '@nextcloud/vue'
 import { dateUnits } from '../../mixins/dateMixins'
+import SubmitIcon from 'vue-material-design-icons/ArrowRight.vue'
 
 export default {
 	name: 'OptionsDateShift',
 
 	components: {
+		SubmitIcon,
 		InputDiv,
 		Multiselect,
+		VueButton,
 	},
 
 	mixins: [dateUnits],
@@ -86,7 +92,7 @@ export default {
 </script>
 
 <style lang="scss">
-.selectUnit {
+.select-unit {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -96,6 +102,15 @@ export default {
 		min-width: 75px;
 		flex: 1;
 	}
-}
 
+	.button-vue.button-vue--vue-tertiary {
+		padding: 0;
+		min-width: 0;
+	}
+
+	.button-vue__text,
+	.button-vue--text-only .button-vue__text {
+		margin: 0;
+	}
+}
 </style>
diff --git a/src/js/components/Options/OptionsText.vue b/src/js/components/Options/OptionsText.vue
index d0b62647..b9763392 100644
--- a/src/js/components/Options/OptionsText.vue
+++ b/src/js/components/Options/OptionsText.vue
@@ -36,17 +36,19 @@
 							:option="option"
 							class="owner" />
 					</template>
-					<template #actions>
-						<ActionDelete v-if="acl.allowEdit"
+					<template v-if="acl.allowEdit" #actions>
+						<ActionDelete v-if="!closed"
 							:title="t('polls', 'Delete option')"
 							@delete="removeOption(option)" />
-						<Actions v-if="acl.allowEdit" class="action">
-							<ActionButton v-if="closed"
-								:icon="option.confirmed ? 'icon-polls-yes' : 'icon-checkmark'"
-								@click="confirmOption(option)">
-								{{ option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option') }}
-							</ActionButton>
-						</Actions>
+						<VueButton v-if="closed"
+							v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')"
+							type="tertiary"
+							@click="confirmOption(option)">
+							<template #icon>
+								<UnconfirmIcon v-if="option.confirmed" />
+								<ConfirmIcon v-else />
+							</template>
+						</VueButton>
 					</template>
 				</OptionItem>
 			</transition-group>
@@ -63,24 +65,27 @@
 
 <script>
 import { mapGetters, mapState } from 'vuex'
-import { Actions, ActionButton, EmptyContent } from '@nextcloud/vue'
+import { Button as VueButton, EmptyContent } from '@nextcloud/vue'
 import draggable from 'vuedraggable'
 import ActionDelete from '../Actions/ActionDelete'
 import OptionItem from './OptionItem'
 import OptionItemOwner from '../Options/OptionItemOwner'
 import { confirmOption, removeOption } from '../../mixins/optionMixins'
+import UnconfirmIcon from 'vue-material-design-icons/CheckboxMarkedOutline.vue'
+import ConfirmIcon from 'vue-material-design-icons/CheckboxBlankOutline.vue'
 
 export default {
 	name: 'OptionsText',
 
 	components: {
-		Actions,
-		ActionButton,
+		ConfirmIcon,
+		UnconfirmIcon,
 		ActionDelete,
 		EmptyContent,
 		draggable,
 		OptionItem,
 		OptionItemOwner,
+		VueButton,
 		OptionsTextAdd: () => import('./OptionsTextAdd'),
 	},
 
diff --git a/src/js/components/Options/OptionsTextAddBulk.vue b/src/js/components/Options/OptionsTextAddBulk.vue
index 4a3c3963..6d652634 100644
--- a/src/js/components/Options/OptionsTextAddBulk.vue
+++ b/src/js/components/Options/OptionsTextAddBulk.vue
@@ -42,8 +42,13 @@
 					:placeholder="placeholder" />
 
 				<div class="modal__buttons">
-					<ButtonDiv :title="t('polls', 'Close')" @click="showModal = false" />
-					<ButtonDiv :primary="true" :title="t('polls', 'Add options')" @click="addOptionsList()" />
+					<VueButton @click="showModal = false">
+						{{ t('polls', 'Close') }}
+					</VueButton>
+
+					<VueButton type="primary" @click="addOptionsList()">
+						{{ t('polls', 'OK') }}
+					</VueButton>
 				</div>
 			</div>
 		</Modal>
@@ -52,7 +57,7 @@
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import { Actions, ActionButton, Modal } from '@nextcloud/vue'
+import { Actions, ActionButton, Button as VueButton, Modal } from '@nextcloud/vue'
 import PasteIcon from 'vue-material-design-icons/ClipboardTextMultiple.vue'
 
 export default {
@@ -63,6 +68,7 @@ export default {
 		Actions,
 		ActionButton,
 		Modal,
+		VueButton,
 	},
 
 	props: {