diff options
author | dartcafe <github@dartcafe.de> | 2022-04-02 16:24:03 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2022-04-02 16:24:03 +0300 |
commit | 5304c63aa4963c0d72ac6a2014c4b5c873f43927 (patch) | |
tree | 39d5eb11d8aa36ced3ed8484ed953628df282caa /src/js/components/Options | |
parent | 91ec2cd5f9e065e7f47d30c3771ad145a5d401a0 (diff) |
replace ButtonDiv with VueButton and last icons
Signed-off-by: dartcafe <github@dartcafe.de>
Diffstat (limited to 'src/js/components/Options')
-rw-r--r-- | src/js/components/Options/Confirmation.vue | 82 | ||||
-rw-r--r-- | src/js/components/Options/OptionCloneDate.vue | 12 | ||||
-rw-r--r-- | src/js/components/Options/OptionsDate.vue | 28 | ||||
-rw-r--r-- | src/js/components/Options/OptionsDateShift.vue | 27 | ||||
-rw-r--r-- | src/js/components/Options/OptionsText.vue | 29 | ||||
-rw-r--r-- | src/js/components/Options/OptionsTextAddBulk.vue | 12 |
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: { |