mirror of https://github.com/elk-zone/elk.git
feat: image previews (#104)
Co-authored-by: lihbr <lihbr@users.noreply.github.com>
This commit is contained in:
parent
a812ea098f
commit
9df9c06f64
|
@ -43,19 +43,27 @@ function getFieldNameIcon(fieldName: string) {
|
|||
if (fieldNameIcons[name])
|
||||
return fieldNameIcons[name]
|
||||
}
|
||||
|
||||
function previewHeader() {
|
||||
openImagePreviewDialog({ src: account.header, alt: `${account.username}'s profile header` })
|
||||
}
|
||||
|
||||
function previewAvatar() {
|
||||
openImagePreviewDialog({ src: account.avatar, alt: account.username })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex flex-col>
|
||||
<div border="b base">
|
||||
<img h-50 w-full object-cover :src="account.header">
|
||||
</div>
|
||||
<button border="b base" z-1>
|
||||
<img h-50 w-full object-cover :src="account.header" @click="previewHeader">
|
||||
</button>
|
||||
<div p4 mt--17 flex flex-col gap-6>
|
||||
<div flex justify-between>
|
||||
<div flex="~ col gap-2 1" min-w-0>
|
||||
<NuxtLink w-fit :to="getAccountPath(account)">
|
||||
<AccountAvatar :account="account" w-30 h-30 />
|
||||
</NuxtLink>
|
||||
<div flex="~ col gap-2 1">
|
||||
<button w-30 h-30 rounded-full bg-black z-2 @click="previewAvatar">
|
||||
<AccountAvatar :account="account" hover:opacity-90 transition-opacity />
|
||||
</button>
|
||||
<div flex flex-col>
|
||||
<ContentRich font-bold text-2xl break-words :content="getDisplayName(account)" :emojis="account.emojis" />
|
||||
<p op50>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { isPreviewHelpOpen, isPublishDialogOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/composables/dialog'
|
||||
import { isImagePreviewDialogOpen, isPreviewHelpOpen, isPublishDialogOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/composables/dialog'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -15,4 +15,7 @@ import { isPreviewHelpOpen, isPublishDialogOpen, isSigninDialogOpen, isUserSwitc
|
|||
<ModalDialog v-model="isPublishDialogOpen">
|
||||
<PublishWidget draft-key="dialog" expanded min-w-180 />
|
||||
</ModalDialog>
|
||||
<ModalDialog v-model="isImagePreviewDialogOpen">
|
||||
<img :src="imagePreview.src" :alt="imagePreview.alt" max-w-95vw max-h-95vh>
|
||||
</ModalDialog>
|
||||
</template>
|
||||
|
|
|
@ -64,7 +64,12 @@ const aspectRatio = computed(() => {
|
|||
aspectRatio,
|
||||
}"
|
||||
border="~ base"
|
||||
object-cover rounded-lg
|
||||
object-cover
|
||||
rounded-lg
|
||||
@click="openImagePreviewDialog({
|
||||
src: attachment.url || attachment.previewUrl!,
|
||||
alt: attachment.description!,
|
||||
})"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import type { Draft } from './statusDrafts'
|
||||
import { STORAGE_KEY_FIRST_VISIT, STORAGE_KEY_ZEN_MODE } from '~/constants'
|
||||
|
||||
export const imagePreview = ref({ src: '', alt: '' })
|
||||
export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, true)
|
||||
export const isZenMode = useLocalStorage(STORAGE_KEY_ZEN_MODE, false)
|
||||
export const toggleZenMode = useToggle(isZenMode)
|
||||
|
@ -8,6 +9,7 @@ export const toggleZenMode = useToggle(isZenMode)
|
|||
export const isUserSwitcherOpen = ref(false)
|
||||
export const isSigninDialogOpen = ref(false)
|
||||
export const isPublishDialogOpen = ref(false)
|
||||
export const isImagePreviewDialogOpen = ref(false)
|
||||
export const isPreviewHelpOpen = ref(isFirstVisit.value)
|
||||
|
||||
export function openUserSwitcher() {
|
||||
|
@ -19,10 +21,6 @@ export function openSigninDialog() {
|
|||
isUserSwitcherOpen.value = false
|
||||
}
|
||||
|
||||
export function openPreviewHelp() {
|
||||
isPreviewHelpOpen.value = true
|
||||
}
|
||||
|
||||
export function openPublishDialog(draft?: Draft) {
|
||||
if (draft)
|
||||
dialogDraft.draft.value = draft
|
||||
|
@ -34,3 +32,12 @@ if (isPreviewHelpOpen.value) {
|
|||
isFirstVisit.value = false
|
||||
})
|
||||
}
|
||||
|
||||
export function openImagePreviewDialog(image: { src: string; alt: string }) {
|
||||
imagePreview.value = image
|
||||
isImagePreviewDialogOpen.value = true
|
||||
}
|
||||
|
||||
export function openPreviewHelp() {
|
||||
isPreviewHelpOpen.value = true
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue