~eliasnaur/gio-patches

gio: Properly animate elliptical material.IconButtons v1 PROPOSED

~whereswaldon
I can understand if this feature isn't accepted because it is rarely
needed, but I thought I'd propose it just in case. The IconButton
animation code currently assumes that the button is a circle, which
makes the animation for a click appear off-center or weirdly aligned.
Cheers,
Chris

Chris Waldon (2):
  widget/material: handle elliptical icon buttons
  example/kitchen: [drop this commit]

 example/kitchen/kitchen.go | 7 ++++++-
 widget/material/button.go  | 8 ++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

-- 
2.26.2
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~eliasnaur/gio-patches/patches/11639/mbox | git am -3
Learn more about email & git
View this thread in the archives

[PATCH gio 1/2] widget/material: handle elliptical icon buttons Export this patch

~whereswaldon
From: Chris Waldon <christopher.waldon.dev@gmail.com>

This commit changes the ink-drawing code so that IconButtons that
are not perfectly circular will still ink fully. Previously, an
elliptical icon would only animate a circular sub-region.

Signed-off-by: Chris Waldon <christopher.waldon.dev@gmail.com>
---
 widget/material/button.go | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/widget/material/button.go b/widget/material/button.go
index 5d187c8..4ee2817 100644
--- a/widget/material/button.go
+++ b/widget/material/button.go
@@ -150,11 +150,11 @@ func (b ButtonLayoutStyle) Layout(gtx layout.Context, w layout.Widget) layout.Di
func (b IconButtonStyle) Layout(gtx layout.Context) layout.Dimensions {
	return layout.Stack{Alignment: layout.Center}.Layout(gtx,
		layout.Expanded(func(gtx layout.Context) layout.Dimensions {
			size := gtx.Constraints.Min.X
			sizef := float32(size)
			rr := sizef * .5
			sizex, sizey := gtx.Constraints.Min.X, gtx.Constraints.Min.Y
			sizexf, sizeyf := float32(sizex), float32(sizey)
			rr := (sizexf + sizeyf) * .25
			clip.RRect{
				Rect: f32.Rectangle{Max: f32.Point{X: sizef, Y: sizef}},
				Rect: f32.Rectangle{Max: f32.Point{X: sizexf, Y: sizeyf}},
				NE:   rr, NW: rr, SE: rr, SW: rr,
			}.Add(gtx.Ops)
			background := b.Background
-- 
2.26.2

[PATCH gio 2/2] example/kitchen: [drop this commit] Export this patch

~whereswaldon
From: Chris Waldon <christopher.waldon.dev@gmail.com>

This commit illustrates the new behavior by making the previously-
circular icon button in the kitchen into an ellipse. I think it's
kinda ugly, so I recommend that this commit only be used to test
the patch and then dropped. You can see the previous behavior
by applying this patch first.

Signed-off-by: Chris Waldon <christopher.waldon.dev@gmail.com>
---
 example/kitchen/kitchen.go | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/example/kitchen/kitchen.go b/example/kitchen/kitchen.go
index f607493..2a965f8 100644
--- a/example/kitchen/kitchen.go
+++ b/example/kitchen/kitchen.go
@@ -265,7 +265,12 @@ func kitchen(gtx layout.Context, th *material.Theme) layout.Dimensions {
			in := layout.UniformInset(unit.Dp(8))
			return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
				layout.Rigid(func(gtx C) D {
					return in.Layout(gtx, material.IconButton(th, iconButton, icon).Layout)
					btn := material.IconButton(th, iconButton, icon)
					btn.Inset.Top = unit.Dp(10)
					btn.Inset.Bottom = unit.Dp(10)
					btn.Inset.Right = unit.Dp(4)
					btn.Inset.Left = unit.Dp(4)
					return in.Layout(gtx, btn.Layout)
				}),
				layout.Rigid(func(gtx C) D {
					return in.Layout(gtx, iconAndTextButton{theme: th, icon: icon, word: "Icon", button: iconTextButton}.Layout)
-- 
2.26.2