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.
This commit is contained in:
Noah 2021-06-13 21:23:26 -07:00
parent e6b71f5512
commit d6f86487f5
6 changed files with 156 additions and 67 deletions

View File

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

View File

@ -20,15 +20,19 @@ var (
// Temporary debug flag. // Temporary debug flag.
TempDebug bool TempDebug bool
// Draw horizontal toolbars in Level Editor instead of vertical.
HorizontalToolbars bool
) )
// Human friendly names for the boolProps. Not necessarily the long descriptive // Human friendly names for the boolProps. Not necessarily the long descriptive
// variable names above. // variable names above.
var props = map[string]*bool{ 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! // WARNING: SLOW!
"disableChunkTextureCache": &DisableChunkTextureCache, "disableChunkTextureCache": &DisableChunkTextureCache,

View File

@ -107,8 +107,11 @@ var (
DoodadDropperRows = 3 DoodadDropperRows = 3
// Button styles, customized in init(). // 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() { func init() {
@ -122,4 +125,13 @@ func init() {
ButtonDanger.Foreground = render.RGBA(255, 255, 254, 255) ButtonDanger.Foreground = render.RGBA(255, 255, 254, 255)
ButtonDanger.HoverBackground = render.RGBA(255, 30, 30, 255) ButtonDanger.HoverBackground = render.RGBA(255, 30, 30, 255)
ButtonDanger.HoverForeground = ButtonPrimary.Foreground 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)
} }

View File

@ -159,25 +159,44 @@ func (u *EditorUI) Resized(d *Doodle) {
// Palette panel. // 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) 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. // Tool Bar.
{ {
u.ToolBar.Configure(ui.Config{ tbSize := ui.Config{
Width: toolbarWidth, Width: toolbarWidth,
Height: innerHeight, Height: innerHeight,
}) }
if balance.HorizontalToolbars {
tbSize.Width = innerWidth
tbSize.Height = toolbarWidth
}
u.ToolBar.Configure(tbSize)
u.ToolBar.MoveTo(render.NewPoint( u.ToolBar.MoveTo(render.NewPoint(
0, 0,
menuHeight, menuHeight,
@ -189,14 +208,25 @@ func (u *EditorUI) Resized(d *Doodle) {
{ {
frame := u.Workspace 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) frame.Compute(d.Engine)
u.ExpandCanvas(d.Engine) u.ExpandCanvas(d.Engine)

View File

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

View File

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