feat(tracker): implement some basic styled ui building blocks

go4k/tracker/label.go

@@ -0,0 +1,47 @@
+package tracker
+
+import (
+	"gioui.org/f32"
+	"gioui.org/layout"
+	"gioui.org/op"
+	"gioui.org/op/paint"
+	"gioui.org/text"
+	"gioui.org/widget"
+	"image"
+	"image/color"
+)
+
+type LabelStyle struct {
+	Text       string
+	Color      color.RGBA
+	ShadeColor color.RGBA
+}
+
+func (l LabelStyle) Layout(gtx layout.Context) layout.Dimensions {
+	return layout.Stack{Alignment: layout.Center}.Layout(gtx,
+		layout.Stacked(func(gtx layout.Context) layout.Dimensions {
+			defer op.Push(gtx.Ops).Pop()
+			paint.ColorOp{Color: l.ShadeColor}.Add(gtx.Ops)
+			op.Offset(f32.Pt(2, 2)).Add(gtx.Ops)
+			dims := widget.Label{
+				Alignment: text.Start,
+				MaxLines:  1,
+			}.Layout(gtx, textShaper, labelFont, labelFontSize, l.Text)
+			return layout.Dimensions{
+				Size:     dims.Size.Add(image.Pt(2, 2)),
+				Baseline: dims.Baseline,
+			}
+		}),
+		layout.Stacked(func(gtx layout.Context) layout.Dimensions {
+			paint.ColorOp{Color: l.Color}.Add(gtx.Ops)
+			return widget.Label{
+				Alignment: text.Start,
+				MaxLines:  1,
+			}.Layout(gtx, textShaper, labelFont, labelFontSize, l.Text)
+		}),
+	)
+}
+
+func Label(text string, color color.RGBA) layout.Widget {
+	return LabelStyle{Text: text, Color: color, ShadeColor: black}.Layout
+}

go4k/tracker/layout.go

@@ -1,7 +1,17 @@
 package tracker
 
-import "gioui.org/layout"
+import (
+	"gioui.org/layout"
+	"gioui.org/op/paint"
+)
 
 func (t *Tracker) Layout(gtx layout.Context) {
-	t.QuitButton.Layout(gtx)
+	layout.Stack{Alignment: layout.NW}.Layout(gtx,
+		layout.Expanded(func(gtx layout.Context) layout.Dimensions {
+			paint.Fill(gtx.Ops, black)
+			return layout.Dimensions{Size: gtx.Constraints.Max}
+		}),
+		layout.Expanded(t.QuitButton.Layout),
+		layout.Stacked(Raised(Label("Hello", white))),
+	)
 }

go4k/tracker/panels.go

@@ -0,0 +1,56 @@
+package tracker
+
+import (
+	"fmt"
+	"gioui.org/f32"
+	"gioui.org/layout"
+	"gioui.org/op"
+	"gioui.org/op/clip"
+	"gioui.org/op/paint"
+	"image"
+	"image/color"
+)
+
+func Raised(w layout.Widget) layout.Widget {
+	return Beveled(w, panelColor, panelLightColor, panelShadeColor)
+}
+
+func Lowered(w layout.Widget) layout.Widget {
+	return Beveled(w, panelColor, panelShadeColor, panelLightColor)
+}
+
+func Beveled(w layout.Widget, base, light, shade color.RGBA) layout.Widget {
+	return func(gtx layout.Context) layout.Dimensions {
+		fmt.Println("BR", gtx.Constraints)
+		paint.FillShape(gtx.Ops, light, clip.Rect(image.Rect(0, 0, gtx.Constraints.Max.X, 1)).Op())
+		paint.FillShape(gtx.Ops, light, clip.Rect(image.Rect(0, 0, 1, gtx.Constraints.Max.Y)).Op())
+		paint.FillShape(gtx.Ops, base, clip.Rect(image.Rect(1, 1, gtx.Constraints.Max.X-1, gtx.Constraints.Max.Y-1)).Op())
+		paint.FillShape(gtx.Ops, shade, clip.Rect(image.Rect(0, gtx.Constraints.Max.Y-1, gtx.Constraints.Max.X, gtx.Constraints.Max.Y)).Op())
+		paint.FillShape(gtx.Ops, shade, clip.Rect(image.Rect(gtx.Constraints.Max.X-1, 0, gtx.Constraints.Max.X, gtx.Constraints.Max.Y)).Op())
+		fmt.Println("drawing sub..", gtx.Constraints)
+		stack := op.Push(gtx.Ops)
+		mcs := gtx.Constraints
+		mcs.Max.X -= 2
+		if mcs.Max.X < 0 {
+			mcs.Max.X = 0
+		}
+		if mcs.Min.X > mcs.Max.X {
+			mcs.Min.X = mcs.Max.X
+		}
+		mcs.Max.Y -= 2
+		if mcs.Max.Y < 0 {
+			mcs.Max.Y = 0
+		}
+		if mcs.Min.Y > mcs.Max.Y {
+			mcs.Min.Y = mcs.Max.Y
+		}
+		op.Offset(f32.Pt(1, 1)).Add(gtx.Ops)
+		gtx.Constraints = mcs
+		dims := w(gtx)
+		stack.Pop()
+		return layout.Dimensions{
+			Size:     dims.Size.Add(image.Point{X: 2, Y: 2}),
+			Baseline: dims.Baseline + 1,
+		}
+	}
+}

go4k/tracker/theme.go

@@ -0,0 +1,24 @@
+package tracker
+
+import (
+	"gioui.org/font/gofont"
+	"gioui.org/text"
+	"gioui.org/unit"
+	"image/color"
+)
+
+var fontCollection []text.FontFace = gofont.Collection()
+var textShaper = text.NewCache(fontCollection)
+
+var neutral = color.RGBA{R: 73, G: 117, B: 130, A: 255}
+var light = color.RGBA{R: 138, G: 219, B: 243, A: 255}
+var dark = color.RGBA{R: 24, G: 40, B: 44, A: 255}
+var white = color.RGBA{R: 255, G: 255, B: 255, A: 255}
+var black = color.RGBA{R: 0, G: 0, B: 0, A: 255}
+
+var panelColor = neutral
+var panelShadeColor = dark
+var panelLightColor = light
+
+var labelFont = fontCollection[6].Font
+var labelFontSize = unit.Px(18)