change addDate button

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

3 files changed, 26 insertions, 17 deletions

diff --git a/src/js/components/Options/OptionProposals.vue b/src/js/components/Options/OptionProposals.vue
index 34adf6c1..e2fe2ec4 100644
--- a/src/js/components/Options/OptionProposals.vue
+++ b/src/js/components/Options/OptionProposals.vue
@@ -27,6 +27,7 @@
 			<OptionsDateAdd v-if="pollType === 'datePoll'"
 				:caption="t('polls', 'Propose a date')"
 				class="add-date-proposal"
+				show-caption
 				primary />
 			<OptionsTextAdd v-if="pollType === 'textPoll'" :placeholder="t('polls', 'Propose an option')" class="add-text-proposal" />
 		</div>
diff --git a/src/js/components/Options/OptionsDate.vue b/src/js/components/Options/OptionsDate.vue
index d0f9e2a5..37aec4f7 100644
--- a/src/js/components/Options/OptionsDate.vue
+++ b/src/js/components/Options/OptionsDate.vue
@@ -22,7 +22,6 @@
 
 <template>
 	<div>
-		<OptionsDateAdd v-if="!closed" />
 		<transition-group is="ul" v-if="countOptions">
 			<OptionItem v-for="(option) in options"
 				:key="option.id"
@@ -42,7 +41,10 @@
 						:title="t('polls', 'Delete option')"
 						@delete="removeOption(option)" />
 					<Actions v-if="acl.allowEdit" class="action">
-						<ActionButton v-if="!closed" icon="icon-polls-clone" @click="cloneOptionModal(option)">
+						<ActionButton v-if="!closed" @click="cloneOptionModal(option)">
+							<template #icon>
+								<CloneDateIcon />
+							</template>
 							{{ t('polls', 'Clone option') }}
 						</ActionButton>
 						<ActionButton v-if="closed"
@@ -76,18 +78,19 @@ 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'
 
 export default {
 	name: 'OptionsDate',
 
 	components: {
+		CloneDateIcon,
 		Actions,
 		ActionButton,
 		ActionDelete,
 		EmptyContent,
 		Modal,
 		OptionCloneDate,
-		OptionsDateAdd: () => import('./OptionsDateAdd'),
 		OptionItem,
 		OptionItemOwner: () => import('./OptionItemOwner'),
 	},
diff --git a/src/js/components/Options/OptionsDateAdd.vue b/src/js/components/Options/OptionsDateAdd.vue
index 2246c877..6337c886 100644
--- a/src/js/components/Options/OptionsDateAdd.vue
+++ b/src/js/components/Options/OptionsDateAdd.vue
@@ -28,7 +28,12 @@
 		@change="changedDate"
 		@pick="pickedDate">
 		<template #input>
-			<ButtonDiv :title="caption" :primary="primary" />
+			<VueButton type="primary" :aria-label="buttonAriaLabel">
+				<template #icon>
+					<AddDateIcon />
+				</template>
+				<span v-if="caption"> {{ caption }} </span>
+			</VueButton>
 		</template>
 
 		<template #header>
@@ -70,16 +75,17 @@
 
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
-import { CheckboxRadioSwitch, DatetimePicker } from '@nextcloud/vue'
-import ButtonDiv from '../Base/ButtonDiv'
+import { Button as VueButton, CheckboxRadioSwitch, DatetimePicker } from '@nextcloud/vue'
 import Spacer from '../Base/Spacer'
+import AddDateIcon from 'vue-material-design-icons/CalendarPlus.vue'
 
 export default {
 	name: 'OptionsDateAdd',
 
 	components: {
+		AddDateIcon,
+		VueButton,
 		CheckboxRadioSwitch,
-		ButtonDiv,
 		DatetimePicker,
 		Spacer,
 	},
@@ -87,11 +93,7 @@ export default {
 	props: {
 		caption: {
 			type: String,
-			default: t('polls', 'Add date'),
-		},
-		primary: {
-			type: Boolean,
-			default: false,
+			default: undefined,
 		},
 	},
 
@@ -109,6 +111,10 @@ export default {
 	},
 
 	computed: {
+		buttonAriaLabel() {
+			return this.caption ?? t('polls', 'Add date')
+		},
+
 		dateOption() {
 			let from = moment()
 			let to = moment()
@@ -297,14 +303,13 @@ export default {
 </script>
 
 <style lang="scss">
-.mx-datepicker {
-	width: 100% !important;
+
+.mx-input-wrapper .material-design-icon__svg {
+	width: initial;
+	height: initial;
 }
 
 .mx-input-wrapper {
-	&> button {
-		width: 100%;
-	}
 	.mx-icon-calendar {
 		display: none;
 	}