diff options
Diffstat (limited to 'apps/user_status/src/components')
7 files changed, 131 insertions, 193 deletions
diff --git a/apps/user_status/src/components/ClearAtSelect.vue b/apps/user_status/src/components/ClearAtSelect.vue index 63f828d9145..91b816dc04a 100644 --- a/apps/user_status/src/components/ClearAtSelect.vue +++ b/apps/user_status/src/components/ClearAtSelect.vue @@ -1,23 +1,7 @@ <!-- - - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com> - - @author Georg Ehrke <oc.list@georgehrke.com> - - - - @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/>. - - - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div class="clear-at-select"> @@ -30,12 +14,13 @@ :value="option" :clearable="false" placement="top" + label-outside @option:selected="select" /> </div> </template> <script> -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' +import NcSelect from '@nextcloud/vue/components/NcSelect' import { getAllClearAtOptions } from '../services/clearAtOptionsService.js' import { clearAtFilter } from '../filters/clearAtFilter.js' @@ -88,12 +73,9 @@ export default { <style lang="scss" scoped> .clear-at-select { display: flex; - margin-bottom: 10px; + gap: calc(2 * var(--default-grid-baseline)); align-items: center; - - &__label { - margin-right: 12px; - } + margin-block: 0 calc(2 * var(--default-grid-baseline)); &__select { flex-grow: 1; diff --git a/apps/user_status/src/components/CustomMessageInput.vue b/apps/user_status/src/components/CustomMessageInput.vue index 6214a13ac91..fb129281430 100644 --- a/apps/user_status/src/components/CustomMessageInput.vue +++ b/apps/user_status/src/components/CustomMessageInput.vue @@ -1,23 +1,7 @@ <!-- - - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com> - - @author Georg Ehrke <oc.list@georgehrke.com> - - - - @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/>. - - - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div class="custom-input" role="group"> <NcEmojiPicker container=".custom-input" @select="setIcon"> @@ -42,9 +26,9 @@ </template> <script> -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js' -import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcEmojiPicker from '@nextcloud/vue/components/NcEmojiPicker' +import NcTextField from '@nextcloud/vue/components/NcTextField' export default { name: 'CustomMessageInput', diff --git a/apps/user_status/src/components/OnlineStatusSelect.vue b/apps/user_status/src/components/OnlineStatusSelect.vue index 156e2110cf4..0abcc8d68e6 100644 --- a/apps/user_status/src/components/OnlineStatusSelect.vue +++ b/apps/user_status/src/components/OnlineStatusSelect.vue @@ -1,24 +1,7 @@ <!-- - - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com> - - - - @author John Molakvoæ <skjnldsv@protonmail.com> - - - - @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/>. - - - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div class="user-status-online-select"> <input :id="id" @@ -28,16 +11,17 @@ name="user-status-online" @change="onChange"> <label :for="id" class="user-status-online-select__label"> - {{ label }} <NcUserStatusIcon :status="type" + class="user-status-online-select__icon" aria-hidden="true" /> + {{ label }} <em class="user-status-online-select__subline">{{ subline }}</em> </label> </div> </template> <script> -import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js' +import NcUserStatusIcon from '@nextcloud/vue/components/NcUserStatusIcon' export default { name: 'OnlineStatusSelect', @@ -80,45 +64,42 @@ export default { </script> <style lang="scss" scoped> -@use 'sass:math'; -$icon-size: 24px; -$label-padding: 8px; - .user-status-online-select { &__label { - position: relative; - display: block; - margin: $label-padding; - padding: $label-padding; - padding-left: $icon-size + $label-padding * 2; - border: 2px solid var(--color-main-background); + box-sizing: inherit; + display: grid; + grid-template-columns: var(--default-clickable-area) 1fr 2fr; + align-items: center; + gap: var(--default-grid-baseline); + min-height: var(--default-clickable-area); + padding: var(--default-grid-baseline); border-radius: var(--border-radius-large); background-color: var(--color-background-hover); - background-position: $label-padding center; - background-size: $icon-size; - span, - & { + &, & * { cursor: pointer; } - span { - position: absolute; - top: calc(50% - 10px); - left: 10px; - display: block; - width: $icon-size; - height: $icon-size; + &:hover { + background-color: var(--color-background-dark); } } + &__icon { + flex-shrink: 0; + max-width: 34px; + max-height: 100%; + } + &__input:checked + &__label { outline: 2px solid var(--color-main-text); + background-color: var(--color-background-dark); box-shadow: 0 0 0 4px var(--color-main-background); } &__input:focus-visible + &__label { outline: 2px solid var(--color-primary-element) !important; + background-color: var(--color-background-dark); } &__subline { diff --git a/apps/user_status/src/components/PredefinedStatus.vue b/apps/user_status/src/components/PredefinedStatus.vue index a5c621aea28..b12892d4add 100644 --- a/apps/user_status/src/components/PredefinedStatus.vue +++ b/apps/user_status/src/components/PredefinedStatus.vue @@ -1,23 +1,7 @@ <!-- - - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com> - - @author Georg Ehrke <oc.list@georgehrke.com> - - - - @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/>. - - - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <li class="predefined-status"> <input :id="id" @@ -97,10 +81,19 @@ export default { flex-basis: 100%; border-radius: var(--border-radius); align-items: center; - min-height: 44px; + min-height: var(--default-clickable-area); + padding-inline: var(--default-grid-baseline); + + &, & * { + cursor: pointer; + } + + &:hover { + background-color: var(--color-background-dark); + } &--icon { - flex-basis: 40px; + flex-basis: var(--default-clickable-area); text-align: center; } @@ -122,11 +115,13 @@ export default { &__label:active { outline: 2px solid var(--color-main-text); box-shadow: 0 0 0 4px var(--color-main-background); + background-color: var(--color-background-dark); border-radius: var(--border-radius-large); } &__input:focus-visible + &__label { outline: 2px solid var(--color-primary-element) !important; + background-color: var(--color-background-dark); border-radius: var(--border-radius-large); } } diff --git a/apps/user_status/src/components/PredefinedStatusesList.vue b/apps/user_status/src/components/PredefinedStatusesList.vue index e9a411e8ba9..cdf359dce76 100644 --- a/apps/user_status/src/components/PredefinedStatusesList.vue +++ b/apps/user_status/src/components/PredefinedStatusesList.vue @@ -1,23 +1,7 @@ <!-- - - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com> - - @author Georg Ehrke <oc.list@georgehrke.com> - - - - @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/>. - - - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <ul v-if="statusesHaveLoaded" @@ -94,6 +78,7 @@ export default { .predefined-statuses-list { display: flex; flex-direction: column; - margin-bottom: 10px; + gap: var(--default-grid-baseline); + margin-block: 0 calc(2 * var(--default-grid-baseline)); } </style> diff --git a/apps/user_status/src/components/PreviousStatus.vue b/apps/user_status/src/components/PreviousStatus.vue index 6364277bdfb..58d6ebd294b 100644 --- a/apps/user_status/src/components/PreviousStatus.vue +++ b/apps/user_status/src/components/PreviousStatus.vue @@ -1,23 +1,7 @@ <!-- - - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com> - - @author Georg Ehrke <oc.list@georgehrke.com> - - - - @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/>. - - - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div class="predefined-status backup-status" tabindex="0" @@ -43,7 +27,7 @@ </template> <script> -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcButton from '@nextcloud/vue/components/NcButton' export default { name: 'PreviousStatus', @@ -81,7 +65,8 @@ export default { flex-basis: 100%; border-radius: var(--border-radius); align-items: center; - min-height: 44px; + min-height: var(--default-clickable-area); + padding-inline: var(--default-grid-baseline); &:hover, &:focus { @@ -93,7 +78,7 @@ export default { } &__icon { - flex-basis: 40px; + flex-basis: var(--default-clickable-area); text-align: center; } @@ -110,6 +95,7 @@ export default { } } } + .backup-status { &__reset-button { justify-content: flex-end; diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue index 682e3c8e8ca..8624ed19e94 100644 --- a/apps/user_status/src/components/SetStatusModal.vue +++ b/apps/user_status/src/components/SetStatusModal.vue @@ -1,34 +1,19 @@ <!-- - - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com> - - @author Georg Ehrke <oc.list@georgehrke.com> - - - - @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/>. - - - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <NcModal size="normal" - :name="$t('user_status', 'Set status')" + label-id="user_status-set-dialog" + dark :set-return-focus="setReturnFocus" @close="closeModal"> <div class="set-status-modal"> <!-- Status selector --> - <div class="set-status-modal__header"> - <h2>{{ $t('user_status', 'Online status') }}</h2> - </div> + <h2 id="user_status-set-dialog" class="set-status-modal__header"> + {{ $t('user_status', 'Online status') }} + </h2> <div class="set-status-modal__online-status" role="radiogroup" :aria-label="$t('user_status', 'Online status')"> @@ -41,15 +26,22 @@ <!-- Status message form --> <form @submit.prevent="saveStatus" @reset="clearStatus"> - <div class="set-status-modal__header"> - <h2>{{ $t('user_status', 'Status message') }}</h2> - </div> + <h3 class="set-status-modal__header"> + {{ $t('user_status', 'Status message') }} + </h3> <div class="set-status-modal__custom-input"> <CustomMessageInput ref="customMessageInput" :icon="icon" :message="editedMessage" @change="setMessage" @select-icon="setIcon" /> + <NcButton v-if="messageId === 'vacationing'" + :href="absencePageUrl" + target="_blank" + type="secondary" + :aria-label="$t('user_status', 'Set absence period')"> + {{ $t('user_status', 'Set absence period and replacement') + ' ↗' }} + </NcButton> </div> <div v-if="hasBackupStatus" class="set-status-modal__automation-hint"> @@ -85,8 +77,9 @@ <script> import { showError } from '@nextcloud/dialogs' -import NcModal from '@nextcloud/vue/dist/Components/NcModal.js' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import { generateUrl } from '@nextcloud/router' +import NcModal from '@nextcloud/vue/components/NcModal' +import NcButton from '@nextcloud/vue/components/NcButton' import { getAllStatusOptions } from '../services/statusOptionsService.js' import OnlineStatusMixin from '../mixins/OnlineStatusMixin.js' import PredefinedStatusesList from './PredefinedStatusesList.vue' @@ -125,6 +118,7 @@ export default { return { clearAt: null, editedMessage: '', + predefinedMessageId: null, isSavingStatus: false, statuses: getAllStatusOptions(), } @@ -150,6 +144,10 @@ export default { return this.$store.state.userBackupStatus.message || '' }, + absencePageUrl() { + return generateUrl('settings/user/availability#absence') + }, + resetButtonText() { if (this.backupIcon && this.backupMessage) { return this.$t('user_status', 'Reset status to "{icon} {message}"', { @@ -192,6 +190,7 @@ export default { mounted() { this.$store.dispatch('fetchBackupFromServer') + this.predefinedMessageId = this.$store.state.userStatus.messageId if (this.$store.state.userStatus.clearAt !== null) { this.clearAt = { type: '_time', @@ -212,6 +211,7 @@ export default { * @param {string} icon The new icon */ setIcon(icon) { + this.predefinedMessageId = null this.$store.dispatch('setCustomMessage', { message: this.message, icon, @@ -227,6 +227,7 @@ export default { * @param {string} message The new message */ setMessage(message) { + this.predefinedMessageId = null this.editedMessage = message }, /** @@ -243,6 +244,7 @@ export default { * @param {object} status The predefined status object */ selectPredefinedMessage(status) { + this.predefinedMessageId = status.id this.clearAt = status.clearAt this.$store.dispatch('setPredefinedMessage', { messageId: status.id, @@ -262,11 +264,18 @@ export default { try { this.isSavingStatus = true - await this.$store.dispatch('setCustomMessage', { - message: this.editedMessage, - icon: this.icon, - clearAt: this.clearAt, - }) + if (this.predefinedMessageId === null) { + await this.$store.dispatch('setCustomMessage', { + message: this.editedMessage, + icon: this.icon, + clearAt: this.clearAt, + }) + } else { + this.$store.dispatch('setPredefinedMessage', { + messageId: this.predefinedMessageId, + clearAt: this.clearAt, + }) + } } catch (err) { showError(this.$t('user_status', 'There was an error saving the status')) console.debug(err) @@ -294,6 +303,7 @@ export default { } this.isSavingStatus = false + this.predefinedMessageId = null this.closeModal() }, /** @@ -315,6 +325,7 @@ export default { } this.isSavingStatus = false + this.predefinedMessageId = this.$store.state.userStatus?.messageId }, }, } @@ -325,34 +336,48 @@ export default { .set-status-modal { padding: 8px 20px 20px 20px; + &, & * { + box-sizing: border-box; + } + &__header { + font-size: 21px; text-align: center; - font-weight: bold; - margin: 15px 0; + height: fit-content; + min-height: var(--default-clickable-area); + line-height: var(--default-clickable-area); + overflow-wrap: break-word; + margin-block: 0 calc(2 * var(--default-grid-baseline)); } &__online-status { - display: grid; - grid-template-columns: 1fr 1fr; + display: flex; + flex-direction: column; + gap: calc(2 * var(--default-grid-baseline)); + margin-block: 0 calc(2 * var(--default-grid-baseline)); } &__custom-input { display: flex; + flex-direction: column; + align-items: center; + gap: var(--default-grid-baseline); width: 100%; - margin-bottom: 10px; + padding-inline-start: var(--default-grid-baseline); + margin-block: 0 calc(2 * var(--default-grid-baseline)); } &__automation-hint { display: flex; width: 100%; - margin-bottom: 10px; + margin-block: 0 calc(2 * var(--default-grid-baseline)); color: var(--color-text-maxcontrast); } .status-buttons { display: flex; padding: 3px; - padding-left:0; + padding-inline-start:0; gap: 3px; } } |