feat: peach highlight for selected rows in the tree

Christian Rocha created 3 years ago

Change summary

ui/pages/repo/filesitem.go | 22 +++++++++++++---------
ui/styles/styles.go        | 35 ++++++++++++++++++++++-------------
2 files changed, 35 insertions(+), 22 deletions(-)

Detailed changes

ui/pages/repo/filesitem.go

@@ -110,29 +110,33 @@ func (d FileItemDelegate) Render(w io.Writer, m list.Model, index int, listItem
 		size = strings.Repeat(" ", sizeLen)
 		name = s.TreeFileDir.Render(name)
 	}
-	var cs lipgloss.Style
+	var nameStyle, sizeStyle, modeStyle lipgloss.Style
 	mode := i.Mode()
 	if index == m.Index() {
-		cs = s.TreeItemActive
+		nameStyle = s.TreeItemActive
+		sizeStyle = s.TreeFileSizeActive
+		modeStyle = s.TreeFileModeActive
 		fmt.Fprint(w, s.TreeItemSelector.Render(">"))
 	} else {
-		cs = s.TreeItemInactive
+		nameStyle = s.TreeItemInactive
+		sizeStyle = s.TreeFileSizeInactive
+		modeStyle = s.TreeFileModeInactive
 		fmt.Fprint(w, s.TreeItemSelector.Render(" "))
 	}
-	sizeStyle := s.TreeFileSize.Copy().
+	sizeStyle = sizeStyle.Copy().
 		Width(8).
 		Align(lipgloss.Right).
 		MarginLeft(1)
 	leftMargin := s.TreeItemSelector.GetMarginLeft() +
 		s.TreeItemSelector.GetWidth() +
-		s.TreeFileMode.GetMarginLeft() +
-		s.TreeFileMode.GetWidth() +
-		cs.GetMarginLeft() +
+		s.TreeFileModeInactive.GetMarginLeft() +
+		s.TreeFileModeInactive.GetWidth() +
+		nameStyle.GetMarginLeft() +
 		sizeStyle.GetHorizontalFrameSize()
 	name = common.TruncateString(name, m.Width()-leftMargin)
-	name = cs.Render(name)
+	name = nameStyle.Render(name)
 	size = sizeStyle.Render(size)
-	modeStr := s.TreeFileMode.Render(mode.String())
+	modeStr := modeStyle.Render(mode.String())
 	truncate := lipgloss.NewStyle().MaxWidth(m.Width() -
 		s.TreeItemSelector.GetHorizontalFrameSize() -
 		s.TreeItemSelector.GetWidth())

ui/styles/styles.go

@@ -66,15 +66,17 @@ type Styles struct {
 	RefItemTag      lipgloss.Style
 	RefPaginator    lipgloss.Style
 
-	TreeItemSelector lipgloss.Style
-	TreeItemActive   lipgloss.Style
-	TreeItemInactive lipgloss.Style
-	TreeFileDir      lipgloss.Style
-	TreeFileMode     lipgloss.Style
-	TreeFileSize     lipgloss.Style
-	TreeFileContent  lipgloss.Style
-	TreePaginator    lipgloss.Style
-	TreeNoItems      lipgloss.Style
+	TreeItemSelector     lipgloss.Style
+	TreeItemActive       lipgloss.Style
+	TreeItemInactive     lipgloss.Style
+	TreeFileDir          lipgloss.Style
+	TreeFileModeInactive lipgloss.Style
+	TreeFileModeActive   lipgloss.Style
+	TreeFileSizeInactive lipgloss.Style
+	TreeFileSizeActive   lipgloss.Style
+	TreeFileContent      lipgloss.Style
+	TreePaginator        lipgloss.Style
+	TreeNoItems          lipgloss.Style
 
 	Spinner lipgloss.Style
 
@@ -267,18 +269,25 @@ func DefaultStyles() *Styles {
 		MarginLeft(1)
 
 	s.TreeItemActive = s.TreeItemInactive.Copy().
-		Bold(true)
+		Bold(true).
+		Foreground(lipgloss.Color("210"))
 
 	s.TreeFileDir = lipgloss.NewStyle().
 		Foreground(lipgloss.Color("39"))
 
-	s.TreeFileMode = s.TreeItemInactive.Copy().
+	s.TreeFileModeInactive = s.TreeItemInactive.Copy().
 		Width(10).
 		Foreground(lipgloss.Color("243"))
 
-	s.TreeFileSize = s.TreeItemInactive.Copy().
+	s.TreeFileModeActive = s.TreeFileModeInactive.Copy().
+		Foreground(lipgloss.Color("174"))
+
+	s.TreeFileSizeInactive = s.TreeItemInactive.Copy().
 		Foreground(lipgloss.Color("243"))
 
+	s.TreeFileSizeActive = s.TreeItemInactive.Copy().
+		Foreground(lipgloss.Color("174"))
+
 	s.TreeFileContent = lipgloss.NewStyle()
 
 	s.TreePaginator = s.LogPaginator.Copy()
@@ -330,7 +339,7 @@ func DefaultStyles() *Styles {
 	s.TabInactive = lipgloss.NewStyle()
 
 	s.TabActive = lipgloss.NewStyle().
-		Foreground(lipgloss.Color("#6E6ED8")).
+		Foreground(lipgloss.Color("63")).
 		Underline(true)
 
 	s.TabSeparator = lipgloss.NewStyle().