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,