wip

locales/ja-JP.yml

@@ -3557,4 +3557,5 @@ _qr:
 _room:
   snapToGrid: "グリッドにスナップ"
   gridScale: "グリッドサイズ"
+  thereAreUnsavedChanges: "未保存の変更があります"
   revertAllChangesConfirmation: "全ての変更を取り消し、部屋を最後に保存した状態まで戻しますか？"

packages/frontend/src/pages/room.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root">
-	<div :class="[$style.screen, { [$style.zen]: isZenMode }]">
+	<div :class="[$style.screen, { [$style.zen]: false }]">
 		<canvas ref="canvas" :class="$style.canvas" tabindex="-1" :style="{ visibility: controller.isReady.value ? 'visible' : 'hidden' }"></canvas>
 
 		<Transition
@@ -20,6 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</Transition>
 
 		<div :class="$style.overlayTop">
+			<div :class="$style.topMain">
 				<div :class="$style.topMenu" class="_panel _shadow">
 					<template v-if="controller.isReady.value">
 						<button v-tooltip="'照明切り替え'" :class="$style.topMenuButton" class="_button" @click="toggleLight"><i class="ti ti-bulb"></i></button>
@@ -32,6 +33,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</template>
 					<button :class="$style.topMenuButton" class="_button" @click="showOtherMenu"><i class="ti ti-dots"></i></button>
 				</div>
+				<div v-if="isModified" :class="$style.modified" class="_panel _shadow">
+					<span :class="$style.modifiedText">{{ i18n.ts._room.thereAreUnsavedChanges }}</span>
+					<button class="_button" style="color: var(--MI_THEME-error)" @click="revert">戻す</button>
+					<button class="_button" style="color: var(--MI_THEME-accent)" @click="save">保存</button>
+				</div>
+			</div>
 		</div>
 
 		<div :class="$style.overlayBottom">
@@ -64,7 +71,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 
-		<template v-if="!isZenMode">
 		<div v-if="controller.isReady.value && controller.isEditMode.value && controller.selected.value != null && !controller.grabbing.value" :key="controller.selected.value.objectId" class="_panel" :class="$style.overlayObjectInfoPanel">
 			{{ controller.selected.value.objectDef.name }}
 
@@ -147,19 +153,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</template>
 			</div>
 		</div>
-		</template>
 	</div>
 
-	<template v-if="!isZenMode">
 	<div v-if="controller.isReady.value" class="_buttons" :class="$style.controls">
 		<!--<MkButton v-for="action in actions" :key="action.key" @click="action.fn">{{ action.label }}{{ hotkeyToLabel(action.hotkey) }}</MkButton>-->
 	</div>
-		<div v-if="isChanged" class="_buttons">
-			保存していない変更があります
-			<MkButton danger @click="revert">戻す</MkButton>
-			<MkButton primary @click="save">保存</MkButton>
-		</div>
-	</template>
 </div>
 </template>
 
@@ -198,9 +196,8 @@ function resize() {
 	controller.resize();
 }
 
-const isZenMode = ref(false);
 const isRoomSettingsOpen = ref(false);
-const isChanged = ref(false);
+const isModified = ref(false);
 
 const graphicsQualityRaw = prefer.model('world.graphicsQuality');
 const graphicsQualityAutoValue = computed<number>(() => deviceKind === 'smartphone' ? GRAPHICS_QUALITY_LOW : GRAPHICS_QUALITY_MEDIUM);
@@ -276,7 +273,7 @@ onMounted(async () => {
 	window.addEventListener('resize', resize);
 
 	watch(controller.roomState, () => {
-		isChanged.value = true;
+		isModified.value = true;
 	});
 
 	//watch(controller.selected, (v) => {
@@ -413,12 +410,19 @@ function exitEditMode() {
 function save() {
 	latestData = deepClone(controller.roomState.value);
 	localStorage.setItem('roomData', JSON.stringify(latestData));
-	isChanged.value = false;
+	isModified.value = false;
 }
 
 async function revert() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		title: i18n.ts.areYouSure,
+		text: i18n.ts._room.revertAllChangesConfirmation,
+	});
+	if (canceled) return;
+
 	await controller.reset(latestData);
-	isChanged.value = false;
+	isModified.value = false;
 }
 
 async function refresh() {
@@ -590,6 +594,12 @@ definePage(() => ({
 	width: 100%;
 }
 
+.topMain {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+}
+
 .topMenu {
 	margin: 16px;
 	display: flex;
@@ -607,6 +617,25 @@ definePage(() => ({
 	padding-right: 16px;
 }
 
+.modified {
+	display: flex;
+	align-items: center;
+	font-size: 90%;
+	gap: 1em;
+	padding: 8px 16px;
+}
+
+.modifiedText {
+	color: var(--MI_THEME-warn);
+	animation: modified-blink 2s infinite;
+}
+
+@keyframes modified-blink {
+	0% { opacity: 1; }
+	50% { opacity: 0.5; }
+	100% { opacity: 1; }
+}
+
 .overlayControls {
 
 }

packages/i18n/src/autogen/locale.ts

@@ -13271,6 +13271,10 @@ export interface Locale extends ILocale {
          * グリッドサイズ
          */
         "gridScale": string;
+        /**
+         * 未保存の変更があります
+         */
+        "thereAreUnsavedChanges": string;
         /**
          * 全ての変更を取り消し、部屋を最後に保存した状態まで戻しますか？
          */