Address alignment issues by not mixing SVG and and solid canvas items

Fixes fyne-io#3792
lunarforge · Apr 28, 2023 · 09431a4 · 09431a4
1 parent ff08b25
commit 09431a4
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 27 deletions.
diff --git a/theme/bundled-icons.go b/theme/bundled-icons.go
diff --git a/theme/gen.go b/theme/gen.go
@@ -89,8 +89,10 @@ func main() {
 
 	bundleIcon("check-box", f)
 	bundleIcon("check-box-checked", f)
+	bundleIcon("check-box-fill", f)
 	bundleIcon("radio-button", f)
 	bundleIcon("radio-button-checked", f)
+	bundleIcon("radio-button-fill", f)
 
 	bundleIcon("content-add", f)
 	bundleIcon("content-remove", f)

diff --git a/theme/icons.go b/theme/icons.go
@@ -464,8 +464,10 @@ var (
 
 		IconNameCheckButton:        NewThemedResource(checkboxIconRes),
 		IconNameCheckButtonChecked: NewThemedResource(checkboxcheckedIconRes),
+		"iconNameCheckButtonFill":  NewThemedResource(checkboxfillIconRes),
 		IconNameRadioButton:        NewThemedResource(radiobuttonIconRes),
 		IconNameRadioButtonChecked: NewThemedResource(radiobuttoncheckedIconRes),
+		"iconNameRadioButtonFill":  NewThemedResource(radiobuttonfillIconRes),
 
 		IconNameContentAdd:    NewThemedResource(contentaddIconRes),
 		IconNameContentClear:  NewThemedResource(cancelIconRes),

diff --git a/theme/icons/check-box-fill.svg b/theme/icons/check-box-fill.svg
diff --git a/theme/icons/radio-button-fill.svg b/theme/icons/radio-button-fill.svg
diff --git a/widget/check.go b/widget/check.go
@@ -14,8 +14,7 @@ import (
 
 type checkRenderer struct {
 	widget.BaseRenderer
-	bg             *canvas.Rectangle
-	icon           *canvas.Image
+	bg, icon       *canvas.Image
 	label          *canvas.Text
 	focusIndicator *canvas.Circle
 	check          *Check
@@ -46,19 +45,17 @@ func (c *checkRenderer) Layout(size fyne.Size) {
 
 	iconPos := fyne.NewPos(theme.InnerPadding()/2+theme.InputBorderSize(), (size.Height-theme.IconInlineSize())/2)
 	iconSize := fyne.NewSize(theme.IconInlineSize(), theme.IconInlineSize())
-	c.bg.Move(iconPos.AddXY(4, 4)) // absolute numbers to move relative to SVG details
-	c.bg.Resize(iconSize.SubtractWidthHeight(8, 8))
+	c.bg.Move(iconPos)
+	c.bg.Resize(iconSize)
 	c.icon.Resize(iconSize)
 	c.icon.Move(iconPos)
 }
 
 // applyTheme updates this Check to the current theme
 func (c *checkRenderer) applyTheme() {
-	c.bg.FillColor = color.Transparent
 	c.label.Color = theme.ForegroundColor()
 	c.label.TextSize = theme.TextSize()
 	if c.check.disabled {
-		c.bg.FillColor = theme.InputBackgroundColor()
 		c.label.Color = theme.DisabledColor()
 	}
 }
@@ -80,20 +77,24 @@ func (c *checkRenderer) updateLabel() {
 func (c *checkRenderer) updateResource() {
 	res := theme.NewThemedResource(theme.CheckButtonIcon())
 	res.ColorName = theme.ColorNameInputBorder
-	c.bg.FillColor = theme.InputBackgroundColor()
+	// TODO move to `theme.CheckButtonFillIcon()` when we add it in 2.4
+	bgRes := theme.NewThemedResource(fyne.CurrentApp().Settings().Theme().Icon("iconNameCheckButtonFill"))
+	bgRes.ColorName = theme.ColorNameInputBackground
+
 	if c.check.Checked {
 		res = theme.NewThemedResource(theme.CheckButtonCheckedIcon())
 		res.ColorName = theme.ColorNamePrimary
-		c.bg.FillColor = theme.BackgroundColor()
+		bgRes.ColorName = theme.ColorNameBackground
 	}
 	if c.check.disabled {
 		if c.check.Checked {
 			res = theme.NewThemedResource(theme.CheckButtonCheckedIcon())
 		}
 		res.ColorName = theme.ColorNameDisabled
-		c.bg.FillColor = color.Transparent
+		bgRes.ColorName = theme.ColorNameBackground
 	}
 	c.icon.Resource = res
+	c.bg.Resource = bgRes
 }
 
 func (c *checkRenderer) updateFocusIndicator() {
@@ -209,7 +210,8 @@ func (c *Check) CreateRenderer() fyne.WidgetRenderer {
 	c.ExtendBaseWidget(c)
 	c.propertyLock.RLock()
 	defer c.propertyLock.RUnlock()
-	bg := canvas.NewRectangle(theme.InputBackgroundColor())
+	// TODO move to `theme.CheckButtonFillIcon()` when we add it in 2.4
+	bg := canvas.NewImageFromResource(fyne.CurrentApp().Settings().Theme().Icon("iconNameCheckButtonFill"))
 	icon := canvas.NewImageFromResource(theme.CheckButtonIcon())
 
 	text := canvas.NewText(c.Text, theme.ForegroundColor())

diff --git a/widget/radio_item.go b/widget/radio_item.go
@@ -39,14 +39,14 @@ type radioItem struct {
 func (i *radioItem) CreateRenderer() fyne.WidgetRenderer {
 	focusIndicator := canvas.NewCircle(color.Transparent)
 	bg := canvas.NewCircle(theme.InputBackgroundColor())
-	icon := canvas.NewImageFromResource(theme.NewPrimaryThemedResource(theme.RadioButtonCheckedIcon()))
+	// TODO move to `theme.RadioButtonFillIcon()` when we add it in 2.4
+	icon := canvas.NewImageFromResource(fyne.CurrentApp().Settings().Theme().Icon("iconNameRadioButtonFill"))
 	over := canvas.NewImageFromResource(theme.NewThemedResource(theme.RadioButtonIcon()))
 	label := canvas.NewText(i.Label, theme.ForegroundColor())
 	label.Alignment = fyne.TextAlignLeading
 	r := &radioItemRenderer{
 		BaseRenderer:   widget.NewBaseRenderer([]fyne.CanvasObject{focusIndicator, bg, icon, over, label}),
 		focusIndicator: focusIndicator,
-		bg:             bg,
 		icon:           icon,
 		over:           over,
 		item:           i,
@@ -152,10 +152,10 @@ func (i *radioItem) toggle() {
 type radioItemRenderer struct {
 	widget.BaseRenderer
 
-	bg, focusIndicator *canvas.Circle
-	icon, over         *canvas.Image
-	item               *radioItem
-	label              *canvas.Text
+	focusIndicator *canvas.Circle
+	icon, over     *canvas.Image
+	item           *radioItem
+	label          *canvas.Text
 }
 
 func (r *radioItemRenderer) Layout(size fyne.Size) {
@@ -169,8 +169,6 @@ func (r *radioItemRenderer) Layout(size fyne.Size) {
 
 	iconPos := fyne.NewPos(theme.InnerPadding()/2+theme.InputBorderSize(), (size.Height-theme.IconInlineSize())/2)
 	iconSize := fyne.NewSize(theme.IconInlineSize(), theme.IconInlineSize())
-	r.bg.Move(iconPos.AddXY(3, 3)) // absolute numbers to move relative to SVG details
-	r.bg.Resize(iconSize.SubtractWidthHeight(6, 6))
 	r.icon.Resize(iconSize)
 	r.icon.Move(iconPos)
 	r.over.Resize(iconSize)
@@ -200,17 +198,15 @@ func (r *radioItemRenderer) update() {
 
 	out := theme.NewThemedResource(theme.RadioButtonIcon())
 	out.ColorName = theme.ColorNameInputBorder
-	in := theme.NewThemedResource(theme.RadioButtonCheckedIcon())
-	r.icon.Hidden = true
-	r.bg.FillColor = theme.InputBackgroundColor()
+	// TODO move to `theme.RadioButtonFillIcon()` when we add it in 2.4
+	in := theme.NewThemedResource(fyne.CurrentApp().Settings().Theme().Icon("iconNameRadioButtonFill"))
+	in.ColorName = theme.ColorNameInputBackground
 	if r.item.Selected {
 		in.ColorName = theme.ColorNamePrimary
-		r.icon.Hidden = false
 		out.ColorName = theme.ColorNameForeground
 	}
 	if r.item.Disabled() {
-		r.bg.FillColor = theme.BackgroundColor()
-		in.ColorName = theme.ColorNameDisabled
+		in.ColorName = theme.ColorNameBackground
 		out.ColorName = theme.ColorNameDisabled
 	}
 	r.icon.Resource = in