Merge pull request fyne-io#4539 from Jacalz/fill-icons

cmd/fyne_demo/tutorials/icons.go

@@ -94,8 +94,10 @@ func loadIcons() []iconInfo {
 		{"SearchReplaceIcon", theme.SearchReplaceIcon()},
 
 		{"CheckButtonIcon", theme.CheckButtonIcon()},
+		{"CheckButtonFillIcon", theme.CheckButtonFillIcon()},
 		{"CheckButtonCheckedIcon", theme.CheckButtonCheckedIcon()},
 		{"RadioButtonIcon", theme.RadioButtonIcon()},
+		{"RadioButtonFillIcon", theme.RadioButtonFillIcon()},
 		{"RadioButtonCheckedIcon", theme.RadioButtonCheckedIcon()},
 
 		{"ColorAchromaticIcon", theme.ColorAchromaticIcon()},

test/markup_renderer.go

@@ -414,6 +414,7 @@ func knownResource(rsc fyne.Resource) string {
 	return map[fyne.Resource]string{
 		theme.CancelIcon():             "cancelIcon",
 		theme.CheckButtonCheckedIcon(): "checkButtonCheckedIcon",
+		theme.CheckButtonFillIcon():    "checkButtonFillIcon",
 		theme.CheckButtonIcon():        "checkButtonIcon",
 		theme.ColorAchromaticIcon():    "colorAchromaticIcon",
 		theme.ColorChromaticIcon():     "colorChromaticIcon",
@@ -473,6 +474,7 @@ func knownResource(rsc fyne.Resource) string {
 		theme.NavigateNextIcon():       "navigateNextIcon",
 		theme.QuestionIcon():           "questionIcon",
 		theme.RadioButtonCheckedIcon(): "radioButtonCheckedIcon",
+		theme.RadioButtonFillIcon():    "radioButtonFillIcon",
 		theme.RadioButtonIcon():        "radioButtonIcon",
 		theme.SearchIcon():             "searchIcon",
 		theme.SearchReplaceIcon():      "searchReplaceIcon",

theme/icons.go

@@ -41,15 +41,20 @@ const (
 	// Since: 2.0
 	IconNameMenuExpand fyne.ThemeIconName = "menuExpand"
 
+	// IconNameCheckButton is the name of theme lookup for unchecked check button icon.
+	//
+	// Since: 2.0
+	IconNameCheckButton fyne.ThemeIconName = "unchecked"
+
 	// IconNameCheckButtonChecked is the name of theme lookup for checked check button icon.
 	//
 	// Since: 2.0
 	IconNameCheckButtonChecked fyne.ThemeIconName = "checked"
 
-	// IconNameCheckButton is the name of theme lookup for  unchecked check button icon.
+	// InconNameCheckButtonFill is the name of theme lookup for filled check button icon.
 	//
-	// Since: 2.0
-	IconNameCheckButton fyne.ThemeIconName = "unchecked"
+	// Since: 2.5
+	IconNameCheckButtonFill fyne.ThemeIconName = "iconNameCheckButtonFill"
 
 	// IconNameRadioButton is the name of theme lookup for radio button unchecked icon.
 	//
@@ -61,6 +66,11 @@ const (
 	// Since: 2.0
 	IconNameRadioButtonChecked fyne.ThemeIconName = "radioButtonChecked"
 
+	// InconNameRadioButtonFill is the name of theme lookup for filled radio button icon.
+	//
+	// Since: 2.5
+	IconNameRadioButtonFill fyne.ThemeIconName = "iconNameRadioButtonFill"
+
 	// IconNameColorAchromatic is the name of theme lookup for greyscale color icon.
 	//
 	// Since: 2.0
@@ -489,10 +499,10 @@ var (
 
 		IconNameCheckButton:        NewThemedResource(checkboxIconRes),
 		IconNameCheckButtonChecked: NewThemedResource(checkboxcheckedIconRes),
-		"iconNameCheckButtonFill":  NewThemedResource(checkboxfillIconRes),
+		IconNameCheckButtonFill:    NewThemedResource(checkboxfillIconRes),
 		IconNameRadioButton:        NewThemedResource(radiobuttonIconRes),
 		IconNameRadioButtonChecked: NewThemedResource(radiobuttoncheckedIconRes),
-		"iconNameRadioButtonFill":  NewThemedResource(radiobuttonfillIconRes),
+		IconNameRadioButtonFill:    NewThemedResource(radiobuttonfillIconRes),
 
 		IconNameContentAdd:    NewThemedResource(contentaddIconRes),
 		IconNameContentClear:  NewThemedResource(cancelIconRes),
@@ -834,6 +844,13 @@ func CheckButtonCheckedIcon() fyne.Resource {
 	return safeIconLookup(IconNameCheckButtonChecked)
 }
 
+// CheckButtonFillIcon returns a resource containing the filled checkbox icon for the current theme.
+//
+// Since: 2.5
+func CheckButtonFillIcon() fyne.Resource {
+	return safeIconLookup(IconNameCheckButtonFill)
+}
+
 // RadioButtonIcon returns a resource containing the standard radio button icon for the current theme
 func RadioButtonIcon() fyne.Resource {
 	return safeIconLookup(IconNameRadioButton)
@@ -844,6 +861,13 @@ func RadioButtonCheckedIcon() fyne.Resource {
 	return safeIconLookup(IconNameRadioButtonChecked)
 }
 
+// RadioButtonFillIcon returns a resource containing the filled checkbox icon for the current theme.
+//
+// Since: 2.5
+func RadioButtonFillIcon() fyne.Resource {
+	return safeIconLookup(IconNameRadioButtonFill)
+}
+
 // ContentAddIcon returns a resource containing the standard content add icon for the current theme
 func ContentAddIcon() fyne.Resource {
 	return safeIconLookup(IconNameContentAdd)

widget/check.go

@@ -154,12 +154,11 @@ func (c *Check) MinSize() fyne.Size {
 // CreateRenderer is a private method to Fyne which links this widget to its renderer
 func (c *Check) CreateRenderer() fyne.WidgetRenderer {
 	c.ExtendBaseWidget(c)
-	c.propertyLock.RLock()
-	defer c.propertyLock.RUnlock()
-	// TODO move to `theme.CheckButtonFillIcon()` when we add it in 2.4
-	bg := canvas.NewImageFromResource(fyne.CurrentApp().Settings().Theme().Icon("iconNameCheckButtonFill"))
+	bg := canvas.NewImageFromResource(theme.CheckButtonFillIcon())
 	icon := canvas.NewImageFromResource(theme.CheckButtonIcon())
 
+	c.propertyLock.RLock()
+	defer c.propertyLock.RUnlock()
 	text := canvas.NewText(c.Text, theme.ForegroundColor())
 	text.Alignment = fyne.TextAlignLeading
 
@@ -284,21 +283,25 @@ func (c *checkRenderer) MinSize() fyne.Size {
 
 // Layout the components of the check widget
 func (c *checkRenderer) Layout(size fyne.Size) {
-	focusIndicatorSize := fyne.NewSquareSize(theme.IconInlineSize() + theme.InnerPadding())
+	innerPadding := theme.InnerPadding()
+	borderSize := theme.InputBorderSize()
+	iconInlineSize := theme.IconInlineSize()
+
+	focusIndicatorSize := fyne.NewSquareSize(iconInlineSize + innerPadding)
 	c.focusIndicator.Resize(focusIndicatorSize)
-	c.focusIndicator.Move(fyne.NewPos(theme.InputBorderSize(), (size.Height-focusIndicatorSize.Height)/2))
+	c.focusIndicator.Move(fyne.NewPos(borderSize, (size.Height-focusIndicatorSize.Height)/2))
 
-	xOff := focusIndicatorSize.Width + theme.InputBorderSize()*2
+	xOff := focusIndicatorSize.Width + borderSize*2
 	labelSize := size.SubtractWidthHeight(xOff, 0)
 	c.label.Resize(labelSize)
 	c.label.Move(fyne.NewPos(xOff, 0))
 
-	iconPos := fyne.NewPos(theme.InnerPadding()/2+theme.InputBorderSize(), (size.Height-theme.IconInlineSize())/2)
-	iconSize := fyne.NewSquareSize(theme.IconInlineSize())
+	iconPos := fyne.NewPos(innerPadding/2+borderSize, (size.Height-iconInlineSize)/2)
+	iconSize := fyne.NewSquareSize(iconInlineSize)
 	c.bg.Move(iconPos)
 	c.bg.Resize(iconSize)
-	c.icon.Resize(iconSize)
 	c.icon.Move(iconPos)
+	c.icon.Resize(iconSize)
 }
 
 // applyTheme updates this Check to the current theme
@@ -327,8 +330,7 @@ func (c *checkRenderer) updateLabel() {
 func (c *checkRenderer) updateResource() {
 	res := theme.NewThemedResource(theme.CheckButtonIcon())
 	res.ColorName = theme.ColorNameInputBorder
-	// TODO move to `theme.CheckButtonFillIcon()` when we add it in 2.4
-	bgRes := theme.NewThemedResource(fyne.CurrentApp().Settings().Theme().Icon("iconNameCheckButtonFill"))
+	bgRes := theme.NewThemedResource(theme.CheckButtonFillIcon())
 	bgRes.ColorName = theme.ColorNameInputBackground
 
 	if c.check.Checked {
@@ -337,9 +339,6 @@ func (c *checkRenderer) updateResource() {
 		bgRes.ColorName = theme.ColorNameBackground
 	}
 	if c.check.disabled.Load() {
-		if c.check.Checked {
-			res = theme.NewThemedResource(theme.CheckButtonCheckedIcon())
-		}
 		res.ColorName = theme.ColorNameDisabled
 		bgRes.ColorName = theme.ColorNameBackground
 	}

widget/radio_group_internal_test.go

@@ -66,7 +66,7 @@ func TestRadioGroup_DisableWhenSelected(t *testing.T) {
 	radio := NewRadioGroup([]string{"Hi"}, nil)
 	radio.SetSelected("Hi")
 	render := radioGroupTestItemRenderer(t, radio, 0)
-	icon := fyne.CurrentApp().Settings().Theme().Icon("iconNameRadioButtonFill")
+	icon := theme.RadioButtonFillIcon()
 	assert.Equal(t, "primary_"+icon.Name(), render.icon.Resource.Name())
 
 	radio.Disable()

widget/radio_item.go

@@ -38,8 +38,7 @@ type radioItem struct {
 // Implements: fyne.Widget
 func (i *radioItem) CreateRenderer() fyne.WidgetRenderer {
 	focusIndicator := canvas.NewCircle(color.Transparent)
-	// TODO move to `theme.RadioButtonFillIcon()` when we add it in 2.4
-	icon := canvas.NewImageFromResource(fyne.CurrentApp().Settings().Theme().Icon("iconNameRadioButtonFill"))
+	icon := canvas.NewImageFromResource(theme.RadioButtonFillIcon())
 	over := canvas.NewImageFromResource(theme.NewThemedResource(theme.RadioButtonIcon()))
 	label := canvas.NewText(i.Label, theme.ForegroundColor())
 	label.Alignment = fyne.TextAlignLeading
@@ -158,16 +157,20 @@ type radioItemRenderer struct {
 }
 
 func (r *radioItemRenderer) Layout(size fyne.Size) {
-	focusIndicatorSize := fyne.NewSquareSize(theme.IconInlineSize() + theme.InnerPadding())
+	innerPadding := theme.InnerPadding()
+	borderSize := theme.InputBorderSize()
+	iconInlineSize := theme.IconInlineSize()
+
+	focusIndicatorSize := fyne.NewSquareSize(iconInlineSize + innerPadding)
 	r.focusIndicator.Resize(focusIndicatorSize)
-	r.focusIndicator.Move(fyne.NewPos(theme.InputBorderSize(), (size.Height-focusIndicatorSize.Height)/2))
+	r.focusIndicator.Move(fyne.NewPos(borderSize, (size.Height-focusIndicatorSize.Height)/2))
 
 	labelSize := fyne.NewSize(size.Width, size.Height)
 	r.label.Resize(labelSize)
 	r.label.Move(fyne.NewPos(focusIndicatorSize.Width+theme.Padding(), 0))
 
-	iconPos := fyne.NewPos(theme.InnerPadding()/2+theme.InputBorderSize(), (size.Height-theme.IconInlineSize())/2)
-	iconSize := fyne.NewSquareSize(theme.IconInlineSize())
+	iconPos := fyne.NewPos(innerPadding/2+borderSize, (size.Height-iconInlineSize)/2)
+	iconSize := fyne.NewSquareSize(iconInlineSize)
 	r.icon.Resize(iconSize)
 	r.icon.Move(iconPos)
 	r.over.Resize(iconSize)
@@ -178,8 +181,7 @@ func (r *radioItemRenderer) MinSize() fyne.Size {
 	inPad := theme.InnerPadding() * 2
 
 	return r.label.MinSize().
-		Add(fyne.NewSize(inPad, inPad)).
-		Add(fyne.NewSize(theme.IconInlineSize()+theme.Padding(), 0))
+		AddWidthHeight(inPad+theme.IconInlineSize()+theme.Padding(), inPad)
 }
 
 func (r *radioItemRenderer) Refresh() {
@@ -197,8 +199,7 @@ func (r *radioItemRenderer) update() {
 
 	out := theme.NewThemedResource(theme.RadioButtonIcon())
 	out.ColorName = theme.ColorNameInputBorder
-	// TODO move to `theme.RadioButtonFillIcon()` when we add it in 2.4
-	in := theme.NewThemedResource(fyne.CurrentApp().Settings().Theme().Icon("iconNameRadioButtonFill"))
+	in := theme.NewThemedResource(theme.RadioButtonFillIcon())
 	in.ColorName = theme.ColorNameInputBackground
 	if r.item.Selected {
 		in.ColorName = theme.ColorNamePrimary

widget/testdata/check/layout_checked.xml

@@ -3,7 +3,7 @@
 		<container pos="4,4" size="142x192">
 			<widget pos="39,78" size="62x35" type="*widget.Check">
 				<circle pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="background"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="background"/>
 				<image pos="6,7" rsc="checkButtonCheckedIcon" size="iconInlineSize" themed="primary"/>
 				<text pos="32,0" size="30x35">Test</text>
 			</widget>

widget/testdata/check/layout_checked_disabled.xml

@@ -3,7 +3,7 @@
 		<container pos="4,4" size="142x192">
 			<widget pos="39,78" size="62x35" type="*widget.Check">
 				<circle pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="background"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="background"/>
 				<image pos="6,7" rsc="checkButtonCheckedIcon" size="iconInlineSize" themed="disabled"/>
 				<text color="disabled" pos="32,0" size="30x35">Test</text>
 			</widget>

widget/testdata/check/layout_unchecked.xml

@@ -3,7 +3,7 @@
 		<container pos="4,4" size="142x192">
 			<widget pos="39,78" size="62x35" type="*widget.Check">
 				<circle pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="inputBackground"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="inputBackground"/>
 				<image pos="6,7" rsc="checkButtonIcon" size="iconInlineSize" themed="inputBorder"/>
 				<text pos="32,0" size="30x35">Test</text>
 			</widget>

widget/testdata/check/layout_unchecked_disabled.xml

@@ -3,7 +3,7 @@
 		<container pos="4,4" size="142x192">
 			<widget pos="39,78" size="62x35" type="*widget.Check">
 				<circle pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="background"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="background"/>
 				<image pos="6,7" rsc="checkButtonIcon" size="iconInlineSize" themed="disabled"/>
 				<text color="disabled" pos="32,0" size="30x35">Test</text>
 			</widget>

widget/testdata/check_group/disabled_append_none_selected.xml

@@ -3,19 +3,19 @@
 		<widget pos="4,4" size="142x192" type="*widget.CheckGroup">
 			<widget size="94x35" type="*widget.Check">
 				<circle pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="background"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="background"/>
 				<image pos="6,7" rsc="checkButtonIcon" size="iconInlineSize" themed="disabled"/>
 				<text color="disabled" pos="32,0" size="62x35">Option A</text>
 			</widget>
 			<widget pos="0,35" size="94x35" type="*widget.Check">
 				<circle pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="background"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="background"/>
 				<image pos="6,7" rsc="checkButtonIcon" size="iconInlineSize" themed="disabled"/>
 				<text color="disabled" pos="32,0" size="62x35">Option B</text>
 			</widget>
 			<widget pos="0,70" size="94x35" type="*widget.Check">
 				<circle pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="background"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="background"/>
 				<image pos="6,7" rsc="checkButtonIcon" size="iconInlineSize" themed="disabled"/>
 				<text color="disabled" pos="32,0" size="62x35">Option C</text>
 			</widget>

widget/testdata/check_group/disabled_none_selected.xml

@@ -3,13 +3,13 @@
 		<widget pos="4,4" size="142x192" type="*widget.CheckGroup">
 			<widget size="94x35" type="*widget.Check">
 				<circle pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="background"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="background"/>
 				<image pos="6,7" rsc="checkButtonIcon" size="iconInlineSize" themed="disabled"/>
 				<text color="disabled" pos="32,0" size="62x35">Option A</text>
 			</widget>
 			<widget pos="0,35" size="94x35" type="*widget.Check">
 				<circle pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="background"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="background"/>
 				<image pos="6,7" rsc="checkButtonIcon" size="iconInlineSize" themed="disabled"/>
 				<text color="disabled" pos="32,0" size="62x35">Option B</text>
 			</widget>

widget/testdata/check_group/focus_a_focused_b_selected.xml

@@ -3,19 +3,19 @@
 		<widget pos="4,4" size="142x192" type="*widget.CheckGroup">
 			<widget size="94x35" type="*widget.Check">
 				<circle fillColor="focus" pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="inputBackground"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="inputBackground"/>
 				<image pos="6,7" rsc="checkButtonIcon" size="iconInlineSize" themed="inputBorder"/>
 				<text pos="32,0" size="62x35">Option A</text>
 			</widget>
 			<widget pos="0,35" size="94x35" type="*widget.Check">
 				<circle pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="background"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="background"/>
 				<image pos="6,7" rsc="checkButtonCheckedIcon" size="iconInlineSize" themed="primary"/>
 				<text pos="32,0" size="62x35">Option B</text>
 			</widget>
 			<widget pos="0,70" size="94x35" type="*widget.Check">
 				<circle pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="background"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="background"/>
 				<image pos="6,7" rsc="checkButtonCheckedIcon" size="iconInlineSize" themed="primary"/>
 				<text pos="32,0" size="62x35">Option C</text>
 			</widget>

widget/testdata/check_group/focus_a_focused_none_selected.xml

@@ -3,19 +3,19 @@
 		<widget pos="4,4" size="142x192" type="*widget.CheckGroup">
 			<widget size="94x35" type="*widget.Check">
 				<circle fillColor="focus" pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="inputBackground"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="inputBackground"/>
 				<image pos="6,7" rsc="checkButtonIcon" size="iconInlineSize" themed="inputBorder"/>
 				<text pos="32,0" size="62x35">Option A</text>
 			</widget>
 			<widget pos="0,35" size="94x35" type="*widget.Check">
 				<circle pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="inputBackground"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="inputBackground"/>
 				<image pos="6,7" rsc="checkButtonIcon" size="iconInlineSize" themed="inputBorder"/>
 				<text pos="32,0" size="62x35">Option B</text>
 			</widget>
 			<widget pos="0,70" size="94x35" type="*widget.Check">
 				<circle pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="inputBackground"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="inputBackground"/>
 				<image pos="6,7" rsc="checkButtonIcon" size="iconInlineSize" themed="inputBorder"/>
 				<text pos="32,0" size="62x35">Option C</text>
 			</widget>

widget/testdata/check_group/focus_b_focused_b_selected.xml

@@ -3,19 +3,19 @@
 		<widget pos="4,4" size="142x192" type="*widget.CheckGroup">
 			<widget size="94x35" type="*widget.Check">
 				<circle pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="inputBackground"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="inputBackground"/>
 				<image pos="6,7" rsc="checkButtonIcon" size="iconInlineSize" themed="inputBorder"/>
 				<text pos="32,0" size="62x35">Option A</text>
 			</widget>
 			<widget pos="0,35" size="94x35" type="*widget.Check">
 				<circle fillColor="focus" pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="background"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="background"/>
 				<image pos="6,7" rsc="checkButtonCheckedIcon" size="iconInlineSize" themed="primary"/>
 				<text pos="32,0" size="62x35">Option B</text>
 			</widget>
 			<widget pos="0,70" size="94x35" type="*widget.Check">
 				<circle pos="2,3" size="28x28"/>
-				<image pos="6,7" rsc="check-box-fill.svg" size="iconInlineSize" themed="background"/>
+				<image pos="6,7" rsc="checkButtonFillIcon" size="iconInlineSize" themed="background"/>
 				<image pos="6,7" rsc="checkButtonCheckedIcon" size="iconInlineSize" themed="primary"/>
 				<text pos="32,0" size="62x35">Option C</text>
 			</widget>