From 17d0bde50eba66d6990e9cd35dbff3a2a9e21383 Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Tue, 28 Feb 2023 17:26:42 +0900 Subject: [PATCH] =?UTF-8?q?fix(client):=20photoswipe=EF=BC=88=E7=94=BB?= =?UTF-8?q?=E5=83=8F=E3=81=AE=E6=8B=A1=E5=A4=A7=E8=A1=A8=E7=A4=BA=EF=BC=89?= =?UTF-8?q?=E3=81=8C=E3=81=AA=E3=82=93=E3=81=8B=E5=A4=89=20(#10138)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(client): photoswipe(画像の拡大表示)がなんか変 Fix #10037 * important --------- Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> --- .../frontend/src/components/MkMediaList.vue | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue index fafa0bd232..c768a086cd 100644 --- a/packages/frontend/src/components/MkMediaList.vue +++ b/packages/frontend/src/components/MkMediaList.vue @@ -13,7 +13,7 @@ </template> <script lang="ts" setup> -import { onMounted, ref } from 'vue'; +import { onMounted, ref, useCssModule } from 'vue'; import * as misskey from 'misskey-js'; import PhotoSwipeLightbox from 'photoswipe/lightbox'; import PhotoSwipe from 'photoswipe'; @@ -29,8 +29,11 @@ const props = defineProps<{ raw?: boolean; }>(); +const $style = useCssModule(); + const gallery = ref(null); const pswpZIndex = os.claimZIndex('middle'); +document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString()); const count = $computed(() => props.mediaList.filter(media => previewable(media)).length); onMounted(() => { @@ -54,17 +57,18 @@ onMounted(() => { return item; }), gallery: gallery.value, + mainClass: $style.pswp, children: '.image', thumbSelector: '.image', loop: false, padding: window.innerWidth > 500 ? { top: 32, - bottom: 32, + bottom: 90, left: 32, right: 32, } : { top: 0, - bottom: 0, + bottom: 78, left: 0, right: 0, }, @@ -82,6 +86,7 @@ onMounted(() => { const id = element.dataset.id; const file = props.mediaList.find(media => media.id === id); + if (!file) return; itemData.src = file.url; itemData.w = Number(file.properties.width); @@ -198,16 +203,14 @@ const previewable = (file: misskey.entities.DriveFile): boolean => { overflow: hidden; // clipにするとバグる border-radius: 8px; } + +.pswp { + --pswp-root-z-index: var(--mk-pswp-root-z-index, 2000700) !important; + --pswp-bg: var(--modalBg) !important; +} </style> <style lang="scss"> -.pswp { - // なぜか機能しない - //z-index: v-bind(pswpZIndex); - z-index: 2000000; - --pswp-bg: var(--modalBg); -} - .pswp__bg { background: var(--modalBg); backdrop-filter: var(--modalBgFilter); @@ -219,7 +222,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => { align-items: center; position: absolute; - bottom: 30px; + bottom: 20px; left: 50%; transform: translateX(-50%);