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.
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import { DOCS_PAGE_GAP_PX } from "@/lib/drive/docs-page-layout-constants"
|
|
import type { DocPageBorderCss } from "@/lib/drive/doc-page-setup"
|
|
import { cn } from "@/lib/utils"
|
|
export function DocsPageRims({
|
|
pageCount,
|
|
pageHeight,
|
|
pageWidth,
|
|
sheetBorderCss,
|
|
}: {
|
|
pageCount: number
|
|
pageHeight: number
|
|
pageWidth: number
|
|
sheetBorderCss?: DocPageBorderCss
|
|
}) {
|
|
return (
|
|
<>
|
|
{Array.from({ length: pageCount }, (_, index) => {
|
|
const pageTop = index * (pageHeight + DOCS_PAGE_GAP_PX)
|
|
return (
|
|
<div
|
|
key={`page-rim-${index}`}
|
|
className={cn(
|
|
"docs-page-rim pointer-events-none absolute z-[22] box-border",
|
|
sheetBorderCss && "docs-page-rim--imported"
|
|
)}
|
|
style={{
|
|
top: pageTop,
|
|
left: 0,
|
|
width: pageWidth,
|
|
height: pageHeight,
|
|
...(sheetBorderCss
|
|
? {
|
|
borderTop: sheetBorderCss.top ?? "none",
|
|
borderRight: sheetBorderCss.right ?? "none",
|
|
borderBottom: sheetBorderCss.bottom ?? "none",
|
|
borderLeft: sheetBorderCss.left ?? "none",
|
|
boxShadow: "none",
|
|
}
|
|
: {}),
|
|
}}
|
|
aria-hidden
|
|
/>
|
|
)
|
|
})}
|
|
</>
|
|
)
|
|
}
|