mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-09 19:53:08 +02:00
parent
1a96425768
commit
41e9aa6f9b
2 changed files with 4 additions and 59 deletions
|
@ -7,7 +7,6 @@
|
|||
:class="[
|
||||
$style.medias,
|
||||
count <= 4 ? $style['n' + count] : $style.nMany,
|
||||
$style[`n1${defaultStore.reactiveState.mediaListWithOneImageAppearance.value}`]
|
||||
]"
|
||||
>
|
||||
<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());
|
||||
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(() => {
|
||||
const lightbox = new PhotoSwipeLightbox({
|
||||
dataSource: props.mediaList
|
||||
|
@ -194,36 +162,12 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
|
|||
display: grid;
|
||||
grid-gap: 8px;
|
||||
|
||||
// for webkit
|
||||
height: 100%;
|
||||
|
||||
&.n1 {
|
||||
aspect-ratio: 16/9;
|
||||
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 {
|
||||
|
|
|
@ -56,7 +56,7 @@
|
|||
<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
|
||||
<option value="force">{{ i18n.ts._nsfw.force }}</option>
|
||||
</MkSelect>
|
||||
|
||||
<!--
|
||||
<MkRadios v-model="mediaListWithOneImageAppearance">
|
||||
<template #label>{{ i18n.ts.mediaListWithOneImageAppearance }}</template>
|
||||
<option value="expand">{{ i18n.ts.default }}</option>
|
||||
|
@ -64,6 +64,7 @@
|
|||
<option value="1_1">{{ i18n.t('limitTo', { x: '1:1' }) }}</option>
|
||||
<option value="2_3">{{ i18n.t('limitTo', { x: '2:3' }) }}</option>
|
||||
</MkRadios>
|
||||
-->
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
|
|
Loading…
Reference in a new issue