minor improvements

example/layout/license.lua

@@ -1,7 +1,6 @@
 return { style = 'dialog',
     { style = 'dialogHead', text = 'License' },
-    { style = 'dialogBody', text = [[
-The MIT License (MIT)
+    { style = 'dialogBody', text = [[The MIT License (MIT)
 
 Copyright (c) 2015 airstruck
 
@@ -21,8 +20,8 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-]]  },
+SOFTWARE.]]
+    },
     { style = 'dialogFoot',
         {}, -- spacer
         { style = 'dialogButton', id = 'closeButton', text = 'Close' }

example/layout/main.lua

@@ -1,5 +1,5 @@
-return { id = 'mainWindow', type = 'panel',
-    { type = 'menu', id = 'menubar', flow = 'x',
+return { id = 'mainWindow',
+    { type = 'menu',
         { text = 'File',
             { text = 'Save', id = 'menuSave', key = 'ctrl-s',
                 status = 'Save to disk' },
@@ -27,7 +27,7 @@ return { id = 'mainWindow', type = 'panel',
             { id = 'license', text = 'License', key = 'f3'  },
         },
     },
-    { type = 'panel', id = 'toolbar', style = 'toolbar', flow = 'x',
+    { style = 'toolbar',
         { id = 'newButton', style = 'toolButton', key = 'z',
             icon = 'icon/32px/Blueprint.png',
             status = 'Create a new thing' },
@@ -39,30 +39,36 @@ return { id = 'mainWindow', type = 'panel',
             status = 'Save a thing' },
     },
     { flow = 'x',
-        { 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',
-                align = 'bottom right' },
-            { text = 'Hi, I\'m centered top. ', style = 'listThing',
-                align = 'top center' },
-            { text = 'A man, a plan, a canal: Panama!', style = 'listThing' },
+        { id = 'leftSideBox', minwidth = 200, width = 200, scroll = true, type = 'panel',
+            { style = 'listThing', align = 'middle center',
+                text = 'Try the scroll wheel on this area.' },
+            { style = 'listThing', align = 'middle center',
+                text = 'This text is centered, and in the middle vertically.' },
+            { style = 'listThing', align = 'middle left',
+                text = 'This text is aligned left, and in the middle vertically.' },
+            { style = 'listThing', align = 'middle right',
+                text = 'This text is aligned right, and in the middle vertically.' },
+            { style = 'listThing', align = 'top center',
+                text = 'This text is centered, and at the top vertically.' },
+            { style = 'listThing', align = 'bottom center',
+                text = 'This text is centered, and at the bottom vertically.' },
         },
         { type = 'sash' },
         { type = 'panel', id = 'mainCanvas' },
         { type = 'sash' },
-        { type = 'panel', id = 'rightSideBox', width = 200, minwidth = 64, scroll = true,
-            { id = 'flowTest', height = 'auto', minheight = 128,
+        { type = 'panel', id = 'rightSideBox', minwidth = 200, width = 200, scroll = true,
+            { id = 'flowTest', height = 'auto',  minheight = 128,
                 {
                     { type = 'label', text = 'Slider' },
                     { type = 'slider', id = 'slidey', width = false },
                 },
                 {
                     { type = 'label', text = 'Stepper' },
-                    { type = 'stepper', id = 'stepper', width = false,
+                    { type = 'stepper', id = 'stepper', width = false, wrap = true,
                         { value = 1, text = 'Thing One' },
                         { value = 2, text = 'Thing Two' },
                         { value = 3, text = 'Thing Three' },
+                        { value = 4, text = 'Thing Four' },
                     },
                 },
                 {
@@ -70,7 +76,7 @@ return { id = 'mainWindow', type = 'panel',
                     { type = 'progress', id = 'progressBar', width = false },
                 },
             },
-            { height = 'auto', 
+            { height = 'auto',
                 { type = 'label', text = 'Flow test' },
                 { type = 'check', text = 'Vertical controls', id = 'flowToggle', },
                 { type = 'label', text = 'Some radio widgets' },
@@ -82,9 +88,12 @@ return { id = 'mainWindow', type = 'panel',
         },
     },
     { type = 'sash' },
-    { type = 'panel', flow = 'x', height = 64,
-        { type = 'text', id = 'aTextField', text = 'Testing «ταБЬℓσ»: 1<2 & 4+1>3, now 20% off!' },
-        { type = 'button', width = 90, id = 'aButton', text = 'Press me!' },
+    { type = 'panel', height = 'auto',
+        { flow = 'x',
+            { type = 'text', id = 'aTextField', text = 'Testing «ταБЬℓσ»: 1<2 & 4+1>3, now 20% off!' },
+            { type = 'button', width = 90, id = 'aButton', text = 'Press me!' }
+        },
+        { type = 'status', id = 'statusbar' },
     },
-    { type = 'status', id = 'statusbar' },
+
 }

example/main.lua

@@ -1,10 +1,12 @@
 local Layout = require 'luigi.layout'
 
-local style = require 'style'
-
 local layout = Layout(require 'layout.main')
+local aboutDialog = Layout(require 'layout.about')
+local licenseDialog = Layout(require 'layout.license')
 
-layout:setStyle(style)
+layout:setStyle(require 'style')
+aboutDialog:setStyle(require 'style')
+licenseDialog:setStyle(require 'style')
 
 layout.slidey:onChange(function (event)
     layout.progressBar.value = event.value
@@ -14,33 +16,19 @@ layout.flowToggle:onChange(function (event)
     layout.slidey.flow = event.value and 'y' or 'x'
     layout.progressBar.flow = event.value and 'y' or 'x'
     layout.stepper.flow = event.value and 'y' or 'x'
+    local height = layout.flowTest:getHeight()
     layout.flowTest.flow = event.value and 'x' or 'y'
+    layout.flowTest.height = height
 end)
 
 layout.newButton:onPress(function (event)
     print('creating a new thing!')
 end)
 
-layout.mainCanvas.font = 'font/DejaVuSansMono.ttf'
-
 layout.mainCanvas.text = [[
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+This program demonstrates some features of the Luigi UI library.
 
-Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
-Excepteur sint         occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-One
-two
-Three
-four
-
-five
-six
-seven
-eight
+Luigi is a widget toolkit that runs under Love or LuaJIT.
 ]]
 
 layout.mainCanvas.align = 'top'
@@ -49,18 +37,9 @@ layout.mainCanvas.wrap = true
 
 -- help dialogs
 
-local aboutDialog = Layout(require 'layout.about')
-local licenseDialog = Layout(require 'layout.license')
-
-aboutDialog:setStyle(style)
-licenseDialog:setStyle(style)
-
-aboutDialog.closeButton:onPress(function()
-    aboutDialog:hide()
-end)
-
-licenseDialog.closeButton:onPress(function()
+layout.about:onPress(function()
     licenseDialog:hide()
+    aboutDialog:show()
 end)
 
 layout.license:onPress(function()
@@ -68,9 +47,12 @@ layout.license:onPress(function()
     licenseDialog:show()
 end)
 
-layout.about:onPress(function()
+aboutDialog.closeButton:onPress(function()
+    aboutDialog:hide()
+end)
+
+licenseDialog.closeButton:onPress(function()
     licenseDialog:hide()
-    aboutDialog:show()
 end)
 
 -- menu/view/theme
@@ -90,12 +72,12 @@ layout.themeDark:onPress(function (event)
 end)
 
 -- menu/file/quit
--- uses Backend for compat with love or ffisdl
+-- uses Backend for compat with Love or LuaJIT/SDL
 local Backend = require 'luigi.backend'
-layout.menuQuit:onPress(function (event) Backend.quit() end)
+layout.menuQuit:onPress(Backend.quit)
 
 -- show the main layout
 layout:show()
 
--- only needed when using ffisdl backend
+-- only needed when using LuaJIT/SDL
 Backend.run()

example/style.lua

@@ -1,9 +1,10 @@
 return {
-    short = {
-        height = 48,
-    },
     toolbar = {
-        style = 'short',
+        type = 'panel',
+        margin = 0,
+        padding = 0,
+        height = 'auto',
+        flow = 'x',
     },
     toolButton = {
         type = 'button',
@@ -21,11 +22,12 @@ return {
         align = 'left middle',
     },
     listThing = {
-        style = 'short',
         align = 'left middle',
-        outline = { 200, 200, 200 },
+        outline = { 128, 128, 128, 128 },
+        background = { 128, 128, 128, 64 },
         height = 120,
         padding = 8,
+        margin = 2,
         icon = 'icon/32px/Box.png',
         wrap = true,
     },
@@ -37,7 +39,7 @@ return {
     },
     dialogHead = {
         align = 'middle center',
-        height = 22,
+        height = 36,
         size = 16,
         type = 'panel',
     },
@@ -51,7 +53,6 @@ return {
         flow = 'x',
         height = 'auto',
         type = 'panel',
-        padding = 4,
     },
     dialogButton = {
         type = 'button',