ui: remove keypad background container and its border
Per user request: eliminate the enclosing dark panel (bg 234 + NormalBorder) around the entire key grid. Only the individual key styling remains (bordered mini-panels with per-type colors, Height(2), pressed flash inversion). - The rawGrid is now centered directly under the display using Width(dispW).Align(Center). - BASE button still appears nicely centered on its row thanks to the uniform row width padding we added earlier. - Keys sit directly on the main card background. - Updated docs/UI_DESIGN.md to match. Much cleaner and closer to a pure 'tactile keys only' look.
This commit is contained in:
parent
9c27901c8e
commit
67d93acbaf
@ -24,7 +24,7 @@ This layout keeps the galculator spirit (base visible at a glance next to the bi
|
|||||||
## Keypad Grid (Tactile Decoration)
|
## Keypad Grid (Tactile Decoration)
|
||||||
Sparse for MVP (no memory, no %, no bitwise, no scientific, no A-F yet).
|
Sparse for MVP (no memory, no %, no bitwise, no scientific, no A-F yet).
|
||||||
|
|
||||||
The keypad is now decorated to evoke a physical, tactile calculator:
|
The keypad is decorated to evoke a physical, tactile calculator using only the keys themselves (no enclosing background panel or outer border around the grid):
|
||||||
|
|
||||||
- Each key is a bordered mini-panel (NormalBorder color 238) with its own background and foreground.
|
- Each key is a bordered mini-panel (NormalBorder color 238) with its own background and foreground.
|
||||||
- Base key style: dark bg 236, light fg 250, subtle border — gives a "raised key" appearance.
|
- Base key style: dark bg 236, light fg 250, subtle border — gives a "raised key" appearance.
|
||||||
@ -33,11 +33,12 @@ The keypad is now decorated to evoke a physical, tactile calculator:
|
|||||||
- Operators (+ - * / =): accent color 63 for quick recognition.
|
- Operators (+ - * / =): accent color 63 for quick recognition.
|
||||||
- Clears (C, AC): red-tinted bg 52 + fg 203 (warning/danger).
|
- Clears (C, AC): red-tinted bg 52 + fg 203 (warning/danger).
|
||||||
- MOD: highlighted (214 orange).
|
- MOD: highlighted (214 orange).
|
||||||
- BASE: prominent border color 63 + bold (the special display function).
|
- BASE: prominent border color 63 + bold (stands out as the special display function).
|
||||||
- Pressed state: the key inverts to the bright flashStyle (white fg on 63 bg, bold border) for ~140ms on every action. This provides immediate "tactile click" visual feedback (modeled directly on gostations volume/skip/stop flashes).
|
- Pressed state: the key inverts to the bright flashStyle (white fg on 63 bg, bold) for ~140ms on every action. This provides immediate "tactile click" visual feedback (modeled directly on gostations volume/skip/stop flashes).
|
||||||
- Keys use Height(2) for chunkier, more button-like presence.
|
- Keys use Height(2) for chunkier, more button-like presence.
|
||||||
- Spacing (" " gaps) between keys and a backing panel (bg 234 + its own border) give the whole keypad a "faceplate" or "keyboard tray" look, making the individual keys pop as separate physical buttons.
|
- Spacing (" " gaps) between keys.
|
||||||
- The entire keypad backing is full-width (matching the display) and centered.
|
|
||||||
|
The keys sit directly on the main card background (no faceplate container).
|
||||||
|
|
||||||
Layout sketch (subject to refinement; 4-5 columns):
|
Layout sketch (subject to refinement; 4-5 columns):
|
||||||
|
|
||||||
|
|||||||
@ -256,9 +256,9 @@ func (a *App) View() string {
|
|||||||
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("="))
|
||||||
|
|
||||||
// Make the BASE row the same width as the other rows so the vertical join
|
// Make the BASE row the same width as the other rows.
|
||||||
// produces a clean rectangle. This fixes the chopped bottom border on BASE
|
// This ensures the BASE button is nicely centered on its own row
|
||||||
// and makes the backing panel dimensions match the actual keypad content.
|
// when the whole grid is centered under the display.
|
||||||
fullRowWidth := lipgloss.Width(row1)
|
fullRowWidth := lipgloss.Width(row1)
|
||||||
baseOnly := makeKey("BASE")
|
baseOnly := makeKey("BASE")
|
||||||
baseRow := lipgloss.NewStyle().
|
baseRow := lipgloss.NewStyle().
|
||||||
@ -266,25 +266,17 @@ func (a *App) View() string {
|
|||||||
Align(lipgloss.Center).
|
Align(lipgloss.Center).
|
||||||
Render(baseOnly)
|
Render(baseOnly)
|
||||||
|
|
||||||
// Compact grid of keys — now every row has identical width.
|
// Compact grid of keys — every row has identical width so the BASE
|
||||||
|
// button sits nicely centered on its row.
|
||||||
rawGrid := lipgloss.JoinVertical(lipgloss.Left, row1, row2, row3, row4, baseRow)
|
rawGrid := lipgloss.JoinVertical(lipgloss.Left, row1, row2, row3, row4, baseRow)
|
||||||
|
|
||||||
// Keypad backing panel sized *tightly* to the (now rectangular) grid content.
|
// Center the key grid directly under the display.
|
||||||
// Then we center the whole panel under the display. This makes the black
|
// No enclosing container or background panel — just the individually
|
||||||
// background exactly match the keypad's bounding box instead of having
|
// styled keys (each with their own border + color).
|
||||||
// dangling empty space on the sides of the BASE row.
|
|
||||||
keypad := lipgloss.NewStyle().
|
keypad := lipgloss.NewStyle().
|
||||||
Border(lipgloss.NormalBorder()).
|
|
||||||
BorderForeground(lipgloss.Color("238")).
|
|
||||||
Background(lipgloss.Color("234")).
|
|
||||||
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(keypad)
|
Render(rawGrid)
|
||||||
|
|
||||||
// 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