diff --git a/M02_MasterTemplete/M02_MasterTemplete_ComboPanel.css b/M02_MasterTemplete/M02_MasterTemplete_ComboPanel.css index 7d592174..6b207165 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_ComboPanel.css +++ b/M02_MasterTemplete/M02_MasterTemplete_ComboPanel.css @@ -73,6 +73,18 @@ font-size: var(--text-caption); } +/* 고른 줄 + 바로 아래 [이 열에 쓰기] */ +.m02-cpanel__pick { + display: flex; + flex-direction: column; + gap: var(--spacing-4); + padding-bottom: var(--spacing-4); +} + +.m02-cpanel__pick > .ui-btn { + align-self: flex-end; +} + /* 이 열이 쓰는 조합 — 테두리로 늘 보임(고름 is-active 와 따로) */ .m02-cpanel__row.is-current { box-shadow: inset 3px 0 0 var(--color-primary); diff --git a/M02_MasterTemplete/M02_MasterTemplete_ComboPanel.ts b/M02_MasterTemplete/M02_MasterTemplete_ComboPanel.ts index 1624a049..f1bc2361 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_ComboPanel.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_ComboPanel.ts @@ -98,12 +98,7 @@ export function buildComboPanel(opts: ComboPanelOptions): ComboPanel { className: "m02-cpanel__body ui-sidebar-panel", children: [ card(TEXT.mine, mine), - card( - area ? TEXT.listArea : TEXT.listMaterial, - find.root, - list, - ...(opts.isAdmin ? [el("div", { className: "m02-side__row", children: [use] })] : []), - ), + card(area ? TEXT.listArea : TEXT.listMaterial, find.root, list), ], }); attachCollapsible(body); @@ -165,11 +160,15 @@ export function buildComboPanel(opts: ComboPanelOptions): ComboPanel { picked = r.키 === picked ? null : r.키; paint(); }); - return b; + // [이 열에 쓰기]는 고른 줄 바로 아래(목록 안) — 목록 밖 단추가 스크롤된 줄 글과 겹치지 않게 + return opts.isAdmin && r.키 === picked && r.키 !== current + ? el("div", { className: "m02-cpanel__pick", children: [b, use] }) + : b; }) : [el("p", { className: "m02-side__empty", text: q ? TEXT.empty : TEXT.none })]), ); - use.disabled = !picked || picked === current; + use.disabled = false; + if (use.isConnected) use.scrollIntoView({ block: "nearest" }); } async function refresh(): Promise {