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

This commit is contained in:
Drew Weymouth
2023-11-06 17:54:40 -08:00
parent e0ed795932
commit c9b224277e
8 changed files with 50 additions and 22 deletions
+1 -1
View File
@@ -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",
+2
View File
@@ -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"
+10 -9
View File
@@ -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
}
+7 -5
View File
@@ -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 {
+8 -7
View File
@@ -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
}
+3
View File
@@ -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:
+7
View File
@@ -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
+12
View File
@@ -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