diff options
author | dartcafe <github@dartcafe.de> | 2022-06-04 12:33:14 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2022-06-04 12:33:14 +0300 |
commit | f68eeba6fcb315674a4dfddf73a7fc4a17aa364a (patch) | |
tree | 9d7f5e232bad0ffce0e97c82eec4d4daba243fbb /src/js/components/Options | |
parent | 315d2cfb3ce51825edaaeca4fe45e3cb4a876126 (diff) |
enhance inputDiv and optimize modals
Signed-off-by: dartcafe <github@dartcafe.de>
Diffstat (limited to 'src/js/components/Options')
-rw-r--r-- | src/js/components/Options/OptionCloneDate.vue | 43 | ||||
-rw-r--r-- | src/js/components/Options/OptionsDateShift.vue | 5 | ||||
-rw-r--r-- | src/js/components/Options/OptionsTextAdd.vue | 1 |
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> |