From d6f86487f5bcd3d3459a7bbfbe76cfbb960528e9 Mon Sep 17 00:00:00 2001 From: Noah Petherbridge Date: Sun, 13 Jun 2021 21:23:26 -0700 Subject: [PATCH] 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 | 1 + pkg/balance/boolprops.go | 12 ++++-- pkg/balance/theme.go | 16 +++++++- pkg/editor_ui.go | 68 +++++++++++++++++++++--------- pkg/editor_ui_palette.go | 37 +++++++++++------ pkg/editor_ui_toolbar.go | 89 +++++++++++++++++++++++++++------------- 6 files changed, 156 insertions(+), 67 deletions(-) diff --git a/cmd/doodle/main.go b/cmd/doodle/main.go index 63b0acd..4320340 100644 --- a/cmd/doodle/main.go +++ b/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 diff --git a/pkg/balance/boolprops.go b/pkg/balance/boolprops.go index a67f492..44749f1 100644 --- a/pkg/balance/boolprops.go +++ b/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, - "writeLockOverride": &WriteLockOverride, - "prettyJSON": &JSONIndent, - "tempDebug": &TempDebug, + "showAllDoodads": &ShowHiddenDoodads, + "writeLockOverride": &WriteLockOverride, + "prettyJSON": &JSONIndent, + "tempDebug": &TempDebug, + "horizontalToolbars": &HorizontalToolbars, // WARNING: SLOW! "disableChunkTextureCache": &DisableChunkTextureCache, diff --git a/pkg/balance/theme.go b/pkg/balance/theme.go index f061b5f..e77c912 100644 --- a/pkg/balance/theme.go +++ b/pkg/balance/theme.go @@ -107,8 +107,11 @@ var ( DoodadDropperRows = 3 // Button styles, customized in init(). - ButtonPrimary = style.DefaultButton - ButtonDanger = style.DefaultButton + ButtonPrimary = 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) } diff --git a/pkg/editor_ui.go b/pkg/editor_ui.go index 68ccf5d..ccd2bb4 100644 --- a/pkg/editor_ui.go +++ b/pkg/editor_ui.go @@ -159,25 +159,44 @@ func (u *EditorUI) Resized(d *Doodle) { // Palette panel. { - 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, - )) + if balance.HorizontalToolbars { + u.Palette.Configure(ui.Config{ + Width: u.d.width, + Height: paletteWidth, + }) + u.Palette.MoveTo(render.NewPoint( + 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( - 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, - )) + if balance.HorizontalToolbars { + frame.MoveTo(render.NewPoint( + 0, + menuHeight+u.ToolBar.Size().H, + )) + frame.Resize(render.NewRect( + 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) diff --git a/pkg/editor_ui_palette.go b/pkg/editor_ui_palette.go index 37d7e6e..9913b72 100644 --- a/pkg/editor_ui_palette.go +++ b/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{ - Side: ui.N, - Fill: true, - PadY: 4, - }) + frame.Pack(btn, packConfig) } } @@ -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{ - Side: ui.N, - Fill: true, - PadY: 4, - }) + frame.Pack(btn, packConfig) return frame } diff --git a/pkg/editor_ui_toolbar.go b/pkg/editor_ui_toolbar.go index 55ee7da..e22e9a4 100644 --- a/pkg/editor_ui_toolbar.go +++ b/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{ - Side: ui.N, - PadY: 2, - }) + btnFrame.Pack(btn, btnPack) } // 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,