diff options
| author | Ferdinand Thiessen <opensource@fthiessen.de> | 2024-06-17 11:22:25 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-06-17 11:22:25 +0200 |
| commit | 0b805eab382e0235fa560c703f942fd5bc925062 (patch) | |
| tree | 0f3b0df43e10f7dbdf78cdf3ef1a7beaf9fcea75 /apps | |
| parent | 121c8dbe1b2c4e95b2848f109eb262db633ca3aa (diff) | |
| parent | 879120dd416a95bac6aa944bdbf0c1a4f5702321 (diff) | |
| download | nextcloud-server-0b805eab382e0235fa560c703f942fd5bc925062.tar.gz nextcloud-server-0b805eab382e0235fa560c703f942fd5bc925062.zip | |
Merge pull request #45900 from nextcloud/fix/files-versions-date
fix(files_versions): Use `NcDateTime` for proper translated version dates
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/files_versions/src/components/Version.vue | 62 |
1 files changed, 35 insertions, 27 deletions
diff --git a/apps/files_versions/src/components/Version.vue b/apps/files_versions/src/components/Version.vue index 144aae33922..c6d44edaf06 100644 --- a/apps/files_versions/src/components/Version.vue +++ b/apps/files_versions/src/components/Version.vue @@ -28,9 +28,13 @@ <!-- author --> <template #name> <div class="version__info"> - <div v-if="versionLabel" class="version__info__label">{{ versionLabel }}</div> + <div v-if="versionLabel" + class="version__info__label" + :title="versionLabel"> + {{ versionLabel }} + </div> <div v-if="versionAuthor" class="version__info"> - <div v-if="versionLabel">•</div> + <span v-if="versionLabel">•</span> <NcAvatar class="avatar" :user="version.author" :size="16" @@ -45,10 +49,12 @@ <!-- Version file size as subline --> <template #subname> <div class="version__info version__info__subline"> - <span :title="formattedDate">{{ version.mtime | humanDateFromNow }}</span> + <NcDateTime class="version__info__date" + relative-time="short" + :timestamp="version.mtime" /> <!-- Separate dot to improve alignement --> <span>•</span> - <span>{{ version.size | humanReadableSize }}</span> + <span>{{ humanReadableSize }}</span> </div> </template> @@ -105,6 +111,7 @@ </template> <script lang="ts"> +import type { PropType } from 'vue' import type { Version } from '../utils/versions' import BackupRestore from 'vue-material-design-icons/BackupRestore.vue' @@ -117,17 +124,18 @@ import Pencil from 'vue-material-design-icons/Pencil.vue' import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js' import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' +import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js' import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' -import { defineComponent, type PropType } from 'vue' -import axios from '@nextcloud/axios' import { getRootUrl, generateOcsUrl } from '@nextcloud/router' import { joinPaths } from '@nextcloud/paths' import { loadState } from '@nextcloud/initial-state' import { Permission, formatFileSize } from '@nextcloud/files' import { translate as t } from '@nextcloud/l10n' -import moment from '@nextcloud/moment' +import { defineComponent } from 'vue' + +import axios from '@nextcloud/axios' const hasPermission = (permissions: number, permission: number): boolean => (permissions & permission) !== 0 @@ -138,6 +146,7 @@ export default defineComponent({ NcActionLink, NcActionButton, NcAvatar, + NcDateTime, NcListItem, BackupRestore, Download, @@ -151,20 +160,6 @@ export default defineComponent({ tooltip: Tooltip, }, - created() { - this.fetchDisplayName() - }, - - filters: { - humanReadableSize(bytes: number): string { - return formatFileSize(bytes) - }, - - humanDateFromNow(timestamp: number): string { - return moment(timestamp).fromNow() - }, - }, - props: { version: { type: Object as PropType<Version>, @@ -208,6 +203,10 @@ export default defineComponent({ }, computed: { + humanReadableSize() { + return formatFileSize(this.version.size) + }, + versionLabel(): string { const label = this.version.label ?? '' @@ -234,10 +233,6 @@ export default defineComponent({ } }, - formattedDate(): string { - return moment(this.version.mtime).format('LLL') - }, - enableLabeling(): boolean { return this.capabilities.files.version_labeling === true }, @@ -273,6 +268,10 @@ export default defineComponent({ }, }, + created() { + this.fetchDisplayName() + }, + methods: { labelUpdate() { this.$emit('label-update-request') @@ -338,11 +337,20 @@ export default defineComponent({ &__label { font-weight: 700; + // Fix overflow on narrow screens + overflow: hidden; + text-overflow: ellipsis; + } + + &__date { + // Fix overflow on narrow screens + overflow: hidden; + text-overflow: ellipsis; } &__subline { - color: var(--color-text-maxcontrast) - } + color: var(--color-text-maxcontrast) + } } &__image { |