upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-06-14 19:20:35 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

feat(files): Display mtime in grid view

Browse source 
Signed-off-by: Louis Chemineau <louis@chmn.me>
This commit is contained in:
Louis Chemineau 2024-07-04 15:00:57 +02:00 committed by Ferdinand Thiessen
parent cb3da3d3b3
commit 01cd1e0c36
No known key found for this signature in database
GPG key ID: 45FAE7268762B400
3 changed files with 37 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
apps/files/src/components/FileEntry.vue
View file

@ -84,7 +84,7 @@
class="files-list__row-mtime"
data-cy-files-list-row-mtime
@click="openDetailsIfAvailable">
<NcDateTime v-if="mtime" :timestamp="mtime" :ignore-seconds="true" />
<NcDateTime v-if="source.mtime" :timestamp="source.mtime" :ignore-seconds="true" />
<span v-else>{{ t('files', 'Unknown date') }}</span>
</td>
@ -105,7 +105,6 @@
<script lang="ts">
import { defineComponent } from 'vue'
import { formatFileSize } from '@nextcloud/files'
import moment from '@nextcloud/moment'
import { useNavigation } from '../composables/useNavigation'
import { useActionsMenuStore } from '../store/actionsmenu.ts'
@ -139,18 +138,10 @@ export default defineComponent({
],
props: {
isMtimeAvailable: {
type: Boolean,
default: false,
},
isSizeAvailable: {
type: Boolean,
default: false,
},
compact: {
type: Boolean,
default: false,
},
},
setup() {
@ -222,41 +213,6 @@ export default defineComponent({
color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
}
},
mtimeOpacity() {
const maxOpacityTime = 31 * 24 * 60 * 60 * 1000 // 31 days
const mtime = this.source.mtime?.getTime?.()
if (!mtime) {
return {}
}
// 1 = today, 0 = 31 days ago
const ratio = Math.round(Math.min(100, 100 * (maxOpacityTime - (Date.now() - mtime)) / maxOpacityTime))
if (ratio < 0) {
return {}
}
return {
color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
}
},
mtime() {
// If the mtime is not a valid date, return it as is
if (this.source.mtime && !isNaN(this.source.mtime.getDate())) {
return this.source.mtime
}
if (this.source.crtime && !isNaN(this.source.crtime.getDate())) {
return this.source.crtime
}
return null
},
mtimeTitle() {
if (this.source.mtime) {
return moment(this.source.mtime).format('LLL')
}
return ''
},
},
methods: {

12
apps/files/src/components/FileEntryGrid.vue
View file

@ -63,6 +63,15 @@
@click.native="execDefaultAction" />
</td>
<!-- Mtime -->
<td v-if="!compact && isMtimeAvailable"
:style="mtimeOpacity"
class="files-list__row-mtime"
data-cy-files-list-row-mtime
@click="openDetailsIfAvailable">
<NcDateTime v-if="source.mtime" :timestamp="source.mtime" :ignore-seconds="true" />
</td>
<!-- Actions -->
<FileEntryActions ref="actions"
:class="`files-list__row-actions-${uniqueId}`"
@ -77,6 +86,8 @@
<script lang="ts">
import { defineComponent } from 'vue'
import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
import { useNavigation } from '../composables/useNavigation'
import { useActionsMenuStore } from '../store/actionsmenu.ts'
import { useDragAndDropStore } from '../store/dragging.ts'
@ -97,6 +108,7 @@ export default defineComponent({
FileEntryCheckbox,
FileEntryName,
FileEntryPreview,
NcDateTime,
},
mixins: [

26
apps/files/src/components/FileEntryMixin.ts
View file

@ -54,6 +54,14 @@ export default defineComponent({
type: Number,
default: 0,
},
isMtimeAvailable: {
type: Boolean,
default: false,
},
compact: {
type: Boolean,
default: false,
},
},
provide() {
@ -179,8 +187,22 @@ export default defineComponent({
},
},
isRenaming() {
return this.renamingStore.renamingNode === this.source
mtimeOpacity() {
const maxOpacityTime = 31 * 24 * 60 * 60 * 1000 // 31 days
const mtime = this.source.mtime?.getTime?.()
if (!mtime) {
return {}
}
// 1 = today, 0 = 31 days ago
const ratio = Math.round(Math.min(100, 100 * (maxOpacityTime - (Date.now() - mtime)) / maxOpacityTime))
if (ratio < 0) {
return {}
}
return {
color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
}
},
/**