diff options
| author | nfebe <fenn25.fn@gmail.com> | 2025-03-21 16:16:55 +0100 |
|---|---|---|
| committer | nfebe <fenn25.fn@gmail.com> | 2025-03-27 19:56:05 +0100 |
| commit | b8cab3af578b58db48aa2dc3a0a2624519433b31 (patch) | |
| tree | b949e580b97babdcb88810d4d98db7efc62d6abe | |
| parent | e9ce055076ee98392361ec0369c243b593f29885 (diff) | |
| download | nextcloud-server-b8cab3af578b58db48aa2dc3a0a2624519433b31.tar.gz nextcloud-server-b8cab3af578b58db48aa2dc3a0a2624519433b31.zip | |
feat(files_sharing): Show share expiration time in human friendly manner
Signed-off-by: nfebe <fenn25.fn@gmail.com>
| -rw-r--r-- | apps/files_sharing/src/components/ShareExpiryTime.vue | 35 |
1 files changed, 24 insertions, 11 deletions
diff --git a/apps/files_sharing/src/components/ShareExpiryTime.vue b/apps/files_sharing/src/components/ShareExpiryTime.vue index ab6ed2973c9..b789bc92db5 100644 --- a/apps/files_sharing/src/components/ShareExpiryTime.vue +++ b/apps/files_sharing/src/components/ShareExpiryTime.vue @@ -9,14 +9,19 @@ <NcButton v-if="expiryTime" class="hint-icon" type="tertiary" - :aria-label="formattedExpiry"> + :aria-label="t('files_sharing', 'Share expiration: ') + new Date(expiryTime).toLocaleString()"> <template #icon> <ClockIcon :size="20" /> </template> </NcButton> </template> + <h3 class="hint-heading"> + {{ t('files_sharing', 'Share Expiration') }} + </h3> <p v-if="expiryTime" class="hint-body"> - {{ formattedExpiry }} + <NcDateTime :timestamp="expiryTime" + :format="timeFormat" + :relative-time="false" /> (<NcDateTime :timestamp="expiryTime" />) </p> </NcPopover> </div> @@ -25,6 +30,7 @@ <script> import NcButton from '@nextcloud/vue/components/NcButton' import NcPopover from '@nextcloud/vue/components/NcPopover' +import NcDateTime from '@nextcloud/vue/components/NcDateTime' import ClockIcon from 'vue-material-design-icons/Clock.vue' export default { @@ -33,6 +39,7 @@ export default { components: { NcButton, NcPopover, + NcDateTime, ClockIcon, }, @@ -45,13 +52,10 @@ export default { computed: { expiryTime() { - return this.share?.expireDate || null + return this.share?.expireDate ? new Date(this.share.expireDate).getTime() : null }, - - formattedExpiry() { - return this.expiryTime - ? this.t('files_sharing', 'Share expires on {datetime}', { datetime: this.expiryTime }) - : '' + timeFormat() { + return { dateStyle: 'full', timeStyle: 'short' } }, }, } @@ -71,8 +75,17 @@ export default { } } +.hint-heading { + text-align: center; + font-size: 1rem; + margin-top: 8px; + padding-bottom: 8px; + margin-bottom: 0; + border-bottom: 1px solid var(--color-border); +} + .hint-body { - padding: var(--border-radius-element); - max-width: 300px; - } + padding: var(--border-radius-element); + max-width: 300px; +} </style> |