Change vertical tab design for setting dialog

.gitignore

@@ -49,3 +49,6 @@ cacerts
 
 # Ocelot configuration file
 /ocelot.conf
+
+# Design sketches
+/refs/

src/main/resources/ocelot/desktop/colorscheme.txt

@@ -71,9 +71,11 @@ HistogramGrid     = #336633
 HistogramFill     = #73ff7360
 HistogramEdge     = #ccfdcc
 
-VerticalMenuBackground      = #222222cc
+VerticalMenuBackground      = #c6c6c6
-VerticalMenuEntryActive     = #333333
+VerticalMenuEntryIcon       = #888888
-VerticalMenuEntryForeground = #bbbbbb
+VerticalMenuEntryActive     = #dfdfdf
+VerticalMenuEntryForeground = #333333
+VerticalMenuBorder          = #dfdfdf
 
 SliderBackground = #aaaaaa
 SliderBorder     = #888888

src/main/resources/ocelot/desktop/spritesheet.txt

@@ -1,5 +1,5 @@
 BackgroundPattern 0 0 304 304
-BarSegment 415 105 16 4
+BarSegment 424 105 16 4
 ComputerMotherboard 305 0 79 70
 Empty 497 21 1 1
 EmptySlot 441 147 18 18
@@ -8,6 +8,7 @@ KnobCenter 436 0 50 50
 KnobLimits 305 71 50 50
 ShadowBorder 487 0 1 24
 ShadowCorner 424 122 24 24
+TabArrow 397 105 8 14
 buttons/BottomDrawerClose 460 147 18 18
 buttons/BottomDrawerOpen 479 147 18 18
 buttons/PowerOff 424 180 18 18
@@ -25,6 +26,7 @@ icons/Memory 466 122 16 16
 icons/NA 483 122 16 16
 icons/RMB 385 105 11 14
 icons/RackMountable 356 219 16 16
+icons/SettingsSound 498 147 12 17
 icons/Tier0 373 219 16 16
 icons/Tier1 390 219 16 16
 icons/Tier2 407 219 16 16
@@ -110,8 +112,8 @@ screen/BorderB 492 0 2 8
 screen/BorderT 489 0 2 10
 screen/CornerBL 365 236 8 8
 screen/CornerBR 374 236 8 8
-screen/CornerTL 397 105 8 10
+screen/CornerTL 406 105 8 10
-screen/CornerTR 406 105 8 10
+screen/CornerTR 415 105 8 10
 window/BorderDark 509 16 1 4
 window/BorderLight 509 11 1 4
 window/CloseButton 383 236 7 6

src/main/scala/ocelot/desktop/ui/widget/SettingsDialog.scala

@@ -5,7 +5,7 @@ import ocelot.desktop.audio.SoundSource
 import ocelot.desktop.geometry.{Padding2D, Size2D}
 import ocelot.desktop.ui.layout.LinearLayout
 import ocelot.desktop.ui.widget.modal.ModalDialog
-import ocelot.desktop.ui.widget.verticalmenu.{VerticalMenu, VerticalMenuButton}
+import ocelot.desktop.ui.widget.verticalmenu.{VerticalMenu, VerticalMenuButton, VerticalMenuFiller}
 import ocelot.desktop.util.{Orientation, ResourceManager, SettingsData}
 
 class SettingsDialog extends ModalDialog {
@@ -32,6 +32,7 @@ class SettingsDialog extends ModalDialog {
     children :+= new Widget {
       override val layout = new LinearLayout(this, orientation = Orientation.Vertical)
       children :+= menu
+      children :+= new VerticalMenuFiller()
     }
 
     children :+= new PaddingBox(new Widget {

src/main/scala/ocelot/desktop/ui/widget/verticalmenu/VerticalMenu.scala

@@ -14,7 +14,7 @@ class VerticalMenu extends Widget {
     override val layout = new LinearLayout(this, orientation = Orientation.Vertical)
   }
 
-  children :+= new PaddingBox(entries, Padding2D.equal(1f))
+  children :+= entries
 
   def addEntry(w: Widget): Unit = entries.children :+= w
 

src/main/scala/ocelot/desktop/ui/widget/verticalmenu/VerticalMenuButton.scala

@@ -3,21 +3,32 @@ package ocelot.desktop.ui.widget.verticalmenu
 import ocelot.desktop.ColorScheme
 import ocelot.desktop.color.Color
 import ocelot.desktop.geometry.{Padding2D, Size2D}
-import ocelot.desktop.graphics.Graphics
+import ocelot.desktop.graphics.{Graphics, IconDef}
 import ocelot.desktop.ui.event.handlers.{ClickHandler, HoverHandler}
 import ocelot.desktop.ui.event.{ClickEvent, HoverEvent, MouseEvent}
-import ocelot.desktop.ui.widget.{Label, PaddingBox, Widget}
+import ocelot.desktop.ui.layout.LinearLayout
+import ocelot.desktop.ui.widget.{Icon, Label, PaddingBox, Widget}
+import ocelot.desktop.util.Orientation
 import ocelot.desktop.util.animation.ColorAnimation
 
 class VerticalMenuButton(label: String, handler: () => Unit = () => {})
     extends Widget with ClickHandler with HoverHandler {
   val colorAnimation: ColorAnimation = new ColorAnimation(ColorScheme("VerticalMenuBackground"), 0.6f)
 
-  children :+= new PaddingBox(new Label {
+  children :+= new PaddingBox(new Widget {
-    override def text: String = label
+    override val layout = new LinearLayout(this, orientation = Orientation.Horizontal)
-    override def color: Color = ColorScheme("VerticalMenuEntryForeground")
+
-    override def maximumSize: Size2D = Size2D(Float.PositiveInfinity, 16)
+    children :+= new PaddingBox(
-  }, Padding2D(left = 8, right = 8, top = 1, bottom = 1))
+      new Icon(IconDef("icons/SettingsSound", 1f, color = ColorScheme("VerticalMenuEntryIcon"))),
+      Padding2D(right = 8)
+    )
+
+    children :+= new Label {
+      override def text: String = label
+      override def color: Color = ColorScheme("VerticalMenuEntryForeground")
+      override def maximumSize: Size2D = Size2D(Float.PositiveInfinity, 16)
+    }
+  }, Padding2D(left = 8, right = 24, top = 8, bottom = 8))
 
   override def receiveMouseEvents: Boolean = true
 
@@ -39,6 +50,8 @@ class VerticalMenuButton(label: String, handler: () => Unit = () => {})
   override def draw(g: Graphics): Unit = {
     colorAnimation.update()
     g.rect(bounds, colorAnimation.color)
+    g.rect(bounds.x + bounds.w - 2f, bounds.y, 2f, bounds.h, ColorScheme("VerticalMenuBorder"))
+    g.sprite("TabArrow", bounds.x + bounds.w - 8f, bounds.y + bounds.h / 2f - 7f, 8, 14)
     drawChildren(g)
   }
 }

src/main/scala/ocelot/desktop/ui/widget/verticalmenu/VerticalMenuFiller.scala

@@ -0,0 +1,14 @@
+package ocelot.desktop.ui.widget.verticalmenu
+
+import ocelot.desktop.ColorScheme
+import ocelot.desktop.geometry.Size2D
+import ocelot.desktop.graphics.Graphics
+import ocelot.desktop.ui.widget.Widget
+
+class VerticalMenuFiller extends Widget {
+  override def maximumSize: Size2D = Size2D.Inf
+
+  override def draw(g: Graphics): Unit = {
+    g.rect(bounds.x + bounds.w - 2f, bounds.y, 2f, bounds.h, ColorScheme("VerticalMenuBorder"))
+  }
+}