add progress bar

example/main.lua

@@ -69,6 +69,8 @@ local mainForm = { title = "Test window", id = 'mainWindow', type = 'panel',
                 { value = 2, text = 'Thing Two' },
                 { value = 3, text = 'Thing Three' },
             } },
+            { type = 'panel', text = 'A progress bar', align = 'bottom', height = 24, padding = 4 },
+            { type = 'progress', height = 32, margin = 4, id = 'progressBar', },
         },
     },
     { type = 'sash', height = 4, },
@@ -91,9 +93,9 @@ layout.leftSideBox:addChild {
     align = 'middle right'
 }
 
-layout.slidey:onMotion(function (event)
+layout.slidey:onPressDrag(function (event)
-    layout.statusbar.text = event.x
+    layout.progressBar.value = layout.slidey.value
-    return false
+    layout.progressBar:reflow()
 end)
 
 --[[

luigi/theme/light.lua

@@ -42,10 +42,18 @@ return function (config)
             slices = RESOURCE .. 'button_pressed.png',
             padding = 0,
         },
+        progress = {
+            slices = RESOURCE .. 'button_pressed.png',
+            padding = 0,
+        },
+        progressInner = {
+            slices = RESOURCE .. 'progress.png',
+            padding = 0,
+            minimumWidth = 12,
+        },
         slider_hovered = {
         },
         stepper = {
-            type = 'panel',
         },
     }
 

luigi/widget.lua

@@ -8,6 +8,7 @@ local Widget = Base:extend()
 Widget.isWidget = true
 
 Widget.typeDecorators = {
+    progress = require(ROOT .. 'widget.progress'),
     sash = require(ROOT .. 'widget.sash'),
     slider = require(ROOT .. 'widget.slider'),
     stepper = require(ROOT .. 'widget.stepper'),

luigi/widget/progress.lua

@@ -0,0 +1,15 @@
+return function (self)
+
+    self.value = 0.5
+    self.flow = 'x' -- TODO: support vertical slider
+
+    local bar = self:addChild {
+        type = 'progressInner',
+        width = 0,
+    }
+
+    self:onReshape(function (event)
+        local x1, y1, x2, y2 = self:getRectangle(true, true)
+        bar.width = self.value * (x2 - x1)
+    end)
+end

luigi/widget/slider.lua

@@ -19,12 +19,24 @@ return function (self)
     thumb:onPressStart(unpress)
     thumb:onPressEnter(unpress)
 
-    self:onPressDrag(function (event)
+    local function press (event)
         local x1, y1, x2, y2 = self:getRectangle(true, true)
         self.value = (event.x - x1) / (x2 - x1)
         if self.value < 0 then self.value = 0 end
         if self.value > 1 then self.value = 1 end
         self:reflow()
+    end
+
+    self:onPressStart(press)
+
+    self:onPressDrag(press)
+
+    self:onEnter(function (event)
+        thumb.hovered = true
+    end)
+
+    self:onLeave(function (event)
+        thumb.hovered = false
     end)
 
     self:onReshape(function (event)

luigi/widget/stepper.lua

@@ -11,6 +11,7 @@ return function (self)
     }
 
     local view = self:addChild {
+        type = 'text',
         align = 'middle center',
         margin = 0,
     }