wip

locales/ja-JP.yml

@@ -1412,6 +1412,7 @@ nothingToConfigure: "設定項目はありません"
 viewRenotedChannel: "リノート先のチャンネルを見る"
 previewingTheme: "テーマのプレビュー中"
 previewingThemeRestore: "元に戻す"
+choose: "選択"
 
 _imageEditing:
   _vars:
@@ -3575,3 +3576,7 @@ _miRoom:
   revertAllChangesConfirmation: "全ての変更を取り消し、部屋を最後に保存した状態まで戻しますか？"
   yourDeviceNotSupported_title: "MisskeyRoomを起動できません"
   yourDeviceNotSupported_description: "お使いのデバイスがMisskeyRoomをサポートしていないか、デバイスのリソース不足などにより一時的に利用できなくなっています。\nMisskeyRoomを動作させるには、WebGPUをサポートするデバイス・ブラウザが必要です。"
+  imageFit: "画像のはめ込み"
+  imageFit_cover: "覆う"
+  imageFit_contain: "収める"
+  imageFit_stretch: "引き伸ばす"

packages/frontend/src/components/MkButton.vue

@@ -22,8 +22,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { nextTick, computed, onMounted, useTemplateRef } from 'vue';
-import MkA from '@/components/global/MkA.vue';
 import type { MkABehavior } from '@/components/global/MkA.vue';
+import MkA from '@/components/global/MkA.vue';
 
 const props = defineProps<{
 	type?: 'button' | 'submit' | 'reset' | 'a' | 'routerLink';
@@ -163,7 +163,7 @@ function onMousedown(evt: MouseEvent): void {
 
 	&.iconOnly {
 		padding: 7px;
-		min-width: auto;
+		min-width: auto !important;
 	}
 
 	&.small {

packages/frontend/src/pages/rooms/room.core.vue

@@ -70,8 +70,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</div>
 
-	<div v-if="controller.isReady.value && controller.isEditMode.value && controller.selected.value != null && selectedObjectDef != null && !controller.grabbing.value" :key="controller.selected.value.objectId" class="_panel" :class="$style.overlayObjectInfoPanel">
-		{{ selectedObjectDef.name }}
+	<div v-if="controller.isReady.value && controller.isEditMode.value && controller.selected.value != null && selectedObjectDef != null && !controller.grabbing.value" :key="controller.selected.value.objectId" :class="$style.overlayObjectInfoPanel">
+		<div style="margin-bottom: 8px; font-weight: bold; text-align: center;">{{ selectedObjectDef.name }}</div>
 
 		<XObjectCustomizeForm :addFileAttachment="addFileAttachment" :schema="selectedObjectDef.options.schema" :options="controller.selected.value.objectState.options" @update="(k, v) => updateObjectOption(k, v)"></XObjectCustomizeForm>
 	</div>
@@ -785,6 +785,10 @@ function showOtherMenu(ev: PointerEvent) {
 	max-height: 100%;
 	box-sizing: border-box;
 	overflow: auto;
+	border-radius: 12px;
+	background: color(from var(--MI_THEME-panel) srgb r g b / 0.5);
+	-webkit-backdrop-filter: blur(15px);
+	backdrop-filter: blur(15px);
 }
 
 .loading {

packages/frontend/src/pages/rooms/room.object-customize-form.vue

@@ -5,9 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root">
-	<div class="_gaps">
-		<div v-for="[k, s] in Object.entries(schema)" :key="k">
-			<div>{{ s.label }}</div>
+	<div class="_gaps_s">
+		<MkFolder v-for="[k, s] in Object.entries(schema)" :key="k" defaultOpen>
+			<template #label>{{ s.label }}</template>
 			<div v-if="s.type === 'color'">
 				<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
 				<MkInput :modelValue="getHex(options[k])" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) emit('update', k, c); }"></MkInput>
@@ -24,20 +24,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-else-if="s.type === 'range'">
 				<MkRange :continuousUpdate="true" :min="s.min" :max="s.max" :step="s.step" :modelValue="options[k]" @update:modelValue="v => emit('update', k, v)"></MkRange>
 			</div>
-			<div v-else-if="s.type === 'image'">
+			<div v-else-if="s.type === 'image'" class="_gaps_s">
 				<MkSelect :items="[{ label: i18n.ts.none, value: null }, { label: i18n.ts.custom, value: '_custom_' }, ...(s.presets.length > 0 ? [{ type: 'divider' } as const] : []), ...s.presets.map(e => ({ label: e.label, value: e.value }))]" :modelValue="options[k].type" @update:modelValue="v => changeImageType(k, v)"></MkSelect>
 
-				<div v-if="options[k].type === '_custom_'">
-					<MkButton primary inline @click="changeImage(k)">Change</MkButton>
+				<div v-if="options[k].type === '_custom_'" class="_buttons">
+					<MkButton primary inline @click="changeImage(k)"><i class="ti ti-cloud"></i> {{ i18n.ts.choose }}...</MkButton>
 					<MkButton v-if="options[k].driveFileId != null" danger inline iconOnly @click="clearImage(k)"><i class="ti ti-x"></i></MkButton>
 				</div>
 
-				<MkRadios :options="[{ label: 'cover', value: 'cover' }, { label: 'contain', value: 'contain' }, { label: 'stretch', value: 'stretch' }]" :modelValue="options[k].fit ?? 'cover'" @update:modelValue="v => changeImageFit(k, v)"></MkRadios>
+				<hr>
+
+				<MkRadios :options="[{ label: i18n.ts._miRoom.imageFit_cover, value: 'cover' }, { label: i18n.ts._miRoom.imageFit_contain, value: 'contain' }, { label: i18n.ts._miRoom.imageFit_stretch, value: 'stretch' }]" :modelValue="options[k].fit ?? 'cover'" @update:modelValue="v => changeImageFit(k, v)">
+					<template #label>{{ i18n.ts._miRoom.imageFit }}</template>
+				</MkRadios>
 			</div>
 			<div v-else-if="s.type === 'seed'">
 				<MkRange :continuousUpdate="true" :min="0" :max="1000" :step="1" :modelValue="options[k]" @update:modelValue="v => emit('update', k, v)"></MkRange>
 			</div>
-		</div>
+		</MkFolder>
 	</div>
 </div>
 </template>
@@ -56,6 +60,7 @@ import MkRange from '@/components/MkRange.vue';
 import { getHex, getRgb } from '@/world/utility.js';
 import { chooseDriveFile } from '@/utility/drive.js';
 import MkRadios from '@/components/MkRadios.vue';
+import MkFolder from '@/components/MkFolder.vue';
 
 const props = defineProps<{
 	schema: ObjectDef['options']['schema'];

packages/frontend/src/world/room/object.ts

@@ -57,6 +57,11 @@ type ColorOptionSchema = {
 	label: string;
 };
 
+type MaterialOptionSchema = {
+	type: 'material';
+	label: string;
+};
+
 type EnumOptionSchema = {
 	type: 'enum';
 	label: string;
@@ -105,6 +110,7 @@ type GetRawOptionsSchemaValues<T extends OptionsSchema> = {
 	T[K] extends BooleanOptionSchema ? boolean :
 	T[K] extends StringOptionSchema ? string :
 	T[K] extends ColorOptionSchema ? [number, number, number] :
+	T[K] extends MaterialOptionSchema ? { color: [number, number, number]; metallic: number; roughness: number; } :
 	T[K] extends EnumOptionSchema ? T[K]['enum'][number]['value'] :
 	T[K] extends RangeOptionSchema ? number :
 	T[K] extends ImageOptionSchema ? RawImageValue<T[K]['presets'][number]['value']> :
@@ -118,6 +124,7 @@ type GetConvertedOptionsSchemaValues<T extends OptionsSchema> = {
 	T[K] extends BooleanOptionSchema ? boolean :
 	T[K] extends StringOptionSchema ? string :
 	T[K] extends ColorOptionSchema ? [number, number, number] :
+	T[K] extends MaterialOptionSchema ? { color: [number, number, number]; metallic: number; roughness: number; } :
 	T[K] extends EnumOptionSchema ? T[K]['enum'][number]['value'] :
 	T[K] extends RangeOptionSchema ? number :
 	T[K] extends ImageOptionSchema ? ConvertedImageValue<T[K]['presets'][number]['value']> :

packages/i18n/src/autogen/locale.ts

@@ -5663,6 +5663,10 @@ export interface Locale extends ILocale {
      * 元に戻す
      */
     "previewingThemeRestore": string;
+    /**
+     * 選択
+     */
+    "choose": string;
     "_imageEditing": {
         "_vars": {
             /**
@@ -13338,5 +13342,21 @@ export interface Locale extends ILocale {
          * MisskeyRoomを動作させるには、WebGPUをサポートするデバイス・ブラウザが必要です。
          */
         "yourDeviceNotSupported_description": string;
+        /**
+         * 画像のはめ込み
+         */
+        "imageFit": string;
+        /**
+         * 覆う
+         */
+        "imageFit_cover": string;
+        /**
+         * 収める
+         */
+        "imageFit_contain": string;
+        /**
+         * 引き伸ばす
+         */
+        "imageFit_stretch": string;
     };
 }