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

res/bundled.go

@@ -153,7 +153,7 @@ var ResRepeatoneSvg = &fyne.StaticResource{
 var ResDefaultToml = &fyne.StaticResource{
 	StaticName: "default.toml",
 	StaticContent: []byte(
-		"[SupersonicTheme]\nName = \"Default\"\nVersion = \"0.2\"\nSupportsDark = true\nSupportsLight = true\n\n[DarkColors]\nPageBackground = \"#0F0F0F\"\nListHeader = \"#232323\"\nBackground = \"#232323\"\nScrollBar = \"#F3F3F3\"\nButton = \"#14141432\"\nInputBackground = \"#14141432\"\n\n[LightColors]\nPageBackground = \"#FAFAFA\"\nListHeader = \"#E1DFE1\"\nBackground = \"#E1DFE1\"\nScrollBar = \"#565656\"\nButton = \"#C8C8C8F0\"\nDisabledButton = \"#CDCDCDF0\"\nForeground = \"#0A0A0A\"\nHyperlink = \"#3737FB\""),
+		"[SupersonicTheme]\nName = \"Default\"\nVersion = \"0.2\"\nSupportsDark = true\nSupportsLight = true\n\n[DarkColors]\nPageBackground = \"#0F0F0F\"\nListHeader = \"#232323\"\nPageHeader = \"#181d25\"\nBackground = \"#232323\"\nScrollBar = \"#F3F3F3\"\nButton = \"#14141432\"\nInputBackground = \"#14141432\"\n\n[LightColors]\nPageBackground = \"#FAFAFA\"\nListHeader = \"#E1DFE1\"\nPageHeader = \"#e1dfe1\"\nBackground = \"#E1DFE1\"\nScrollBar = \"#565656\"\nButton = \"#C8C8C8F0\"\nDisabledButton = \"#CDCDCDF0\"\nForeground = \"#0A0A0A\"\nHyperlink = \"#3737FB\""),
 }
 var ResLICENSE = &fyne.StaticResource{
 	StaticName: "LICENSE",

res/themes/default.toml

@@ -7,6 +7,7 @@ SupportsLight = true
 [DarkColors]
 PageBackground = "#0F0F0F"
 ListHeader = "#232323"
+PageHeader = "#181d25"
 Background = "#232323"
 ScrollBar = "#F3F3F3"
 Button = "#14141432"
@@ -15,6 +16,7 @@ InputBackground = "#14141432"
 [LightColors]
 PageBackground = "#FAFAFA"
 ListHeader = "#E1DFE1"
+PageHeader = "#e1dfe1"
 Background = "#E1DFE1"
 ScrollBar = "#565656"
 Button = "#C8C8C8F0"

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,
+	a.container = util.AddHeaderBackground(
-		container.New(&layouts.VboxCustomPadding{ExtraPad: -10},
+		container.NewBorder(nil, nil, a.cover, nil,
-			a.titleLabel,
+			container.New(&layouts.VboxCustomPadding{ExtraPad: -10},
-			container.NewVBox(
+				a.titleLabel,
-				container.New(&layouts.VboxCustomPadding{ExtraPad: -12}, a.artistLabel, a.genreLabel, a.miscLabel),
 				container.NewVBox(
-					container.NewHBox(util.NewHSpace(2), playButton, shuffleBtn, menuBtn),
+					container.New(&layouts.VboxCustomPadding{ExtraPad: -12}, a.artistLabel, a.genreLabel, a.miscLabel),
-					container.NewHBox(util.NewHSpace(2), a.toggleFavButton),
+					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,
+	a.container = util.AddHeaderBackground(
-		container.NewVBox(
+		container.NewBorder(nil, nil, a.artistImage, nil,
-			container.New(&layouts.VboxCustomPadding{ExtraPad: -10},
+			container.NewVBox(
-				a.titleDisp, a.biographyDisp, a.similarArtists),
+				container.New(&layouts.VboxCustomPadding{ExtraPad: -10},
-			container.NewHBox(util.NewHSpace(2), a.favoriteBtn, a.playBtn, a.playRadioBtn)))
+					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,
+	a.container = util.AddHeaderBackground(
-		container.NewVBox(a.titleLabel, container.New(&layouts.VboxCustomPadding{ExtraPad: -10},
+		container.NewBorder(nil, nil, a.image, nil,
-			a.descriptionLabel,
+			container.NewVBox(a.titleLabel, container.New(&layouts.VboxCustomPadding{ExtraPad: -10},
-			a.ownerLabel,
+				a.descriptionLabel,
-			a.trackTimeLabel),
+				a.ownerLabel,
-			container.NewHBox(a.editButton, playButton, shuffleBtn, menuBtn),
+				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