Horizontal Toolbars Option for Editor Mode

On small screen sizes like the Pinephone, the toolbars in the Level
Editor are best made horizontal across the top and bottom of the screen
leaving more room for the drawing.

Enable it with a boolProp for now, and then reopen the level editor:

    boolProp horizontalToolbars true

When launching `doodle -w mobile` it will automatically enable this
option.

cmd/doodle/main.go

@@ -193,6 +193,7 @@ func setResolution(value string) error {
 	case "mobile":
 		balance.Width = 375
 		balance.Height = 812
+		balance.HorizontalToolbars = true
 	case "landscape":
 		balance.Width = 812
 		balance.Height = 375

pkg/balance/boolprops.go

@@ -20,15 +20,19 @@ var (
 
 	// Temporary debug flag.
 	TempDebug bool
+
+	// Draw horizontal toolbars in Level Editor instead of vertical.
+	HorizontalToolbars bool
 )
 
 // Human friendly names for the boolProps. Not necessarily the long descriptive
 // variable names above.
 var props = map[string]*bool{
-	"showAllDoodads":    &ShowHiddenDoodads,
+	"showAllDoodads":     &ShowHiddenDoodads,
-	"writeLockOverride": &WriteLockOverride,
+	"writeLockOverride":  &WriteLockOverride,
-	"prettyJSON":        &JSONIndent,
+	"prettyJSON":         &JSONIndent,
-	"tempDebug":         &TempDebug,
+	"tempDebug":          &TempDebug,
+	"horizontalToolbars": &HorizontalToolbars,
 
 	// WARNING: SLOW!
 	"disableChunkTextureCache": &DisableChunkTextureCache,

pkg/balance/theme.go

@@ -107,8 +107,11 @@ var (
 	DoodadDropperRows      = 3
 
 	// Button styles, customized in init().
-	ButtonPrimary = style.DefaultButton
+	ButtonPrimary  = style.DefaultButton
-	ButtonDanger  = style.DefaultButton
+	ButtonDanger   = style.DefaultButton
+	ButtonBabyBlue = style.DefaultButton
+	ButtonPink     = style.DefaultButton
+	ButtonLightRed = style.DefaultButton
 )
 
 func init() {
@@ -122,4 +125,13 @@ func init() {
 	ButtonDanger.Foreground = render.RGBA(255, 255, 254, 255)
 	ButtonDanger.HoverBackground = render.RGBA(255, 30, 30, 255)
 	ButtonDanger.HoverForeground = ButtonPrimary.Foreground
+
+	ButtonBabyBlue.Background = render.RGBA(0, 153, 255, 255)
+	ButtonBabyBlue.HoverBackground = render.RGBA(0, 220, 255, 255)
+
+	ButtonPink.Background = render.RGBA(255, 153, 255, 255)
+	ButtonPink.HoverBackground = render.RGBA(255, 220, 255, 255)
+
+	ButtonLightRed.Background = render.RGBA(255, 90, 90, 255)
+	ButtonLightRed.HoverBackground = render.RGBA(255, 128, 128, 255)
 }

pkg/editor_ui.go

@@ -159,25 +159,44 @@ func (u *EditorUI) Resized(d *Doodle) {
 
 	// Palette panel.
 	{
-		u.Palette.Configure(ui.Config{
+		if balance.HorizontalToolbars {
-			Width:  paletteWidth,
+			u.Palette.Configure(ui.Config{
-			Height: u.d.height - u.StatusBar.Size().H,
+				Width:  u.d.width,
-		})
+				Height: paletteWidth,
-		u.Palette.MoveTo(render.NewPoint(
+			})
-			u.d.width-u.Palette.BoxSize().W,
+			u.Palette.MoveTo(render.NewPoint(
-			menuHeight,
+				0,
-		))
+				u.d.height-u.Palette.BoxSize().H-u.StatusBar.Size().H,
+			))
+		} else {
+			u.Palette.Configure(ui.Config{
+				Width:  paletteWidth,
+				Height: u.d.height - u.StatusBar.Size().H,
+			})
+			u.Palette.MoveTo(render.NewPoint(
+				u.d.width-u.Palette.BoxSize().W,
+				menuHeight,
+			))
+		}
 		u.Palette.Compute(d.Engine)
 	}
 
-	var innerHeight = u.d.height - menuHeight - u.StatusBar.Size().H
+	var (
+		innerHeight = u.d.height - menuHeight - u.StatusBar.Size().H
+		innerWidth  = u.d.width
+	)
 
 	// Tool Bar.
 	{
-		u.ToolBar.Configure(ui.Config{
+		tbSize := ui.Config{
 			Width:  toolbarWidth,
 			Height: innerHeight,
-		})
+		}
+		if balance.HorizontalToolbars {
+			tbSize.Width = innerWidth
+			tbSize.Height = toolbarWidth
+		}
+		u.ToolBar.Configure(tbSize)
 		u.ToolBar.MoveTo(render.NewPoint(
 			0,
 			menuHeight,
@@ -189,14 +208,25 @@ func (u *EditorUI) Resized(d *Doodle) {
 	{
 
 		frame := u.Workspace
-		frame.MoveTo(render.NewPoint(
+		if balance.HorizontalToolbars {
-			u.ToolBar.Size().W,
+			frame.MoveTo(render.NewPoint(
-			menuHeight,
+				0,
-		))
+				menuHeight+u.ToolBar.Size().H,
-		frame.Resize(render.NewRect(
+			))
-			d.width-u.Palette.Size().W-u.ToolBar.Size().W,
+			frame.Resize(render.NewRect(
-			d.height-menuHeight-u.StatusBar.Size().H,
+				d.width,
-		))
+				d.height-menuHeight-u.StatusBar.Size().H-u.ToolBar.Size().H-u.Palette.Size().H,
+			))
+		} else {
+			frame.MoveTo(render.NewPoint(
+				u.ToolBar.Size().W,
+				menuHeight,
+			))
+			frame.Resize(render.NewRect(
+				d.width-u.Palette.Size().W-u.ToolBar.Size().W,
+				d.height-menuHeight-u.StatusBar.Size().H,
+			))
+		}
 		frame.Compute(d.Engine)
 
 		u.ExpandCanvas(d.Engine)

pkg/editor_ui_palette.go

@@ -38,6 +38,27 @@ func (u *EditorUI) setupPaletteFrame(window *ui.Window) *ui.Frame {
 	frame := ui.NewFrame("Palette Tab")
 	frame.SetBackground(balance.WindowBackground)
 
+	var (
+		packAlign  = ui.N
+		packConfig = ui.Pack{
+			Side: packAlign,
+			Fill: true,
+			PadY: 4,
+		}
+		tooltipEdge = ui.Left
+		buttonSize  = 32
+	)
+	if balance.HorizontalToolbars {
+		packAlign = ui.W
+		packConfig = ui.Pack{
+			Side: packAlign,
+			Fill: true,
+			PadX: 2,
+		}
+		tooltipEdge = ui.Top
+		buttonSize = 24
+	}
+
 	// Handler function for the radio buttons being clicked.
 	onClick := func(ed ui.EventData) error {
 		name := u.selectedSwatch
@@ -51,8 +72,6 @@ func (u *EditorUI) setupPaletteFrame(window *ui.Window) *ui.Frame {
 		return nil
 	}
 
-	var buttonSize = 32
-
 	// Draw the radio buttons for the palette.
 	if u.Canvas != nil && u.Canvas.Palette != nil {
 		for _, swatch := range u.Canvas.Palette.Swatches {
@@ -70,16 +89,12 @@ func (u *EditorUI) setupPaletteFrame(window *ui.Window) *ui.Frame {
 			// Add a tooltip showing the swatch attributes.
 			ui.NewTooltip(btn, ui.Tooltip{
 				Text: fmt.Sprintf("Name: %s\nAttributes: %s", swatch.Name, swatch.Attributes()),
-				Edge: ui.Left,
+				Edge: tooltipEdge,
 			})
 
 			btn.Compute(u.d.Engine)
 
-			frame.Pack(btn, ui.Pack{
+			frame.Pack(btn, packConfig)
-				Side: ui.N,
-				Fill: true,
-				PadY: 4,
-			})
 		}
 	}
 
@@ -95,11 +110,7 @@ func (u *EditorUI) setupPaletteFrame(window *ui.Window) *ui.Frame {
 	u.Supervisor.Add(btn)
 
 	btn.Compute(u.d.Engine)
-	frame.Pack(btn, ui.Pack{
+	frame.Pack(btn, packConfig)
-		Side: ui.N,
-		Fill: true,
-		PadY: 4,
-	})
 
 	return frame
 }

pkg/editor_ui_toolbar.go

@@ -7,6 +7,7 @@ import (
 	"git.kirsle.net/apps/doodle/pkg/sprites"
 	"git.kirsle.net/go/render"
 	"git.kirsle.net/go/ui"
+	"git.kirsle.net/go/ui/style"
 )
 
 // Width of the toolbar frame.
@@ -15,8 +16,29 @@ var toolbarSpriteSize = 32 // 32x32 sprites.
 
 // SetupToolbar configures the UI for the Tools panel.
 func (u *EditorUI) SetupToolbar(d *Doodle) *ui.Frame {
+	// Horizontal toolbar instead of vertical?
+	var (
+		isHoz       = balance.HorizontalToolbars
+		packAlign   = ui.N
+		frameSize   = render.NewRect(toolbarWidth, 100)
+		tooltipEdge = ui.Right
+		btnPack     = ui.Pack{
+			Side: packAlign,
+			PadY: 2,
+		}
+	)
+	if isHoz {
+		packAlign = ui.W
+		frameSize = render.NewRect(100, toolbarWidth)
+		tooltipEdge = ui.Bottom
+		btnPack = ui.Pack{
+			Side: packAlign,
+			PadX: 2,
+		}
+	}
+
 	frame := ui.NewFrame("Tool Bar")
-	frame.Resize(render.NewRect(toolbarWidth, 100))
+	frame.Resize(frameSize)
 	frame.Configure(ui.Config{
 		BorderSize:  2,
 		BorderStyle: ui.BorderRaised,
@@ -25,7 +47,7 @@ func (u *EditorUI) SetupToolbar(d *Doodle) *ui.Frame {
 
 	btnFrame := ui.NewFrame("Tool Buttons")
 	frame.Pack(btnFrame, ui.Pack{
-		Side: ui.N,
+		Side: packAlign,
 	})
 
 	// Buttons.
@@ -33,6 +55,7 @@ func (u *EditorUI) SetupToolbar(d *Doodle) *ui.Frame {
 		Value   string
 		Icon    string
 		Tooltip string
+		Style   *style.Button
 		Click   func()
 
 		// Optional fields.
@@ -83,6 +106,7 @@ func (u *EditorUI) SetupToolbar(d *Doodle) *ui.Frame {
 			Icon:     "assets/sprites/actor-tool.png",
 			Tooltip:  "Doodad Tool\nDrag-and-drop objects into your map",
 			NoDoodad: true,
+			Style:    &balance.ButtonBabyBlue,
 			Click: func() {
 				u.Canvas.Tool = drawtool.ActorTool
 				u.doodadWindow.Show()
@@ -94,10 +118,10 @@ func (u *EditorUI) SetupToolbar(d *Doodle) *ui.Frame {
 			Value:    drawtool.LinkTool.String(),
 			Icon:     "assets/sprites/link-tool.png",
 			Tooltip:  "Link Tool\nConnect doodads to each other",
+			Style:    &balance.ButtonPink,
 			NoDoodad: true,
 			Click: func() {
 				u.Canvas.Tool = drawtool.LinkTool
-				u.doodadWindow.Show()
 				d.Flash("Link Tool selected. Click a doodad in your level to link it to another.")
 			},
 		},
@@ -106,6 +130,7 @@ func (u *EditorUI) SetupToolbar(d *Doodle) *ui.Frame {
 			Value:   drawtool.EraserTool.String(),
 			Icon:    "assets/sprites/eraser-tool.png",
 			Tooltip: "Eraser Tool",
+			Style:   &balance.ButtonLightRed,
 			Click: func() {
 				u.Canvas.Tool = drawtool.EraserTool
 
@@ -137,6 +162,9 @@ func (u *EditorUI) SetupToolbar(d *Doodle) *ui.Frame {
 			button.Value,
 			image,
 		)
+		if button.Style != nil {
+			btn.SetStyle(button.Style)
+		}
 
 		var btnSize = btn.BoxThickness(2) + toolbarSpriteSize
 		btn.Resize(render.NewRect(btnSize, btnSize))
@@ -149,13 +177,10 @@ func (u *EditorUI) SetupToolbar(d *Doodle) *ui.Frame {
 
 		ui.NewTooltip(btn, ui.Tooltip{
 			Text: button.Tooltip,
-			Edge: ui.Right,
+			Edge: tooltipEdge,
 		})
 
-		btnFrame.Pack(btn, ui.Pack{
+		btnFrame.Pack(btn, btnPack)
-			Side: ui.N,
-			PadY: 2,
-		})
 	}
 
 	// Doodad Editor: show the Layers button.
@@ -170,55 +195,61 @@ func (u *EditorUI) SetupToolbar(d *Doodle) *ui.Frame {
 		})
 		u.Supervisor.Add(btn)
 		btnFrame.Pack(btn, ui.Pack{
-			Side: ui.N,
+			Side: packAlign,
 			PadY: 2,
 		})
 	}
 
 	// Spacer frame.
 	frame.Pack(ui.NewFrame("spacer"), ui.Pack{
-		Side: ui.N,
+		Side: packAlign,
 		PadY: 8,
 	})
 
+	//////////////
 	// "Brush Size" label
+	bsFrame := ui.NewFrame("Brush Size Frame")
+	frame.Pack(bsFrame, ui.Pack{
+		Side: packAlign,
+	})
+
 	bsLabel := ui.NewLabel(ui.Label{
 		Text: "Size:",
-		Font: balance.LabelFont,
+		Font: balance.SmallFont,
 	})
-	frame.Pack(bsLabel, ui.Pack{
+	bsFrame.Pack(bsLabel, ui.Pack{
 		Side: ui.N,
 	})
 
 	ui.NewTooltip(bsLabel, ui.Tooltip{
 		Text: "Set the line thickness for drawing",
-		Edge: ui.Right,
+		Edge: tooltipEdge,
 	})
 	u.Supervisor.Add(bsLabel)
 
+	sizeLabel := ui.NewLabel(ui.Label{
+		IntVariable: &u.Canvas.BrushSize,
+		Font:        balance.SmallFont,
+	})
+	sizeLabel.Configure(ui.Config{
+		BorderSize:  1,
+		BorderStyle: ui.BorderSunken,
+		Background:  render.Grey,
+	})
+	bsFrame.Pack(sizeLabel, ui.Pack{
+		Side: ui.N,
+		// FillX: true,
+		PadY: 0,
+	})
+
 	// Brush Size widget
 	{
 		sizeFrame := ui.NewFrame("Brush Size Frame")
 		frame.Pack(sizeFrame, ui.Pack{
-			Side: ui.N,
+			Side: packAlign,
 			PadY: 0,
 		})
 
-		sizeLabel := ui.NewLabel(ui.Label{
-			IntVariable: &u.Canvas.BrushSize,
-			Font:        balance.SmallMonoFont,
-		})
-		sizeLabel.Configure(ui.Config{
-			BorderSize:  1,
-			BorderStyle: ui.BorderSunken,
-			Background:  render.Grey,
-		})
-		sizeFrame.Pack(sizeLabel, ui.Pack{
-			Side:  ui.N,
-			FillX: true,
-			PadY:  2,
-		})
-
 		sizeBtnFrame := ui.NewFrame("Size Increment Button Frame")
 		sizeFrame.Pack(sizeBtnFrame, ui.Pack{
 			Side:  ui.N,