add custom switch widget

ui/decredmaterial/progressbar.go

@@ -72,28 +72,3 @@ func clamp1(v float32) float32 {
 		return v
 	}
 }
-
-// Disabled blends color towards the luminance and multiplies alpha.
-// Blending towards luminance will desaturate the color.
-// Multiplying alpha blends the color together more with the background.
-func Disabled(c color.NRGBA) (d color.NRGBA) {
-	const r = 80 // blend ratio
-	lum := approxLuminance(c)
-	return color.NRGBA{
-		R: byte((int(c.R)*r + int(lum)*(256-r)) / 256),
-		G: byte((int(c.G)*r + int(lum)*(256-r)) / 256),
-		B: byte((int(c.B)*r + int(lum)*(256-r)) / 256),
-		A: byte(int(c.A) * (128 + 32) / 256),
-	}
-}
-
-// approxLuminance is a fast approximate version of RGBA.Luminance.
-func approxLuminance(c color.NRGBA) byte {
-	const (
-		r = 13933 // 0.2126 * 256 * 256
-		g = 46871 // 0.7152 * 256 * 256
-		b = 4732  // 0.0722 * 256 * 256
-		t = r + g + b
-	)
-	return byte((r*int(c.R) + g*int(c.G) + b*int(c.B)) / t)
-}

ui/decredmaterial/switch.go

@@ -3,16 +3,27 @@
 package decredmaterial
 
 import (
+	"image"
 	"image/color"
 
+	"gioui.org/f32"
+	"gioui.org/io/pointer"
 	"gioui.org/layout"
+	"gioui.org/op"
+	"gioui.org/op/clip"
+	"gioui.org/op/paint"
 	"gioui.org/unit"
 	"gioui.org/widget"
-	"gioui.org/widget/material"
 )
 
 type Switch struct {
-	material.SwitchStyle
+	active     color.NRGBA
+	inactive   color.NRGBA
+	thumbColor color.NRGBA
+	disabled   bool
+	value      bool
+	changed    bool
+	clk        *widget.Clickable
 }
 
 type SwitchItem struct {
@@ -28,8 +39,12 @@ type SwitchButtonText struct {
 	selected                           int
 }
 
-func (t *Theme) Switch(swtch *widget.Bool) Switch {
-	return Switch{material.Switch(t.Base, swtch)}
+func (t *Theme) Switch() *Switch {
+	sw := &Switch{
+		clk: new(widget.Clickable),
+	}
+	sw.active, sw.inactive, sw.thumbColor = t.Color.Primary, t.Color.InactiveGray, t.Color.Surface
+	return sw
 }
 
 func (t *Theme) SwitchButtonText(i []SwitchItem) *SwitchButtonText {
@@ -54,6 +69,115 @@ func (t *Theme) SwitchButtonText(i []SwitchItem) *SwitchButtonText {
 	return sw
 }
 
+func (s *Switch) Layout(gtx layout.Context) layout.Dimensions {
+	trackWidth := gtx.Px(unit.Dp(32))
+	trackHeight := gtx.Px(unit.Dp(20))
+	thumbSize := gtx.Px(unit.Dp(18))
+	trackOff := float32(thumbSize-trackHeight) * .5
+
+	// Draw track.
+	stack := op.Save(gtx.Ops)
+	trackCorner := float32(trackHeight) / 2
+	trackRect := f32.Rectangle{Max: f32.Point{
+		X: float32(trackWidth),
+		Y: float32(trackHeight),
+	}}
+
+	col := s.inactive
+	if s.IsChecked() {
+		col = s.active
+	}
+
+	trackColor := col
+	op.Offset(f32.Point{Y: trackOff}).Add(gtx.Ops)
+	clip.UniformRRect(trackRect, trackCorner).Add(gtx.Ops)
+	paint.ColorOp{Color: trackColor}.Add(gtx.Ops)
+	paint.PaintOp{}.Add(gtx.Ops)
+	stack.Load()
+
+	// Compute thumb offset and color.
+	stack = op.Save(gtx.Ops)
+	if s.IsChecked() {
+		off := trackWidth - thumbSize
+		op.Offset(f32.Point{X: float32(off)}).Add(gtx.Ops)
+	}
+
+	thumbRadius := float32(thumbSize) / 2
+
+	// Draw thumb shadow, a translucent disc slightly larger than the
+	// thumb itself.
+	// Center shadow horizontally and slightly adjust its Y.
+	paint.FillShape(gtx.Ops, col,
+		clip.Circle{
+			Center: f32.Point{X: thumbRadius, Y: thumbRadius + .25},
+			Radius: thumbRadius + 1,
+		}.Op(gtx.Ops))
+
+	// Draw thumb.
+	paint.FillShape(gtx.Ops, s.thumbColor,
+		clip.Circle{
+			Center: f32.Point{X: thumbRadius, Y: thumbRadius},
+			Radius: thumbRadius,
+		}.Op(gtx.Ops))
+
+	// Set up click area.
+	stack = op.Save(gtx.Ops)
+	clickSize := gtx.Px(unit.Dp(40))
+	clickOff := f32.Point{
+		X: (float32(trackWidth) - float32(clickSize)) * .5,
+		Y: (float32(trackHeight)-float32(clickSize))*.5 + trackOff,
+	}
+	op.Offset(clickOff).Add(gtx.Ops)
+	sz := image.Pt(clickSize, clickSize)
+	pointer.Ellipse(image.Rectangle{Max: sz}).Add(gtx.Ops)
+	gtx.Constraints.Min = sz
+	s.clk.Layout(gtx)
+	stack.Load()
+
+	dims := image.Point{X: trackWidth, Y: thumbSize}
+	return layout.Dimensions{Size: dims}
+}
+
+func (s *Switch) Changed() bool {
+	s.handleClickEvent()
+	changed := s.changed
+	s.changed = false
+	return changed
+}
+
+func (s *Switch) IsChecked() bool {
+	s.handleClickEvent()
+	return s.value
+}
+
+func (s *Switch) SetChecked(value bool) {
+	s.value = value
+}
+
+func (s *Switch) SetThumbColor(color color.NRGBA) {
+	s.thumbColor = color
+}
+
+func (s *Switch) SetTrackColor(activeColor, inactiveColor color.NRGBA) {
+	s.inactive, s.active = inactiveColor, activeColor
+}
+
+func (s *Switch) Disabled() {
+	s.disabled = true
+	s.SetTrackColor(Disabled(s.active), Disabled(s.inactive))
+	s.SetThumbColor(Disabled(s.thumbColor))
+}
+
+func (s *Switch) handleClickEvent() {
+	for s.clk.Clicked() {
+		if s.disabled {
+			return
+		}
+		s.value = !s.value
+		s.changed = true
+	}
+}
+
 func (s *SwitchButtonText) Layout(gtx layout.Context) layout.Dimensions {
 	s.handleClickEvent()
 	m8 := unit.Dp(8)

ui/decredmaterial/theme.go

@@ -281,3 +281,28 @@ func (t *Theme) closeAllDropdownMenus(group uint) {
 		}
 	}
 }
+
+// Disabled blends color towards the luminance and multiplies alpha.
+// Blending towards luminance will desaturate the color.
+// Multiplying alpha blends the color together more with the background.
+func Disabled(c color.NRGBA) (d color.NRGBA) {
+	const r = 80 // blend ratio
+	lum := approxLuminance(c)
+	return color.NRGBA{
+		R: byte((int(c.R)*r + int(lum)*(256-r)) / 256),
+		G: byte((int(c.G)*r + int(lum)*(256-r)) / 256),
+		B: byte((int(c.B)*r + int(lum)*(256-r)) / 256),
+		A: byte(int(c.A) * (128 + 32) / 256),
+	}
+}
+
+// approxLuminance is a fast approximate version of RGBA.Luminance.
+func approxLuminance(c color.NRGBA) byte {
+	const (
+		r = 13933 // 0.2126 * 256 * 256
+		g = 46871 // 0.7152 * 256 * 256
+		b = 4732  // 0.0722 * 256 * 256
+		t = r + g + b
+	)
+	return byte((r*int(c.R) + g*int(c.G) + b*int(c.B)) / t)
+}