From c93f03bc41a2cea94dd6316a78cf471bcc580836 Mon Sep 17 00:00:00 2001 From: vanyauhalin Date: Fri, 2 Aug 2024 12:03:40 +0400 Subject: [PATCH] temp --- packages/site-chapter/lib/client.ts | 4 + packages/site-chapter/lib/client/define.ts | 27 +++ packages/site-chapter/lib/client/element.ts | 84 ++++++++ packages/site-chapter/lib/main.css | 42 +++- packages/site-chapter/lib/main.tsx | 5 +- packages/site-chapter/package.json | 3 + .../lib/main.css | 180 +++++++++++++----- .../lib/main.tsx | 30 ++- packages/site-home/lib/main.css | 52 ++++- packages/site-kit/lib/client.ts | 2 + packages/site-kit/package.json | 4 +- packages/site-page/lib/client.ts | 4 + packages/site-page/lib/client/define.ts | 27 +++ packages/site-page/lib/client/element.ts | 38 ++++ packages/site-page/lib/main.css | 72 +++++-- packages/site-page/lib/main.story.tsx | 2 + packages/site-page/lib/main.tsx | 19 +- packages/site-page/package.json | 9 +- packages/site-part/lib/main.css | 83 ++++++-- packages/ui-form-control/lib/main.css | 6 + packages/ui-icons/static/poor/24/sidebar.svg | 3 + packages/ui-text-input/package.json | 6 +- pnpm-lock.yaml | 6 + site/assets/main.css | 2 +- site/generations/page.ts | 19 ++ site/internal/chapter.tsx | 2 + site/internal/global-navigation.css | 4 +- site/internal/page.tsx | 148 ++++++++++++++ site/layouts/chapter.tsx | 3 + site/layouts/page.tsx | 64 +------ 30 files changed, 781 insertions(+), 169 deletions(-) create mode 100644 packages/site-chapter/lib/client.ts create mode 100644 packages/site-chapter/lib/client/define.ts create mode 100644 packages/site-chapter/lib/client/element.ts create mode 100644 packages/site-page/lib/client.ts create mode 100644 packages/site-page/lib/client/define.ts create mode 100644 packages/site-page/lib/client/element.ts create mode 100644 packages/ui-icons/static/poor/24/sidebar.svg create mode 100644 site/internal/page.tsx diff --git a/packages/site-chapter/lib/client.ts b/packages/site-chapter/lib/client.ts new file mode 100644 index 000000000..ace59b0e6 --- /dev/null +++ b/packages/site-chapter/lib/client.ts @@ -0,0 +1,4 @@ +import {define} from "./client/define.ts" +export * from "./client/element.ts" + +define() diff --git a/packages/site-chapter/lib/client/define.ts b/packages/site-chapter/lib/client/define.ts new file mode 100644 index 000000000..ffbc5f965 --- /dev/null +++ b/packages/site-chapter/lib/client/define.ts @@ -0,0 +1,27 @@ +import {ChapterContainer} from "./element.ts" + +declare global { + interface Window { + ChapterContainer: typeof ChapterContainer + } + + interface HTMLElementTagNameMap { + "chapter-container": ChapterContainer + } + + namespace preact { + namespace JSX { + interface IntrinsicElements { + "chapter-container": HTMLAttributes + } + } + } +} + +export function define(): void { + if (window.customElements.get(ChapterContainer.tagName)) { + return + } + window.ChapterContainer = ChapterContainer + window.customElements.define(ChapterContainer.tagName, ChapterContainer) +} diff --git a/packages/site-chapter/lib/client/element.ts b/packages/site-chapter/lib/client/element.ts new file mode 100644 index 000000000..e7e0a7be5 --- /dev/null +++ b/packages/site-chapter/lib/client/element.ts @@ -0,0 +1,84 @@ +export class ChapterContainer extends HTMLElement { + static get tagName(): string { + return "chapter-container" + } + + get navigationHidden(): boolean { + return this.#hasState("navigation-hidden") + } + + set navigationHidden(s: boolean) { + this.#changeState("navigation-hidden", s) + } + + connectedCallback(): void { + this.#attach() + this.#setup() + } + + #internals: ElementInternals | null = null + + #attach(): void { + if (this.attachInternals) { + this.#internals = this.attachInternals() + } + } + + #setup(): void { + this.#setupState() + } + + #setupState(): void { + if (this.#internals && CSS.supports("selector(:state(_))")) { + this.#hasState = this.#hasModernState + this.#changeState = this.#changeModernState + return + } + this.#hasState = this.#hasFallbackState + this.#changeState = this.#changeFallbackState + } + + toggleNavigationHidden(): void { + this.navigationHidden = !this.navigationHidden + } + + #hasState: (k: string) => boolean = () => false + + #hasFallbackState(k: string): boolean { + const s = this.getAttribute(`state-${k}`) + if (s === null) { + return false + } + return true + } + + #hasModernState(k: string): boolean { + const t = this.#internals + if (!t) { + return false + } + return t.states.has(k) + } + + #changeState: (k: string, v: boolean) => void = () => void 0 + + #changeFallbackState(k: string, v: boolean): void { + if (!v) { + this.removeAttribute(`state-${k}`) + return + } + this.setAttribute(`state-${k}`, "") + } + + #changeModernState(k: string, v: boolean): void { + const t = this.#internals + if (!t) { + return + } + if (!v) { + t.states.delete(k) + return + } + t.states.add(k) + } +} diff --git a/packages/site-chapter/lib/main.css b/packages/site-chapter/lib/main.css index d8c632a18..03b2c554e 100644 --- a/packages/site-chapter/lib/main.css +++ b/packages/site-chapter/lib/main.css @@ -8,11 +8,19 @@ --chapter-navigation-width: calc(var(--chapter-navigation-content-width) + var(--chapter-navigation-padding-inline) * 2 + var(--chapter-navigation-border-width)); --chapter-content-padding-block: var(--base-size-32); - --chapter-content-padding-inline: var(--base-size-40); + --chapter-content-padding-inline: var(--base-size-16); --chapter-content-max-width: calc(var(--temp-chapter-breakpoint-xlarge) - var(--chapter-navigation-width)); display: grid; grid-template-columns: auto var(--chapter-navigation-width) minmax(0, var(--chapter-content-max-width)) auto; + + @media (--size-viewport-width-small) { + --chapter-content-padding-inline: var(--base-size-24); + } + + @media (--size-viewport-width-medium) { + --chapter-content-padding-inline: var(--base-size-40); + } } .chapter::before { @@ -32,7 +40,23 @@ order: -1; } +.chapter[state-navigation-hidden], +.chapter:state(navigation-hidden) { + @media not (--size-viewport-width-medium) { + /* Do not remove the px unit */ + --chapter-navigation-width: 0px; + } +} + +.chapter[state-navigation-hidden] .chapter__navigation, +.chapter:state(navigation-hidden) .chapter__navigation { + @media not (--size-viewport-width-medium) { + display: none; + } +} + .chapter__navigation { + background-color: var(--color-background-muted); border-right-color: var(--color-border-muted); border-right-style: solid; border-right-width: var(--chapter-navigation-border-width); @@ -43,6 +67,7 @@ } .chapter__content { + background-color: var(--color-background-default); display: flex; flex-direction: column; grid-column: 3; @@ -53,12 +78,11 @@ /* Integration with @onlyoffice/site-search */ -.chapter search-container { - display: block; +.chapter .search { margin-bottom: var(--base-size-32); } -.chapter .search { +.chapter .search .text-input { min-width: 100%; } @@ -77,7 +101,15 @@ .chapter__content .content::after { content: ""; display: block; - padding-top: 140px; + padding-top: calc(var(--base-size-48) + var(--base-size-64)); + + @media (--size-viewport-width-medium) { + padding-top: calc(var(--base-size-64) + var(--base-size-64)); + } + + @media (--size-viewport-width-large) { + padding-top: calc(var(--base-size-112) + var(--base-size-64)); + } } /* Integration with @onlyoffice/site-help */ diff --git a/packages/site-chapter/lib/main.tsx b/packages/site-chapter/lib/main.tsx index 7d5d89357..eaf3e1242 100644 --- a/packages/site-chapter/lib/main.tsx +++ b/packages/site-chapter/lib/main.tsx @@ -1,10 +1,11 @@ import {type ChildrenIncludable} from "@onlyoffice/preact-types" import {type HTMLAttributes} from "preact/compat" import {type JSX, h} from "preact" +import {type ChapterContainer} from "./client.ts" -export function Chapter(p: HTMLAttributes): JSX.Element { +export function Chapter(p: HTMLAttributes): JSX.Element { const {children, ...props} = p - return
{children}
+ return {children} } export function ChapterNavigation({children}: ChildrenIncludable): JSX.Element { diff --git a/packages/site-chapter/package.json b/packages/site-chapter/package.json index c0190eb85..8a865d3c3 100644 --- a/packages/site-chapter/package.json +++ b/packages/site-chapter/package.json @@ -5,6 +5,9 @@ "main": "lib/main.tsx", "exports": { ".": "./lib/main.tsx", + "./client/define.ts": "./lib/client/define.ts", + "./client/element.ts": "./lib/client/element.ts", + "./client.ts": "./lib/client.ts", "./main.css": "./lib/main.css" }, "scripts": { diff --git a/packages/site-document-editor-playground/lib/main.css b/packages/site-document-editor-playground/lib/main.css index b4eaac558..519cec75f 100644 --- a/packages/site-document-editor-playground/lib/main.css +++ b/packages/site-document-editor-playground/lib/main.css @@ -1,7 +1,50 @@ .de-playground { background-color: var(--color-background-muted); - padding-bottom: 140px; - padding-top: var(--base-size-32); + padding-bottom: calc(var(--base-size-48) + var(--base-size-64)); + padding-top: var(--base-size-48); + + @media (--size-viewport-width-medium) { + padding-bottom: calc(var(--base-size-64) + var(--base-size-64)); + } + + @media (--size-viewport-width-large) { + padding-bottom: calc(var(--base-size-112) + var(--base-size-64)); + } +} + +.de-playground .form-control { + margin-top: var(--base-size-20); +} + +.de-playground .form-control:first-of-type { + margin-top: 0; +} + +.de-playground .form-control__label a { + color: var(--color-foreground-link); +} + +.de-playground .form-control__label a:focus-visible, +.de-playground .form-control__label a:hover { + text-decoration: none; +} + +.de-playground .form-control__action button svg { + pointer-events: none; +} + +.de-playground .code-editor { + margin-top: 0; +} + +.de-playground .code-listing { + margin-top: 0; +} + +.de-playground .de-playground__properties .de-playground__container .form-control { + @media (--size-viewport-width-medium) and (not (--size-viewport-width-large)) { + margin-top: 0; + } } .de-playground__inner { @@ -10,24 +53,36 @@ flex-direction: column; margin: 0 auto; max-width: 1440px; - padding-left: var(--base-size-24); - padding-right: var(--base-size-24); + padding-inline: var(--base-size-16); width: 100%; + + @media (--size-viewport-width-small) { + padding-inline: var(--base-size-24); + } } .de-playground__heading { - font-size: var(--text-display-font-size-default); - font-weight: var(--text-display-font-weight-default); - line-height: var(--text-display-line-height-default); + font-size: var(--text-title-font-size-large); + font-weight: var(--text-title-font-weight-large); + line-height: var(--text-title-line-height-large); margin-bottom: var(--base-size-32); margin-top: var(--base-size-24); + + @media (--size-viewport-width-medium) { + font-size: var(--text-display-font-size-default); + font-weight: var(--text-display-font-weight-default); + line-height: var(--text-display-line-height-default); + } } .de-playground__islands { display: grid; grid-gap: var(--base-size-16); grid-template-columns: repeat(11, 1fr); - grid-template-rows: 1fr min-content min-content min-content min-content; + + @media (--size-viewport-width-large) { + grid-template-rows: 1fr min-content min-content min-content min-content; + } } .de-playground__island { @@ -40,33 +95,93 @@ } .de-playground__scenarios { - grid-column: 4 / 12; + grid-column: 1 / 12; grid-row: 2; + + @media (--size-viewport-width-large) { + grid-column-start: 5; + } + + @media (--size-viewport-width-xlarge) { + grid-column-start: 4; + } } .de-playground__properties { - grid-column: 1 / 4; - grid-row: 1 / 5; + grid-column: 1 / 12; + grid-row: 3; + + @media (--size-viewport-width-large) { + grid-column-end: 5; + grid-row: 1 / 5; + } + + @media (--size-viewport-width-xlarge) { + grid-column-end: 4; + } +} + +.de-playground__properties .de-playground__container { + @media (--size-viewport-width-medium) and (not (--size-viewport-width-large)) { + display: grid; + gap: var(--base-size-20); + grid-template-columns: 1fr 1fr; + } } .de-playground__events { - grid-column: 4 / 12; - grid-row: 3; + grid-column: 1 / 12; + grid-row: 4; + + @media (--size-viewport-width-large) { + grid-column-start: 5; + grid-row: 3; + } + + @media (--size-viewport-width-xlarge) { + grid-column-start: 4; + } } .de-playground__actions { - grid-column: 1 / 4; - grid-row: 5; + grid-column: 1 / 12; + grid-row: 6; + + @media (--size-viewport-width-large) { + grid-column-end: 5; + grid-row: 5; + } + + @media (--size-viewport-width-xlarge) { + grid-column-end: 4; + } } .de-playground__editor { - grid-column: 4 / 12; + grid-column: 1 / 12; grid-row: 1; + + @media (--size-viewport-width-large) { + grid-column-start: 5; + } + + @media (--size-viewport-width-xlarge) { + grid-column-start: 4; + } } .de-playground__samples { - grid-column: 4 / 12; - grid-row: 4 / 6; + grid-column: 1 / 12; + grid-row: 5; + + @media (--size-viewport-width-large) { + grid-column-start: 5; + grid-row: 4 / 6; + } + + @media (--size-viewport-width-xlarge) { + grid-column-start: 4; + } } .de-playground__container { @@ -104,32 +219,3 @@ height: inherit; overflow: hidden; } - -.de-playground .form-control { - margin-top: var(--base-size-20); -} - -.de-playground .form-control:first-of-type { - margin-top: 0; -} - -.de-playground .form-control__label a { - color: var(--color-foreground-link); -} - -.de-playground .form-control__label a:focus-visible, -.de-playground .form-control__label a:hover { - text-decoration: none; -} - -.de-playground .form-control__action button svg { - pointer-events: none; -} - -.de-playground .code-editor { - margin-top: 0; -} - -.de-playground .code-listing { - margin-top: 0; -} diff --git a/packages/site-document-editor-playground/lib/main.tsx b/packages/site-document-editor-playground/lib/main.tsx index 41a378e3e..d9f051d79 100644 --- a/packages/site-document-editor-playground/lib/main.tsx +++ b/packages/site-document-editor-playground/lib/main.tsx @@ -22,7 +22,9 @@ import { SelectListbox, SelectOption, SrOnly, - Template + Template, + TextInput, + TextInputControl, } from "@onlyoffice/ui-kit" import {type JSX, h} from "preact" @@ -188,11 +190,15 @@ function BooleanProperty({property}: PropertyParameters): JSX.Element { - + + + + + } @@ -285,7 +291,11 @@ function NumberProperty({property}: PropertyParameters): JSX.Element { - + + + + + } @@ -304,7 +314,11 @@ function StringProperty({property}: PropertyParameters): JSX.Element { - + + + + + } diff --git a/packages/site-home/lib/main.css b/packages/site-home/lib/main.css index 18ae1a663..d6db65e90 100644 --- a/packages/site-home/lib/main.css +++ b/packages/site-home/lib/main.css @@ -5,10 +5,16 @@ display: flex; flex-direction: column; overflow: hidden; - padding-bottom: 140px; - padding-top: var(--base-size-64); + padding-bottom: calc(var(--base-size-48) + var(--base-size-64)); + padding-top: var(--base-size-48); + + @media (--size-viewport-width-medium) { + padding-bottom: calc(var(--base-size-64) + var(--base-size-64)); + padding-top: var(--base-size-64); + } @media (--size-viewport-width-large) { + padding-bottom: calc(var(--base-size-112) + var(--base-size-64)); padding-top: var(--base-size-112); } } @@ -17,22 +23,32 @@ margin-left: auto; margin-right: auto; max-width: var(--temp-home-breakpoint-xlarge); - padding-inline: var(--base-size-24); + padding-inline: var(--base-size-16); text-align: center; width: 100%; + @media (--size-viewport-width-small) { + padding-inline: var(--base-size-24); + } + @media (--size-viewport-width-medium) { padding-inline: var(--base-size-32); } } .home__hero h1 { - font-size: var(--text-display-font-size-default); - font-weight: var(--text-display-font-weight-default); - line-height: var(--text-display-line-height-default); + font-size: var(--text-title-font-size-large); + font-weight: var(--text-title-font-weight-large); + line-height: var(--text-title-line-height-large); margin-bottom: 0; margin-top: 0; text-align: center; + + @media (--size-viewport-width-medium) { + font-size: var(--text-display-font-size-default); + font-weight: var(--text-display-font-weight-default); + line-height: var(--text-display-line-height-default); + } } .home__hero + .home__part { @@ -138,7 +154,11 @@ } .home__in { - padding: var(--base-size-24); + padding: var(--base-size-16); + + @media (--size-viewport-width-small) { + padding: var(--base-size-24); + } @media (--size-viewport-width-medium) { padding: var(--base-size-12) var(--base-size-32); @@ -203,12 +223,16 @@ list-style: none; margin-bottom: 0; margin-top: 0; - padding: var(--base-size-24); + padding: var(--base-size-16); @media (--size-viewport-width-xsmall) { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } + @media (--size-viewport-width-small) { + padding: var(--base-size-24); + } + @media (--size-viewport-width-medium) { padding: var(--base-size-12) var(--base-size-32); } @@ -238,8 +262,12 @@ } .home__preview { - padding: var(--base-size-24); + padding: var(--base-size-16); position: relative; + + @media (--size-viewport-width-small) { + padding: var(--base-size-24); + } } .home__preview a { @@ -305,7 +333,11 @@ .home__hero .search { margin-left: auto; margin-right: auto; - margin-top: var(--base-size-48); + margin-top: var(--base-size-32); + + @media (--size-viewport-width-large) { + margin-top: var(--base-size-48); + } } .home__hero .search .text-input { diff --git a/packages/site-kit/lib/client.ts b/packages/site-kit/lib/client.ts index f95356da8..b2c8ed61d 100644 --- a/packages/site-kit/lib/client.ts +++ b/packages/site-kit/lib/client.ts @@ -1,3 +1,5 @@ +import "@onlyoffice/site-page/client.ts" +import "@onlyoffice/site-chapter/client.ts" import "@onlyoffice/site-document-editor-playground/client.ts" import "@onlyoffice/site-search/client.ts" import "@onlyoffice/site-theme-switcher/client.ts" diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json index eaa976170..c55309c0c 100644 --- a/packages/site-kit/package.json +++ b/packages/site-kit/package.json @@ -4,9 +4,9 @@ "type": "module", "main": "lib/main.ts", "exports": { - ".": "./lib/main.ts", + "./client.ts": "./lib/client.ts", "./main.css": "./lib/main.css", - "./client.ts": "./lib/client.ts" + ".": "./lib/main.ts" }, "scripts": { "test:types": "tsc", diff --git a/packages/site-page/lib/client.ts b/packages/site-page/lib/client.ts new file mode 100644 index 000000000..ace59b0e6 --- /dev/null +++ b/packages/site-page/lib/client.ts @@ -0,0 +1,4 @@ +import {define} from "./client/define.ts" +export * from "./client/element.ts" + +define() diff --git a/packages/site-page/lib/client/define.ts b/packages/site-page/lib/client/define.ts new file mode 100644 index 000000000..803459843 --- /dev/null +++ b/packages/site-page/lib/client/define.ts @@ -0,0 +1,27 @@ +import {PageContainer} from "./element.ts" + +declare global { + interface Window { + PageContainer: typeof PageContainer + } + + interface HTMLElementTagNameMap { + "page-container": PageContainer + } + + namespace preact { + namespace JSX { + interface IntrinsicElements { + "page-container": HTMLAttributes + } + } + } +} + +export function define(): void { + if (window.customElements.get(PageContainer.tagName)) { + return + } + window.PageContainer = PageContainer + window.customElements.define(PageContainer.tagName, PageContainer) +} diff --git a/packages/site-page/lib/client/element.ts b/packages/site-page/lib/client/element.ts new file mode 100644 index 000000000..4d4dda0e5 --- /dev/null +++ b/packages/site-page/lib/client/element.ts @@ -0,0 +1,38 @@ +import {type ChapterContainer} from "@onlyoffice/site-chapter/client.ts" + +export class PageContainer extends HTMLElement { + static get tagName(): string { + return "page-container" + } + + get #chapterNavigationToggler(): HTMLElement | null { + return this.querySelector("[data-page-container-chapter-navigation-toggler]") + } + + get #chapterContainer(): ChapterContainer | null { + return this.querySelector("chapter-container") + } + + connectedCallback(): void { + this.#listen() + } + + #listen(): void { + this.addEventListener("click", this) + } + + handleEvent(e: Event): void { + if ( + e.type === "click" && + e.target && + e.target === this.#chapterNavigationToggler + ) { + const c = this.#chapterContainer + if (!c) { + return + } + c.toggleNavigationHidden() + return + } + } +} diff --git a/packages/site-page/lib/main.css b/packages/site-page/lib/main.css index 0423f47ef..1a369a691 100644 --- a/packages/site-page/lib/main.css +++ b/packages/site-page/lib/main.css @@ -1,29 +1,34 @@ .page { --temp-page-breakpoint-xlarge: calc(var(--size-breakpoint-xlarge) - 74px); - --temp-page-header-height: 60px; + --page-header-height: 60px; --page-header-border-width: var(--size-border-width-thin); - --page-header-content-height: calc(var(--temp-page-header-height) - var(--page-header-border-width)); + --page-header-content-height: calc(var(--page-header-height) - var(--page-header-border-width)); --page-header-logo-border-width: var(--size-border-width-thin); --page-header-logo-content-width: calc(232px - var(--page-header-logo-border-width)); - --page-header-logo-padding-inline: var(--base-size-24); + --page-header-logo-padding-inline: var(--base-size-16); --page-header-logo-width: calc(var(--page-header-logo-content-width) + var(--page-header-logo-padding-inline) * 2 + var(--page-header-logo-border-width)); - --page-header-menu-padding-inline: var(--base-size-24); + --page-header-menu-padding-inline: var(--base-size-16); --page-header-menu-max-width: calc(var(--temp-page-breakpoint-xlarge) - var(--page-header-logo-width)); display: grid; grid-template-rows: min-content 1fr min-content; min-height: 100vh; + @media (--size-viewport-width-small) { + --page-header-logo-padding-inline: var(--base-size-24); + --page-header-menu-padding-inline: var(--base-size-24); + } + @media (--size-viewport-width-medium) { --page-header-logo-padding-inline: var(--base-size-32); --page-header-menu-padding-inline: var(--base-size-40); } @media (--size-viewport-width-large) { - --temp-page-header-height: 72px; + --page-header-height: 72px; } } @@ -72,7 +77,6 @@ .page-header { display: flex; - justify-content: space-between; @media (--size-viewport-width-medium) { display: grid; @@ -89,6 +93,10 @@ grid-row: 1; height: inherit; padding-inline: var(--page-header-logo-padding-inline); + + @media not (--size-viewport-width-medium) { + order: -2; + } } .page-header__logo svg { @@ -104,15 +112,47 @@ justify-content: center; padding-inline: var(--page-header-menu-padding-inline); + @media not (--size-viewport-width-medium) { + margin-left: auto; + } + @media (--size-viewport-width-medium) { order: -1; } } +.page-header__nav-toggler { + align-items: center; + display: flex; + order: -1; + + @media (--size-viewport-width-medium) { + display: none; + } +} + +.page-header-nav-toggler { + background-color: transparent; + border: 0; + color: var(--base-color-white); + cursor: pointer; + display: block; + padding: 0; +} + +.page-header-nav-toggler svg { + display: block; + pointer-events: none; +} + .page-footer { font-size: var(--text-body-font-size-small); line-height: var(--text-body-line-height-small); - padding-inline: var(--base-size-24); + padding-inline: var(--base-size-16); + + @media (--size-viewport-width-small) { + padding-inline: var(--base-size-24); + } @media (--size-viewport-width-medium) { padding-inline: var(--base-size-32); @@ -230,12 +270,22 @@ .page .chapter { height: 100%; - min-height: calc(100vh - var(--page-header-content-height)); + min-height: calc(100vh - var(--page-header-height)); } .page .chapter__navigation { - max-height: calc(100vh - var(--page-header-content-height)); overflow-y: auto; - position: sticky; - top: var(--page-header-content-height); + top: var(--page-header-height); + + @media not (--size-viewport-width-small) { + border-right-width: 0; + bottom: 0; + position: fixed; + width: 100%; + } + + @media (--size-viewport-width-small) { + max-height: calc(100vh - var(--page-header-height)); + position: sticky; + } } diff --git a/packages/site-page/lib/main.story.tsx b/packages/site-page/lib/main.story.tsx index b1ccb6513..2147b3e1f 100644 --- a/packages/site-page/lib/main.story.tsx +++ b/packages/site-page/lib/main.story.tsx @@ -19,6 +19,7 @@ import { PageHeader, PageHeaderLogo, PageHeaderMenu, + PageHeaderNavToggler, } from "./main.tsx" export default { @@ -43,6 +44,7 @@ export function Default({children}: ChildrenIncludable): JSX.Element { Workspace +
{children ?? Array.from({length: 12}).map((_, i) =>

{i}

)} diff --git a/packages/site-page/lib/main.tsx b/packages/site-page/lib/main.tsx index abd13c540..173c50fd5 100644 --- a/packages/site-page/lib/main.tsx +++ b/packages/site-page/lib/main.tsx @@ -1,5 +1,6 @@ import {type ChildrenIncludable} from "@onlyoffice/preact-types" import {useSlots} from "@onlyoffice/preact-slots" +import {SidebarIcon} from "@onlyoffice/ui-icons/poor/24.tsx" import {Fragment, type JSX, h, toChildArray} from "preact" export function Page({children}: ChildrenIncludable): JSX.Element { @@ -7,22 +8,24 @@ export function Page({children}: ChildrenIncludable): JSX.Element { header: PageHeader, footer: PageFooter }) - return
+ return
{slots.header}
{outer}
{slots.footer}
-
+ } export function PageHeader({children}: ChildrenIncludable): JSX.Element { const [slots, outer] = useSlots(children, { logo: PageHeaderLogo, - menu: PageHeaderMenu + menu: PageHeaderMenu, + nav: PageHeaderNavToggler, }) return } @@ -34,6 +37,16 @@ export function PageHeaderMenu({children}: ChildrenIncludable): JSX.Element { return <>{children} } +export interface PageHeaderNavTogglerProperties { + label?: string +} + +export function PageHeaderNavToggler(p: PageHeaderNavTogglerProperties): JSX.Element { + return +} + export function PageFooter({children}: ChildrenIncludable): JSX.Element { const [slots, outer] = useSlots(children, { links: [PageFooterLinkContainer], diff --git a/packages/site-page/package.json b/packages/site-page/package.json index f54c90114..9d898e016 100644 --- a/packages/site-page/package.json +++ b/packages/site-page/package.json @@ -4,8 +4,11 @@ "type": "module", "main": "lib/main.tsx", "exports": { - ".": "./lib/main.tsx", - "./main.css": "./lib/main.css" + "./client/define.ts": "./lib/client/define.ts", + "./client/element.ts": "./lib/client/element.ts", + "./client.ts": "./lib/client.ts", + "./main.css": "./lib/main.css", + ".": "./lib/main.tsx" }, "scripts": { "test:types": "tsc", @@ -14,6 +17,8 @@ "dependencies": { "@onlyoffice/preact-slots": "workspace:^", "@onlyoffice/preact-types": "workspace:^", + "@onlyoffice/site-chapter": "workspace:^", + "@onlyoffice/ui-icons": "workspace:^", "preact": "^10.22.0", "typescript": "^5.4.5" }, diff --git a/packages/site-part/lib/main.css b/packages/site-part/lib/main.css index c680b37d8..b0680e55f 100644 --- a/packages/site-part/lib/main.css +++ b/packages/site-part/lib/main.css @@ -4,24 +4,49 @@ background-color: var(--color-background-muted); display: flex; flex-direction: column; - padding-bottom: 140px; - padding-top: var(--base-size-112); + overflow: hidden; + padding-bottom: calc(var(--base-size-48) + var(--base-size-64)); + padding-top: var(--base-size-48); + + @media (--size-viewport-width-medium) { + padding-bottom: calc(var(--base-size-64) + var(--base-size-64)); + padding-top: var(--base-size-64); + } + + @media (--size-viewport-width-large) { + padding-bottom: calc(var(--base-size-112) + var(--base-size-64)); + padding-top: var(--base-size-112); + } } .part__inner { margin-inline: auto; max-width: var(--temp-part-breakpoint-xlarge); - padding-inline: var(--base-size-32); + padding-inline: var(--base-size-16); width: 100%; + + @media (--size-viewport-width-small) { + padding-inline: var(--base-size-24); + } + + @media (--size-viewport-width-medium) { + padding-inline: var(--base-size-32); + } } .part__hero h1 { - font-size: var(--text-display-font-size-default); - font-weight: var(--text-display-font-weight-default); - line-height: var(--text-display-line-height-default); + font-size: var(--text-title-font-size-large); + font-weight: var(--text-title-font-weight-large); + line-height: var(--text-title-line-height-large); margin-bottom: 0; margin-top: 0; text-align: center; + + @media (--size-viewport-width-medium) { + font-size: var(--text-display-font-size-default); + font-weight: var(--text-display-font-weight-default); + line-height: var(--text-display-line-height-default); + } } .part__hero p { @@ -34,8 +59,16 @@ .part__chapters { display: grid; gap: var(--base-size-32); - grid-template-columns: 1fr 1fr; - margin-top: var(--base-size-64); + grid-template-columns: 1fr; + margin-top: var(--base-size-40); + + @media (--size-viewport-width-small) { + margin-top: var(--base-size-64); + } + + @media (--size-viewport-width-medium) { + grid-template-columns: 1fr 1fr; + } } .part__chapter { @@ -47,16 +80,35 @@ border-style: solid; border-width: var(--size-border-width-thin); display: grid; - gap: var(--base-size-24); + gap: var(--base-size-16); grid-template-columns: min-content 1fr; grid-template-rows: min-content; - padding: var(--base-size-32); + padding: var(--base-size-16); position: relative; + + @media (--size-viewport-width-small) { + column-gap: var(--base-size-24); + padding: var(--base-size-24); + } + + @media (--size-viewport-width-medium) { + gap: var(--base-size-24); + padding: var(--base-size-32); + } } .part__chapter h3 { + font-size: var(--text-title-font-size-small); + font-weight: var(--text-title-font-weight-small); + line-height: var(--text-title-line-height-small); margin-bottom: 0; margin-top: 0; + + @media (--size-viewport-width-small) { + font-size: var(--text-title-font-size-medium); + font-weight: var(--text-title-font-weight-medium); + line-height: var(--text-title-line-height-medium); + } } .part__chapter a { @@ -84,12 +136,17 @@ } .part__help { - margin-top: var(--base-size-64); + margin-top: var(--base-size-48); + + @media (--size-viewport-width-medium) { + margin-top: var(--base-size-64); + } } /* Integration with @onlyoffice/site-help */ .part .help { - padding-left: var(--base-size-40); - padding-right: var(--base-size-40); + @media (--size-viewport-width-medium) { + padding-inline: var(--base-size-40); + } } diff --git a/packages/ui-form-control/lib/main.css b/packages/ui-form-control/lib/main.css index b836510eb..f3c8b0b8e 100644 --- a/packages/ui-form-control/lib/main.css +++ b/packages/ui-form-control/lib/main.css @@ -41,3 +41,9 @@ .form-control__control .select { width: 100%; } + +/* Integration with @onlyoffice/ui-text-input */ + +.form-control__control .text-input { + width: 100%; +} diff --git a/packages/ui-icons/static/poor/24/sidebar.svg b/packages/ui-icons/static/poor/24/sidebar.svg new file mode 100644 index 000000000..a9a92cc2f --- /dev/null +++ b/packages/ui-icons/static/poor/24/sidebar.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui-text-input/package.json b/packages/ui-text-input/package.json index 94c4d8eab..b731f7d4f 100644 --- a/packages/ui-text-input/package.json +++ b/packages/ui-text-input/package.json @@ -4,11 +4,11 @@ "type": "module", "main": "lib/main.tsx", "exports": { - ".": "./lib/main.tsx", - "./client.ts": "./lib/client.ts", "./client/define.ts": "./lib/client/define.ts", "./client/element.ts": "./lib/client/element.ts", - "./main.css": "./lib/main.css" + "./client.ts": "./lib/client.ts", + "./main.css": "./lib/main.css", + ".": "./lib/main.tsx" }, "scripts": { "test:types": "tsc", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d2a6da197..443306259 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1880,6 +1880,12 @@ importers: '@onlyoffice/preact-types': specifier: workspace:^ version: link:../preact-types + '@onlyoffice/site-chapter': + specifier: workspace:^ + version: link:../site-chapter + '@onlyoffice/ui-icons': + specifier: workspace:^ + version: link:../ui-icons preact: specifier: ^10.22.0 version: 10.22.0 diff --git a/site/assets/main.css b/site/assets/main.css index 882433afa..5a85650ac 100644 --- a/site/assets/main.css +++ b/site/assets/main.css @@ -41,7 +41,7 @@ table { .content h4, .content h5, .content h6 { - scroll-margin-top: calc(var(--temp-page-header-height) + var(--base-size-20)); + scroll-margin-top: calc(var(--page-header-height) + var(--base-size-20)); } .content h1 a[href^="#"], diff --git a/site/generations/page.ts b/site/generations/page.ts index 2d80d279f..20c1c8b5f 100644 --- a/site/generations/page.ts +++ b/site/generations/page.ts @@ -6,6 +6,7 @@ import {type ChapterData, ChapterDatum} from "../internal/chapter.tsx" import {type GlobalNavigationData, GlobalNavigationDatum} from "../internal/global-navigation.tsx" import {type HelpData, HelpDatum} from "../internal/help.tsx" import {type HomeData, HomeDatum} from "../internal/home.tsx" +import {type PageData, PageDatum} from "../internal/page.tsx" import {type PartData, PartDatum} from "../internal/part.tsx" declare module "@onlyoffice/eleventy-types" { @@ -26,6 +27,7 @@ declare module "@onlyoffice/eleventy-types" { defaultChapter?: ChapterData defaultPart?: PartData defaultHome?: HomeData + defaultDocument?: PageData } interface EleventyComputed { @@ -42,6 +44,7 @@ declare module "@onlyoffice/eleventy-types" { defaultChapter?(data: Data): ChapterData | undefined defaultPart?(data: Data): PartData | undefined defaultHome?(data: Data): HomeData | undefined + defaultDocument?(data: Data): PageData | undefined } } @@ -229,6 +232,22 @@ export function data(): Data { } return m }, + + document(d) { + const a = d.defaultDocument + if (!a) { + return + } + const b = d.document + if (!b) { + return a + } + return PageDatum.merge(a, b) + }, + + defaultDocument() { + return new PageDatum() + }, }, } } diff --git a/site/internal/chapter.tsx b/site/internal/chapter.tsx index 6b6eb725a..b96cdf2d2 100644 --- a/site/internal/chapter.tsx +++ b/site/internal/chapter.tsx @@ -206,6 +206,8 @@ export function ChapterNavigation(p: ChapterNavigationProperties): JSX.Element | return null } + // console.log(e.id) <- cache key + return {e.children.map((id) => { const e = s.find(id, "id") diff --git a/site/internal/global-navigation.css b/site/internal/global-navigation.css index 96a33d753..1db86b181 100644 --- a/site/internal/global-navigation.css +++ b/site/internal/global-navigation.css @@ -47,11 +47,11 @@ box-shadow: var(--temp-color-shadow-default-small); display: none; left: 0; - max-height: calc(100vh - var(--temp-page-header-height)); + max-height: calc(100vh - var(--page-header-height)); overflow: auto; position: absolute; right: 0; - top: var(--temp-page-header-height); + top: var(--page-header-height); @media (--size-viewport-width-medium) { background-color: transparent; diff --git a/site/internal/page.tsx b/site/internal/page.tsx new file mode 100644 index 000000000..c9f0879a8 --- /dev/null +++ b/site/internal/page.tsx @@ -0,0 +1,148 @@ +import {Sitemap} from "@onlyoffice/eleventy-sitemap" +import {type ChildrenIncludable} from "@onlyoffice/preact-types" +import { + Page as SPage, + PageFooter, + PageFooterCopyright, + PageFooterLinkContainer, + PageFooterThemeSwitcher, + PageHeader, + PageHeaderLogo, + PageHeaderMenu, + PageHeaderNavToggler, + ThemeSwitcher, + ThemeSwitcherOption, +} from "@onlyoffice/site-kit" +import {SrOnly} from "@onlyoffice/ui-kit" +import {OnlyofficeLogo} from "@onlyoffice/ui-logos" +import {type JSX, h} from "preact" +import {GlobalNavigation} from "./global-navigation.tsx" + +declare module "@onlyoffice/eleventy-types" { + interface Data { + document?: PageData + } + + interface EleventyComputed { + document?(data: Data): PageData | undefined + } +} + +export interface PageData { + chapterToggler?: boolean +} + +export class PageDatum implements PageData { + chapterToggler = false + + static merge(a: PageData, b: PageData): PageData { + const c = new PageDatum() + + if (b.chapterToggler) { + c.chapterToggler = b.chapterToggler + } else if (a.chapterToggler) { + c.chapterToggler = a.chapterToggler + } + + return c + } +} + +export interface PageProperties extends ChildrenIncludable { + url: string +} + +export function Page(p: PageProperties): JSX.Element { + // const s = Sitemap.shared + + // const e = s.find(p.url, "url") + // if (!e) { + // throw new Error(`Entity not found: ${p.url}`) + // } + // if (e.type !== "page") { + // throw new Error(`Current entity is not a page: ${e.type} (${p.url})`) + // } + + // const d = e.data.document + // if (!d) { + // throw new Error(`Page data not found: ${e.url}`) + // } + + return + + +

Navigation Menu

+ + + + + + + + {(() => { + // todo: A few pages utilize the eleventyExcludeFromCollections + // property. This property, when present, excludes the page from the + // Sitemap. Currently, we can not remove this property as some of the + // page formation logic depends on it. + + try { + const s = Sitemap.shared + + const e = s.find(p.url, "url") + if (!e) { + throw new Error(`Entity not found: ${p.url}`) + } + if (e.type !== "page") { + throw new Error(`Current entity is not a page: ${e.type} (${p.url})`) + } + + const d = e.data.document + if (!d) { + throw new Error(`Page data not found: ${e.url}`) + } + + if (d.chapterToggler) { + return + } + + return null + } catch { + return null + } + })()} + {/* {d.chapterToggler && } */} + +
+ {p.children} +
+ + +

Site-wide Links

+ + +

Get Information

+ Blog for developers + For contributors + Legal notice + + +

Get Help

+ Forum + Code on GitHub + Installation guides + Support contact form + + + + Light + Dark + Auto + + + + onlyoffice.com +

© Ascensio System SIA 2024. All right reserved

+ + + +} diff --git a/site/layouts/chapter.tsx b/site/layouts/chapter.tsx index d54a8cdc2..5fee92344 100644 --- a/site/layouts/chapter.tsx +++ b/site/layouts/chapter.tsx @@ -5,6 +5,9 @@ import {Chapter} from "../internal/chapter.tsx" export function data(): Data { return { layout: "page", + document: { + chapterToggler: true, + }, } } diff --git a/site/layouts/page.tsx b/site/layouts/page.tsx index 60cf1fb7c..a4b334737 100644 --- a/site/layouts/page.tsx +++ b/site/layouts/page.tsx @@ -1,69 +1,13 @@ import {type Context, type Data} from "@onlyoffice/eleventy-types" -import { - Page, - PageFooter, - PageFooterCopyright, - PageFooterLinkContainer, - PageFooterThemeSwitcher, - PageHeader, - PageHeaderLogo, - PageHeaderMenu, - ThemeSwitcher, - ThemeSwitcherOption -} from "@onlyoffice/site-kit" -import {SrOnly} from "@onlyoffice/ui-kit" -import {OnlyofficeLogo} from "@onlyoffice/ui-logos" import {type JSX, h} from "preact" -import {GlobalNavigation} from "@/internal/global-navigation.tsx" +import {Page} from "../internal/page.tsx" export function data(): Data { return { - layout: "html" + layout: "html", } } -export function render({content, ...ctx}: Context): JSX.Element { - return - - -

Navigation Menu

- - - - - - - - -
{content}
- - -

Site-wide Links

- - -

Get Information

- Blog for developers - For contributors - Legal notice - - -

Get Help

- Forum - Code on GitHub - Installation guides - Support contact form - - - - Light - Dark - Auto - - - - onlyoffice.com -

© Ascensio System SIA 2024. All right reserved

- - - +export function render(c: Context): JSX.Element { + return {c.content} }