feat: image previews (#104)

Co-authored-by: lihbr <lihbr@users.noreply.github.com>
zio/stable
Lucie 2022-11-25 13:13:44 -05:00 committed by GitHub
parent a812ea098f
commit 9df9c06f64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 13 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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
}