Merge branch 'develop' into bh-worker

packages/frontend/src/components/MkMediaList.vue

@@ -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 {

packages/frontend/src/components/MkWindow.vue

@@ -29,7 +29,7 @@
 					<button v-if="closeButton" v-tooltip="i18n.ts.close" class="_button" :class="$style.headerButton" @click="close()"><i class="ti ti-x"></i></button>
 				</span>
 			</div>
-			<div v-container :class="$style.content">
+			<div :class="$style.content">
 				<slot></slot>
 			</div>
 		</div>
@@ -541,7 +541,7 @@ defineExpose({
 	flex: 1;
 	overflow: auto;
 	background: var(--panel);
-	container-type: inline-size;
+	container-type: size;
 }
 
 $handleSize: 8px;

packages/frontend/src/directives/container.ts

@@ -1,21 +0,0 @@
-import { Directive } from 'vue';
-
-const map = new WeakMap<HTMLElement, ResizeObserver>();
-
-export default {
-	mounted(el: HTMLElement, binding, vn) {
-		const ro = new ResizeObserver((entries, observer) => {
-			el.style.setProperty('--containerHeight', el.offsetHeight + 'px');
-		});
-		ro.observe(el);
-		map.set(el, ro);
-	},
-
-	unmounted(el, binding, vn) {
-		const ro = map.get(el);
-		if (ro) {
-			ro.disconnect();
-			map.delete(el);
-		}
-	},
-} as Directive;

packages/frontend/src/directives/index.ts

@@ -11,7 +11,6 @@ import clickAnime from './click-anime';
 import panel from './panel';
 import adaptiveBorder from './adaptive-border';
 import adaptiveBg from './adaptive-bg';
-import container from './container';
 
 export default function(app: App) {
 	for (const [key, value] of Object.entries(directives)) {
@@ -32,5 +31,4 @@ export const directives = {
 	'panel': panel,
 	'adaptive-border': adaptiveBorder,
 	'adaptive-bg': adaptiveBg,
-	'container': container,
 };

packages/frontend/src/pages/channel-editor.vue

@@ -81,7 +81,7 @@ let name = $ref(null);
 let description = $ref(null);
 let bannerUrl = $ref<string | null>(null);
 let bannerId = $ref<string | null>(null);
-let color = $ref(null);
+let color = $ref('#000');
 const pinnedNotes = ref([]);
 
 watch(() => bannerId, async () => {

packages/frontend/src/pages/channel.vue

@@ -206,7 +206,7 @@ definePageMetadata(computed(() => channel ? {
 
 <style lang="scss" module>
 .main {
-	min-height: calc(var(--containerHeight) - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
+	min-height: calc(100cqh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
 }
 
 .footer {

packages/frontend/src/pages/my-lists/list.vue

@@ -131,7 +131,7 @@ definePageMetadata(computed(() => list ? {
 
 <style lang="scss" module>
 .main {
-	min-height: calc(var(--containerHeight) - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
+	min-height: calc(100cqh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
 }
 
 .userItem {

packages/frontend/src/pages/settings/general.vue

@@ -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>
 

packages/frontend/src/ui/deck/column.vue

@@ -22,7 +22,7 @@
 		<span :class="$style.title"><slot name="header"></slot></span>
 		<button v-tooltip="i18n.ts.settings" :class="$style.menu" class="_button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
 	</header>
-	<div v-show="active" ref="body" v-container :class="$style.body">
+	<div v-show="active" ref="body" :class="$style.body">
 		<slot></slot>
 	</div>
 </section>
@@ -362,7 +362,7 @@ function onDrop(ev) {
 	overflow-x: clip;
 	-webkit-overflow-scrolling: touch;
 	box-sizing: border-box;
-	container-type: inline-size;
+	container-type: size;
 	background-color: var(--bg);
 }
 </style>

packages/frontend/src/ui/universal.vue

@@ -2,10 +2,10 @@
 <div :class="[$style.root, { [$style.withWallpaper]: wallpaper }]">
 	<XSidebar v-if="!isMobile" :class="$style.sidebar"/>
 
-	<MkStickyContainer v-container :class="$style.contents">
+	<MkStickyContainer :class="$style.contents">
 		<template #header><XStatusBars :class="$style.statusbars"/></template>
 		<main style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
-			<div :class="$style.content" style="container-type: inline-size;">
+			<div :class="$style.content" style="container-type: size;">
 				<RouterView/>
 			</div>
 			<div :class="$style.spacer"></div>