Style and help for the error state

Christian Rocha created 4 years ago

Change summary

tui/bubble.go | 37 +++++++++++++++++++++++++++++--------
tui/style.go  | 22 ++++++++++++----------
2 files changed, 41 insertions(+), 18 deletions(-)

Detailed changes

tui/bubble.go

@@ -182,13 +182,19 @@ func (b Bubble) headerView() string {
 
 func (b Bubble) footerView() string {
 	w := &strings.Builder{}
-	h := []helpEntry{
-		{"tab", "section"},
-		{"↑/↓", "navigate"},
-		{"q", "quit"},
-	}
-	if _, ok := b.boxes[b.activeBox].(*repo.Bubble); ok {
-		h = append(h[:2], helpEntry{"f/b", "pgup/pgdown"}, h[2])
+	var h []helpEntry
+	switch b.state {
+	case errorState:
+		h = []helpEntry{{"q", "quit"}}
+	default:
+		h = []helpEntry{
+			{"tab", "section"},
+			{"↑/↓", "navigate"},
+			{"q", "quit"},
+		}
+		if _, ok := b.boxes[b.activeBox].(*repo.Bubble); ok {
+			h = append(h[:2], helpEntry{"f/b", "pgup/pgdown"}, h[2])
+		}
 	}
 	for i, v := range h {
 		fmt.Fprint(w, v)
@@ -199,6 +205,21 @@ func (b Bubble) footerView() string {
 	return footerStyle.Render(w.String())
 }
 
+func (b Bubble) errorView() string {
+	s := lipgloss.JoinHorizontal(
+		lipgloss.Top,
+		errorHeaderStyle.Render("Bummer"),
+		errorBodyStyle.Render(b.error),
+	)
+	h := b.height -
+		appBoxStyle.GetVerticalFrameSize() -
+		lipgloss.Height(b.headerView()) -
+		lipgloss.Height(b.footerView()) -
+		contentBoxStyle.GetVerticalFrameSize() +
+		3 // TODO: figure out why we need this
+	return errorStyle.Copy().Height(h).Render(s)
+}
+
 func (b Bubble) View() string {
 	s := strings.Builder{}
 	s.WriteString(b.headerView())
@@ -209,7 +230,7 @@ func (b Bubble) View() string {
 		rb := b.viewForBox(1)
 		s.WriteString(lipgloss.JoinHorizontal(lipgloss.Top, lb, rb))
 	case errorState:
-		s.WriteString(errorStyle.Render(fmt.Sprintf("Bummer: %s", b.error)))
+		s.WriteString(b.errorView())
 	}
 	s.WriteString(b.footerView())
 	return appBoxStyle.Render(s.String())

tui/style.go

@@ -7,15 +7,6 @@ import (
 var activeBorderColor = lipgloss.Color("243")
 var inactiveBorderColor = lipgloss.Color("236")
 
-var hiddenBorder = lipgloss.Border{
-	TopLeft:     " ",
-	Top:         " ",
-	TopRight:    " ",
-	BottomLeft:  " ",
-	Bottom:      " ",
-	BottomRight: " ",
-}
-
 var appBoxStyle = lipgloss.NewStyle()
 
 var menuStyle = lipgloss.NewStyle().
@@ -66,7 +57,18 @@ var menuCursor = lipgloss.NewStyle().
 	SetString(">")
 
 var errorStyle = lipgloss.NewStyle().
-	Foreground(lipgloss.Color("#FF00000"))
+	Padding(1)
+
+var errorHeaderStyle = lipgloss.NewStyle().
+	Foreground(lipgloss.Color("230")).
+	Background(lipgloss.Color("204")).
+	Bold(true).
+	Padding(0, 1)
+
+var errorBodyStyle = lipgloss.NewStyle().
+	Foreground(lipgloss.Color("252")).
+	MarginLeft(2).
+	Width(52) // for now
 
 var helpDivider = lipgloss.NewStyle().
 	Foreground(lipgloss.Color("237")).