Add rounded rectangle background to Album, Artist, Playlist page headers

ui/browsing/albumpage.go

@@ -238,18 +238,19 @@ func NewAlbumPageHeader(page *AlbumPage) *AlbumPageHeader {
 	a.toggleFavButton = widgets.NewFavoriteButton(func() { go a.toggleFavorited() })
 
 	// Todo: there's got to be a way to make this less convoluted. Custom layout?
-	a.container = container.NewBorder(nil, nil, a.cover, nil,
-		container.New(&layouts.VboxCustomPadding{ExtraPad: -10},
-			a.titleLabel,
-			container.NewVBox(
-				container.New(&layouts.VboxCustomPadding{ExtraPad: -12}, a.artistLabel, a.genreLabel, a.miscLabel),
+	a.container = util.AddHeaderBackground(
+		container.NewBorder(nil, nil, a.cover, nil,
+			container.New(&layouts.VboxCustomPadding{ExtraPad: -10},
+				a.titleLabel,
 				container.NewVBox(
-					container.NewHBox(util.NewHSpace(2), playButton, shuffleBtn, menuBtn),
-					container.NewHBox(util.NewHSpace(2), a.toggleFavButton),
+					container.New(&layouts.VboxCustomPadding{ExtraPad: -12}, a.artistLabel, a.genreLabel, a.miscLabel),
+					container.NewVBox(
+						container.NewHBox(util.NewHSpace(2), playButton, shuffleBtn, menuBtn),
+						container.NewHBox(util.NewHSpace(2), a.toggleFavButton),
+					),
 				),
 			),
-		),
-	)
+		))
 	return a
 }
 

ui/browsing/artistpage.go

@@ -395,11 +395,13 @@ func (a *ArtistPageHeader) toggleFavorited() {
 }
 
 func (a *ArtistPageHeader) createContainer() {
-	a.container = container.NewBorder(nil, nil, a.artistImage, nil,
-		container.NewVBox(
-			container.New(&layouts.VboxCustomPadding{ExtraPad: -10},
-				a.titleDisp, a.biographyDisp, a.similarArtists),
-			container.NewHBox(util.NewHSpace(2), a.favoriteBtn, a.playBtn, a.playRadioBtn)))
+	a.container = util.AddHeaderBackground(
+		container.NewBorder(nil, nil, a.artistImage, nil,
+			container.NewVBox(
+				container.New(&layouts.VboxCustomPadding{ExtraPad: -10},
+					a.titleDisp, a.biographyDisp, a.similarArtists),
+				container.NewHBox(util.NewHSpace(2), a.favoriteBtn, a.playBtn, a.playRadioBtn)),
+		))
 }
 
 func (a *ArtistPageHeader) CreateRenderer() fyne.WidgetRenderer {

ui/browsing/playlistpage.go

@@ -291,13 +291,14 @@ func NewPlaylistPageHeader(page *PlaylistPage) *PlaylistPageHeader {
 		pop.ShowAtPosition(fyne.NewPos(pos.X, pos.Y+menuBtn.Size().Height))
 	}
 
-	a.container = container.NewBorder(nil, nil, a.image, nil,
-		container.NewVBox(a.titleLabel, container.New(&layouts.VboxCustomPadding{ExtraPad: -10},
-			a.descriptionLabel,
-			a.ownerLabel,
-			a.trackTimeLabel),
-			container.NewHBox(a.editButton, playButton, shuffleBtn, menuBtn),
-		))
+	a.container = util.AddHeaderBackground(
+		container.NewBorder(nil, nil, a.image, nil,
+			container.NewVBox(a.titleLabel, container.New(&layouts.VboxCustomPadding{ExtraPad: -10},
+				a.descriptionLabel,
+				a.ownerLabel,
+				a.trackTimeLabel),
+				container.NewHBox(a.editButton, playButton, shuffleBtn, menuBtn),
+			)))
 	return a
 }
 

ui/theme/theme.go

@@ -21,6 +21,7 @@ import (
 const (
 	ColorNameListHeader     fyne.ThemeColorName = "ListHeader"
 	ColorNamePageBackground fyne.ThemeColorName = "PageBackground"
+	ColorNamePageHeader     fyne.ThemeColorName = "PageHeader"
 )
 
 type AppearanceMode string
@@ -90,6 +91,8 @@ func (m *MyTheme) Color(name fyne.ThemeColorName, _ fyne.ThemeVariant) color.Col
 		return colorOrDefault(colors.ListHeader, defColors.ListHeader, name, variant)
 	case ColorNamePageBackground:
 		return colorOrDefault(colors.PageBackground, defColors.PageBackground, name, variant)
+	case ColorNamePageHeader:
+		return colorOrDefault(colors.PageHeader, defColors.PageHeader, name, variant)
 	case theme.ColorNameBackground:
 		return colorOrDefault(colors.Background, defColors.Background, name, variant)
 	case theme.ColorNameButton:

ui/theme/themefile.go

@@ -34,10 +34,17 @@ type ThemeFile struct {
 type ThemeColors struct {
 	// Supersonic-specific colors
 
+	// Background color of the header row in list views.
 	ListHeader string
 
+	// Background color for each page. The main color in the app.
 	PageBackground string
 
+	// Color of the background rectangle around the Album, Artist, Playlist page headers.
+	//
+	// Since: Supersonic theme file version 0.2
+	PageHeader string
+
 	// Fyne colors
 
 	Background string

ui/util/util.go

@@ -10,8 +10,12 @@ import (
 	"time"
 
 	"fyne.io/fyne/v2"
+	"fyne.io/fyne/v2/container"
 	"fyne.io/fyne/v2/layout"
+	"fyne.io/fyne/v2/theme"
 	"fyne.io/fyne/v2/widget"
+	"github.com/dweymouth/supersonic/ui/layouts"
+	myTheme "github.com/dweymouth/supersonic/ui/theme"
 	"golang.org/x/net/html"
 )
 
@@ -128,6 +132,14 @@ func NewRatingSubmenu(onSetRating func(int)) *fyne.MenuItem {
 	return ratingMenu
 }
 
+func AddHeaderBackground(obj fyne.CanvasObject) *fyne.Container {
+	bgrnd := myTheme.NewThemedRectangle(myTheme.ColorNamePageHeader)
+	bgrnd.CornerRadiusName = theme.SizeNameInputRadius
+	return container.NewStack(bgrnd,
+		container.New(&layouts.MaxPadLayout{PadLeft: 10, PadRight: 10, PadTop: 10, PadBottom: 10},
+			obj))
+}
+
 type HSpace struct {
 	widget.BaseWidget