add dark theme

example/layout/about.lua

@@ -0,0 +1,12 @@
+return { style = 'dialog',
+    { style = 'dialogHead', text = 'About LUIGI' },
+    { style = 'dialogBody', align = 'left middle', padding = 24, icon = 'logo.png', text = [[
+Lovely User Interfaces for Game Inventors
+
+Copyright (c) 2015 airstruck
+]]  },
+    { style = 'dialogFoot',
+        {}, -- spacer
+        { style = 'dialogButton', id = 'closeButton', text = 'Close' }
+    }
+}

example/layout/main.lua

@@ -34,7 +34,7 @@ return { id = 'mainWindow', type = 'panel',
             icon = 'icon/32px/Harddrive.png' },
     },
     { flow = 'x',
-        { id = 'leftSideBox', width = 200, minwidth = 64, scroll = true,
+        { id = 'leftSideBox', width = 200, minwidth = 64, scroll = true, type = 'panel',
             { text = 'Hi, I\'m centered middle. ', style = 'listThing',
                 align = 'middle center' },
             { text = 'Hi, I\'m right bottom.\nAlso two lines, woopdy woop.Hi, I\'m right bottom.\nAlso two lines, woopdy woop.Hi, I\'m right bottom.\nAlso two lines, woopdy woop.', style = 'listThing',
@@ -44,7 +44,7 @@ return { id = 'mainWindow', type = 'panel',
             { text = 'A man, a plan, a canal: Panama!', style = 'listThing' },
         },
         { type = 'sash', width = 4, },
-        { id = 'mainCanvas' },
+        { type = 'panel', id = 'mainCanvas' },
         { type = 'sash', width = 4, },
         { type = 'panel', id = 'rightSideBox', width = 200, minwidth = 64,
             { type = 'panel', text = 'A slider', align = 'bottom', height = 24, padding = 4 },
@@ -61,7 +61,7 @@ return { id = 'mainWindow', type = 'panel',
             { type = 'check', text = 'Check it out', height = 32, padding = 4, id = 'checkBox', },
             { type = 'panel', text = 'Some radio widgets', align = 'bottom', height = 24, padding = 4 },
             { type = 'radio', text = 'One fish', height = 32, padding = 4, },
-            { type = 'radio', text = 'Two fish', height = 32, padding = 4, },
+            { type = 'radio', text = 'Two fish', height = 32, padding = 4, wrap = true },
             { type = 'radio', text = 'Red fish', height = 32, padding = 4, },
             { type = 'radio', text = 'Blue fish', height = 32, padding = 4, },
         },

example/main.lua

@@ -19,7 +19,7 @@ end)
 
 layout:onMove(function (event)
     local w = event.target
-    layout.statusbar.text = (tostring(w.type)) ..
+    layout.statusbar.text = (tostring(w.type)) .. ' ' ..
         (w.id or '(unnamed)') .. ' ' ..
         w:getX() .. ', ' .. w:getY() .. ' | ' ..
         w:getWidth() .. 'x' .. w:getHeight()
@@ -30,28 +30,10 @@ layout.newButton:onMove(function (event)
     return false
 end)
 
-local foo = Layout { float = true, height = 100,
-    text = 'hello', align = 'center middle', background = {255,0,0}
-}
-
-foo:onReshape(function (event)
-    foo:hide()
-end)
-
 layout.newButton:onPress(function (event)
     print('creating a new thing!')
 end)
 
-layout.aButton:onPress(function (event)
-    layout.aButton.font = nil
-    layout.aButton.width = layout.aButton.width + 10
-    local w = layout.aButton:getWidth()
-    foo.root.width = w * 2
-    foo.root.left = layout.aButton:getX() - w
-    foo.root.top = layout.aButton:getY() - foo.root.height
-    foo:show()
-end)
-
 layout.mainCanvas.font = 'font/DejaVuSansMono.ttf'
 
 layout.mainCanvas.text = [[
@@ -78,12 +60,6 @@ layout.mainCanvas.align = 'top'
 
 layout.mainCanvas.wrap = true
 
-local Backend = require 'luigi.backend'
-
-layout.menuQuit:onPress(function (event) Backend.quit() end)
-
-layout.themeLight:onPress(function (event) Backend.quit() end)
-
 -- license dialog
 
 local licenseDialog = Layout(require 'layout.license')
@@ -98,9 +74,43 @@ layout.license:onPress(function()
     licenseDialog:show()
 end)
 
+-- about dialog
+
+local aboutDialog = Layout(require 'layout.about')
+
+aboutDialog:setStyle(style)
+
+aboutDialog.closeButton:onPress(function()
+    aboutDialog:hide()
+end)
+
+layout.about:onPress(function()
+    aboutDialog:show()
+end)
+
+-- menu/view/theme
+
+layout.themeLight:onPress(function (event)
+    local light = require 'luigi.theme.light'
+    layout:setTheme(light)
+    licenseDialog:setTheme(light)
+    aboutDialog:setTheme(light)
+end)
+
+layout.themeDark:onPress(function (event)
+    local dark = require 'luigi.theme.dark'
+    layout:setTheme(dark)
+    licenseDialog:setTheme(dark)
+    aboutDialog:setTheme(dark)
+end)
+
+-- menu/file/quit
+-- uses Backend for compat with love or ffisdl
+local Backend = require 'luigi.backend'
+layout.menuQuit:onPress(function (event) Backend.quit() end)
 
 -- show the main layout
-
 layout:show()
 
-Backend.run() -- only needed when using ffisdl backend
+-- only needed when using ffisdl backend
+Backend.run()

example/style.lua

@@ -3,7 +3,7 @@ return {
         height = 48,
     },
     toolbar = {
-        style = { 'short' },
+        style = 'short',
     },
     toolButton = {
         align = 'center middle',
@@ -16,19 +16,18 @@ return {
         slices = false,
     },
     statusbar = {
-        style = 'panel',
         align = 'left middle',
     },
     listThing = {
-        style = { 'short', 'panel' },
+        style = 'short',
         align = 'left middle',
         outline = { 200, 200, 200 },
         height = 120,
         padding = 8,
-        background = { 255, 255, 255 },
         icon = 'icon/32px/Box.png',
         wrap = true,
     },
+    -- dialog styles
     dialog = {
         type = 'submenu',
         width = 600,
@@ -43,7 +42,7 @@ return {
     },
     dialogBody = {
         wrap = true,
-        margin = 4,
+        padding = 4,
         font = 'font/DejaVuSansMono.ttf',
     },
     dialogFoot = {