fix(frontend): センシティブ設定された画像を開くとき一瞬レイアウトが崩れる問題を修正

Fix #10801
This commit is contained in:
syuilo 2023-05-08 18:23:35 +09:00
parent 1a96425768
commit 41e9aa6f9b
2 changed files with 4 additions and 59 deletions

View file

@ -7,7 +7,6 @@
:class="[ :class="[
$style.medias, $style.medias,
count <= 4 ? $style['n' + count] : $style.nMany, count <= 4 ? $style['n' + count] : $style.nMany,
$style[`n1${defaultStore.reactiveState.mediaListWithOneImageAppearance.value}`]
]" ]"
> >
<template v-for="media in mediaList.filter(media => previewable(media))"> <template v-for="media in mediaList.filter(media => previewable(media))">
@ -44,37 +43,6 @@ const pswpZIndex = os.claimZIndex('middle');
document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString()); document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
const count = $computed(() => props.mediaList.filter(media => previewable(media)).length); const count = $computed(() => props.mediaList.filter(media => previewable(media)).length);
function calcAspectRatio() {
if (!gallery.value) return;
let img = props.mediaList[0];
if (props.mediaList.length !== 1 || !(img.properties.width && img.properties.height)) {
gallery.value.style.aspectRatio = '';
return;
}
//
const ratioMax = (ratio: number) => `${Math.max(ratio, img.properties.width / img.properties.height).toString()} / 1`;
switch (defaultStore.state.mediaListWithOneImageAppearance) {
case '16_9':
gallery.value.style.aspectRatio = ratioMax(16 / 9);
break;
case '1_1':
gallery.value.style.aspectRatio = ratioMax(1);
break;
case '2_3':
gallery.value.style.aspectRatio = ratioMax(2 / 3);
break;
default:
gallery.value.style.aspectRatio = '';
break;
}
}
watch([defaultStore.reactiveState.mediaListWithOneImageAppearance, gallery], () => calcAspectRatio());
onMounted(() => { onMounted(() => {
const lightbox = new PhotoSwipeLightbox({ const lightbox = new PhotoSwipeLightbox({
dataSource: props.mediaList dataSource: props.mediaList
@ -194,36 +162,12 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
display: grid; display: grid;
grid-gap: 8px; grid-gap: 8px;
// for webkit
height: 100%; height: 100%;
&.n1 { &.n1 {
aspect-ratio: 16/9;
grid-template-rows: 1fr; grid-template-rows: 1fr;
// default (expand)
min-height: 64px;
max-height: clamp(
64px,
calc(var(--containerHeight, 100svh) * 0.5), // but --containerHeight can broken (too big)
min(334px, 50vh)
);
&.n116_9 {
min-height: none;
max-height: none;
aspect-ratio: 16 / 9; // fallback
}
&.n11_1{
min-height: none;
max-height: none;
aspect-ratio: 1 / 1; // fallback
}
&.n12_3 {
min-height: none;
max-height: none;
aspect-ratio: 2 / 3; // fallback
}
} }
&.n2 { &.n2 {

View file

@ -56,7 +56,7 @@
<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option> <option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
<option value="force">{{ i18n.ts._nsfw.force }}</option> <option value="force">{{ i18n.ts._nsfw.force }}</option>
</MkSelect> </MkSelect>
<!--
<MkRadios v-model="mediaListWithOneImageAppearance"> <MkRadios v-model="mediaListWithOneImageAppearance">
<template #label>{{ i18n.ts.mediaListWithOneImageAppearance }}</template> <template #label>{{ i18n.ts.mediaListWithOneImageAppearance }}</template>
<option value="expand">{{ i18n.ts.default }}</option> <option value="expand">{{ i18n.ts.default }}</option>
@ -64,6 +64,7 @@
<option value="1_1">{{ i18n.t('limitTo', { x: '1:1' }) }}</option> <option value="1_1">{{ i18n.t('limitTo', { x: '1:1' }) }}</option>
<option value="2_3">{{ i18n.t('limitTo', { x: '2:3' }) }}</option> <option value="2_3">{{ i18n.t('limitTo', { x: '2:3' }) }}</option>
</MkRadios> </MkRadios>
-->
</div> </div>
</FormSection> </FormSection>