diff options
Diffstat (limited to 'apps/files/src/components/NavigationQuota.vue')
| -rw-r--r-- | apps/files/src/components/NavigationQuota.vue | 77 |
1 files changed, 54 insertions, 23 deletions
diff --git a/apps/files/src/components/NavigationQuota.vue b/apps/files/src/components/NavigationQuota.vue index bfcbaea3776..46c8e5c9af4 100644 --- a/apps/files/src/components/NavigationQuota.vue +++ b/apps/files/src/components/NavigationQuota.vue @@ -1,6 +1,10 @@ +<!-- + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later + --> <template> <NcAppNavigationItem v-if="storageStats" - :aria-label="t('files', 'Storage informations')" + :aria-description="t('files', 'Storage information')" :class="{ 'app-navigation-entry__settings-quota--not-unlimited': storageStats.quota >= 0}" :loading="loadingStorageStats" :name="storageStatsTitle" @@ -13,25 +17,27 @@ <!-- Progress bar --> <NcProgressBar v-if="storageStats.quota >= 0" slot="extra" + :aria-label="t('files', 'Storage quota')" :error="storageStats.relative > 80" :value="Math.min(storageStats.relative, 100)" /> </NcAppNavigationItem> </template> <script> +import { debounce, throttle } from 'throttle-debounce' import { formatFileSize } from '@nextcloud/files' import { generateUrl } from '@nextcloud/router' import { loadState } from '@nextcloud/initial-state' import { showError } from '@nextcloud/dialogs' -import { debounce, throttle } from 'throttle-debounce' +import { subscribe } from '@nextcloud/event-bus' import { translate } from '@nextcloud/l10n' import axios from '@nextcloud/axios' -import ChartPie from 'vue-material-design-icons/ChartPie.vue' -import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js' -import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js' -import logger from '../logger.js' -import { subscribe } from '@nextcloud/event-bus' +import ChartPie from 'vue-material-design-icons/ChartPieOutline.vue' +import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem' +import NcProgressBar from '@nextcloud/vue/components/NcProgressBar' + +import logger from '../logger.ts' export default { name: 'NavigationQuota', @@ -51,8 +57,8 @@ export default { computed: { storageStatsTitle() { - const usedQuotaByte = formatFileSize(this.storageStats?.used) - const quotaByte = formatFileSize(this.storageStats?.quota) + const usedQuotaByte = formatFileSize(this.storageStats?.used, false, false) + const quotaByte = formatFileSize(this.storageStats?.total, false, false) // If no quota set if (this.storageStats?.quota < 0) { @@ -80,15 +86,26 @@ export default { */ setInterval(this.throttleUpdateStorageStats, 60 * 1000) - subscribe('files:file:created', this.throttleUpdateStorageStats) - subscribe('files:file:deleted', this.throttleUpdateStorageStats) - subscribe('files:file:moved', this.throttleUpdateStorageStats) - subscribe('files:file:updated', this.throttleUpdateStorageStats) + subscribe('files:node:created', this.throttleUpdateStorageStats) + subscribe('files:node:deleted', this.throttleUpdateStorageStats) + subscribe('files:node:moved', this.throttleUpdateStorageStats) + subscribe('files:node:updated', this.throttleUpdateStorageStats) + }, - subscribe('files:folder:created', this.throttleUpdateStorageStats) - subscribe('files:folder:deleted', this.throttleUpdateStorageStats) - subscribe('files:folder:moved', this.throttleUpdateStorageStats) - subscribe('files:folder:updated', this.throttleUpdateStorageStats) + mounted() { + // If the user has a quota set, warn if the available account storage is <=0 + // + // NOTE: This doesn't catch situations where actual *server* + // disk (non-quota) space is low, but those should probably + // be handled differently anyway since a regular user can't + // can't do much about them (If we did want to indicate server disk + // space matters to users, we'd probably want to use a warning + // specific to that situation anyhow. So this covers warning covers + // our primary day-to-day concern (individual account quota usage). + // + if (this.storageStats?.quota > 0 && this.storageStats?.free === 0) { + this.showStorageFullWarning() + } }, methods: { @@ -105,7 +122,7 @@ export default { * Update the storage stats * Throttled at max 1 refresh per minute * - * @param {Event} [event = null] if user interaction + * @param {Event} [event] if user interaction */ async updateStorageStats(event = null) { if (this.loadingStorageStats) { @@ -118,6 +135,13 @@ export default { if (!response?.data?.data) { throw new Error('Invalid storage stats') } + + // Warn the user if the available account storage changed from > 0 to 0 + // (unless only because quota was intentionally set to 0 by admin in the interim) + if (this.storageStats?.free > 0 && response.data.data?.free === 0 && response.data.data?.quota > 0) { + this.showStorageFullWarning() + } + this.storageStats = response.data.data } catch (error) { logger.error('Could not refresh storage stats', { error }) @@ -130,6 +154,10 @@ export default { } }, + showStorageFullWarning() { + showError(this.t('files', 'Your storage is full, files can not be updated or synced anymore!')) + }, + t: translate, }, } @@ -139,15 +167,18 @@ export default { // User storage stats display .app-navigation-entry__settings-quota { // Align title with progress and icon - &--not-unlimited::v-deep .app-navigation-entry__title { - margin-top: -4px; + --app-navigation-quota-margin: calc((var(--default-clickable-area) - 24px) / 2); // 20px icon size and 4px progress bar + + &--not-unlimited :deep(.app-navigation-entry__name) { + line-height: 1; + margin-top: var(--app-navigation-quota-margin); } progress { position: absolute; - bottom: 10px; - margin-left: 44px; - width: calc(100% - 44px - 22px); + bottom: var(--app-navigation-quota-margin); + margin-inline-start: var(--default-clickable-area); + width: calc(100% - (1.5 * var(--default-clickable-area))); } } </style> |