Skip to content

Commit

Permalink
add IconButton and use in bottom panel
Browse files Browse the repository at this point in the history
  • Loading branch information
dweymouth committed May 27, 2024
1 parent 0a818ae commit 96fed46
Show file tree
Hide file tree
Showing 6 changed files with 225 additions and 57 deletions.
2 changes: 1 addition & 1 deletion res/bundled.go

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion res/themes/default.toml
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ PageHeader = "#181d25"
Background = "#232323"
ScrollBar = "#F3F3F3"
Button = "#14141432"
Foreground = "#e6e6e6"
InputBackground = "#14141432"

[LightColors]
Expand All @@ -21,5 +22,5 @@ Background = "#E1DFE1"
ScrollBar = "#565656"
Button = "#C8C8C8F0"
DisabledButton = "#CDCDCDF0"
Foreground = "#0A0A0A"
Foreground = "#262626"
Hyperlink = "#3737FB"
59 changes: 55 additions & 4 deletions ui/theme/theme.go
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,12 @@ import (
)

const (
ColorNameListHeader fyne.ThemeColorName = "ListHeader"
ColorNamePageBackground fyne.ThemeColorName = "PageBackground"
ColorNamePageHeader fyne.ThemeColorName = "PageHeader"
ColorNameInactiveLyric fyne.ThemeColorName = "InactiveLyric"
ColorNameListHeader fyne.ThemeColorName = "ListHeader"
ColorNamePageBackground fyne.ThemeColorName = "PageBackground"
ColorNamePageHeader fyne.ThemeColorName = "PageHeader"
ColorNameInactiveLyric fyne.ThemeColorName = "InactiveLyric"
ColorNameIconButton fyne.ThemeColorName = "IconButton"
ColorNameHoveredIconButton fyne.ThemeColorName = "HoveredIconButton"
)

var (
Expand Down Expand Up @@ -111,6 +113,17 @@ func (m *MyTheme) Color(name fyne.ThemeColorName, _ fyne.ThemeVariant) color.Col
foreground := colorOrDefault(colors.Foreground, defColors.Foreground, theme.ColorNameForeground, variant)
disabled := colorOrDefault(colors.Disabled, defColors.Disabled, theme.ColorNameDisabled, variant)
return blendColors(foreground, disabled, 0.33)
case ColorNameHoveredIconButton:
if variant == theme.VariantDark {
return color.White
}
return color.Black
case ColorNameIconButton:
foreground := colorOrDefault(colors.Foreground, defColors.Foreground, theme.ColorNameForeground, variant)
if variant == theme.VariantDark {
return darkenColor(foreground, 0.05)
}
return brightenColor(foreground, 0.2)
case ColorNameListHeader:
return colorOrDefault(colors.ListHeader, defColors.ListHeader, name, variant)
case ColorNamePageBackground:
Expand Down Expand Up @@ -256,6 +269,44 @@ func blendColors(a, b color.Color, fractionA float64) color.Color {
return color.RGBA{R: rAvg, G: gAvg, B: bAvg, A: aAvg}
}

func brightenColor(c color.Color, fraction float64) color.Color {
r, g, b, a := c.RGBA()
r, g, b = brightenComponent(r, fraction), brightenComponent(g, fraction), brightenComponent(b, fraction)
return color.RGBA{
R: uint8(r >> 8),
G: uint8(g >> 8),
B: uint8(b >> 8),
A: uint8(a >> 8),
}
}

func darkenColor(c color.Color, fraction float64) color.Color {
r, g, b, a := c.RGBA()
r, g, b = darkenComponent(r, fraction), darkenComponent(g, fraction), darkenComponent(b, fraction)
return color.RGBA{
R: uint8(r >> 8),
G: uint8(g >> 8),
B: uint8(b >> 8),
A: uint8(a >> 8),
}
}

func brightenComponent(component uint32, fraction float64) uint32 {
brightened := component + uint32(float64(component)*fraction)
if brightened > 0xffff {
brightened = 0xffff
}
return brightened
}

func darkenComponent(component uint32, fraction float64) uint32 {
i := uint32(float64(component) * fraction)
if i > component {
return 0
}
return component - i
}

func readTTFFile(filepath string) ([]byte, error) {
if !strings.HasSuffix(filepath, ".ttf") {
err := errors.New("only .ttf fonts are supported")
Expand Down
58 changes: 16 additions & 42 deletions ui/widgets/auxcontrols.go
Original file line number Diff line number Diff line change
Expand Up @@ -12,45 +12,23 @@ import (
"github.com/dweymouth/supersonic/ui/util"
)

var (
repeatThemedResource = theme.NewThemedResource(myTheme.RepeatIcon)
repeatOneThemedResource = theme.NewThemedResource(myTheme.RepeatOneIcon)
)

// The "aux" controls for playback, positioned to the right
// of the BottomPanel. Currently only volume control.
type AuxControls struct {
widget.BaseWidget

VolumeControl *VolumeControl
loop *miniButton
loop *IconButton

container *fyne.Container
}

type miniButton struct {
widget.Button
}

func newMiniButton(icon fyne.Resource) *miniButton {
b := &miniButton{
Button: widget.Button{
Icon: icon,
},
}
b.ExtendBaseWidget(b)
return b
}

func (b *miniButton) MinSize() fyne.Size {
return fyne.NewSize(24, 24)
}

func NewAuxControls(initialVolume int) *AuxControls {
a := &AuxControls{
VolumeControl: NewVolumeControl(initialVolume),
loop: newMiniButton(myTheme.RepeatIcon),
loop: NewIconButton(myTheme.RepeatIcon, nil),
}
a.loop.IconSize = IconButtonSizeSmaller
a.container = container.NewHBox(
layout.NewSpacer(),
container.NewVBox(
Expand All @@ -75,16 +53,15 @@ func (a *AuxControls) OnChangeLoopMode(f func()) {
func (a *AuxControls) SetLoopMode(mode backend.LoopMode) {
switch mode {
case backend.LoopAll:
a.loop.Icon = repeatThemedResource
repeatThemedResource.ColorName = theme.ColorNamePrimary
a.loop.Highlighted = true
a.loop.SetIcon(myTheme.RepeatIcon)
case backend.LoopOne:
a.loop.Icon = repeatOneThemedResource
repeatOneThemedResource.ColorName = theme.ColorNamePrimary
a.loop.Highlighted = true
a.loop.SetIcon(myTheme.RepeatOneIcon)
case backend.LoopNone:
a.loop.Importance = widget.MediumImportance
a.loop.Icon = myTheme.RepeatIcon
a.loop.Highlighted = false
a.loop.SetIcon(myTheme.RepeatIcon)
}
a.loop.Refresh()
}

type volumeSlider struct {
Expand Down Expand Up @@ -114,9 +91,7 @@ func (v *volumeSlider) Tapped(e *fyne.PointEvent) {
}

func (v *volumeSlider) MinSize() fyne.Size {
h := v.Slider.MinSize().Height
// give extra space for height to hack around mini button covering part of focus circle
return fyne.NewSize(v.Width, h+theme.Padding()*3)
return fyne.NewSize(v.Width, v.Slider.MinSize().Height)
}

func (v *volumeSlider) Scrolled(e *fyne.ScrollEvent) {
Expand All @@ -126,7 +101,7 @@ func (v *volumeSlider) Scrolled(e *fyne.ScrollEvent) {
type VolumeControl struct {
widget.BaseWidget

icon *TappableIcon
icon *IconButton
slider *volumeSlider

OnSetVolume func(int)
Expand All @@ -140,8 +115,8 @@ type VolumeControl struct {
func NewVolumeControl(initialVol int) *VolumeControl {
v := &VolumeControl{}
v.ExtendBaseWidget(v)
v.icon = NewTappableIcon(theme.VolumeUpIcon())
v.icon.OnTapped = v.toggleMute
v.icon = NewIconButton(theme.VolumeUpIcon(), v.toggleMute)
v.icon.IconSize = IconButtonSizeSmaller
v.slider = NewVolumeSlider(100)
v.lastVol = initialVol
v.slider.Step = 1
Expand Down Expand Up @@ -203,11 +178,10 @@ func (v *VolumeControl) invokeOnVolumeChange(vol int) {

func (v *VolumeControl) updateIconForVolume(vol int) {
if vol <= 0 {
v.icon.Resource = theme.VolumeMuteIcon()
v.icon.SetIcon(theme.VolumeMuteIcon())
} else if vol < 50 {
v.icon.Resource = theme.VolumeDownIcon()
v.icon.SetIcon(theme.VolumeDownIcon())
} else {
v.icon.Resource = theme.VolumeUpIcon()
v.icon.SetIcon(theme.VolumeUpIcon())
}
v.icon.Refresh()
}
142 changes: 142 additions & 0 deletions ui/widgets/iconbutton.go
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
package widgets

import (
"fyne.io/fyne/v2"
"fyne.io/fyne/v2/canvas"
"fyne.io/fyne/v2/container"
"fyne.io/fyne/v2/driver/desktop"
"fyne.io/fyne/v2/theme"
"fyne.io/fyne/v2/widget"

myTheme "github.com/dweymouth/supersonic/ui/theme"
)

type IconButtonSize int

const (
IconButtonSizeNormal IconButtonSize = iota
IconButtonSizeBigger
IconButtonSizeSmaller
)

type IconButton struct {
widget.BaseWidget

Highlighted bool
IconSize IconButtonSize
OnTapped func()

icon fyne.Resource
focused bool
hovered bool

themed *theme.ThemedResource
img *canvas.Image
}

var (
_ fyne.Tappable = (*IconButton)(nil)
_ fyne.Focusable = (*IconButton)(nil)
_ desktop.Hoverable = (*IconButton)(nil)
)

func NewIconButton(icon fyne.Resource, onTapped func()) *IconButton {
i := &IconButton{icon: icon, OnTapped: onTapped}
i.ExtendBaseWidget(i)
return i
}

func (i *IconButton) SetIcon(icon fyne.Resource) {
i.icon = icon
if i.img != nil {
i.themed = theme.NewThemedResource(icon)
i.img.Resource = i.themed
i.Refresh()
}
}

func (i *IconButton) Tapped(*fyne.PointEvent) {
if i.OnTapped != nil {
i.OnTapped()
}
}

func (i *IconButton) FocusGained() {
if !i.focused {
defer i.Refresh()
}
i.focused = true
}

func (i *IconButton) FocusLost() {
if i.focused {
defer i.Refresh()
}
i.focused = false
}

func (i *IconButton) TypedKey(e *fyne.KeyEvent) {
if e.Name == fyne.KeySpace {
i.Tapped(nil)
}
}

func (i *IconButton) TypedRune(r rune) {
}

func (i *IconButton) MouseIn(*desktop.MouseEvent) {
if !i.hovered {
defer i.Refresh()
}
i.hovered = true
}

func (i *IconButton) MouseOut() {
if i.hovered {
defer i.Refresh()
}
i.hovered = false
}

func (i *IconButton) MouseMoved(*desktop.MouseEvent) {
}

func (i *IconButton) MinSize() fyne.Size {
return i.iconSize()
}

func (i *IconButton) iconSize() fyne.Size {
switch i.IconSize {
case IconButtonSizeBigger:
return fyne.NewSquareSize(theme.IconInlineSize() * 2)
case IconButtonSizeSmaller:
return fyne.NewSquareSize(theme.IconInlineSize())
default:
return fyne.NewSquareSize(theme.IconInlineSize() * 1.3333)
}
}

func (i *IconButton) Refresh() {
if i.img == nil {
return
}
if i.Highlighted || i.focused {
i.themed.ColorName = theme.ColorNamePrimary
} else if i.hovered {
i.themed.ColorName = myTheme.ColorNameHoveredIconButton
} else {
i.themed.ColorName = myTheme.ColorNameIconButton
}
i.img.SetMinSize(i.iconSize())
i.img.Refresh()
}

func (i *IconButton) CreateRenderer() fyne.WidgetRenderer {
if i.img == nil {
i.themed = theme.NewThemedResource(i.icon)
i.img = canvas.NewImageFromResource(i.themed)
i.img.FillMode = canvas.ImageFillContain
i.img.SetMinSize(i.iconSize())
}
return widget.NewSimpleRenderer(container.NewCenter(i.img))
}
Loading

0 comments on commit 96fed46

Please sign in to comment.