aboutsummaryrefslogtreecommitdiffstats
path: root/apps/user_status/src/components/SetStatusModal.vue
diff options
context:
space:
mode:
Diffstat (limited to 'apps/user_status/src/components/SetStatusModal.vue')
-rw-r--r--apps/user_status/src/components/SetStatusModal.vue119
1 files changed, 79 insertions, 40 deletions
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;
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-14 21:09:04 +0000