diff --git a/B05_Profile/B05_Profile_UI_Profile_MassHaul.ts b/B05_Profile/B05_Profile_UI_Profile_MassHaul.ts index c544caf0d..6a4b5b778 100644 --- a/B05_Profile/B05_Profile_UI_Profile_MassHaul.ts +++ b/B05_Profile/B05_Profile_UI_Profile_MassHaul.ts @@ -145,7 +145,7 @@ export interface RouteMassHaulPanel { overlay: HTMLElement; isOpen(): boolean; setContext(next: RouteMassHaulContext | null): void; - /** 판 내용을 다시 그린다. 접혀 있으면 머리줄만 남기고 끝낸다. */ + /** 판 내용을 다시 그린다. 접혀 있으면 손잡이만 남기고 끝낸다. */ draw(params: RouteMassHaulDrawParams): void; } @@ -190,7 +190,7 @@ export function createRouteMassHaulPanel( handle.className = "b05-profile__masshaul-handle"; handle.append(handleControl.root); handleControl.root.setAttribute("aria-label", "유토곡선 패널"); - // 머리줄 — 접어도 남아 [창 분할]([attachSubPanelPopouts] 가 맨 앞에 붙임) · 손잡이가 닿는다(354-1). + // 머리줄 — [창 분할]([attachSubPanelPopouts] 가 맨 앞에 붙임 · 펼친 때만 보임) · 손잡이(접으면 판 위 경계에 매달림 · 367-2). const head = document.createElement("div"); head.className = "b05-profile__masshaul-head"; head.append(handle); @@ -249,7 +249,7 @@ export function createRouteMassHaulPanel( // 툴팁은 setOpen이 일반 문구로 덮으므로 매번 유토곡선용으로 다시 밝힌다. handleControl.root.title = next ? "유토곡선 접기" : "유토곡선 펼치기"; handle.classList.toggle("is-open", next); - // 접으면 머리줄만 남는다(배수유역도처럼 손잡이는 늘 닿음) + // 접으면 손잡이만 남는다(배수유역도처럼 손잡이는 늘 닿음) overlay.classList.toggle("is-collapsed", !next); onChanged(); } diff --git a/B05_Profile/B05_Profile_UI_Style_MassHaul.css b/B05_Profile/B05_Profile_UI_Style_MassHaul.css index 2af4459c8..1d458de7c 100644 --- a/B05_Profile/B05_Profile_UI_Style_MassHaul.css +++ b/B05_Profile/B05_Profile_UI_Style_MassHaul.css @@ -88,8 +88,9 @@ pointer-events: auto; } +/* 접음 = 판 높이 0 · 손잡이만 판 위 경계에 매달림(배수유역 접힘 꼴 · 367-2). */ .b05-profile__masshaul-overlay.is-collapsed:not(.is-popout) { - height: auto; + height: 0; } .b05-profile__masshaul-overlay.is-collapsed:not(.is-popout) > :not(.b05-profile__masshaul-head) { @@ -97,10 +98,13 @@ } .b05-profile__masshaul-overlay.is-collapsed:not(.is-popout) > .b05-profile__masshaul-head { - position: relative; - top: 0; - left: 0; - padding: 2px var(--spacing-8); + top: auto; + bottom: 100%; +} + +/* [창 분할]은 펼친 때만(367-2) — 새 창으로 뗀 [창 결합]은 그대로. */ +.b05-profile__masshaul-overlay.is-collapsed:not(.is-popout) .b05-subpanel__popout { + display: none; } /* 종단 패널을 접으면 판도 함께 숨는다(배수유역도와 같음). */ diff --git a/resources/tester/test_224_1c_subpanel_popout.py b/resources/tester/test_224_1c_subpanel_popout.py index eb8f2f684..2b8632bb1 100644 --- a/resources/tester/test_224_1c_subpanel_popout.py +++ b/resources/tester/test_224_1c_subpanel_popout.py @@ -1,7 +1,7 @@ # -*- coding: utf-8 -*- """224-1c(PLAN 325-3) 유토곡선 · 배수유역 [창 분할] — 종단 [창 분할]과 같은 양식 · 따로 새 창. -- 단추 = 두 판 머리줄 맨 앞(유토는 접어도 남는 머리줄 · 354-1) · 글 [창 분할]/[창 결합] · 툴팁에 판 이름. +- 단추 = 두 판 머리줄 맨 앞(유토는 펼친 때만 보임 · 367-2) · 글 [창 분할]/[창 결합] · 툴팁에 판 이름. - 창 이름 셋 다름(같으면 앞 창 body 를 덮어 조각이 사라짐). - 뗌 = 새 창 body · 뗀 유토 판 손잡이 · 리사이저는 CSS 로 감춤 · 배수 지도 관찰 rehome. - 붙임(단추 · 새 창 닫힘 · 페이지 떠남) = 제자리 — 종단 열 끝(종단 칸 아래) · 배수 content 끝. diff --git a/resources/tester/test_354_1_masshaul_own_panel.py b/resources/tester/test_354_1_masshaul_own_panel.py index ae4531f89..63c9d3601 100644 --- a/resources/tester/test_354_1_masshaul_own_panel.py +++ b/resources/tester/test_354_1_masshaul_own_panel.py @@ -3,7 +3,7 @@ - 종단 열(`b05-route-profile__column`) = [종단 칸(bodyWrap), 유토 판] · content 안이라 종단 [창 분할] (`.is-popout > :not(content)` 숨김)에도 같이 감 · B05 · B06 이 같은 `design_profile` 하나. -- 유토 판은 흐름 칸(겹침 아님) · 자기 리사이저 높이 · 접으면 머리줄만(손잡이 · [창 분할] 닿음). +- 유토 판은 흐름 칸(겹침 아님) · 자기 리사이저 높이 · 접으면 높이 0 · 손잡이만 매달림 · [창 분할] 숨김(367-2). - 높이 나눔 · 표 쌓기에서 빠짐(표 bottomOffset 없음) · X 동기화 없음(367-1 늘 전체 맞춤). """ @@ -57,6 +57,18 @@ def test_흐름_칸_자기_높이_접으면_머리줄(): ".b05-profile__masshaul-overlay.is-collapsed:not(.is-popout) > :not(.b05-profile__masshaul-head)", ) assert "display: none;" in hide + # 367-2 접음 = 높이 0 · 손잡이 판 위 경계에 매달림 · [창 분할] 숨김(뗀 창 [창 결합] 그대로) + folded = css_block(css, ".b05-profile__masshaul-overlay.is-collapsed:not(.is-popout)") + assert "height: 0;" in folded + head = css_block( + css, + ".b05-profile__masshaul-overlay.is-collapsed:not(.is-popout) > .b05-profile__masshaul-head", + ) + assert "top: auto;" in head and "bottom: 100%;" in head + assert "display: none;" in css_block( + css, ".b05-profile__masshaul-overlay.is-collapsed:not(.is-popout) .b05-subpanel__popout" + ) + assert ".is-popout .b05-subpanel__popout" not in css assert "display: none;" in css_block( css, ".b05-route-profile.is-collapsed .b05-profile__masshaul-overlay" )