76eff3c351
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Introduced `DocsPageSeparators` component to manage visual gaps between pages in the document editor. - Updated `DocsBodyMarginMasks` to include dark mode support for improved styling. - Refactored `DocsPageViewInner` to integrate new separators and margin masks, enhancing layout consistency. - Adjusted layout constants to increase the gap between stacked pages for better visual separation. - Improved test coverage for page flow calculations and layout metrics.
67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { DOCS_PAGE_GAP_PX } from "@/lib/drive/docs-page-layout-constants"
|
|
|
|
/** Canvas-colored gap + side margin gutters between stacked pages. */
|
|
export function DocsPageSeparators({
|
|
pageCount,
|
|
pageHeight,
|
|
pageWidth,
|
|
margins,
|
|
pageColor,
|
|
interPageSpacer,
|
|
}: {
|
|
pageCount: number
|
|
pageHeight: number
|
|
pageWidth: number
|
|
margins: { top: number; right: number; bottom: number; left: number }
|
|
pageColor: string
|
|
interPageSpacer: number
|
|
}) {
|
|
if (pageCount <= 1) return null
|
|
|
|
return (
|
|
<>
|
|
{Array.from({ length: pageCount - 1 }, (_, index) => {
|
|
const pageTop = index * (pageHeight + DOCS_PAGE_GAP_PX)
|
|
const gapTop = pageTop + pageHeight
|
|
const zoneTop = gapTop - margins.bottom
|
|
|
|
return (
|
|
<div key={`page-sep-${index}`} aria-hidden>
|
|
<div
|
|
className="docs-page-inter-margin-gutter pointer-events-none absolute z-[19] border-l border-[#dadce0] dark:border-[#5f6368]"
|
|
style={{
|
|
top: zoneTop,
|
|
left: 0,
|
|
width: margins.left,
|
|
height: interPageSpacer,
|
|
backgroundColor: pageColor,
|
|
}}
|
|
/>
|
|
<div
|
|
className="docs-page-inter-margin-gutter pointer-events-none absolute z-[19] border-r border-[#dadce0] dark:border-[#5f6368]"
|
|
style={{
|
|
top: zoneTop,
|
|
left: pageWidth - margins.right,
|
|
width: margins.right,
|
|
height: interPageSpacer,
|
|
backgroundColor: pageColor,
|
|
}}
|
|
/>
|
|
<div
|
|
className="docs-page-gap-band pointer-events-none absolute z-[20]"
|
|
style={{
|
|
top: gapTop,
|
|
left: 0,
|
|
width: pageWidth,
|
|
height: DOCS_PAGE_GAP_PX,
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
})}
|
|
</>
|
|
)
|
|
}
|