gui: ドキュメントプレビューのフルスクリーン機能 画面の大部分を占めるような UI (e.g. Result/Empty, Layout) を書く際に 現状のプレビューサイズ、特にグリッドで列が 2 つ以上になった場合に まともな確認が難しくなるため。 リセット CSS に手を入れているのは Astro が body 内に script タグを 突っ込むため。 style も突っ込みかねないので念の為に書いた。

Changes

2 changed files (+111/-12)

• packages/gui/src/docs/components/Preview.astro
  • @@ -23,7 +23,19 @@ border-radius: 4px;
    overflow: hidden; } + .preview.fullscreen { + position: fixed; + inset: 0; + margin: 0; + border: none; + + background-color: oklch(var(--color-bg)); + border-radius: 0; + z-index: 999; + } + .override { + flex: 1; display: block; padding: var(--space-px-7); font-size: 1rem;
  • @@ -48,7 +60,10 @@ color: oklch(var(--color-fg) / var(--alpha-fg-medium));
    } .footer { - display: block; + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--space-px-3); border-top: 1px solid oklch(var(--color-border) / var(--alpha-border-subtle)); font-family: var(--font-mono);
  • @@ -57,10 +72,88 @@ padding: var(--space-px-4);
    background-color: oklch(var(--color-fg) / 2%); color: oklch(var(--color-fg) / var(--alpha-fg-subtle)); - text-align: end; + } + + .fullscreen-button { + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + width: var(--space-px-9); + height: var(--space-px-9); + + cursor: pointer; + } + .fullscreen-button:focus-visible { + color: oklch(var(--color-focus)); + } + + .fullscreen-button-icon { + rotate: 45deg; + } + + .fullscreen-button-label { + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 1px; + height: 1px; + + overflow: hidden; + white-space: nowrap; + } + + .footer > code { + flex-shrink: 1; } </style> + <script> + let fullscreenTarget = null; + + document.addEventListener("keydown", (event) => { + if ( + event.isComposing || + event.key !== "Escape" || + !fullscreenTarget || + !(fullscreenTarget instanceof HTMLButtonElement) + ) { + return; + } + + event.preventDefault(); + event.stopPropagation(); + fullscreenTarget.click(); + }); + + for (const button of document.getElementsByClassName("fullscreen-button")) { + button.addEventListener("click", (event) => { + event.preventDefault(); + event.stopPropagation(); + + const container = button.parentElement?.parentElement; + if (!container || !container.classList.contains("preview")) { + return; + } + + const icon = button.querySelector(".fullscreen-button-icon"); + + if (container.classList.contains("fullscreen")) { + container.classList.remove("fullscreen"); + icon.textContent = "←→"; + button.title = "全画面表示"; + fullscreenTarget = null; + } else { + container.classList.add("fullscreen"); + icon.textContent = "→←"; + button.title = "全画面表示をやめる"; + fullscreenTarget = button; + } + }); + } + </script> + <div {...rest} class="preview"> { title && (
  • @@ -76,13 +169,18 @@ contrast={contrast}
    > <slot /> </ThemeOverride> - { - (colorScheme || contrast) && ( - <code class="footer"> - {colorScheme && <span>(prefers-color-scheme: {colorScheme})</span>} - {colorScheme && contrast ? <span> and </span> : null} - {contrast && <span>(prefers-contrast: {contrast})</span>} - </code> - ) - } + <div class="footer"> + <button class="fullscreen-button" title="全画面表示"> + <span class="fullscreen-button-icon">←→</span> + </button> + { + (colorScheme || contrast) && ( + <code> + {colorScheme && <span>(prefers-color-scheme: {colorScheme})</span>} + {colorScheme && contrast ? <span> and </span> : null} + {contrast && <span>(prefers-contrast: {contrast})</span>} + </code> + ) + } + </div> </div>
• packages/gui/src/reset.css
  • @@ -5,7 +5,8 @@ * SPDX-License-Identifier: AGPL-3.0-only
    */ /* UA スタイルを全部消す */ - :where(body, body :not(svg, svg *, :is([x--_nonua], :--nonua, :state(nonua)))) { + :where(body, body + :not(script, style, svg, svg *, :is([x--_nonua], :--nonua, :state(nonua)))) { all: unset; box-sizing: border-box; }