CloudToys/elk
1
0
Fork 0
Code

feat: closable image preview (#239)

Browse Source
This commit is contained in:
Shinigami 2022-11-29 21:37:45 +01:00 committed by GitHub
parent 9af2956b1e
commit e11ed6250d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/modal/ModalContainer.vue
View File

@ -18,7 +18,7 @@ import {
<ModalDialog v-model="isPublishDialogOpen">
<PublishWidget :draft-key="dialogDraftKey" expanded min-w-180 />
</ModalDialog>
<ModalDialog v-model="isImagePreviewDialogOpen">
<ModalDialog v-model="isImagePreviewDialogOpen" type="preview">
<img :src="imagePreview.src" :alt="imagePreview.alt" max-w-95vw max-h-95vh>
</ModalDialog>
<ModalDialog v-model="isEditHistoryDialogOpen">

10
components/modal/ModalDialog.vue
View File

@ -1,7 +1,7 @@
<script setup lang='ts'>
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
type DialogType = 'top' | 'right' | 'bottom' | 'left' | 'dialog'
type DialogType = 'top' | 'right' | 'bottom' | 'left' | 'dialog' | 'preview'
const {
type = 'dialog',
@ -21,6 +21,8 @@ const positionClass = computed(() => {
switch (type) {
case 'dialog':
return 'border rounded top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2'
case 'preview':
return 'border rounded top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2'
case 'bottom':
return 'bottom-0 left-0 right-0 border-t'
case 'top':
@ -39,6 +41,8 @@ const transformClass = computed(() => {
switch (type) {
case 'dialog':
return 'op0'
case 'preview':
return 'op0'
case 'bottom':
return 'translate-y-[100%]'
case 'top':
@ -119,6 +123,9 @@ function onTransitionEnd() {
>
<slot />
</div>
<button v-if="type === 'preview'" btn-action-icon bg="black/20" hover:bg="black/40" dark:bg="white/10" dark:hover:bg="white/20" absolute top-0 right-0 m1 @click="close">
<div i-ri:close-fill text-white />
</button>
</div>
</SafeTeleport>
</template>
@ -127,6 +134,7 @@ function onTransitionEnd() {
.scrollbar-hide {
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}