mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-07-26 21:44:37 +02:00
Code Releases Activity

Update MkImageGallery.item.vue

Browse Source
This commit is contained in:
syuilo
2026-07-11 11:10:49 +09:00
parent afb72ac3b0
commit a21a93190e
1 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/frontend/src/components/MkImageGallery.item.vue
View File

@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
@transitionend.self="enableTransition = false"
@transitioncancel.self="enableTransition = false"
>
<div :class="$style.contentWrapper">
<div :class="[$style.contentWrapper, { [$style.hideForFallback]: hideForFallback }]">
<img
v-if="(!originalContentLoaded || !thumbnailContentLoaded) && (content.thumbnailUrl != null)"
:class="[$style.content, $style.thumbnail]"
@@ -148,6 +148,7 @@ const originalContentLoaded = ref(false);
const thumbnailContentLoaded = ref(false);
const enableTransition = ref(false);
const infoShowing = ref(false);
let canOpenAnimation = false;
onMounted(() => {
if (rootEl.value == null) return;
@@ -211,9 +212,12 @@ if (props.content.sourceElement != null && props.activated) {
transform.value.scale = sourceTransform.scale;
transform.value.x = sourceTransform.x;
transform.value.y = sourceTransform.y;
canOpenAnimation = true;
}
}
const hideForFallback = ref(!canOpenAnimation);
const isZooming = ref(false);
function zoomInTo(x: number, y: number, factor = 1.1, withAnimation = false) {
@@ -257,19 +261,23 @@ function closeThis() {
if (rootEl.value == null) return;
enableTransition.value = true;
rootEl.value.offsetHeight; // reflow
const sourceTransform = getScaleAndTranslationForSourceElement();
if (sourceTransform != null) {
enableTransition.value = true;
rootEl.value.offsetHeight; // reflow
transform.value.x = sourceTransform.x;
transform.value.y = sourceTransform.y;
transform.value.scale = sourceTransform.scale;
} else {
transform.value.y = transform.value.y > 0 ? window.innerHeight : -window.innerHeight;
hideForFallback.value = true;
}
}
onMounted(() => {
rootEl.value.offsetHeight; // reflow
hideForFallback.value = false;
});
function onWheel(event: WheelEvent) {
event.preventDefault();
@@ -605,6 +613,12 @@ function onCLick() {
position: relative;
width: 100%;
height: 100%;
transition: scale 200ms ease, opacity 200ms ease !important;
}
.hideForFallback {
scale: 0.7 !important;
opacity: 0 !important;
}
.footer {