docs(storybook): tidy SW Storybook gauges, responsive rows and page titles
Deploy Storybook / deploy (push) Successful in 1m11s
Deploy Storybook / deploy (push) Successful in 1m11s
- SWPopup Custom Content and the SW Viewer options panel use SWSlider style B (appearance="property") only; the A/B comparison, the style select and the green panel gauge are gone (SWViewerSlider itself is unchanged). - SW Header / Viewer / Footer Responsive More: the 1920px row shows only when the content Inner is 1920px or wider (container query); Footer rows fit the page width without scrollers so ▲ More handles narrow widths. - Logo pages fit without scrollers; SW Header Logo Slot is "Logo" in the sidebar with the title "SW Header — 로고" (ID sw-header--logo-slot kept). - Property Panel (was "Property Panel · 4개 비교"): no Inner scroller, the page scrolls, 2 × 2 grid with one column below 720px. - SW Footer drops the "실제 Footer 조합 (동작)" heading; SW Viewer Header page is titled "SW Viewer Header" with 기본형 and 최소화 · 닫기 버튼 only. - Browser tests, inventory and README follow these changes; visual baselines are not updated.
This commit is contained in:
1 parent
ccafc6e332
commit
258e0a4b68
14 files changed
+123
-109
No files matched your search
@@ -86,11 +86,13 @@ export const ViewerHeader: Story = {
|
||||
name: "Viewer Header",
|
||||
render: () => (
|
||||
<StoryPage>
|
||||
<StoryPageHeader title="SW Viewer — SWViewerHeader" />
|
||||
<StorySection title="기본형 (1440px, 도면 열림)">
|
||||
{/* 2026-10-22 (user request): page title and the two sections only. The minimize / close version keeps
|
||||
SWHeaderWindowControls at the right end of `trailing`; the program owns the real window actions. */}
|
||||
<StoryPageHeader title="SW Viewer Header" />
|
||||
<StorySection title="기본형">
|
||||
<ViewerScreen />
|
||||
</StorySection>
|
||||
<StorySection title="최소화 · 닫기 버튼 (1440px, 도면 열림)" description="SWHeader의 최소화·닫기 버튼(SWHeaderWindowControls)을 trailing 오른쪽 끝에 그대로 둔 버전입니다. 실제 창 최소화·닫기는 프로그램이 처리합니다.">
|
||||
<StorySection title="최소화 · 닫기 버튼">
|
||||
<div data-viewer-window-controls=""><ViewerScreen windowControls /></div>
|
||||
</StorySection>
|
||||
</StoryPage>
|
||||
@@ -335,12 +337,12 @@ export const Responsive: Story = {
|
||||
<StoryPage>
|
||||
<StoryPageHeader title="SW Viewer — 화면 너비" />
|
||||
<Log lines={demo.log} />
|
||||
<div className="sw-story-stack">
|
||||
<div className="sw-story-stack sw-story-responsive">
|
||||
{[1920, 1440, 1280, 950, 860, 760, 520].map(width => (
|
||||
<StorySection key={width} title={`${width}px`}>
|
||||
<div key={width} className={width === 1920 ? "sw-story-responsive-wide" : undefined}><StorySection title={`${width}px`}>
|
||||
{/* The row width is a maximum (2026-10-22): on a narrower screen the header shrinks with it instead of scrolling. */}
|
||||
<div className="sw-story-scroller sw-viewer-story-menu-row"><div style={{ width: "100%", maxWidth: width }} data-width={width}><SWViewerHeader documentTitle={demo.documentName} {...demo.fileProps} groups={demo.groups} trailing={demo.trailing} onCommand={demo.onCommand} /></div></div>
|
||||
</StorySection>
|
||||
</StorySection></div>
|
||||
))}
|
||||
</div>
|
||||
</StoryPage>
|
||||
@@ -404,9 +406,10 @@ export const Logo: Story = {
|
||||
<div className="sw-story-stack">
|
||||
{rows.map(row => (
|
||||
<StorySection key={row.title} title={row.title}>
|
||||
<div className="sw-story-scroller"><div style={{ width: 1440 }} data-logo-case={row.title}>
|
||||
{/* 1440px is a maximum (2026-10-22): no scroller; the header fits the available width. */}
|
||||
<div style={{ width: "100%", maxWidth: 1440 }} data-logo-case={row.title}>
|
||||
<SWViewerHeader {...row.props} documentTitle={demo.documentName} {...demo.fileProps} groups={demo.groups} trailing={demo.trailing} onCommand={demo.onCommand} />
|
||||
</div></div>
|
||||
</div>
|
||||
</StorySection>
|
||||
))}
|
||||
<Log lines={demo.log} />
|
||||
|
||||
Reference in new issue
Block a user