Mirrors/elk
1
0
Fork 1
mirror of https://github.com/elk-zone/elk.git synced 2024-11-14 04:49:59 +00:00
Code Issues Wiki Activity

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"> <ModalDialog v-model="isPublishDialogOpen">
<PublishWidget :draft-key="dialogDraftKey" expanded min-w-180 /> <PublishWidget :draft-key="dialogDraftKey" expanded min-w-180 />
</ModalDialog> </ModalDialog>
<ModalDialog v-model="isImagePreviewDialogOpen"> <ModalDialog v-model="isImagePreviewDialogOpen" type="preview">
<img :src="imagePreview.src" :alt="imagePreview.alt" max-w-95vw max-h-95vh> <img :src="imagePreview.src" :alt="imagePreview.alt" max-w-95vw max-h-95vh>
</ModalDialog> </ModalDialog>
<ModalDialog v-model="isEditHistoryDialogOpen"> <ModalDialog v-model="isEditHistoryDialogOpen">

10
components/modal/ModalDialog.vue
View file

@ -1,7 +1,7 @@
<script setup lang='ts'> <script setup lang='ts'>
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap' import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
type DialogType = 'top' | 'right' | 'bottom' | 'left' | 'dialog' type DialogType = 'top' | 'right' | 'bottom' | 'left' | 'dialog' | 'preview'
const { const {
type = 'dialog', type = 'dialog',
@ -21,6 +21,8 @@ const positionClass = computed(() => {
switch (type) { switch (type) {
case 'dialog': case 'dialog':
return 'border rounded top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2' 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': case 'bottom':
return 'bottom-0 left-0 right-0 border-t' return 'bottom-0 left-0 right-0 border-t'
case 'top': case 'top':
@ -39,6 +41,8 @@ const transformClass = computed(() => {
switch (type) { switch (type) {
case 'dialog': case 'dialog':
return 'op0' return 'op0'
case 'preview':
return 'op0'
case 'bottom': case 'bottom':
return 'translate-y-[100%]' return 'translate-y-[100%]'
case 'top': case 'top':
@ -119,6 +123,9 @@ function onTransitionEnd() {
> >
<slot /> <slot />
</div> </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> </div>
</SafeTeleport> </SafeTeleport>
</template> </template>
@ -127,6 +134,7 @@ function onTransitionEnd() {
.scrollbar-hide { .scrollbar-hide {
scrollbar-width: none; scrollbar-width: none;
} }
.scrollbar-hide::-webkit-scrollbar { .scrollbar-hide::-webkit-scrollbar {
display: none; display: none;
} }