ui: let editor title focus workspace
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user