feat(tracker): move the pattern sequencer to bottom left

tracker/layout.go

@@ -76,12 +76,29 @@ func (t *Tracker) Layout(gtx layout.Context) {
 		return layout.Flex{Axis: layout.Vertical}.Layout(gtx2,
 			layout.Rigid(t.layoutControls),
 			layout.Rigid(t.line(true, separatorLineColor)),
-			layout.Flexed(1, t.layoutTracker))
+			layout.Flexed(1, t.layoutTracksAndPatterns))
 	})
 	t.updateInstrumentScroll()
 }
 
-func (t *Tracker) layoutTracker(gtx layout.Context) layout.Dimensions {
+func (t *Tracker) layoutTracksAndPatterns(gtx layout.Context) layout.Dimensions {
+	playPat := t.PlayPattern
+	if !t.Playing {
+		playPat = -1
+	}
+	return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
+		layout.Rigid(t.layoutPatterns(
+			t.song.Tracks,
+			t.ActiveTrack,
+			t.DisplayPattern,
+			t.CursorColumn,
+			playPat,
+		)), layout.Flexed(1, t.layoutTracks))
+}
+
+func (t *Tracker) layoutTracks(gtx layout.Context) layout.Dimensions {
+	paint.FillShape(gtx.Ops, trackerSurfaceColor, clip.Rect{Max: image.Pt(gtx.Constraints.Max.X, gtx.Constraints.Max.Y)}.Op())
+
 	flexTracks := make([]layout.FlexChild, len(t.song.Tracks))
 	t.playRowPatMutex.RLock()
 	defer t.playRowPatMutex.RUnlock()
@@ -188,10 +205,6 @@ func (t *Tracker) layoutControls(gtx layout.Context) layout.Dimensions {
 	gtx.Constraints.Min.Y = 250
 	gtx.Constraints.Max.Y = 250
 
-	playPat := t.PlayPattern
-	if !t.Playing {
-		playPat = -1
-	}
 	in := layout.UniformInset(unit.Dp(1))
 
 	go func() {
@@ -223,13 +236,6 @@ func (t *Tracker) layoutControls(gtx layout.Context) layout.Dimensions {
 	}
 
 	return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
-		layout.Rigid(t.layoutPatterns(
-			t.song.Tracks,
-			t.ActiveTrack,
-			t.DisplayPattern,
-			t.CursorColumn,
-			playPat,
-		)),
 		layout.Rigid(func(gtx layout.Context) layout.Dimensions {
 			return in.Layout(gtx, smallButton(material.IconButton(t.Theme, t.SongLengthUpBtn, upIcon)).Layout)
 		}),

tracker/patterns.go

@@ -35,7 +35,7 @@ func (t *Tracker) layoutPatterns(tracks []sointu.Track, activeTrack, cursorPatte
 			stack := op.Push(gtx.Ops)
 			op.Offset(f32.Pt(patternRowMarkerWidth, 0)).Add(gtx.Ops)
 			for i, track := range tracks {
-				paint.ColorOp{Color: trackerTextColor}.Add(gtx.Ops)
+				paint.ColorOp{Color: patternTextColor}.Add(gtx.Ops)
 				widget.Label{}.Layout(gtx, textShaper, trackerFont, trackerFontSize, fmt.Sprintf("%d", track.Sequence[j]))
 				if activeTrack == i && j == cursorPattern {
 					paint.FillShape(gtx.Ops, patternCursorColor, clip.Rect{Max: image.Pt(patternCellWidth, patternCellHeight)}.Op())

tracker/theme.go

@@ -51,11 +51,11 @@ var labelFontSize = unit.Px(18)
 var separatorLineColor = color.RGBA{R: 97, G: 97, B: 97, A: 97}
 
 var activeTrackColor = focusedContainerColor
-var trackSurfaceColor = color.RGBA{R: 18, G: 18, B: 18, A: 18}
+var trackSurfaceColor = color.RGBA{R: 31, G: 31, B: 31, A: 31}
 
-var patternSurfaceColor = color.RGBA{R: 31, G: 31, B: 31, A: 31}
+var patternSurfaceColor = color.RGBA{R: 0, G: 0, B: 0, A: 0}
 
-var rowMarkerSurfaceColor = color.RGBA{R: 31, G: 31, B: 31, A: 31}
+var rowMarkerSurfaceColor = color.RGBA{R: 0, G: 0, B: 0, A: 0}
 var rowMarkerPatternTextColor = secondaryColor
 var rowMarkerRowTextColor = mediumEmphasisTextColor
 
@@ -70,10 +70,10 @@ var trackerPatternRowTextColor = color.RGBA{R: 198, G: 198, B: 198, A: 255}
 var trackerPlayColor = color.RGBA{R: 55, G: 55, B: 61, A: 255}
 var trackerPatMarker = primaryColor
 var trackerCursorColor = color.RGBA{R: 38, G: 79, B: 120, A: 64}
+var trackerSurfaceColor = color.RGBA{R: 18, G: 18, B: 18, A: 18}
 
-var patternBgColor = black
 var patternPlayColor = color.RGBA{R: 55, G: 55, B: 61, A: 255}
-var patternTextColor = white
+var patternTextColor = primaryColor
 var patternActiveTextColor = yellow
 var patternFont = fontCollection[6].Font
 var patternFontSize = unit.Px(12)

tracker/track.go

@@ -21,9 +21,6 @@ func (t *Tracker) layoutTrack(patterns [][]byte, sequence []byte, active bool, h
 	return func(gtx layout.Context) layout.Dimensions {
 		gtx.Constraints.Min.X = trackWidth
 		gtx.Constraints.Max.X = trackWidth
-		paint.FillShape(gtx.Ops, trackSurfaceColor, clip.Rect{
-			Max: gtx.Constraints.Max,
-		}.Op())
 		defer op.Push(gtx.Ops).Pop()
 		clip.Rect{Max: gtx.Constraints.Max}.Add(gtx.Ops)
 		op.Offset(f32.Pt(0, float32(gtx.Constraints.Max.Y/2)-trackRowHeight)).Add(gtx.Ops)