widget/material: add ButtonLayout

Add ButtonLayout for adding button behaviour and style to arbitrary content such
as a combined icon-and-text button.
Fixes #43

Signed-off-by: metaclips <utimichael9@gmail.com>
This commit is contained in:
metaclips
2020-03-22 11:10:37 +01:00
committed by Elias Naur
parent a3101c9454
commit 5d7fbd761f
+36 -14
View File
@@ -29,6 +29,13 @@ type Button struct {
shaper text.Shaper shaper text.Shaper
} }
type ButtonLayout struct {
Background color.RGBA
Color color.RGBA
CornerRadius unit.Value
Inset layout.Inset
}
type IconButton struct { type IconButton struct {
Background color.RGBA Background color.RGBA
Color color.RGBA Color color.RGBA
@@ -40,10 +47,11 @@ type IconButton struct {
func (t *Theme) Button(txt string) Button { func (t *Theme) Button(txt string) Button {
return Button{ return Button{
Text: txt, Text: txt,
Color: rgb(0xffffff), Color: rgb(0xffffff),
Background: t.Color.Primary, CornerRadius: unit.Dp(4),
TextSize: t.TextSize.Scale(14.0 / 16.0), Background: t.Color.Primary,
TextSize: t.TextSize.Scale(14.0 / 16.0),
Inset: layout.Inset{ Inset: layout.Inset{
Top: unit.Dp(10), Bottom: unit.Dp(10), Top: unit.Dp(10), Bottom: unit.Dp(10),
Left: unit.Dp(12), Right: unit.Dp(12), Left: unit.Dp(12), Right: unit.Dp(12),
@@ -52,6 +60,15 @@ func (t *Theme) Button(txt string) Button {
} }
} }
func (t *Theme) ButtonLayout() ButtonLayout {
return ButtonLayout{
Background: t.Color.Primary,
Color: t.Color.InvText,
CornerRadius: unit.Dp(4),
Inset: layout.UniformInset(unit.Dp(12)),
}
}
func (t *Theme) IconButton(icon *Icon) IconButton { func (t *Theme) IconButton(icon *Icon) IconButton {
return IconButton{ return IconButton{
Background: t.Color.Primary, Background: t.Color.Primary,
@@ -63,13 +80,20 @@ func (t *Theme) IconButton(icon *Icon) IconButton {
} }
func (b Button) Layout(gtx *layout.Context, button *widget.Button) { func (b Button) Layout(gtx *layout.Context, button *widget.Button) {
col := b.Color ButtonLayout{
bgcol := b.Background Background: b.Background,
hmin := gtx.Constraints.Width.Min CornerRadius: b.CornerRadius,
vmin := gtx.Constraints.Height.Min Color: b.Color,
Inset: b.Inset,
}.Layout(gtx, button, func() {
widget.Label{}.Layout(gtx, b.shaper, b.Font, b.TextSize, b.Text)
})
}
func (b ButtonLayout) Layout(gtx *layout.Context, button *widget.Button, w layout.Widget) {
layout.Stack{Alignment: layout.Center}.Layout(gtx, layout.Stack{Alignment: layout.Center}.Layout(gtx,
layout.Expanded(func() { layout.Expanded(func() {
rr := float32(gtx.Px(unit.Dp(4))) rr := float32(gtx.Px(b.CornerRadius))
clip.Rect{ clip.Rect{
Rect: f32.Rectangle{Max: f32.Point{ Rect: f32.Rectangle{Max: f32.Point{
X: float32(gtx.Constraints.Width.Min), X: float32(gtx.Constraints.Width.Min),
@@ -77,18 +101,16 @@ func (b Button) Layout(gtx *layout.Context, button *widget.Button) {
}}, }},
NE: rr, NW: rr, SE: rr, SW: rr, NE: rr, NW: rr, SE: rr, SW: rr,
}.Op(gtx.Ops).Add(gtx.Ops) }.Op(gtx.Ops).Add(gtx.Ops)
fill(gtx, bgcol) fill(gtx, b.Background)
for _, c := range button.History() { for _, c := range button.History() {
drawInk(gtx, c) drawInk(gtx, c)
} }
}), }),
layout.Stacked(func() { layout.Stacked(func() {
gtx.Constraints.Width.Min = hmin
gtx.Constraints.Height.Min = vmin
layout.Center.Layout(gtx, func() { layout.Center.Layout(gtx, func() {
b.Inset.Layout(gtx, func() { b.Inset.Layout(gtx, func() {
paint.ColorOp{Color: col}.Add(gtx.Ops) paint.ColorOp{Color: b.Color}.Add(gtx.Ops)
widget.Label{}.Layout(gtx, b.shaper, b.Font, b.TextSize, b.Text) w()
}) })
}) })
pointer.Rect(image.Rectangle{Max: gtx.Dimensions.Size}).Add(gtx.Ops) pointer.Rect(image.Rectangle{Max: gtx.Dimensions.Size}).Add(gtx.Ops)