diff --git a/A00_Common/map/map_layer_bar.ts b/A00_Common/map/map_layer_bar.ts index 734fb45f4..418e864e2 100644 --- a/A00_Common/map/map_layer_bar.ts +++ b/A00_Common/map/map_layer_bar.ts @@ -1,7 +1,7 @@ /* ============================================================================= * map_layer_bar.ts * 공용 지도 겹 줄(PLAN 569-2 · 586-2 · 624-2 · 634-2 · 요구 530 · 546) — 겹 단추 한 줄(공용 지도 도구줄 `createMapTools`): - * 단독 단추(표 묶음 없음) | 묶음 단추(여럿 고르기 메뉴 · 켠 수 배지 · 골라도 안 닫힘) | 그래픽 카드 단추(GL ↔ 옛 캔버스). + * 단독 단추(표 묶음 없음) | 묶음 단추(여럿 고르기 메뉴 · 하나라도 켜면 눌림 · 골라도 안 닫힘) | 그래픽 카드 단추(GL ↔ 옛 캔버스). * 보일 겹 · 묶음 · 호버제목 · 처음 켬 · 취향 열쇠 = 표(`map_layer_list`) · 누르면 켬끔 뒤집고 취향에 적고 `onToggle`. * 막힘 = 지형을 아직 안 받음(`ready: false`) · 조각만 쓰는 겹은 옛 캔버스에서 · 페이지 까닭(`why`) — 「제목 — 까닭」. * 받기 · 그리기 · 범례는 페이지 몫 — 켬끔 값(`on`)은 같은 객체를 같이 씀. diff --git a/resources/tester/test_634_1_pick_menu_row.py b/resources/tester/test_634_1_pick_menu_row.py index c16fb31db..65c46fdcd 100644 --- a/resources/tester/test_634_1_pick_menu_row.py +++ b/resources/tester/test_634_1_pick_menu_row.py @@ -1,4 +1,4 @@ -"""634-1 부품(요구 546) — 여럿 고르기 메뉴(안 닫힘 · 켠 수 배지 · 줄 아이콘 · 막힘) · 한 행 두 영역 · 견본 · 아이콘.""" +"""634-1 부품(요구 546) — 여럿 고르기 메뉴(안 닫힘 · 켜면 눌림 · 켠 수 숫자 없음(요구 551) · 줄 아이콘 · 막힘) · 한 행 두 영역 · 견본 · 아이콘.""" import re from pathlib import Path @@ -11,18 +11,16 @@ TOOLS_CSS = (UI / "ui_template_map_tools.css").read_text(encoding="utf-8") ICONS = (UI / "ui_template_icons.ts").read_text(encoding="utf-8") -def test_여럿_고르기_안_닫힘_배지(): +def test_여럿_고르기_안_닫힘_눌림(): pick = MENU[MENU.index("export function createPickMenu(") :] assert '"menuitemcheckbox"' in pick and "values," in pick and "setItem(value, patch)" in pick click = pick[pick.index('b.addEventListener("click"') :] click = click[: click.index("pop.append(b);")] # 여럿 = 켬끔 뒤 바로 돌아감(setOpen(false) 앞) assert click.index("if (multi)") < click.index("setOpen(false)") - assert ( - 'createBadge("0", "accent", { kind: "count"' in pick - and "badge.hidden = count === 0;" in pick - ) - assert 'root.setAttribute("aria-pressed", String(count > 0));' in pick + # 요구 551 — 켠 수 원형 숫자 걷음 · 켠 표시 = 단추 눌림 + assert "createBadge" not in MENU and "ui-badge" not in MENU_CSS + assert 'root.setAttribute("aria-pressed", String(values().length > 0));' in pick assert 'window.addEventListener("resize", onShift);' in pick # 창 크기 = 닫힘 assert 'document.addEventListener("scroll", onShift, true);' in pick # 밀기 = 닫힘 assert ".ui-pick-menu--multi" in MENU_CSS and ".ui-row-menu__item:disabled" in MENU_CSS diff --git a/ui_template/ui_template_badge.css b/ui_template/ui_template_badge.css index f3d6c8166..2ffde90d0 100644 --- a/ui_template/ui_template_badge.css +++ b/ui_template/ui_template_badge.css @@ -84,9 +84,3 @@ .ui-badge[hidden] { display: none !important; } - -/* 수 · 진행색(634-1 · 지도 겹 묶음 켠 수) */ -.ui-badge--count.ui-badge--accent { - background: var(--color-primary); - color: var(--color-primary-text); -} diff --git a/ui_template/ui_template_context_menu.css b/ui_template/ui_template_context_menu.css index bab8d247e..1054438dc 100644 --- a/ui_template/ui_template_context_menu.css +++ b/ui_template/ui_template_context_menu.css @@ -138,7 +138,7 @@ opacity: 0.55; } -/* 여럿 고르기 단추(634-1) — 아이콘 + 켠 수 배지 + ▾ */ +/* 여럿 고르기 단추(634-1 · 요구 551) — 아이콘 + ▾ */ .ui-icon-btn.ui-pick-menu--multi { width: auto; min-width: var(--ui-size-h); @@ -150,9 +150,6 @@ font-size: var(--text-caption); line-height: 1; } -.ui-pick-menu--multi > .ui-badge[hidden] { - display: none; -} /* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ :is(.ui-row-menu, .ui-row-menu__btn, .ui-row-menu__item)[hidden] { diff --git a/ui_template/ui_template_context_menu.ts b/ui_template/ui_template_context_menu.ts index db8dbb558..7737c27b7 100644 --- a/ui_template/ui_template_context_menu.ts +++ b/ui_template/ui_template_context_menu.ts @@ -12,7 +12,6 @@ * ========================================================================== */ import { createIconButton } from "./ui_template_button"; -import { createBadge } from "./ui_template_badge"; import { icon, type IconName } from "./ui_template_icons"; import "./ui_template_context_menu.css"; import { showConfirmDialog } from "./ui_template_modal"; @@ -302,7 +301,7 @@ export function createRowMenu(items: RowMenuItem[]): HTMLElement { /* ============================================================================= * 부품 「고르기 메뉴」(PLAN 626-1 · 634-1 · 요구 530 · 546 · 지도 도구줄 단추 하나 + 아래 판) * 꼴 = 하나(기본) — 아이콘 단추(32) → 아래 판 = 항목 하나만 고름(✓) · 누르면 닫힘 · `offLabel` 이면 맨 끝 「끔」 줄 + 고르면 눌림 - * 여럿(`multi`) — 아이콘 + 켠 수 배지(0 = 없음) + ▾ · 판 = 켬끔 줄(✓) · 눌러도 안 닫힘 · 하나라도 켜면 눌림 + * 여럿(`multi`) — 아이콘 + ▾ · 판 = 켬끔 줄(✓) · 눌러도 안 닫힘 · 하나라도 켜면 눌림(켠 수 숫자 없음 · 요구 551) * 줄 = `icon` · `title`(마우스 글) · `disabled`(흐림) — 바꿈은 `setItem(value, { checked, disabled, title })` * 자리 = 판은 화면 맨 위(body · fixed) — 도구줄 가로 밀기 칸에 잘리지 않게 · 단추 바로 아래 · 밀기 · 창 크기 바뀌면 닫힘 * 상태 = 고름 `aria-checked` · 단추 `aria-pressed` · 막힘(단추 · 줄 disabled) @@ -351,13 +350,11 @@ export function createPickMenu(opts: { }); root.setAttribute("aria-haspopup", "menu"); root.setAttribute("aria-expanded", "false"); - const badge = createBadge("0", "accent", { kind: "count", size: 18 }); if (multi) { root.classList.add("ui-pick-menu--multi"); - badge.hidden = true; const caret = Object.assign(document.createElement("span"), { textContent: "▾" }); caret.className = "ui-pick-menu__caret"; - root.append(badge, caret); + root.append(caret); } const pop = document.createElement("div"); pop.className = "ui-row-menu__pop ui-pick-menu__pop"; @@ -396,16 +393,13 @@ export function createPickMenu(opts: { .filter((row) => row.getAttribute("aria-checked") === "true") .map((row) => row.dataset.value!); let current: string | null = null; - /** 단추 눌림 · 배지 — 줄 켬에 맞춤. */ + /** 단추 눌림 — 줄 켬에 맞춤(여럿 = 하나라도 켜면 눌림). */ function paint(): void { if (!multi) { if (opts.offLabel) root.setAttribute("aria-pressed", String(current !== null)); return; } - const count = values().length; - root.setAttribute("aria-pressed", String(count > 0)); - badge.textContent = String(count); - badge.hidden = count === 0; + root.setAttribute("aria-pressed", String(values().length > 0)); } function mark(row: HTMLButtonElement, checked: boolean): void { row.setAttribute("aria-checked", String(checked)); diff --git a/ui_template/ui_template_ui_kit_parts.ts b/ui_template/ui_template_ui_kit_parts.ts index f5743ffbc..1d62c05b0 100644 --- a/ui_template/ui_template_ui_kit_parts.ts +++ b/ui_template/ui_template_ui_kit_parts.ts @@ -134,7 +134,7 @@ const gridRows = (): Cell[][] => [ [{ content: "암", head: true }, "3.10", "m³"], [{ content: "쌓기", colSpan: 2, head: true }, "8.05", "m³"], ]; -/** 634-1 견본 — 고르기 메뉴 하나(추천 노선 꼴) · 여럿(지도 겹 묶음 · 켠 수 배지 · 막힌 줄) */ +/** 634-1 견본 — 고르기 메뉴 하나(추천 노선 꼴) · 여럿(지도 겹 묶음 · 켜면 눌림 · 막힌 줄) */ const pickDemo = (s: KitState): HTMLElement | null => { if (s !== "default" && s !== "disabled") return null; const one = createPickMenu({ icon: "compass", title: "추천노선", items: [{ value: "a", label: "노선 가" }, { value: "b", label: "노선 나" }], offLabel: "끔", onPick: noop }); @@ -334,7 +334,7 @@ export const KIT_PARTS: KitPart[] = [ { key: "row-menu", name: "⋯ · 오른쪽 메뉴", group: "compound", kinds: "줄 끝 ⋯(28) · 펼친 판 · 위험 항목(빨강 + 확인창) · 막힌 항목", file: "ui_template_context_menu.ts", demo: (s) => { if (s === "error") return null; if (s === "default") return createRowMenu(KIT_MENU); if (s === "hover") { const m = createRowMenu(KIT_MENU); markState(m.querySelector(".ui-row-menu__btn")!, s); return m; } return openMenu(s, s === "disabled" ? [{ label: "내보내기", onClick: noop, disabled: true }, ...KIT_MENU] : KIT_MENU); } }, - { key: "pick-menu", name: "고르기 메뉴(하나 · 여럿)", group: "compound", kinds: "아이콘 단추 32 → 아래 판 · 하나(✓ · 누르면 닫힘 · 끔 줄) · 여럿(켬끔 ✓ · 안 닫힘 · 켠 수 배지 · ▾) · 줄 아이콘 · 막힌 줄 흐림", file: "ui_template_context_menu.ts", demo: pickDemo }, + { key: "pick-menu", name: "고르기 메뉴(하나 · 여럿)", group: "compound", kinds: "아이콘 단추 32 → 아래 판 · 하나(✓ · 누르면 닫힘 · 끔 줄) · 여럿(켬끔 ✓ · 안 닫힘 · 켜면 눌림 · ▾) · 줄 아이콘 · 막힌 줄 흐림", file: "ui_template_context_menu.ts", demo: pickDemo }, { key: "empty", name: "빈 상태", group: "compound", kinds: "선 아이콘 · 한 줄 · 주 단추 · 사용법 · 작은 꼴", file: "ui_template_empty.ts", demo: (s) => (s === "default" ? col(createEmpty({ icon: "folder", text: "아직 프로젝트가 없음", hint: "새 프로젝트를 만들어 시작", action: createButton({ label: "새 프로젝트", onClick: noop }), onGuide: noop }), createEmpty({ text: "고른 측점 없음", small: true })) : null) }, { key: "modal", name: "모달 · 확인창", group: "compound", kinds: "보통(720) · 넓음 · 폭 단 24rem · 40rem · 960 · 넓은 중간 1100 × 680 · 긴 제목 = 한 줄 말줄임 · 확인 · 위험 확인 · 글 묻기(prompt 대신)", file: "ui_template_modal.ts",