feat(gioui): add confirmation dialog when deleting instrument

Closes #5

tracker/gioui/dialog.go

@@ -0,0 +1,59 @@
+package gioui
+
+import (
+	"gioui.org/layout"
+	"gioui.org/op/paint"
+	"gioui.org/unit"
+	"gioui.org/widget"
+	"gioui.org/widget/material"
+)
+
+type Dialog struct {
+	Visible   bool
+	BtnOk     widget.Clickable
+	BtnCancel widget.Clickable
+}
+
+type DialogStyle struct {
+	dialog      *Dialog
+	Text        string
+	Inset       layout.Inset
+	OkStyle     material.ButtonStyle
+	CancelStyle material.ButtonStyle
+}
+
+func ConfirmDialog(th *material.Theme, dialog *Dialog, text string) DialogStyle {
+	ret := DialogStyle{
+		dialog:      dialog,
+		Text:        text,
+		Inset:       layout.Inset{Top: unit.Dp(12), Bottom: unit.Dp(12), Left: unit.Dp(20), Right: unit.Dp(20)},
+		OkStyle:     material.Button(th, &dialog.BtnOk, "Ok"),
+		CancelStyle: material.Button(th, &dialog.BtnCancel, "Cancel"),
+	}
+	ret.OkStyle.Background = primaryColor
+	ret.CancelStyle.Background = primaryColor
+	return ret
+}
+
+func (d *DialogStyle) Layout(gtx C) D {
+	if d.dialog.Visible {
+		paint.Fill(gtx.Ops, dialogBgColor)
+		return layout.Center.Layout(gtx, func(gtx C) D {
+			return Popup(&d.dialog.Visible).Layout(gtx, func(gtx C) D {
+				return d.Inset.Layout(gtx, func(gtx C) D {
+					return layout.Flex{Axis: layout.Vertical, Alignment: layout.Middle}.Layout(gtx,
+						layout.Rigid(Label(d.Text, highEmphasisTextColor)),
+						layout.Rigid(func(gtx C) D {
+							gtx.Constraints.Min.X = gtx.Px(unit.Dp(120))
+							return layout.Flex{Axis: layout.Horizontal, Spacing: layout.SpaceBetween}.Layout(gtx,
+								layout.Rigid(d.OkStyle.Layout),
+								layout.Rigid(d.CancelStyle.Layout),
+							)
+						}),
+					)
+				})
+			})
+		})
+	}
+	return D{}
+}

tracker/gioui/instruments.go

@@ -108,7 +108,14 @@ func (t *Tracker) layoutInstrumentHeader(gtx C) D {
 		}
 	}
 	for t.DeleteInstrumentBtn.Clicked() {
+		t.ConfirmInstrDelete.Visible = true
+	}
+	for t.ConfirmInstrDelete.BtnOk.Clicked() {
 		t.DeleteInstrument(false)
+		t.ConfirmInstrDelete.Visible = false
+	}
+	for t.ConfirmInstrDelete.BtnCancel.Clicked() {
+		t.ConfirmInstrDelete.Visible = false
 	}
 	return Surface{Gray: 37, Focus: t.EditMode() == tracker.EditUnits || t.EditMode() == tracker.EditParameters}.Layout(gtx, header)
 }

tracker/gioui/layout.go

@@ -18,6 +18,8 @@ func (t *Tracker) Layout(gtx layout.Context) {
 		t.layoutTop,
 		t.layoutBottom)
 	t.Alert.Layout(gtx)
+	dstyle := ConfirmDialog(t.Theme, t.ConfirmInstrDelete, "Are you sure you want to delete this instrument?")
+	dstyle.Layout(gtx)
 }
 
 func (t *Tracker) layoutBottom(gtx layout.Context) layout.Dimensions {

tracker/gioui/theme.go

@@ -74,3 +74,5 @@ var menuHoverColor = color.NRGBA{R: 30, G: 31, B: 38, A: 255}
 var scrollBarColor = color.NRGBA{R: 255, G: 255, B: 255, A: 32}
 
 var warningColor = color.NRGBA{R: 251, G: 192, B: 45, A: 255}
+
+var dialogBgColor = color.NRGBA{R: 0, G: 0, B: 0, A: 224}

tracker/gioui/tracker.go

@@ -61,6 +61,7 @@ type Tracker struct {
 	Alert                 Alert
 	PatternOrderList      *layout.List
 	PatternOrderScrollBar *ScrollBar
+	ConfirmInstrDelete    *Dialog
 
 	lastVolume tracker.Volume
 	volumeChan chan tracker.Volume
@@ -150,6 +151,7 @@ func New(audioContext sointu.AudioContext, synthService sointu.SynthService, syn
 		playerCloser:          make(chan struct{}),
 		PatternOrderList:      &layout.List{Axis: layout.Vertical},
 		PatternOrderScrollBar: &ScrollBar{Axis: layout.Vertical},
+		ConfirmInstrDelete:    new(Dialog),
 	}
 	t.Model = tracker.NewModel()
 	vuBufferObserver := make(chan []float32)