diff options
Diffstat (limited to 'apps/user_status/src')
22 files changed, 227 insertions, 574 deletions
diff --git a/apps/user_status/src/UserStatus.vue b/apps/user_status/src/UserStatus.vue index 2ec5e05acd4..07d81aad95c 100644 --- a/apps/user_status/src/UserStatus.vue +++ b/apps/user_status/src/UserStatus.vue @@ -1,52 +1,47 @@ <!-- - - @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> - <component :is="inline ? 'div' : 'li'"> - <!-- User Status = Status modal toggle --> - <button v-if="!inline" + <Fragment> + <NcListItem v-if="!inline" class="user-status-menu-item" - @click.stop="openModal"> - <span aria-hidden="true" :class="statusIcon" class="user-status-icon" /> - {{ visibleMessage }} - </button> - - <!-- Dashboard Status --> - <NcButton v-else - :icon="statusIcon" + compact + :name="visibleMessage" @click.stop="openModal"> <template #icon> - <span aria-hidden="true" :class="statusIcon" class="user-status-icon" /> + <NcUserStatusIcon class="user-status-icon" + :status="statusType" + aria-hidden="true" /> </template> - {{ visibleMessage }} - </NcButton> - + </NcListItem> + + <div v-else> + <!-- Dashboard Status --> + <NcButton @click.stop="openModal"> + <template #icon> + <NcUserStatusIcon class="user-status-icon" + :status="statusType" + aria-hidden="true" /> + </template> + {{ visibleMessage }} + </NcButton> + </div> <!-- Status management modal --> - <SetStatusModal v-if="isModalOpen" @close="closeModal" /> - </component> + <SetStatusModal v-if="isModalOpen" + :inline="inline" + @close="closeModal" /> + </Fragment> </template> <script> +import { getCurrentUser } from '@nextcloud/auth' import { subscribe, unsubscribe } from '@nextcloud/event-bus' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import { Fragment } from 'vue-frag' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcListItem from '@nextcloud/vue/components/NcListItem' +import NcUserStatusIcon from '@nextcloud/vue/components/NcUserStatusIcon' import debounce from 'debounce' import { sendHeartbeat } from './services/heartbeatService.js' @@ -56,7 +51,10 @@ export default { name: 'UserStatus', components: { + Fragment, NcButton, + NcListItem, + NcUserStatusIcon, SetStatusModal: () => import(/* webpackChunkName: 'user-status-modal' */'./components/SetStatusModal.vue'), }, mixins: [OnlineStatusMixin], @@ -162,7 +160,7 @@ export default { } }, handleUserStatusUpdated(state) { - if (OC.getCurrentUser().uid === state.userId) { + if (getCurrentUser()?.uid === state.userId) { this.$store.dispatch('setStatusFromObject', { status: state.status, icon: state.icon, @@ -175,40 +173,12 @@ export default { </script> <style lang="scss" scoped> -.user-status-menu-item { - // Ensure the maxcontrast color is set for the background - --color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text)); - - width: auto; - min-width: 44px; - height: 44px; - margin: 0; - border: 0; - border-radius: var(--border-radius-pill); - background-color: var(--color-main-background-blur); - font-size: inherit; - font-weight: normal; - - -webkit-backdrop-filter: var(--background-blur); - backdrop-filter: var(--background-blur); - - &:active, - &:hover, - &:focus-visible { - background-color: var(--color-background-hover); - } - &:focus-visible { - box-shadow: 0 0 0 4px var(--color-main-background) !important; - outline: 2px solid var(--color-main-text) !important; - } -} - .user-status-icon { - width: 16px; - height: 16px; - margin-right: 10px; + width: 20px; + height: 20px; + margin: calc((var(--default-clickable-area) - 20px) / 2); // 20px icon size opacity: 1 !important; - background-size: 16px; + background-size: 20px; vertical-align: middle !important; } </style> 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 934adf18d5e..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,26 +11,30 @@ name="user-status-online" @change="onChange"> <label :for="id" class="user-status-online-select__label"> + <NcUserStatusIcon :status="type" + class="user-status-online-select__icon" + aria-hidden="true" /> {{ label }} - <span :class="icon" aria-hidden="true" role="img" /> <em class="user-status-online-select__subline">{{ subline }}</em> </label> </div> </template> <script> +import NcUserStatusIcon from '@nextcloud/vue/components/NcUserStatusIcon' + export default { name: 'OnlineStatusSelect', + components: { + NcUserStatusIcon, + }, + props: { checked: { type: Boolean, default: false, }, - icon: { - type: String, - required: true, - }, type: { type: String, required: true, @@ -77,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% - math.div($icon-size, 2)); - left: $label-padding; - 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 { @@ -123,5 +107,4 @@ $label-padding: 8px; color: var(--color-text-lighter); } } - </style> 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 d763c094895..8624ed19e94 100644 --- a/apps/user_status/src/components/SetStatusModal.vue +++ b/apps/user_status/src/components/SetStatusModal.vue @@ -1,33 +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')"> @@ -40,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"> @@ -84,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' @@ -108,11 +102,23 @@ export default { }, mixins: [OnlineStatusMixin], + props: { + /** + * Whether the component should be rendered as a Dashboard Status or a User Menu Entries + * true = Dashboard Status + * false = User Menu Entries + */ + inline: { + type: Boolean, + default: false, + }, + }, + data() { return { clearAt: null, editedMessage: '', - isCustomStatus: true, + predefinedMessageId: null, isSavingStatus: false, statuses: getAllStatusOptions(), } @@ -138,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}"', { @@ -156,6 +166,13 @@ export default { return this.$t('user_status', 'Reset status') }, + + setReturnFocus() { + if (this.inline) { + return undefined + } + return document.querySelector('[aria-controls="header-menu-user-menu"]') ?? undefined + }, }, watch: { @@ -173,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', @@ -193,7 +211,7 @@ export default { * @param {string} icon The new icon */ setIcon(icon) { - this.isCustomStatus = true + this.predefinedMessageId = null this.$store.dispatch('setCustomMessage', { message: this.message, icon, @@ -209,7 +227,7 @@ export default { * @param {string} message The new message */ setMessage(message) { - this.isCustomStatus = true + this.predefinedMessageId = null this.editedMessage = message }, /** @@ -226,7 +244,7 @@ export default { * @param {object} status The predefined status object */ selectPredefinedMessage(status) { - this.isCustomStatus = false + this.predefinedMessageId = status.id this.clearAt = status.clearAt this.$store.dispatch('setPredefinedMessage', { messageId: status.id, @@ -246,12 +264,17 @@ export default { try { this.isSavingStatus = true - if (this.isCustomStatus) { + 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')) @@ -280,6 +303,7 @@ export default { } this.isSavingStatus = false + this.predefinedMessageId = null this.closeModal() }, /** @@ -301,6 +325,7 @@ export default { } this.isSavingStatus = false + this.predefinedMessageId = this.$store.state.userStatus?.messageId }, }, } @@ -311,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; } } diff --git a/apps/user_status/src/filters/clearAtFilter.js b/apps/user_status/src/filters/clearAtFilter.js index b92a87fbf61..5f62385a978 100644 --- a/apps/user_status/src/filters/clearAtFilter.js +++ b/apps/user_status/src/filters/clearAtFilter.js @@ -1,23 +1,6 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license AGPL-3.0-or-later - * - * 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 */ import { translate as t } from '@nextcloud/l10n' diff --git a/apps/user_status/src/menu.js b/apps/user_status/src/menu.js index abcfe7b7527..34e5e6eabb1 100644 --- a/apps/user_status/src/menu.js +++ b/apps/user_status/src/menu.js @@ -1,37 +1,17 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * @author John Molakvoæ <skjnldsv@protonmail.com> - * @author Julius Härtl <jus@bitgrid.net> - * - * @license AGPL-3.0-or-later - * - * 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 */ -import Vue from 'vue' -import { getRequestToken } from '@nextcloud/auth' +import { getCSPNonce } from '@nextcloud/auth' import { subscribe } from '@nextcloud/event-bus' +import Vue from 'vue' import UserStatus from './UserStatus.vue' - import store from './store/index.js' // eslint-disable-next-line camelcase -__webpack_nonce__ = btoa(getRequestToken()) +__webpack_nonce__ = getCSPNonce() Vue.prototype.t = t Vue.prototype.$t = t diff --git a/apps/user_status/src/mixins/OnlineStatusMixin.js b/apps/user_status/src/mixins/OnlineStatusMixin.js index e9746669f09..5670eb4dc06 100644 --- a/apps/user_status/src/mixins/OnlineStatusMixin.js +++ b/apps/user_status/src/mixins/OnlineStatusMixin.js @@ -1,23 +1,6 @@ /** - * @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com> - * - * @author John Molakvoæ <skjnldsv@protonmail.com> - * - * @license AGPL-3.0-or-later - * - * 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 */ import { mapState } from 'vuex' @@ -68,31 +51,6 @@ export default { return this.$t('user_status', 'Set status') }, - - /** - * The status indicator icon - * - * @return {string | null} - */ - statusIcon() { - switch (this.statusType) { - case 'online': - return 'icon-user-status-online' - - case 'away': - case 'busy': - return 'icon-user-status-away' - - case 'dnd': - return 'icon-user-status-dnd' - - case 'invisible': - case 'offline': - return 'icon-user-status-invisible' - } - - return '' - }, }, methods: { diff --git a/apps/user_status/src/services/clearAtOptionsService.js b/apps/user_status/src/services/clearAtOptionsService.js index 2849e6170f2..af0059bfb7f 100644 --- a/apps/user_status/src/services/clearAtOptionsService.js +++ b/apps/user_status/src/services/clearAtOptionsService.js @@ -1,23 +1,6 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license AGPL-3.0-or-later - * - * 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 */ import { translate as t } from '@nextcloud/l10n' diff --git a/apps/user_status/src/services/clearAtService.js b/apps/user_status/src/services/clearAtService.js index 2d527db0932..f23d267ad02 100644 --- a/apps/user_status/src/services/clearAtService.js +++ b/apps/user_status/src/services/clearAtService.js @@ -1,23 +1,6 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license AGPL-3.0-or-later - * - * 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 */ import { diff --git a/apps/user_status/src/services/dateService.js b/apps/user_status/src/services/dateService.js index 2d110db5998..26a61d4a3e2 100644 --- a/apps/user_status/src/services/dateService.js +++ b/apps/user_status/src/services/dateService.js @@ -1,23 +1,6 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license AGPL-3.0-or-later - * - * 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 */ const dateFactory = () => { diff --git a/apps/user_status/src/services/heartbeatService.js b/apps/user_status/src/services/heartbeatService.js index 6a033f7789b..fda1a1ffc9f 100644 --- a/apps/user_status/src/services/heartbeatService.js +++ b/apps/user_status/src/services/heartbeatService.js @@ -1,23 +1,6 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license AGPL-3.0-or-later - * - * 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 */ import HttpClient from '@nextcloud/axios' diff --git a/apps/user_status/src/services/predefinedStatusService.js b/apps/user_status/src/services/predefinedStatusService.js index 0a4cb55b573..b423c6e0cc4 100644 --- a/apps/user_status/src/services/predefinedStatusService.js +++ b/apps/user_status/src/services/predefinedStatusService.js @@ -1,23 +1,6 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license AGPL-3.0-or-later - * - * 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 */ import HttpClient from '@nextcloud/axios' diff --git a/apps/user_status/src/services/statusOptionsService.js b/apps/user_status/src/services/statusOptionsService.js index 7bd50bf7aff..6c23645e5be 100644 --- a/apps/user_status/src/services/statusOptionsService.js +++ b/apps/user_status/src/services/statusOptionsService.js @@ -1,24 +1,6 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * @author Jan C. Borchardt <hey@jancborchardt.net> - * - * @license AGPL-3.0-or-later - * - * 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 */ import { translate as t } from '@nextcloud/l10n' @@ -32,22 +14,20 @@ const getAllStatusOptions = () => { return [{ type: 'online', label: t('user_status', 'Online'), - icon: 'icon-user-status-online', }, { type: 'away', label: t('user_status', 'Away'), - icon: 'icon-user-status-away', + }, { + type: 'busy', + label: t('user_status', 'Busy'), }, { type: 'dnd', label: t('user_status', 'Do not disturb'), subline: t('user_status', 'Mute all notifications'), - icon: 'icon-user-status-dnd', - }, { type: 'invisible', label: t('user_status', 'Invisible'), subline: t('user_status', 'Appear offline'), - icon: 'icon-user-status-invisible', }] } diff --git a/apps/user_status/src/services/statusService.js b/apps/user_status/src/services/statusService.js index fb77866a4f4..6504411c996 100644 --- a/apps/user_status/src/services/statusService.js +++ b/apps/user_status/src/services/statusService.js @@ -1,23 +1,6 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license AGPL-3.0-or-later - * - * 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 */ import HttpClient from '@nextcloud/axios' @@ -38,7 +21,7 @@ const fetchCurrentStatus = async () => { /** * Fetches the current user-status * - * @param {string} userId + * @param {string} userId Id of the user to fetch the status * @return {Promise<object>} */ const fetchBackupStatus = async (userId) => { @@ -106,7 +89,7 @@ const clearMessage = async () => { /** * Revert the automated status * - * @param {string} messageId + * @param {string} messageId ID of the message to revert * @return {Promise<object>} */ const revertToBackupStatus = async (messageId) => { diff --git a/apps/user_status/src/store/index.js b/apps/user_status/src/store/index.js index 386967fe638..d9cfe674165 100644 --- a/apps/user_status/src/store/index.js +++ b/apps/user_status/src/store/index.js @@ -1,23 +1,6 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license AGPL-3.0-or-later - * - * 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 */ import Vue from 'vue' diff --git a/apps/user_status/src/store/predefinedStatuses.js b/apps/user_status/src/store/predefinedStatuses.js index 1bfb02ec569..6d592ca627e 100644 --- a/apps/user_status/src/store/predefinedStatuses.js +++ b/apps/user_status/src/store/predefinedStatuses.js @@ -1,23 +1,6 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license AGPL-3.0-or-later - * - * 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 */ import { fetchAllPredefinedStatuses } from '../services/predefinedStatusService.js' diff --git a/apps/user_status/src/store/userBackupStatus.js b/apps/user_status/src/store/userBackupStatus.js index 15f870112ca..78e5318de9d 100644 --- a/apps/user_status/src/store/userBackupStatus.js +++ b/apps/user_status/src/store/userBackupStatus.js @@ -1,25 +1,6 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * @copyright Copyright (c) 2023 Joas Schilling <coding@schilljs.com> - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * @author Joas Schilling <coding@schilljs.com> - * - * @license AGPL-3.0-or-later - * - * 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 */ import { diff --git a/apps/user_status/src/store/userStatus.js b/apps/user_status/src/store/userStatus.js index 4ca5bec95c8..9bc86ab5062 100644 --- a/apps/user_status/src/store/userStatus.js +++ b/apps/user_status/src/store/userStatus.js @@ -1,23 +1,6 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license AGPL-3.0-or-later - * - * 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 */ import { |