ui: fix chopped BASE button border and mismatched keypad background
Root cause: rowBase was much narrower than the other rows. When we did Width(dispW).Align(Center).Render(rawGrid) the vertical join produced a non-rectangular block, so the panel's bottom border was drawn around the centered narrow line (chopped + shifted under BASE) and the bg 234 had large empty side regions on the bottom row. Fix: - Compute fullRowWidth from a complete row. - Render the BASE key centered inside a string of that exact width. - Now rawGrid is a true rectangle (all 5 rows same width). - Render the backing panel *tightly* to rawGrid first (no forced width). - Then center the resulting compact panel under the display with Width(dispW).Align(Center). Result: - Clean, straight bottom border under the BASE button. - The black keypad background now exactly matches the bounding box of the actual keys (including the centered BASE row). - No more dangling empty black space on the sides at the bottom. The rest of the tactile key styles, per-key pressed flash, and wide integrated display row are unchanged.
This commit is contained in:
parent
b0dfc31767
commit
9c27901c8e
@ -255,21 +255,36 @@ func (a *App) View() string {
|
|||||||
row2 := lipgloss.JoinHorizontal(lipgloss.Top, makeKey("4"), spacer, makeKey("5"), spacer, makeKey("6"), spacer, makeKey("*"), spacer, makeKey("C"))
|
row2 := lipgloss.JoinHorizontal(lipgloss.Top, makeKey("4"), spacer, makeKey("5"), spacer, makeKey("6"), spacer, makeKey("*"), spacer, makeKey("C"))
|
||||||
row3 := lipgloss.JoinHorizontal(lipgloss.Top, makeKey("1"), spacer, makeKey("2"), spacer, makeKey("3"), spacer, makeKey("-"), spacer, makeKey("AC"))
|
row3 := lipgloss.JoinHorizontal(lipgloss.Top, makeKey("1"), spacer, makeKey("2"), spacer, makeKey("3"), spacer, makeKey("-"), spacer, makeKey("AC"))
|
||||||
row4 := lipgloss.JoinHorizontal(lipgloss.Top, makeKey("0"), spacer, makeKey("."), spacer, makeKey("+/-"), spacer, makeKey("+"), spacer, makeKey("="))
|
row4 := lipgloss.JoinHorizontal(lipgloss.Top, makeKey("0"), spacer, makeKey("."), spacer, makeKey("+/-"), spacer, makeKey("+"), spacer, makeKey("="))
|
||||||
rowBase := lipgloss.JoinHorizontal(lipgloss.Top, makeKey("BASE"))
|
|
||||||
|
|
||||||
// Compact grid of keys
|
// Make the BASE row the same width as the other rows so the vertical join
|
||||||
rawGrid := lipgloss.JoinVertical(lipgloss.Left, row1, row2, row3, row4, rowBase)
|
// produces a clean rectangle. This fixes the chopped bottom border on BASE
|
||||||
|
// and makes the backing panel dimensions match the actual keypad content.
|
||||||
|
fullRowWidth := lipgloss.Width(row1)
|
||||||
|
baseOnly := makeKey("BASE")
|
||||||
|
baseRow := lipgloss.NewStyle().
|
||||||
|
Width(fullRowWidth).
|
||||||
|
Align(lipgloss.Center).
|
||||||
|
Render(baseOnly)
|
||||||
|
|
||||||
// Keypad backing panel: gives the whole grid a "calculator faceplate" look.
|
// Compact grid of keys — now every row has identical width.
|
||||||
// Darker background, subtle border, padding. Centered under the wide display.
|
rawGrid := lipgloss.JoinVertical(lipgloss.Left, row1, row2, row3, row4, baseRow)
|
||||||
|
|
||||||
|
// Keypad backing panel sized *tightly* to the (now rectangular) grid content.
|
||||||
|
// Then we center the whole panel under the display. This makes the black
|
||||||
|
// background exactly match the keypad's bounding box instead of having
|
||||||
|
// dangling empty space on the sides of the BASE row.
|
||||||
keypad := lipgloss.NewStyle().
|
keypad := lipgloss.NewStyle().
|
||||||
Border(lipgloss.NormalBorder()).
|
Border(lipgloss.NormalBorder()).
|
||||||
BorderForeground(lipgloss.Color("238")).
|
BorderForeground(lipgloss.Color("238")).
|
||||||
Background(lipgloss.Color("234")).
|
Background(lipgloss.Color("234")).
|
||||||
Padding(1, 2).
|
Padding(1, 2).
|
||||||
|
Render(rawGrid)
|
||||||
|
|
||||||
|
// Center the compact keypad panel under the wide display row.
|
||||||
|
keypad = lipgloss.NewStyle().
|
||||||
Width(dispW).
|
Width(dispW).
|
||||||
Align(lipgloss.Center).
|
Align(lipgloss.Center).
|
||||||
Render(rawGrid)
|
Render(keypad)
|
||||||
|
|
||||||
// Hint (minimal, non-wrapping, like gostations final player)
|
// Hint (minimal, non-wrapping, like gostations final player)
|
||||||
hint := lipgloss.NewStyle().Faint(true).Render("Tab:BASE 0-9 . = + - * / m:MOD c:C ac:AC q:quit")
|
hint := lipgloss.NewStyle().Faint(true).Render("Tab:BASE 0-9 . = + - * / m:MOD c:C ac:AC q:quit")
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user