From 90c3536f3ee93b387c7485b4cf0bca191a107f91 Mon Sep 17 00:00:00 2001 From: Matias Lahti Date: Sun, 8 Nov 2020 01:20:53 +0200 Subject: [PATCH] feat(tracker): implement some basic styled ui building blocks --- go4k/tracker/label.go | 47 +++++++++++++++++++++++++++++++++++ go4k/tracker/layout.go | 14 +++++++++-- go4k/tracker/panels.go | 56 ++++++++++++++++++++++++++++++++++++++++++ go4k/tracker/theme.go | 24 ++++++++++++++++++ 4 files changed, 139 insertions(+), 2 deletions(-) create mode 100644 go4k/tracker/label.go create mode 100644 go4k/tracker/panels.go create mode 100644 go4k/tracker/theme.go diff --git a/go4k/tracker/label.go b/go4k/tracker/label.go new file mode 100644 index 0000000..1edbf20 --- /dev/null +++ b/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 +} diff --git a/go4k/tracker/layout.go b/go4k/tracker/layout.go index b7ef134..dc4d1b8 100644 --- a/go4k/tracker/layout.go +++ b/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))), + ) } diff --git a/go4k/tracker/panels.go b/go4k/tracker/panels.go new file mode 100644 index 0000000..da45f43 --- /dev/null +++ b/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, + } + } +} diff --git a/go4k/tracker/theme.go b/go4k/tracker/theme.go new file mode 100644 index 0000000..8b0bcc1 --- /dev/null +++ b/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)