gui: 単一セクションレイアウト

Changes

6 changed files (+244/-9)

• packages/gui/src/components/single-section-layout/single-section-layout.css (new)
  • @@ -0,0 +1,56 @@
    + /* + * SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + * SPDX-License-Identifier: AGPL-3.0-only + */ + + :not(:is(style, script)) { + all: unset; + box-sizing: border-box; + } + + :host { + display: block; + width: 100cqw; + height: 100cqh; + box-sizing: border-box; + + overflow-y: auto; + } + + .identity, .contents { + padding: var(--space-px-5) var(--space-px-7); + } + + .identity { + display: block; + font-weight: var(--font-bold); + font-size: var(--font-sm); + + color: oklch(var(--color-fg) / var(--alpha-fg-strong)); + } + + .contents { + display: flex; + flex-direction: column; + margin-block-start: var(--space-px-10); + } + + @container (min-width: 80rem) { + :host { + display: grid; + grid-template-columns: minmax(0, 1fr) 40rem; + gap: var(--space-px-4); + padding: var(--space-px-8); + } + + .identity { + place-self: center; + } + + .contents { + grid-column: 2 / 3; + align-self: center; + justify-self: stretch; + margin-block-start: 0; + } + }
• packages/gui/src/components/single-section-layout/single-section-layout.ts (new)
  • @@ -0,0 +1,37 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // SPDX-License-Identifier: AGPL-3.0-only + + import { html, render } from "lit-html"; + + import { wrapElement, YamoriElement } from "../../element.ts"; + + import css from "./single-section-layout.css?inline"; + + export const YamoriSingleSectionLayout = wrapElement({ + tagName: "yamori-single-section-layout", + constructor: class extends YamoriElement { + constructor() { + super(); + + const shadow = this.attachShadow({ mode: "open" }); + + render( + html` + <style>${css}</style> + + <div class="identity"> + <!-- TODO: Icon logo --> + Yamori + </div> + + <slot class="contents"></slot> + `, + shadow, + ); + } + + override connectedCallback() { + super.connectedCallback(); + } + }, + });
• packages/gui/src/docs/components/Preview.astro
  • @@ -10,7 +10,10 @@ colorScheme?: "dark" | "light";
    contrast?: "more" | "no-preference"; } - const { colorScheme, contrast, title, padding, ...rest } = Astro.props; + const { colorScheme, contrast, size, title, padding, ...rest } = Astro.props; + + const style = size ? `--_width:${size[0]}px;--_height:${size[1]}px` : undefined; + const canvasStyle = size ? `aspect-ratio:${size[0]} / ${size[1]}` : undefined; --- <style>
  • @@ -34,13 +37,51 @@ border-radius: 0;
    z-index: 999; } + .canvas { + --_grid-color-value: oklch( + var(--color-border) + / + var(--alpha-border-subtle) + ); + flex: 1; + display: block; + box-sizing: border-box; + } + .preview.fullscreen > .canvas { + min-height: 0; + height: auto !important; + flex-basis: 100% !important; + + background-image: + linear-gradient( + var(--_grid-color-value) 0.5px, + transparent 0.5px, + transparent calc(100% - 0.5px), + var(--_grid-color-value) calc(100% - 0.5px) + ), + linear-gradient( + 90deg, + var(--_grid-color-value) 0.5px, + transparent 0.5px, + transparent calc(100% - 0.5px), + var(--_grid-color-value) calc(100% - 0.5px) + ); + background-size: var(--space-px-12) var(--space-px-12); + } + .preview.fullscreen > .canvas:has(.override.container) { + position: relative; + aspect-ratio: auto !important; + + overflow: auto; + } + .override { - flex: 1; display: block; font-size: 1rem; line-height: 1.5; font-family: var(--font-sans); font-weight: var(--font-regular); + box-sizing: border-box; background-color: oklch(var(--color-bg)); color: oklch(var(--color-fg) / var(--alpha-fg-medium));
  • @@ -50,6 +91,29 @@ .override.padded {
    padding: var(--space-px-7); } + .override.container { + container-type: size; + width: var(--_width); + height: var(--_height); + + transform-origin: top left; + } + + .preview.fullscreen .override:not(.container) { + width: 100%; + height: 100%; + } + .preview.fullscreen .override.container { + position: absolute; + top: 50%; + left: 50%; + + box-shadow: var(--space-px-1) var(--space-px-1) var(--space-px-6) + oklch(0% 0% 0deg / 15%); + + transform: translate(-50%, -50%) !important; + } + .header { display: block; padding: var(--space-px-5);
  • @@ -179,6 +243,41 @@ });
    } }); } + + function resizeOverride(el) { + if (!el) { + return; + } + + const width = parseInt(el.getAttribute("data-width"), 10); + const height = parseInt(el.getAttribute("data-height"), 10); + + const rect = el.getBoundingClientRect(); + const parent = el.parentElement.getBoundingClientRect(); + + const scale = parent.width / width; + el.style.transform = `scale(${scale})`; + + const canvasHeight = height * scale; + el.parentElement.style.flexBasis = `${canvasHeight}px`; + el.parentElement.style.height = `${canvasHeight}px`; + } + + const observer = new ResizeObserver((entries) => { + for (const entry of entries) { + resizeOverride( + entry.target.querySelector("docs-theme-override.override.container"), + ); + } + }); + + for (const container of document.querySelectorAll( + "docs-theme-override.override.container", + )) { + resizeOverride(container); + + observer.observe(container.parentElement.parentElement); + } </script> <div {...rest} class="preview">
  • @@ -189,13 +288,18 @@ {title}
    </div> ) } - <ThemeOverride - class:list={["override", { padded: padding !== "no" }]} - color-scheme={colorScheme} - contrast={contrast} - > - <slot /> - </ThemeOverride> + <div class="canvas" style={canvasStyle}> + <ThemeOverride + class:list={["override", { padded: padding !== "no", container: !!size }]} + color-scheme={colorScheme} + contrast={contrast} + style={style} + data-width={size?.[0]} + data-height={size?.[1]} + > + <slot /> + </ThemeOverride> + </div> <div class="footer"> <button class="fullscreen-button" title="全画面表示"> <span class="fullscreen-button-icon">←→</span>
• packages/gui/src/docs/components/ThemeMatrixPreview.astro
  • @@ -37,6 +37,7 @@ matrix.map((overrides) => (
    <Preview title={Astro.props.title} padding={Astro.props.padding} + size={Astro.props.size} {...overrides} > <slot />
• packages/gui/src/docs/layouts/DocsLayout.astro
  • @@ -105,6 +105,9 @@ </NavBarItem>
    <NavBarItem href="/components/empty/"> Empty </NavBarItem> + <NavBarItem href="/components/single-section-layout/"> + Single Section Layout + </NavBarItem> </NavBarGroup> <NavBarGroup title="Widgets"> <NavBarItem href="/widgets/workspace-list/">
• packages/gui/src/docs/pages/components/single-section-layout.astro (new)
  • @@ -0,0 +1,34 @@
    + --- + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // SPDX-License-Identifier: AGPL-3.0-only + + import DocsLayout from "../../layouts/DocsLayout.astro"; + import Document from "../../components/Document.astro"; + import Preview from "../../components/Preview.astro"; + import ThemeMatrixPreview from "../../components/ThemeMatrixPreview.astro"; + --- + + <script> + import { YamoriSingleSectionLayout } from "../../../components/single-section-layout/single-section-layout.ts"; + + YamoriSingleSectionLayout.register(); + </script> + + <DocsLayout title="Button"> + <Document> + <p> + ログインページやスプラッシュスクリーンのように、ユーザのとれるアクションが + 1~2 に限定された状況で表示する UI レイアウト。 + </p> + <ThemeMatrixPreview title="320x500" padding="no" size={[320, 500]}> + <yamori-single-section-layout> + CONTENTS + </yamori-single-section-layout> + </ThemeMatrixPreview> + <Preview title="1280x720" padding="no" size={[1280, 720]}> + <yamori-single-section-layout> + CONTENTS + </yamori-single-section-layout> + </Preview> + </Document> + </DocsLayout>