diff options
author | dartcafe <github@dartcafe.de> | 2022-03-27 12:48:57 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2022-03-27 13:05:45 +0300 |
commit | 48dd058218b0b8652b51a71e0b75f44f270861ea (patch) | |
tree | 191c440053bfe9d4ce7c0a812ab757766534b436 /src/js/components/Options | |
parent | 34f5d6614fe7c4f0221cbabe54c76c5ee2485a24 (diff) |
change addDate button
Signed-off-by: dartcafe <github@dartcafe.de>
Diffstat (limited to 'src/js/components/Options')
-rw-r--r-- | src/js/components/Options/OptionProposals.vue | 1 | ||||
-rw-r--r-- | src/js/components/Options/OptionsDate.vue | 9 | ||||
-rw-r--r-- | src/js/components/Options/OptionsDateAdd.vue | 33 |
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; } |