ui: let editor title focus workspace

This commit is contained in:
2026-04-06 13:32:56 +09:00
parent ba9ba8013b
commit 71a13488d9
3 changed files with 38 additions and 1 deletions

View File

@@ -359,6 +359,11 @@ function closeItemContextMenu() {
}
}
function scrollWorkspaceBodyToTop() {
const workspaceBody = document.querySelector('.workspaceBody')
workspaceBody?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
function openItemContextMenu(itemId, event) {
if (!canEdit.value || !itemId || !itemsById.value[itemId] || shouldIgnoreItemClick()) return
selectedItemId.value = itemId
@@ -1582,7 +1587,14 @@ onUnmounted(() => {
<div class="editorMain">
<section class="head">
<div class="editorMain__headCopy">
<div class="editorMain__title">{{ templateName || templateId }}</div>
<button
class="editorMain__title editorMain__titleButton"
type="button"
title="본문을 화면 위로 이동"
@click="scrollWorkspaceBodyToTop"
>
{{ templateName || templateId }}
</button>
<div class="editorMain__subtitle">
<template v-if="canEdit">
/ 이름과 순서를 바꾸고 아이템을 드래그해서 배치할 있어요.
@@ -1974,6 +1986,24 @@ onUnmounted(() => {
font-weight: 900;
letter-spacing: -0.04em;
}
.editorMain__titleButton {
width: fit-content;
max-width: 100%;
border: 0;
padding: 0;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.editorMain__titleButton:hover {
color: var(--theme-text-strong);
}
.editorMain__titleButton:focus-visible {
outline: 2px solid color-mix(in srgb, var(--theme-accent) 70%, white);
outline-offset: 4px;
border-radius: 8px;
}
.editorMain__subtitle {
color: var(--theme-text-soft);
font-size: 13px;