Revert "wip"

This reverts commit af7d86f69d.
This commit is contained in:
tamaina 2023-04-12 13:49:50 +00:00
parent c1d94a45c5
commit bb0036ae22
3 changed files with 9 additions and 36 deletions

View File

@ -476,7 +476,7 @@ regenerate: "再生成"
fontSize: "フォントサイズ" fontSize: "フォントサイズ"
mediaListWithOneImageAppearance: "画像が1枚のみのメディアリストの高さ" mediaListWithOneImageAppearance: "画像が1枚のみのメディアリストの高さ"
expandAsImage: "画像に応じて拡張" expandAsImage: "画像に応じて拡張"
limitTo: "{x}を上限に" fixTo: "{x}に固定"
noFollowRequests: "フォロー申請はありません" noFollowRequests: "フォロー申請はありません"
openImageInNewTab: "画像を新しいタブで開く" openImageInNewTab: "画像を新しいタブで開く"
dashboard: "ダッシュボード" dashboard: "ダッシュボード"

View File

@ -2,14 +2,10 @@
<div> <div>
<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/> <XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
<div v-if="mediaList.filter(media => previewable(media)).length > 0" :class="$style.container"> <div v-if="mediaList.filter(media => previewable(media)).length > 0" :class="$style.container">
<div <div ref="gallery" :class="[
ref="gallery" $style.medias,
:class="[ count <= 4 ? $style['n' + count] : $style.nMany,
$style.medias, $style[`n1${defaultStore.reactiveState.mediaListWithOneImageAppearance.value}`]]">
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))">
<XVideo v-if="media.type.startsWith('video')" :key="`video:${media.id}`" :class="$style.media" :video="media"/> <XVideo v-if="media.type.startsWith('video')" :key="`video:${media.id}`" :class="$style.media" :video="media"/>
<XImage v-else-if="media.type.startsWith('image')" :key="`image:${media.id}`" :class="$style.media" class="image" :data-id="media.id" :image="media" :raw="raw"/> <XImage v-else-if="media.type.startsWith('image')" :key="`image:${media.id}`" :class="$style.media" class="image" :data-id="media.id" :image="media" :raw="raw"/>
@ -20,7 +16,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref, useCssModule, watch } from 'vue'; import { onMounted, ref, useCssModule } from 'vue';
import * as misskey from 'misskey-js'; import * as misskey from 'misskey-js';
import PhotoSwipeLightbox from 'photoswipe/lightbox'; import PhotoSwipeLightbox from 'photoswipe/lightbox';
import PhotoSwipe from 'photoswipe'; import PhotoSwipe from 'photoswipe';
@ -39,34 +35,11 @@ const props = defineProps<{
const $style = useCssModule(); const $style = useCssModule();
const gallery = ref<HTMLDivElement>(); const gallery = ref(null);
const pswpZIndex = os.claimZIndex('middle'); 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 (!(img.properties.width && img.properties.height)) {
gallery.value.style.aspectRatio = '';
return;
}
switch (defaultStore.state.mediaListWithOneImageAppearance) {
//
case '16_9':
gallery.value.style.aspectRatio = Math.max(16 / 9, img.properties.width / img.properties.height).toString();
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
@ -199,7 +172,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
&.n116_9 { &.n116_9 {
max-height: none; max-height: none;
aspect-ratio: 16 / 9; // fallback aspect-ratio: 16/9;
} }
} }

View File

@ -84,7 +84,7 @@
<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.expandAsImage }}</option> <option value="expand">{{ i18n.ts.expandAsImage }}</option>
<option value="16_9">{{ i18n.t('limitTo', { x: '16:9' }) }}</option> <option value="16_9">{{ i18n.t('fixTo', { x: '16:9' }) }}</option>
</MkRadios> </MkRadios>
</div> </div>
</FormSection> </FormSection>