add IconButton and use in bottom panel

2024-05-27 11:16:39 -07:00
parent 0a818ae7b5
commit 96fed465d7
6 changed files with 225 additions and 57 deletions
@@ -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(
@@ -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 {
@@ -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) {
@@ -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)
@@ -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
@@ -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()
 }
@@ -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))
+}
@@ -83,9 +83,9 @@ type PlayerControls struct {
 	slider         *TrackPosSlider
 	curTimeLabel   *labelMinSize
 	totalTimeLabel *labelMinSize
-	prev           *widget.Button
-	playpause      *widget.Button
-	next           *widget.Button
+	prev           *IconButton
+	playpause      *IconButton
+	next           *IconButton
 	container      *fyne.Container

 	totalTime float64
@@ -127,15 +127,15 @@ func NewPlayerControls() *PlayerControls {
 		}
 	}

-	pc.prev = widget.NewButtonWithIcon("", theme.MediaSkipPreviousIcon(), func() {})
-	pc.next = widget.NewButtonWithIcon("", theme.MediaSkipNextIcon(), func() {})
-	pc.playpause = widget.NewButtonWithIcon("", theme.MediaPlayIcon(), func() {})
+	pc.prev = NewIconButton(theme.MediaSkipPreviousIcon(), func() {})
+	pc.next = NewIconButton(theme.MediaSkipNextIcon(), func() {})
+	pc.playpause = NewIconButton(theme.MediaPlayIcon(), func() {})
+	pc.playpause.IconSize = IconButtonSizeBigger

-	buttons := container.NewHBox(pc.prev, pc.playpause, pc.next)
-	b := container.New(layout.NewCenterLayout(), buttons)
+	buttons := container.NewHBox(layout.NewSpacer(), pc.prev, pc.playpause, pc.next, layout.NewSpacer())

 	c := container.NewBorder(nil, nil, pc.curTimeLabel, pc.totalTimeLabel, pc.slider)
-	pc.container = container.NewVBox(c, b)
+	pc.container = container.New(layout.NewCustomPaddedVBoxLayout(0), c, buttons)

 	return pc
 }