chore: adjust top-level tab style

Christian Rocha created 3 years ago

Change summary

ui/components/tabs/tabs.go      |  7 +++++++
ui/pages/selection/selection.go | 26 ++++++++------------------
ui/styles/styles.go             | 16 ++++++++++++++--
3 files changed, 29 insertions(+), 20 deletions(-)

Detailed changes

ui/components/tabs/tabs.go

@@ -22,6 +22,8 @@ type Tabs struct {
 	TabSeparator lipgloss.Style
 	TabInactive  lipgloss.Style
 	TabActive    lipgloss.Style
+	TabDot       lipgloss.Style
+	UseDot       bool
 }
 
 // New creates a new Tabs component.
@@ -76,8 +78,13 @@ func (t *Tabs) View() string {
 	sep := t.TabSeparator
 	for i, tab := range t.tabs {
 		style := t.TabInactive.Copy()
+		prefix := "  "
 		if i == t.activeTab {
 			style = t.TabActive.Copy()
+			prefix = t.TabDot.Render("• ")
+		}
+		if t.UseDot {
+			s.WriteString(prefix)
 		}
 		s.WriteString(style.Render(tab))
 		if i != len(t.tabs)-1 {

ui/pages/selection/selection.go

@@ -52,14 +52,10 @@ func New(cfg *config.Config, pk ssh.PublicKey, common common.Common) *Selection
 	}
 	t := tabs.New(common, ts)
 	t.TabSeparator = lipgloss.NewStyle()
-	t.TabInactive = lipgloss.NewStyle().
-		Bold(true).
-		UnsetBackground().
-		Foreground(common.Styles.InactiveBorderColor).
-		Padding(0, 1)
-	t.TabActive = t.TabInactive.Copy().
-		Background(lipgloss.Color("62")).
-		Foreground(lipgloss.Color("230"))
+	t.TabInactive = common.Styles.TopLevelTabNormal.Copy()
+	t.TabActive = common.Styles.TopLevelActiveTab.Copy()
+	t.TabDot = common.Styles.TopLevelActiveTabDot.Copy()
+	t.UseDot = true
 	sel := &Selection{
 		cfg:        cfg,
 		pk:         pk,
@@ -86,9 +82,7 @@ func (s *Selection) getMargins() (wm, hm int) {
 	hm = s.common.Styles.Tabs.GetVerticalFrameSize() +
 		s.common.Styles.Tabs.GetHeight() +
 		2 // tabs margin see View()
-	switch s.activePane {
-	case selectorPane:
-	case readmePane:
+	if s.activePane == readmePane {
 		hm += 1 // readme statusbar
 	}
 	return
@@ -303,15 +297,11 @@ func (s *Selection) View() string {
 			Width(s.common.Width - wm).
 			Foreground(s.common.Styles.InactiveBorderColor).
 			Render(status)
-		view = rs.Render(lipgloss.JoinVertical(lipgloss.Top,
+		view = rs.Render(lipgloss.JoinVertical(lipgloss.Left,
 			s.readme.View(),
 			readmeStatus,
 		))
 	}
-	ts := s.common.Styles.Tabs.Copy().
-		MarginBottom(1)
-	return lipgloss.JoinVertical(lipgloss.Top,
-		ts.Render(s.tabs.View()),
-		view,
-	)
+	ts := s.common.Styles.Tabs.Copy()
+	return lipgloss.JoinVertical(lipgloss.Left, ts.Render(s.tabs.View()), view)
 }

ui/styles/styles.go

@@ -12,8 +12,11 @@ type Styles struct {
 	ActiveBorderColor   lipgloss.Color
 	InactiveBorderColor lipgloss.Color
 
-	App        lipgloss.Style
-	ServerName lipgloss.Style
+	App                  lipgloss.Style
+	ServerName           lipgloss.Style
+	TopLevelNormalTab    lipgloss.Style
+	TopLevelActiveTab    lipgloss.Style
+	TopLevelActiveTabDot lipgloss.Style
 
 	MenuItem       lipgloss.Style
 	MenuLastUpdate lipgloss.Style
@@ -142,6 +145,15 @@ func DefaultStyles() *Styles {
 		Foreground(lipgloss.Color("229")).
 		Bold(true)
 
+	s.TopLevelNormalTab = lipgloss.NewStyle().
+		MarginRight(2)
+
+	s.TopLevelActiveTab = s.TopLevelNormalTab.Copy().
+		Foreground(lipgloss.Color("42"))
+
+	s.TopLevelActiveTabDot = lipgloss.NewStyle().
+		Foreground(lipgloss.Color("29"))
+
 	s.MenuItem = lipgloss.NewStyle().
 		PaddingLeft(1).
 		Border(lipgloss.Border{