Standardize TUI formatting and styling across all screens
This commit is contained in:
@@ -2,6 +2,7 @@ package screens
|
||||
|
||||
import (
|
||||
"github.com/calmcacil/wg-admin/internal/tui/components"
|
||||
"github.com/calmcacil/wg-admin/internal/tui/theme"
|
||||
"github.com/charmbracelet/bubbletea"
|
||||
"github.com/charmbracelet/lipgloss"
|
||||
)
|
||||
@@ -41,55 +42,41 @@ func (s *HelpScreen) View() string {
|
||||
// Breadcrumb: Help
|
||||
breadcrumb := components.RenderBreadcrumb([]components.BreadcrumbItem{{Label: "Help", ID: "help"}})
|
||||
|
||||
// Styles
|
||||
// Styles using theme
|
||||
borderStyle := lipgloss.NewStyle().
|
||||
BorderStyle(lipgloss.RoundedBorder()).
|
||||
BorderForeground(lipgloss.Color("62")).
|
||||
BorderForeground(theme.StyleBorder).
|
||||
Padding(1, 2)
|
||||
|
||||
headerStyle := lipgloss.NewStyle().
|
||||
Foreground(lipgloss.Color("62")).
|
||||
Bold(true).
|
||||
MarginBottom(1)
|
||||
|
||||
categoryStyle := lipgloss.NewStyle().
|
||||
Foreground(lipgloss.Color("226")).
|
||||
Bold(true).
|
||||
MarginTop(1).
|
||||
MarginBottom(0)
|
||||
|
||||
keyStyle := lipgloss.NewStyle().
|
||||
Foreground(lipgloss.Color("63")).
|
||||
Bold(true).
|
||||
Width(12)
|
||||
keyStyle := theme.StyleHelpKey.Width(12)
|
||||
|
||||
descStyle := lipgloss.NewStyle().
|
||||
Foreground(lipgloss.Color("250"))
|
||||
|
||||
// Header
|
||||
header := headerStyle.Render("Keyboard Shortcuts")
|
||||
header := theme.StyleTitle.MarginBottom(1).Render("Keyboard Shortcuts")
|
||||
|
||||
// Shortcut groups
|
||||
navigationGroup := categoryStyle.Render("Navigation") + "\n" +
|
||||
navigationGroup := theme.StyleWarning.Bold(true).MarginTop(1).MarginBottom(0).Render("Navigation") + "\n" +
|
||||
keyStyle.Render("j / ↓") + descStyle.Render("Move down") + "\n" +
|
||||
keyStyle.Render("k / ↑") + descStyle.Render("Move up") + "\n" +
|
||||
keyStyle.Render("← →") + descStyle.Render("Move left/right") + "\n" +
|
||||
keyStyle.Render("Enter") + descStyle.Render("Select") + "\n" +
|
||||
keyStyle.Render("Esc") + descStyle.Render("Go back")
|
||||
|
||||
actionsGroup := categoryStyle.Render("Actions") + "\n" +
|
||||
actionsGroup := theme.StyleWarning.Bold(true).MarginTop(1).MarginBottom(0).Render("Actions") + "\n" +
|
||||
keyStyle.Render("a") + descStyle.Render("Add client") + "\n" +
|
||||
keyStyle.Render("d") + descStyle.Render("Delete client") + "\n" +
|
||||
keyStyle.Render("Q") + descStyle.Render("Show QR code") + "\n" +
|
||||
keyStyle.Render("r") + descStyle.Render("Refresh list") + "\n" +
|
||||
keyStyle.Render("l") + descStyle.Render("List view")
|
||||
|
||||
otherGroup := categoryStyle.Render("Other") + "\n" +
|
||||
otherGroup := theme.StyleWarning.Bold(true).MarginTop(1).MarginBottom(0).Render("Other") + "\n" +
|
||||
keyStyle.Render("?") + descStyle.Render("Show this help") + "\n" +
|
||||
keyStyle.Render("/") + descStyle.Render("Search") + "\n" +
|
||||
keyStyle.Render("q") + descStyle.Render("Quit")
|
||||
|
||||
copyGroup := categoryStyle.Render("Text Selection & Copy") + "\n" +
|
||||
copyGroup := theme.StyleWarning.Bold(true).MarginTop(1).MarginBottom(0).Render("Text Selection & Copy") + "\n" +
|
||||
keyStyle.Render("SHIFT+drag") + descStyle.Render("Select text") + "\n" +
|
||||
keyStyle.Render("Ctrl+Shift+C") + descStyle.Render("Copy (Linux)") + "\n" +
|
||||
keyStyle.Render("Cmd+C") + descStyle.Render("Copy (macOS)")
|
||||
@@ -110,10 +97,7 @@ func (s *HelpScreen) View() string {
|
||||
content := lipgloss.JoinHorizontal(lipgloss.Top, leftColumn, " ", rightColumn)
|
||||
|
||||
// Footer
|
||||
footerStyle := lipgloss.NewStyle().
|
||||
Foreground(lipgloss.Color("241")).
|
||||
MarginTop(1)
|
||||
footer := footerStyle.Render("Press q or Esc to return")
|
||||
footer := theme.StyleMuted.MarginTop(1).Render("Press q or Esc to return")
|
||||
|
||||
// Combine all
|
||||
return breadcrumb + "\n\n" + borderStyle.Render(
|
||||
|
||||
Reference in New Issue
Block a user