727d05915f
* fix: rtl arrows on settings page * fix: border on settings page for RTL languages * fix: RTL fixes for logo, search box and logout icon * fix: RTL layout bugs in conversations * chore: remove rtl setting icon * improve arabic locale * add new entries to arabic locale * chore: include number format * fix: RTL layout on several pages * fix: RTL layout of account header and sign in modal * fix: always display account handle in LTR * fix: move character counter in publish widget to left side for RTL * fix: remove border-ss-none unocss rule * fix: many RTL fixes * fix: RTL fixes for many pages * fix: use viewer's direction in all content * chore: use new arabic plural rules * chore: flip arrow on main content header * chore: fix StatusPoll and show_new_items for zh-TW * chore: StatusPoll tooltip on bottom * chore: add `en` variants to i18n conf * chore: update entry to use new plural rule * fix: automatic content direction for status * fix: direction for account handle * fix: direction of polls Co-authored-by: userquin <userquin@gmail.com> Co-authored-by: Jean-Paul Khawam <jeanpaulkhawam@protonmail.com> Co-authored-by: Daniel Roe <daniel@roe.dev>
72 lines
2.4 KiB
Vue
72 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
const emit = defineEmits(['close'])
|
|
|
|
const current = computed(() => mediaPreviewList.value[mediaPreviewIndex.value])
|
|
const hasNext = computed(() => mediaPreviewIndex.value < mediaPreviewList.value.length - 1)
|
|
const hasPrev = computed(() => mediaPreviewIndex.value > 0)
|
|
|
|
const keys = useMagicKeys()
|
|
|
|
whenever(keys.arrowLeft, prev)
|
|
whenever(keys.arrowRight, next)
|
|
|
|
function next() {
|
|
if (hasNext.value)
|
|
mediaPreviewIndex.value++
|
|
}
|
|
|
|
function prev() {
|
|
if (hasPrev.value)
|
|
mediaPreviewIndex.value--
|
|
}
|
|
|
|
function onClick(e: MouseEvent) {
|
|
const path = e.composedPath() as HTMLElement[]
|
|
const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO', 'P'].includes(el.tagName?.toUpperCase()))
|
|
if (!el)
|
|
emit('close')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div relative h-full w-full flex pt-12 @click="onClick">
|
|
<button
|
|
v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
|
|
hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20" absolute top="1/2" right-1
|
|
:title="$t('action.next')" @click="next"
|
|
>
|
|
<div i-ri:arrow-right-s-line text-white />
|
|
</button>
|
|
<button
|
|
v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" aria-label="action.next"
|
|
hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20" absolute top="1/2" left-1
|
|
:title="$t('action.prev')" @click="prev"
|
|
>
|
|
<div i-ri:arrow-left-s-line text-white />
|
|
</button>
|
|
<img
|
|
:src="current.url || current.previewUrl" :alt="current.description || ''" max-h-full max-w-full ma
|
|
>
|
|
|
|
<div absolute top-0 w-full flex justify-between>
|
|
<button
|
|
btn-action-icon bg="black/30" aria-label="action.close" hover:bg="black/40" dark:bg="white/30"
|
|
dark:hover:bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
|
|
>
|
|
<div i-ri:close-line text-white />
|
|
</button>
|
|
<div bg="black/30" dark:bg="white/10" ms-4 my-auto text-white rounded-full flex="~ center" overflow-hidden>
|
|
<div v-if="mediaPreviewList.length > 1" p="y-1 x-2" rounded-r-0 shrink-0>
|
|
{{ mediaPreviewIndex + 1 }} / {{ mediaPreviewList.length }}
|
|
</div>
|
|
<p
|
|
v-if="current.description" bg="dark/30" dark:bg="white/10" p="y-1 x-2" rounded-ie-full line-clamp-1
|
|
ws-pre-wrap break-all :title="current.description" w-full
|
|
>
|
|
{{ current.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|