refactor(tracker/gioui): Popup in same style as other widgets

tracker/gioui/menu.go

@@ -92,9 +92,7 @@ func (m *MenuWidget) Layout(gtx C, items ...ActionMenuItem) D {
 	// without causing heap escapes, so they are passed as a parameter to the Layout
 	m.update(gtx, items...)
 	popup := Popup(m.Theme, &m.State.visible)
-	popup.NE = unit.Dp(0)
+	popup.Style = &m.Theme.Popup.Menu
-	popup.ShadowN = unit.Dp(0)
-	popup.NW = unit.Dp(0)
 	return popup.Layout(gtx, func(gtx C) D {
 		gtx.Constraints.Max.X = gtx.Dp(m.Style.Width)
 		gtx.Constraints.Max.Y = gtx.Dp(m.Style.Height)

tracker/gioui/popup.go

@@ -13,69 +13,51 @@ import (
 	"gioui.org/unit"
 )
 
-type PopupStyle struct {
+type (
-	Visible        *bool
+	PopupStyle struct {
-	SurfaceColor   color.NRGBA
+		Color       color.NRGBA
-	ShadowColor    color.NRGBA
+		CornerRadii struct {
-	ShadowN        unit.Dp
-	ShadowE        unit.Dp
-	ShadowW        unit.Dp
-	ShadowS        unit.Dp
 			SE, SW, NW, NE unit.Dp
 		}
+		Shadow struct {
+			Color      color.NRGBA
+			N, E, W, S unit.Dp
+		}
+	}
 
-func Popup(th *Theme, visible *bool) PopupStyle {
+	PopupWidget struct {
-	return PopupStyle{
+		Style   *PopupStyle
+		Visible *bool
+	}
+)
+
+func Popup(th *Theme, visible *bool) PopupWidget {
+	return PopupWidget{
+		Style:   &th.Popup.Dialog,
 		Visible: visible,
-		SurfaceColor: th.Popup.Bg,
-		ShadowColor:  th.Popup.Shadow,
-		ShadowN:      unit.Dp(2),
-		ShadowE:      unit.Dp(2),
-		ShadowS:      unit.Dp(2),
-		ShadowW:      unit.Dp(2),
-		SE:           unit.Dp(6),
-		SW:           unit.Dp(6),
-		NW:           unit.Dp(6),
-		NE:           unit.Dp(6),
 	}
 }
 
-func (s PopupStyle) Layout(gtx C, contents layout.Widget) D {
+func (s PopupWidget) Layout(gtx C, contents layout.Widget) D {
+	s.update(gtx)
+
 	if !*s.Visible {
 		return D{}
 	}
 
-	for {
-		event, ok := gtx.Event(pointer.Filter{
-			Target: s.Visible,
-			Kinds:  pointer.Press,
-		})
-		if !ok {
-			break
-		}
-		e, ok := event.(pointer.Event)
-		if !ok {
-			continue
-		}
-		switch e.Kind {
-		case pointer.Press:
-			*s.Visible = false
-		}
-	}
-
 	bg := func(gtx C) D {
 		rrect := clip.RRect{
 			Rect: image.Rectangle{Max: gtx.Constraints.Min},
-			SE:   gtx.Dp(s.SE),
+			SE:   gtx.Dp(s.Style.CornerRadii.SE),
-			SW:   gtx.Dp(s.SW),
+			SW:   gtx.Dp(s.Style.CornerRadii.SW),
-			NW:   gtx.Dp(s.NW),
+			NW:   gtx.Dp(s.Style.CornerRadii.NW),
-			NE:   gtx.Dp(s.NE),
+			NE:   gtx.Dp(s.Style.CornerRadii.NE),
 		}
 		rrect2 := rrect
-		rrect2.Rect.Min = rrect2.Rect.Min.Sub(image.Pt(gtx.Dp(s.ShadowW), gtx.Dp(s.ShadowN)))
+		rrect2.Rect.Min = rrect2.Rect.Min.Sub(image.Pt(gtx.Dp(s.Style.Shadow.W), gtx.Dp(s.Style.Shadow.N)))
-		rrect2.Rect.Max = rrect2.Rect.Max.Add(image.Pt(gtx.Dp(s.ShadowE), gtx.Dp(s.ShadowS)))
+		rrect2.Rect.Max = rrect2.Rect.Max.Add(image.Pt(gtx.Dp(s.Style.Shadow.E), gtx.Dp(s.Style.Shadow.S)))
-		paint.FillShape(gtx.Ops, s.ShadowColor, rrect2.Op(gtx.Ops))
+		paint.FillShape(gtx.Ops, s.Style.Shadow.Color, rrect2.Op(gtx.Ops))
-		paint.FillShape(gtx.Ops, s.SurfaceColor, rrect.Op(gtx.Ops))
+		paint.FillShape(gtx.Ops, s.Style.Color, rrect.Op(gtx.Ops))
 		area := clip.Rect(image.Rect(-1e6, -1e6, 1e6, 1e6)).Push(gtx.Ops)
 		event.Op(gtx.Ops, s.Visible)
 		area.Pop()
@@ -94,4 +76,24 @@ func (s PopupStyle) Layout(gtx C, contents layout.Widget) D {
 	return dims
 }
 
+func (s *PopupWidget) update(gtx C) {
+	for {
+		event, ok := gtx.Event(pointer.Filter{
+			Target: s.Visible,
+			Kinds:  pointer.Press,
+		})
+		if !ok {
+			break
+		}
+		e, ok := event.(pointer.Event)
+		if !ok {
+			continue
+		}
+		switch e.Kind {
+		case pointer.Press:
+			*s.Visible = false
+		}
+	}
+}
+
 var dummyTag bool

tracker/gioui/theme.go

@@ -97,8 +97,8 @@ type Theme struct {
 		Bg    color.NRGBA
 	}
 	Popup struct {
-		Bg     color.NRGBA
+		Menu   PopupStyle
-		Shadow color.NRGBA
+		Dialog PopupStyle
 	}
 	ScrollBar ScrollBarStyle
 

tracker/gioui/theme.yml

@@ -195,8 +195,14 @@ selection:
 scrollbar: { width: 10, color: *scrollbarcolor, gradient: *black }
 tooltip: { color: *white, bg: *black }
 popup:
-  bg: { r: 50, g: 50, b: 51, a: 255 }
+  dialog:
-  shadow: { r: 0, g: 0, b: 0, a: 192 }
+    color: { r: 50, g: 50, b: 51, a: 255 }
+    cornerradii: { nw: 6, ne: 6, se: 6, sw: 6 }
+    shadow: { n: 2, s: 2, e: 2, w: 2, color: { r: 0, g: 0, b: 0, a: 192 } }
+  menu:
+    color: { r: 50, g: 50, b: 51, a: 255 }
+    cornerradii: { nw: 0, ne: 0, se: 6, sw: 6 }
+    shadow: { n: 0, s: 2, e: 2, w: 2, color: { r: 0, g: 0, b: 0, a: 192 } }
 dialog:
   bg: { r: 0, g: 0, b: 0, a: 224 }
   title: { textsize: 16, color: *highemphasis, shadowcolor: *black }