fix(B06): 단 수 조작을 높이 행과 같은 형식으로 + 버튼 행열 정렬
- 추가 기슭막이(단): 직접 입력 제거 — 높이와 동일한 [- 값 +] 형식(0단 표기) - 값 조작 버튼 26×22 고정 폭 — 높이·단 수·십자 이동의 열이 맞는다 - 값 표시 폭 3.5em 고정(높이 2.0m / 0단 동일 열) Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -219,29 +219,21 @@ export function buildStructurePanel(deps: StructurePanelDeps): StructurePanelHan
|
||||
});
|
||||
structureParts.controls.append(select);
|
||||
|
||||
// 다단 기슭막이 단 수(2026-08-22 사용자) — 숫자 입력 + +/- 병행(스피너는 CSS 제거).
|
||||
// 다단 기슭막이 단 수(2026-08-22 사용자) — 높이 행과 같은 형식(- 값 +),
|
||||
// 직접 입력 없음. 현재 단 수는 show()가 채운다.
|
||||
const extraParts = makeRow(L("B06_Cross_Extra_Count"));
|
||||
const extraRow = extraParts.row;
|
||||
const countInput = document.createElement("input");
|
||||
countInput.type = "number";
|
||||
countInput.min = "0";
|
||||
countInput.max = "9";
|
||||
countInput.step = "1";
|
||||
countInput.className = "b06-structure-panel__count";
|
||||
const clampCount = (value: number): number =>
|
||||
Math.max(0, Math.min(9, Math.round(Number.isFinite(value) ? value : 0)));
|
||||
countInput.addEventListener("change", () => {
|
||||
const requested = clampCount(Number(countInput.value));
|
||||
countInput.value = String(requested);
|
||||
deps.setExtraCount(requested);
|
||||
});
|
||||
const countValue = document.createElement("span");
|
||||
countValue.className = "b06-structure-panel__hval";
|
||||
let currentCount = 0;
|
||||
const clampCount = (value: number): number => Math.max(0, Math.min(9, Math.round(value)));
|
||||
const countMinus = makeButton("-", L("B06_Cross_Extra_Remove"), () =>
|
||||
deps.setExtraCount(clampCount(Number(countInput.value) - 1)),
|
||||
deps.setExtraCount(clampCount(currentCount - 1)),
|
||||
);
|
||||
const countPlus = makeButton("+", L("B06_Cross_Extra_Add"), () =>
|
||||
deps.setExtraCount(clampCount(Number(countInput.value) + 1)),
|
||||
deps.setExtraCount(clampCount(currentCount + 1)),
|
||||
);
|
||||
extraParts.controls.append(countMinus, countInput, countPlus);
|
||||
extraParts.controls.append(countMinus, countValue, countPlus);
|
||||
|
||||
const closeButton = makeButton("✕", L("B06_Cross_Revet_Close"), () => deps.close());
|
||||
closeButton.classList.add("b06-structure-panel__close");
|
||||
@@ -293,7 +285,8 @@ export function buildStructurePanel(deps: StructurePanelDeps): StructurePanelHan
|
||||
// 나타났다 사라지면 레이아웃이 널뛴다).
|
||||
const extra = deps.extraState();
|
||||
extraRow.classList.toggle("is-hidden", key !== "outlet");
|
||||
countInput.value = String(extra.count);
|
||||
currentCount = extra.count;
|
||||
countValue.textContent = `${extra.count}단`;
|
||||
const adjust = deps.adjustFor(key);
|
||||
// 조작 요약 — 0이면 "자동". 좌우는 안/바깥, 상하는 위/아래로 적는다.
|
||||
const parts: string[] = [];
|
||||
|
||||
@@ -637,28 +637,20 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 숫자 입력의 브라우저 스피너 제거(2026-08-22 사용자 — +/- 버튼으로 조작). */
|
||||
.b06-structure-panel__count::-webkit-inner-spin-button,
|
||||
.b06-structure-panel__count::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.b06-structure-panel__count {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
/* 값 조작 버튼은 정사각 고정 폭 — 높이·단 수·십자 이동의 행열이 맞는다
|
||||
(2026-08-22 사용자 — 버튼 행열 정렬). */
|
||||
.b06-structure-panel__controls .b06-structure-panel__btn {
|
||||
box-sizing: border-box;
|
||||
width: 26px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
width: 2.5em;
|
||||
padding: 0 4px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-inputs);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text-body);
|
||||
font-size: var(--text-caption);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.b06-structure-panel__hval {
|
||||
min-width: 3em;
|
||||
box-sizing: border-box;
|
||||
width: 3.5em;
|
||||
text-align: center;
|
||||
color: var(--color-text-body);
|
||||
font-size: var(--text-caption);
|
||||
|
||||
Reference in New Issue
Block a user