enhance inputDiv and optimize modals

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

3 files changed, 27 insertions, 22 deletions

diff --git a/src/js/components/Options/OptionCloneDate.vue b/src/js/components/Options/OptionCloneDate.vue
index 769cdc15..3487aeef 100644
--- a/src/js/components/Options/OptionCloneDate.vue
+++ b/src/js/components/Options/OptionCloneDate.vue
@@ -23,18 +23,26 @@
 <template>
 	<div class="option-clone-date">
 		<h2>{{ t('polls', 'Clone to option sequence') }}</h2>
-
 		<p>{{ t('polls', 'Create a sequence of date options starting with {dateOption}.', { dateOption: dateBaseOptionString }) }}</p>
-		<div>
-			<h3> {{ t('polls', 'Step unit:') }} </h3>
-			<Multiselect v-model="sequence.unit"
-				:options="dateUnits"
-				label="name"
-				track-by="value" />
-			<h3> {{ t('polls', 'Step width:') }} </h3>
-			<input v-model="sequence.step">
-			<h3>{{ t('polls', 'Number of items to create:') }}</h3>
-			<input v-model="sequence.amount">
+
+		<h3> {{ t('polls', 'Step unit') }} </h3>
+		<Multiselect v-model="sequence.unit"
+			:options="dateUnits"
+			label="name"
+			track-by="value" />
+
+		<div class="sideways">
+			<InputDiv v-model="sequence.step"
+				:label="t('polls', 'Step width')"
+				type="number"
+				inputmode="numeric"
+				use-num-modifiers />
+
+			<InputDiv v-model="sequence.amount"
+				:label="t('polls', 'Amount')"
+				type="number"
+				inputmode="numeric"
+				use-num-modifiers />
 		</div>
 
 		<div class="modal__buttons">
@@ -54,11 +62,13 @@
 import moment from '@nextcloud/moment'
 import { Button as VueButton, Multiselect } from '@nextcloud/vue'
 import { dateUnits } from '../../mixins/dateMixins.js'
+import InputDiv from '../Base/InputDiv.vue'
 
 export default {
 	name: 'OptionCloneDate',
 
 	components: {
+		InputDiv,
 		Multiselect,
 		VueButton,
 	},
@@ -103,14 +113,11 @@ export default {
 </script>
 
 <style lang="scss">
-.buttons {
+
+.sideways {
 	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	.button {
-		margin-left: 10px;
-		margin-right: 0;
-	}
+	column-gap: 48px;
+	flex-wrap: wrap;
 }
 
 </style>
diff --git a/src/js/components/Options/OptionsDateShift.vue b/src/js/components/Options/OptionsDateShift.vue
index ee7e6cf0..b3bfcd4f 100644
--- a/src/js/components/Options/OptionsDateShift.vue
+++ b/src/js/components/Options/OptionsDateShift.vue
@@ -26,10 +26,7 @@
 			{{ t('polls', 'Shifting dates is disabled to prevent shifting of other user\'s proposals.') }}
 		</div>
 		<div v-else class="select-unit">
-			<InputDiv v-model="shift.step"
-				use-num-modifiers
-				@add="shift.step += 1"
-				@subtract="shift.step -= 1" />
+			<InputDiv v-model="shift.step" use-num-modifiers />
 			<Multiselect v-model="shift.unit"
 				:options="dateUnits"
 				label="name"
diff --git a/src/js/components/Options/OptionsTextAdd.vue b/src/js/components/Options/OptionsTextAdd.vue
index 4dd19cbb..db01f743 100644
--- a/src/js/components/Options/OptionsTextAdd.vue
+++ b/src/js/components/Options/OptionsTextAdd.vue
@@ -23,6 +23,7 @@
 <template>
 	<InputDiv v-model="newPollText"
 		:placeholder="placeholder"
+		submit
 		@submit="addOption()" />
 </template>