mirrors/misskey
2
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-06-25 17:10:43 +00:00
Code Issues Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2026-05-31 13:22:54 +09:00
commit 7fec78b70e
2 changed files with 126 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

107
packages/frontend/src/pages/rooms/OverlayPanel.vue Normal file
View file

@ -0,0 +1,107 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="[$style.root, { [$style.isMobile]: isMobile, [$style.isDesktop]: !isMobile }]">
<MkStickyContainer>
<template #header>
<div :class="$style.header">
<span :class="$style.icon">
<slot name="icon"></slot>
</span>
<span :class="$style.title">
<MkCondensedLine :minScale="0.5">{{ title }}</MkCondensedLine>
</span>
<button class="_button" :class="$style.close" @click="emit('close')">
<i class="ti ti-x"></i>
</button>
</div>
</template>
<div :class="$style.body">
<slot></slot>
</div>
</MkStickyContainer>
</div>
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue';
const isMobile = true;
const props = defineProps<{
title: string;
acrylic?: boolean;
}>();
const emit = defineEmits<{
(ev: 'close'): void;
}>();
</script>
<style lang="scss" module>
.root.isDesktop {
position: absolute;
top: 16px;
right: 16px;
z-index: 1;
width: 300px;
max-height: calc(100% - 16px - 16px);
box-sizing: border-box;
overflow: auto;
border-radius: 12px;
background: var(--MI_THEME-panel);
}
.root.isMobile {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: min(50%, 400px);
box-sizing: border-box;
overflow: auto;
border-radius: 16px 16px 0 0;
background: var(--MI_THEME-panel);
}
.header {
display: flex;
align-items: center;
position: relative;
padding-left: 16px;
background: var(--MI_THEME-panel);
border-bottom: solid 0.5px var(--MI_THEME-divider);
}
.icon {
margin-right: 12px;
}
.title {
flex: 1;
min-width: 0;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
}
.close {
margin-left: auto;
width: 45px;
aspect-ratio: 1;
display: grid;
place-items: center;
}
.body {
padding: 16px;
}
</style>

57
packages/frontend/src/pages/rooms/room.core.vue
View file

@ -80,8 +80,10 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<div v-if="controller.isReady.value && controller.isEditMode.value && controller.selected.value != null && !controller.grabbing.value" :key="controller.selected.value.furnitureId" :class="$style.overlayFurnitureInfoPanel">
<div style="margin-bottom: 8px; font-weight: bold; text-align: center;">{{ FURNITURE_UI_DEFS[controller.selected.value.funitureState.type].name }}</div>
<XOverlayPanel v-if="controller.isReady.value && controller.isEditMode.value && controller.selected.value != null && !controller.grabbing.value" :key="controller.selected.value.furnitureId" :title="FURNITURE_UI_DEFS[controller.selected.value.funitureState.type].name">
<template #icon>
<i class="ti ti-box"></i>
</template>
<MkWorldMonoOptionsForm
:uiDef="FURNITURE_UI_DEFS[FURNITURE_SCHEMA_DEFS[controller.selected.value.funitureState.type].id]"
@ -90,15 +92,23 @@ SPDX-License-Identifier: AGPL-3.0-only
:options="controller.selected.value.funitureState.options"
@update="(k, v) => updateFurnitureOption(k, v)"
/>
</div>
</XOverlayPanel>
<XOverlayPanel v-if="isRoomSettingsOpen && controller.isEditMode.value" :title="i18n.ts._miRoom.roomCustomize" @close="isRoomSettingsOpen = false">
<template #icon>
<i class="ti ti-home-cog"></i>
</template>
<div v-if="isRoomSettingsOpen && controller.isEditMode.value" class="_panel" :class="$style.overlayFurnitureInfoPanel">
<XEnvOptions :controller="controller" @changeEnvType="changeEnvType"/>
</div>
</XOverlayPanel>
<div v-if="isRoomInfoOpen" :class="$style.overlayRoomInfoPanel">
<div style="margin-bottom: 8px; font-weight: bold; text-align: center;">{{ room.name }}</div>
</div>
<XOverlayPanel v-if="isRoomInfoOpen" :title="room.name" @close="isRoomInfoOpen = false">
<template #icon>
<i class="ti ti-info-circle"></i>
</template>
test
</XOverlayPanel>
</div>
</template>
@ -111,6 +121,7 @@ import { FURNITURE_SCHEMA_DEFS } from 'misskey-world/src/room/furniture-schema-d
import { useInterval } from '@@/js/use-interval.js';
import { url } from '@@/js/config.js';
import XEnvOptions from './room.env-options.vue';
import XOverlayPanel from './OverlayPanel.vue';
import type { RoomControllerOptions } from '@/world/room/controller.js';
import type { RoomState, RoomAttachments } from 'misskey-world/src/room/type.js';
import MkWorldMonoOptionsForm from '@/components/MkWorldMonoOptionsForm.vue';
@ -859,36 +870,6 @@ function enterOnline() {
display: none;
}
.overlayRoomInfoPanel {
position: absolute;
top: 16px;
right: 16px;
z-index: 1;
padding: 16px;
width: 300px;
max-height: calc(100% - 16px - 16px);
box-sizing: border-box;
overflow: auto;
border-radius: 12px;
background: var(--MI_THEME-panel);
}
.overlayFurnitureInfoPanel {
position: absolute;
top: 16px;
right: 16px;
z-index: 1;
padding: 16px;
width: 300px;
max-height: calc(100% - 16px - 16px);
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 {
position: absolute;
top: 0;