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 | |
parent | 315d2cfb3ce51825edaaeca4fe45e3cb4a876126 (diff) |
enhance inputDiv and optimize modals
Signed-off-by: dartcafe <github@dartcafe.de>
Diffstat (limited to 'src')
27 files changed, 236 insertions, 358 deletions
diff --git a/src/js/App.vue b/src/js/App.vue index 88f0519d..babca8c1 100644 --- a/src/js/App.vue +++ b/src/js/App.vue @@ -310,7 +310,7 @@ export default { gap: 8px; justify-content: flex-end; align-items: center; - margin-top: 14px; + margin-top: 36px; .button { margin-left: 10px; margin-right: 0; diff --git a/src/js/components/Base/InputDiv.vue b/src/js/components/Base/InputDiv.vue index db4745af..a624f2f1 100644 --- a/src/js/components/Base/InputDiv.vue +++ b/src/js/components/Base/InputDiv.vue @@ -25,23 +25,26 @@ <h3 v-if="label"> {{ label }} </h3> + <div class="input-wrapper"> <input ref="input" :type="type" :value="value" :inputmode="inputmode" :placeholder="placeholder" - :class="[{ 'has-modifier': useNumModifiers, 'has-submit': !noSubmit }, 'input', signalingClass]" + :class="[{ 'has-modifier': useNumModifiers, 'has-submit': submit }, signalingClass]" @input="$emit('input', $event.target.value)" @change="$emit('change', $event.target.value)" @keyup.enter="$emit('submit', $event.target.value)"> + <Spinner v-if="checking" class="signaling-icon spinner" /> - <ArrowRight v-if="showSubmit" class="signaling-icon submit" @click="$emit('submit', $refs.input.value)" /> + <ArrowRightIcon v-if="showSubmit" class="signaling-icon submit" @click="$emit('submit', $refs.input.value)" /> <AlertIcon v-if="error" class="signaling-icon error" fill-color="#f45573" /> <CheckIcon v-if="success" class="signaling-icon success" fill-color="#49bc49" /> - <MinusIcon v-if="showModifiers" class="modifier subtract" @click="$emit('subtract')" /> - <PlusIcon v-if="showModifiers" class="modifier add" @click="$emit('add')" /> + <MinusIcon v-if="useNumModifiers" class="modifier subtract" @click="subtract()" /> + <PlusIcon v-if="useNumModifiers" class="modifier add" @click="add()" /> </div> + <div v-if="helperText!==null" :class="['helper', signalingClass]"> {{ helperText }} </div> @@ -51,7 +54,7 @@ <script> import PlusIcon from 'vue-material-design-icons/Plus.vue' import MinusIcon from 'vue-material-design-icons/Minus.vue' -import ArrowRight from 'vue-material-design-icons/ArrowRight.vue' +import ArrowRightIcon from 'vue-material-design-icons/ArrowRight.vue' import CheckIcon from 'vue-material-design-icons/Check.vue' import AlertIcon from 'vue-material-design-icons/AlertCircle.vue' import Spinner from '../AppIcons/Spinner.vue' @@ -60,7 +63,7 @@ export default { name: 'InputDiv', components: { - ArrowRight, + ArrowRightIcon, PlusIcon, MinusIcon, AlertIcon, @@ -102,11 +105,23 @@ export default { type: Boolean, default: false, }, + modifierStepValue: { + type: Number, + default: 1, + }, + modifierMax: { + type: Number, + default: null, + }, + modifierMin: { + type: Number, + default: null, + }, focus: { type: Boolean, default: false, }, - noSubmit: { + submit: { type: Boolean, default: false, }, @@ -125,13 +140,10 @@ export default { return !this.checking && !this.useNumModifiers && this.signalingClass === 'error' }, success() { - return !this.checking && !this.useNumModifiers && this.signalingClass === 'success' && this.noSubmit + return !this.checking && !this.useNumModifiers && this.signalingClass === 'success' && !this.submit }, showSubmit() { - return !this.checking && !this.useNumModifiers && !this.noSubmit && this.signalingClass !== 'error' - }, - showModifiers() { - return this.useNumModifiers + return !this.checking && !this.useNumModifiers && this.submit && this.signalingClass !== 'error' }, checking() { return !this.useNumModifiers && this.signalingClass === 'checking' @@ -150,18 +162,44 @@ export default { this.$refs.input.focus() }) }, + + add() { + let newValue = this.value + if (this.modifierMax && (newValue + this.modifierStepValue) > this.modifierMax) { + if (this.modifierMin) { + newValue = this.modifierMin + } + } else { + newValue += this.modifierStepValue + } + this.$emit('input', newValue) + }, + + subtract() { + let newValue = this.value + if (this.modifierMin && (newValue - this.modifierStepValue) < this.modifierMin) { + if (this.modifierMax) { + newValue = this.modifierMax + } + } else { + newValue -= this.modifierStepValue + } + this.$emit('input', newValue) + }, }, } </script> <style lang="scss" scoped> - + $input-height: 34px; .input-div { position: relative; + flex: 1; .input-wrapper { position: relative; + display: flex; } .helper { @@ -176,13 +214,17 @@ export default { input { width: 100%; + margin: 0; - &.has-submit { - padding-right: 34px; + &.has-submit, + &.error, + &.success, + &.checking { + padding-right: $input-height; } &.has-modifier { - padding: 0 34px; + padding: 0 $input-height; } &.error { @@ -193,37 +235,25 @@ export default { } &.numeric { - min-width: 100px; - width: 110px; + min-width: 110px; + max-width: 150px; display: block; - - input { + .input-wrapper input { text-align: center; } } .signaling-icon { - &.material-design-icon { - position: absolute; - right: 6px; - top: 8px; - } - } - - .submit { position: absolute; - right: 6px; - top: 8px; - cursor: pointer; + right: 0; + width: $input-height; + height: $input-height; } .modifier { - flex: 0; position: absolute; - top: 0; - height: 32px; - margin: 4px 1px; - padding: 0 4px; + height: $input-height; + width: $input-height; border-color: var(--color-border-dark); cursor: pointer; @@ -238,7 +268,6 @@ export default { } &.subtract { - left: 0; border-right: solid 1px var(--color-border-dark); border-radius: var(--border-radius) 0 0 var(--border-radius); } diff --git a/src/js/components/Comments/CommentAdd.vue b/src/js/components/Comments/CommentAdd.vue index 190570db..1de7413b 100644 --- a/src/js/components/Comments/CommentAdd.vue +++ b/src/js/components/Comments/CommentAdd.vue @@ -23,9 +23,11 @@ <template lang="html"> <div class="comment-add"> <UserItem v-bind="acl" hide-names /> + <InputDiv v-model="comment" class="comment-add__input" :placeholder="t('polls', 'New comment …')" + submit @submit="writeComment()" /> </div> </template> diff --git a/src/js/components/Configuration/ConfigOptionLimit.vue b/src/js/components/Configuration/ConfigOptionLimit.vue index f9c74965..48738834 100644 --- a/src/js/components/Configuration/ConfigOptionLimit.vue +++ b/src/js/components/Configuration/ConfigOptionLimit.vue @@ -25,14 +25,14 @@ <CheckboxRadioSwitch :checked.sync="useOptionLimit" type="switch"> {{ t('polls', 'Limit "Yes" votes per option') }} </CheckboxRadioSwitch> + <InputDiv v-if="optionLimit" v-model="optionLimit" - class="selectUnit indented" + class="indented" type="number" inputmode="numeric" - use-num-modifiers - @add="optionLimit += 1" - @subtract="optionLimit -= 1" /> + use-num-modifiers /> + <CheckboxRadioSwitch v-if="optionLimit" class="indented" :checked.sync="hideBookedUp" diff --git a/src/js/components/Configuration/ConfigTitle.vue b/src/js/components/Configuration/ConfigTitle.vue index 98d8d6ec..fe1521f5 100644 --- a/src/js/components/Configuration/ConfigTitle.vue +++ b/src/js/components/Configuration/ConfigTitle.vue @@ -21,24 +21,32 @@ --> <template> - <input v-model="title" - :class="{ error: !poll.title }" + <InputDiv v-model="title" + :signaling-class="checkTitle" type="text" - @change="$emit('change')" - @keyup.enter="$emit('change')"> + @change="$emit('change')" /> </template> <script> import { mapState } from 'vuex' +import InputDiv from '../Base/InputDiv.vue' export default { name: 'ConfigTitle', + components: { + InputDiv, + }, + computed: { ...mapState({ poll: (state) => state.poll, }), + checkTitle() { + return this.poll.title ? '' : 'error' + }, + title: { get() { return this.poll.title diff --git a/src/js/components/Configuration/ConfigVoteLimit.vue b/src/js/components/Configuration/ConfigVoteLimit.vue index 09637945..871aa248 100644 --- a/src/js/components/Configuration/ConfigVoteLimit.vue +++ b/src/js/components/Configuration/ConfigVoteLimit.vue @@ -25,14 +25,13 @@ <CheckboxRadioSwitch :checked.sync="useVoteLimit" type="switch"> {{ t('polls', 'Limit "Yes" votes per user') }} </CheckboxRadioSwitch> + <InputDiv v-if="voteLimit" v-model="voteLimit" - class="selectUnit indented" + class="indented" type="number" inputmode="numeric" - use-num-modifiers - @add="voteLimit += 1" - @subtract="voteLimit -= 1" /> + use-num-modifiers /> </div> </template> diff --git a/src/js/components/Create/CreateDlg.vue b/src/js/components/Create/CreateDlg.vue index bdf75776..df029b79 100644 --- a/src/js/components/Create/CreateDlg.vue +++ b/src/js/components/Create/CreateDlg.vue @@ -26,12 +26,11 @@ <template #icon> <SpeakerIcon /> </template> - <input id="pollTitle" - ref="pollTitle" + <InputDiv ref="pollTitle" v-model="title" type="text" :placeholder="t('polls', 'Enter Title')" - @keyup.enter="confirm"> + @submit="confirm" /> </ConfigBox> <ConfigBox :title="t('polls', 'Poll type')"> @@ -59,6 +58,7 @@ import ConfigBox from '../Base/ConfigBox.vue' import RadioGroupDiv from '../Base/RadioGroupDiv.vue' import SpeakerIcon from 'vue-material-design-icons/Bullhorn.vue' import CheckIcon from 'vue-material-design-icons/Check.vue' +import InputDiv from '../Base/InputDiv.vue' export default { name: 'CreateDlg', @@ -68,6 +68,7 @@ export default { CheckIcon, ConfigBox, RadioGroupDiv, + InputDiv, }, data() { @@ -92,6 +93,11 @@ export default { }, methods: { + /** @public */ + setFocus() { + this.$refs.pollTitle.setFocus() + }, + cancel() { this.title = '' this.pollType = 'datePoll' @@ -108,13 +114,6 @@ export default { showError(t('polls', 'Error while creating Poll "{pollTitle}"', { pollTitle: this.title })) } }, - - /** @public */ - setFocus() { - this.$nextTick(() => { - this.$refs.pollTitle.focus() - }) - }, }, } </script> 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> diff --git a/src/js/components/Poll/PublicEmail.vue b/src/js/components/Poll/PublicEmail.vue index f017bb36..4c56d94f 100644 --- a/src/js/components/Poll/PublicEmail.vue +++ b/src/js/components/Poll/PublicEmail.vue @@ -26,6 +26,7 @@ v-tooltip="check.result" :signaling-class="check.status" :placeholder="t('polls', 'Optional email address')" + submit @submit="submitEmailAddress" /> </div> </template> diff --git a/src/js/components/Poll/PublicRegisterModal.vue b/src/js/components/Poll/PublicRegisterModal.vue index f76a2d5b..c8da38f0 100644 --- a/src/js/components/Poll/PublicRegisterModal.vue +++ b/src/js/components/Poll/PublicRegisterModal.vue @@ -26,43 +26,36 @@ <div class="modal__registration"> <div class="registration__registration"> <h2>{{ t('polls', 'Public participation') }}</h2> - <div class="section__username"> - <h3>{{ t('polls', 'To participate, tell us how we can call you!') }}</h3> - <InputDiv v-model="userName" - v-tooltip="userNameCheck.result" - :signaling-class="userNameCheck.status" - :placeholder="t('polls', 'Enter your name')" - no-submit - focus - @submit="submitRegistration" /> - <CheckboxRadioSwitch :checked.sync="saveCookie"> - {{ t('polls', 'Save username in cookie for 30 days') }} - </CheckboxRadioSwitch> - </div> - - <div :class="['status-message', userNameCheck.status]"> - {{ userNameCheck.result }} - </div> + <InputDiv v-model="userName" + v-tooltip="userNameCheck.result" + class="section__username" + :label="t('polls', 'To participate, tell us how we can call you!')" + :signaling-class="userNameCheck.status" + :placeholder="t('polls', 'Enter your name')" + :helper-text="userNameCheck.result" + focus + @submit="submitRegistration" /> + + <CheckboxRadioSwitch :checked.sync="saveCookie"> + {{ t('polls', 'Save username in cookie for 30 days') }} + </CheckboxRadioSwitch> + + <InputDiv v-if="share.publicPollEmail !== 'disabled'" + v-model="emailAddress" + v-tooltip="emailCheck.result" + class="section__email" + :label="emailLabel" + :signaling-class="emailCheck.status" + :placeholder="t('polls', share.publicPollEmail === 'mandatory' ? 'Mandatory email address' : 'Optional email address')" + :helper-text="emailCheck.result" + type="email" + inputmode="email" + @submit="submitRegistration" /> - <div v-if="share.publicPollEmail !== 'disabled'" class="section__email"> - <h3 v-if="share.publicPollEmail === 'mandatory'"> - {{ t("polls", "Your email address is required. After the registration your personal link to the poll will be sent to this address.") }} - </h3> - <h3 v-else> - {{ t("polls", "With your email address you can subscribe to notifications and you will receive your personal link to this poll.") }} - </h3> - <InputDiv v-model="emailAddress" - v-tooltip="emailCheck.result" - type="email" - inputmode="email" - :signaling-class="emailCheck.status" - :placeholder="t('polls', share.publicPollEmail === 'mandatory' ? 'Mandatory email address' : 'Optional email address')" - no-submit - @submit="submitRegistration" /> - </div> <div v-if="privacyUrl" class="section__optin"> <RichText :text="privacyRich.subject" :arguments="privacyRich.parameters" /> </div> + <div class="modal__buttons"> <VueButton @click="closeModal"> {{ t('polls', 'Cancel') }} @@ -143,6 +136,13 @@ export default { imprintUrl: (state) => state.appSettings.useImprintUrl, }), + emailLabel() { + if (this.share.publicPollEmail === 'mandatory') { + return t('polls', 'Your email address is required. After the registration your personal link to the poll will be sent to this address.') + } + return t('polls', 'With your email address you can subscribe to notifications and you will receive your personal link to this poll.') + }, + registrationIsValid() { return this.isValidName && (this.isValidEmailAddress || (this.emailAddress.length === 0 && this.share.publicPollEmail !== 'mandatory')) }, @@ -181,9 +181,10 @@ export default { status: 'checking', } } - if (this.userName.length === 0) { + + if (this.userName.length < 1) { return { - result: ' ', + result: t('polls', 'A name is required'), status: 'empty', } } @@ -196,7 +197,7 @@ export default { } return { - result: t('polls', 'The name {username} is valid.', { username: this.userName }), + result: '', status: 'success', } }, @@ -208,10 +209,17 @@ export default { status: 'checking', } } + if (this.emailAddress.length < 1) { + if (this.share.publicPollEmail === 'mandatory') { + return { + result: t('polls', 'An email address is required.'), + status: 'empty', + } + } return { result: '', - status: '', + status: 'empty', } } @@ -223,7 +231,7 @@ export default { } return { - result: t('polls', 'Valid email address.'), + result: '', status: 'success', } }, @@ -323,6 +331,8 @@ export default { <style lang="scss"> .section__optin { + align-self: end; + a { text-decoration: underline; } @@ -399,12 +409,6 @@ export default { } } - .status-message { - hyphens: auto; - font-size: 0.9em; - min-height: 1.8em; - } - @media only screen and (max-width: 688px) { .modal__content { padding: 6px; diff --git a/src/js/components/Settings/AdminSettings/AdminCombo.vue b/src/js/components/Settings/AdminSettings/AdminCombo.vue index 2a2e1778..70e2ec44 100644 --- a/src/js/components/Settings/AdminSettings/AdminCombo.vue +++ b/src/js/components/Settings/AdminSettings/AdminCombo.vue @@ -26,7 +26,7 @@ {{ t('polls', 'Deactivate combo view for all users') }} </CheckboxRadioSwitch> <div v-if="comboLimited" class="settings_details"> - <div>{{ t('polls','Allow combo view for the following groups') }}</div> + <h3>{{ t('polls','Allow combo view for the following groups') }}</h3> <Multiselect v-model="comboGroups" class="stretch" label="displayName" @@ -128,17 +128,3 @@ export default { }, } </script> - -<style lang="scss"> - .user_settings { - padding-top: 16px; - } - - .settings_details { - padding-bottom: 16px; - margin-left: 36px; - input, .stretch { - width: 100%; - } - } -</style> diff --git a/src/js/components/Settings/AdminSettings/AdminEmail.vue b/src/js/components/Settings/AdminSettings/AdminEmail.vue index ff4841f9..c3fcd41a 100644 --- a/src/js/components/Settings/AdminSettings/AdminEmail.vue +++ b/src/js/components/Settings/AdminSettings/AdminEmail.vue @@ -34,9 +34,7 @@ </div> <textarea v-show="!preview" v-model="disclaimer" @change="saveSettings()" /> <!-- eslint-disable-next-line vue/no-v-html --> - <div v-show="preview" class="polls-markdown" v-html="markedDisclaimer"> - {{ markedDisclaimer }} - </div> + <div v-show="preview" class="polls-markdown" v-html="markedDisclaimer" /> </div> </template> @@ -117,21 +115,4 @@ export default { flex-grow: 1; } } - - .user_settings { - padding-top: 16px; - textarea { - width: 99%; - resize: vertical; - height: 230px; - } - } - - .settings_details { - padding-bottom: 16px; - margin-left: 36px; - input, .stretch { - width: 100%; - } - } </style> diff --git a/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue b/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue index 270fae92..34523f85 100644 --- a/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue +++ b/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue @@ -26,7 +26,7 @@ {{ t('polls', 'Hide email addresses of internal users') }} </CheckboxRadioSwitch> <div v-if="hideMailAddresses" class="settings_details"> - <div>{{ t('polls','Show email addresses of internal users to members of the following groups') }}</div> + <h3>{{ t('polls','Show email addresses of internal users to members of the following groups') }}</h3> <Multiselect v-model="showMailAddressesGroups" class="stretch" label="displayName" @@ -129,17 +129,3 @@ export default { }, } </script> - -<style lang="scss"> - .user_settings { - padding-top: 16px; - } - - .settings_details { - padding-bottom: 16px; - margin-left: 36px; - input, .stretch { - width: 100%; - } - } -</style> diff --git a/src/js/components/Settings/AdminSettings/AdminLegal.vue b/src/js/components/Settings/AdminSettings/AdminLegal.vue index 543f9031..3ba1a8d0 100644 --- a/src/js/components/Settings/AdminSettings/AdminLegal.vue +++ b/src/js/components/Settings/AdminSettings/AdminLegal.vue @@ -26,18 +26,17 @@ {{ t('polls', 'The privacy link and the legal notice link are automatically added to the registration dialog of public polls.') }} {{ t('polls', 'As a default the links configured in the theming app are used. For public polls these can be overriden by individual terms.') }} </p> - <span>{{ t('polls', 'Privacy policy link:') }}</span> + <InputDiv v-model="privacyUrl" type="url" :placeholder="placeholder.privacy" - no-submit + :label="t('polls', 'Privacy policy link:')" @change="saveSettings()" /> - <span>{{ t('polls', 'Legal notice link:') }}</span> <InputDiv v-model="imprintUrl" type="url" inputmode="url" - no-submit + :label="t('polls', 'Legal notice link:')" :placeholder="placeholder.imprint" @change="saveSettings()" /> </div> @@ -99,22 +98,3 @@ export default { }, } </script> - -<style lang="scss"> - .user_settings { - padding-top: 16px; - textarea { - width: 99%; - resize: vertical; - height: 230px; - } - } - - .settings_details { - padding-bottom: 16px; - margin-left: 36px; - input, .stretch { - width: 100%; - } - } -</style> diff --git a/src/js/components/Settings/AdminSettings/AdminMisc.vue b/src/js/components/Settings/AdminSettings/AdminMisc.vue index 74d279df..1090af36 100644 --- a/src/js/components/Settings/AdminSettings/AdminMisc.vue +++ b/src/js/components/Settings/AdminSettings/AdminMisc.vue @@ -26,22 +26,21 @@ <CheckboxRadioSwitch :checked.sync="useActivity" type="switch"> {{ t('polls', 'Track activities') }} </CheckboxRadioSwitch> + <CheckboxRadioSwitch :checked.sync="hideLogin" type="switch"> {{ t('polls', 'Hide login option in public polls') }} </CheckboxRadioSwitch> + <CheckboxRadioSwitch :checked.sync="autoArchive" type="switch"> {{ t('polls', 'Archive closed polls automatically') }} </CheckboxRadioSwitch> - <div v-if="autoArchive" class="settings_details"> - <span>{{ t('polls', 'After how many days are the closed polls to be archived:') }}</span> - <InputDiv v-model="autoArchiveOffset" - class="selectUnit" - type="number" - inputmode="numeric" - use-num-modifiers - @add="autoArchiveOffset += 1" - @subtract="autoArchiveOffset -= 1" /> - </div> + <InputDiv v-if="autoArchive" + v-model="autoArchiveOffset" + class="settings_details" + type="number" + inputmode="numeric" + use-num-modifiers + :label="t('polls', 'After how many days are closed polls to be archived:')" /> </div> </div> </template> @@ -109,17 +108,3 @@ export default { }, } </script> - -<style lang="scss"> - .user_settings { - padding-top: 16px; - } - - .settings_details { - padding-bottom: 16px; - margin-left: 36px; - input, .stretch { - width: 100%; - } - } -</style> diff --git a/src/js/components/Settings/AdminSettings/AdminPerformance.vue b/src/js/components/Settings/AdminSettings/AdminPerformance.vue index adeb8a42..9cc208c5 100644 --- a/src/js/components/Settings/AdminSettings/AdminPerformance.vue +++ b/src/js/components/Settings/AdminSettings/AdminPerformance.vue @@ -72,17 +72,3 @@ export default { }, } </script> - -<style lang="scss"> - .user_settings { - padding-top: 16px; - } - - .settings_details { - padding-bottom: 16px; - margin-left: 36px; - input, .stretch { - width: 100%; - } - } -</style> diff --git a/src/js/components/Settings/AdminSettings/AdminPollCreation.vue b/src/js/components/Settings/AdminSettings/AdminPollCreation.vue index 8c310123..7195e10c 100644 --- a/src/js/components/Settings/AdminSettings/AdminPollCreation.vue +++ b/src/js/components/Settings/AdminSettings/AdminPollCreation.vue @@ -26,7 +26,7 @@ {{ t('polls', 'Disallow poll creation for all users') }} </CheckboxRadioSwitch> <div v-if="createPollLimited" class="settings_details"> - <div>{{ t('polls','Allow poll creation for the following groups') }}</div> + <h3>{{ t('polls','Allow poll creation for the following groups') }}</h3> <Multiselect v-model="createPollGroups" class="stretch" label="displayName" @@ -128,17 +128,3 @@ export default { }, } </script> - -<style lang="scss"> - .user_settings { - padding-top: 16px; - } - - .settings_details { - padding-bottom: 16px; - margin-left: 36px; - input, .stretch { - width: 100%; - } - } -</style> diff --git a/src/js/components/Settings/AdminSettings/AdminPollDownload.vue b/src/js/components/Settings/AdminSettings/AdminPollDownload.vue index 49cba492..4384c02d 100644 --- a/src/js/components/Settings/AdminSettings/AdminPollDownload.vue +++ b/src/js/components/Settings/AdminSettings/AdminPollDownload.vue @@ -26,7 +26,7 @@ {{ t('polls', 'Disallow poll download') }} </CheckboxRadioSwitch> <div v-if="pollDownloadLimited" class="settings_details"> - <div>{{ t('polls','Allow poll download for the following groups') }}</div> + <h3>{{ t('polls','Allow poll download for the following groups') }}</h3> <Multiselect v-model="pollDownloadGroups" class="stretch" label="displayName" @@ -128,17 +128,3 @@ export default { }, } </script> - -<style lang="scss"> - .user_settings { - padding-top: 16px; - } - - .settings_details { - padding-bottom: 16px; - margin-left: 36px; - input, .stretch { - width: 100%; - } - } -</style> diff --git a/src/js/components/Settings/AdminSettings/AdminShareSettings.vue b/src/js/components/Settings/AdminSettings/AdminShareSettings.vue index 9bd5a603..977858dd 100644 --- a/src/js/components/Settings/AdminSettings/AdminShareSettings.vue +++ b/src/js/components/Settings/AdminSettings/AdminShareSettings.vue @@ -26,7 +26,7 @@ {{ t('polls', 'Disallow public shares') }} </CheckboxRadioSwitch> <div v-if="publicSharesLimited" class="settings_details"> - <div>{{ t('polls','Allow public shares for the following groups') }}</div> + <h3>{{ t('polls','Allow public shares for the following groups') }}</h3> <Multiselect v-model="publicSharesGroups" class="stretch" label="displayName" @@ -45,7 +45,7 @@ {{ t('polls', 'Disallow openly accessible polls') }} </CheckboxRadioSwitch> <div v-if="allAccessLimited" class="settings_details"> - <div>{{ t('polls','Allow creating openly accessible polls for the following groups') }}</div> + <h3>{{ t('polls','Allow creating openly accessible polls for the following groups') }}</h3> <Multiselect v-model="allAccessGroups" class="stretch" label="displayName" @@ -163,17 +163,3 @@ export default { }, } </script> - -<style lang="scss"> - .user_settings { - padding-top: 16px; - } - - .settings_details { - padding-bottom: 16px; - margin-left: 36px; - input, .stretch { - width: 100%; - } - } -</style> diff --git a/src/js/components/Settings/UserSettings/CalendarSettings.vue b/src/js/components/Settings/UserSettings/CalendarSettings.vue index 8489433f..a7b202d8 100644 --- a/src/js/components/Settings/UserSettings/CalendarSettings.vue +++ b/src/js/components/Settings/UserSettings/CalendarSettings.vue @@ -26,6 +26,7 @@ <CheckboxRadioSwitch :checked.sync="calendarPeek" type="switch"> {{ t('polls', 'Use calendar lookup for conflicting calendar events') }} </CheckboxRadioSwitch> + <div v-show="calendarPeek" class="settings_details"> {{ t('polls', 'Select the calendars to use for lookup.') }} @@ -41,29 +42,19 @@ </div> <div class="user_settings"> - <p class="settings-description"> - {{ t('polls', 'Specify in which period (in hours) before the option existing appointments should be included in the search results.') }} - </p> <InputDiv v-model="checkCalendarsBefore" + :label="t('polls', 'Specify in which period (in hours) before the option existing appointments should be included in the search results.')" type="number" inputmode="numeric" - use-num-modifiers - no-submit - @add="checkCalendarsBefore += 1" - @subtract="checkCalendarsBefore -= 1" /> + use-num-modifiers /> </div> <div class="user_settings"> - <p class="settings-description"> - {{ t('polls', 'Specify in which period (in hours) after the option existing appointments should be included in the search results.') }} - </p> <InputDiv v-model="checkCalendarsAfter" + :label="t('polls', 'Specify in which period (in hours) after the option existing appointments should be included in the search results.')" type="number" inputmode="numeric" - use-num-modifiers - no-submit - @add="checkCalendarsAfter += 1" - @subtract="checkCalendarsAfter -= 1" /> + use-num-modifiers /> </div> </div> </template> @@ -157,15 +148,6 @@ export default { </script> <style> - .user_settings { - padding-top: 16px; - } - - .settings_details { - padding-top: 8px; - margin-left: 36px; - } - .bully { display: inline-block; width: 11px; diff --git a/src/js/components/Settings/UserSettings/FeatureSettings.vue b/src/js/components/Settings/UserSettings/FeatureSettings.vue index 2344c5f7..ab8fffbb 100644 --- a/src/js/components/Settings/UserSettings/FeatureSettings.vue +++ b/src/js/components/Settings/UserSettings/FeatureSettings.vue @@ -93,22 +93,3 @@ export default { }, } </script> - -<style> - .user_settings { - padding-top: 16px; - } - - .settings_details { - padding-top: 8px; - margin-left: 36px; - } - - .bully { - display: inline-block; - width: 11px; - height: 11px; - border-radius: 50%; - margin: 0 4px 0 0; - } -</style> diff --git a/src/js/components/Settings/UserSettings/PerformanceSettings.vue b/src/js/components/Settings/UserSettings/PerformanceSettings.vue index 7e72a97a..880c74a1 100644 --- a/src/js/components/Settings/UserSettings/PerformanceSettings.vue +++ b/src/js/components/Settings/UserSettings/PerformanceSettings.vue @@ -22,20 +22,19 @@ <template> <div class="user_settings"> - <span> + <h3> {{ t('polls', 'A poll with many options and voters can have a heavy impact on client performance.') }} {{ t('polls', 'Set the amount of voting cells (options x participants) up to which all voting cells should be displayed.') }} {{ t('polls', 'If this threshold gets tresspasses only the current user will be displayed, to avoid a performance breakdown.') }} {{ t('polls', 'The default threshold of 1000 should be a good and safe value.') }} - </span> + </h3> <InputDiv v-model="threshold" type="number" inputmode="numeric" use-num-modifiers - no-submit :placeholder="'1000'" - @add="threshold += 100" - @subtract="threshold -= 100" /> + :modifier-step-value="100" + :modifier-min="200" /> </div> </template> @@ -77,15 +76,3 @@ export default { }, } </script> - -<style> - .user_settings { - padding-top: 16px; - } - - .settings_details { - padding-top: 8px; - margin-left: 36px; - } - -</style> diff --git a/src/js/components/Settings/UserSettings/StyleSettings.vue b/src/js/components/Settings/UserSettings/StyleSettings.vue index b62f6506..31a71705 100644 --- a/src/js/components/Settings/UserSettings/StyleSettings.vue +++ b/src/js/components/Settings/UserSettings/StyleSettings.vue @@ -46,9 +46,9 @@ </CheckboxRadioSwitch> <div v-if="individualImage" class="settings_details"> - <input v-model="individualImageUrl" + <InputDiv v-model="individualImageUrl" type="text" - :placeholder="t('polls', 'Enter the URL of your favorite background image.')"> + :placeholder="t('polls', 'Enter the URL of your favorite background image.')" /> <CheckboxRadioSwitch :checked.sync="individualImageStyle" type="switch"> {{ t('polls', 'Dark picture') }} </CheckboxRadioSwitch> @@ -72,12 +72,14 @@ import { mapState } from 'vuex' import { CheckboxRadioSwitch } from '@nextcloud/vue' +import InputDiv from '../../Base/InputDiv.vue' export default { name: 'StyleSettings', components: { CheckboxRadioSwitch, + InputDiv, }, computed: { @@ -159,17 +161,3 @@ export default { }, } </script> - -<style lang="scss"> - .user_settings { - padding-top: 16px; - } - - .settings_details { - padding-top: 8px; - margin-left: 36px; - input { - width: 100%; - } - } -</style> diff --git a/src/js/views/AdminSettingsPage.vue b/src/js/views/AdminSettingsPage.vue index 41d02af4..23dad191 100644 --- a/src/js/views/AdminSettingsPage.vue +++ b/src/js/views/AdminSettingsPage.vue @@ -110,4 +110,19 @@ export default { margin-bottom: 1em; opacity: .7; } + +.user_settings { + padding-top: 16px; + + textarea { + width: 99%; + resize: vertical; + height: 230px; + } +} + +.settings_details { + padding-bottom: 16px; + margin-left: 36px; +} </style> diff --git a/src/js/views/UserSettingsPage.vue b/src/js/views/UserSettingsPage.vue index 87013991..64de3e7a 100644 --- a/src/js/views/UserSettingsPage.vue +++ b/src/js/views/UserSettingsPage.vue @@ -76,4 +76,20 @@ export default { border-bottom: 1px solid var(--color-border); } } + +.user_settings { + padding-top: 16px; + + textarea { + width: 99%; + resize: vertical; + height: 230px; + } +} + +.settings_details { + padding-bottom: 16px; + margin-left: 36px; +} + </style> |