support vertical slider

This commit is contained in:
airstruck
2015-12-07 21:56:56 -05:00
parent 66f652b295
commit c43d8bcf22
27 changed files with 251 additions and 184 deletions

View File

@@ -165,7 +165,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -402,7 +402,7 @@ found, and focuses that widget.
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -621,7 +621,7 @@ This table is identical to the constructed widget.
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -136,7 +136,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -741,7 +741,7 @@ child widgets appear.
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -68,22 +68,22 @@ but themes should give buttons an appropriate appearance.</p>
<h3>Usage:</h3>
<ul>
<pre class="example">
-- create a layout containing only a button
local layout = Layout {
type = &apos;button&apos;,
id = &apos;exampleButton&apos;,
text = &apos;Press me&apos;,
width = 100,
height = 32,
}
-- create a layout containing only a button
local layout = Layout {
type = &apos;button&apos;,
id = &apos;exampleButton&apos;,
text = &apos;Press me&apos;,
width = 100,
height = 32,
}
-- handle Press events
layout.exampleButton:onPress(function (event)
print &apos;You pressed the button.&apos;
end)
-- handle Press events
layout.exampleButton:onPress(function (event)
print &apos;You pressed the button.&apos;
end)
-- show the layout
layout:show()
-- show the layout
layout:show()
</pre>
</ul>
@@ -99,7 +99,7 @@ but themes should give buttons an appropriate appearance.</p>
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -83,7 +83,7 @@ standard themes, the widget's value should be indicated in some other way.</p>
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -79,7 +79,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -79,7 +79,7 @@ not be explicitly created.</p>
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -78,7 +78,7 @@ between 0 and 1 (inclusive) to change the width of the bar.</p>
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -86,7 +86,7 @@ standard themes, the widget's value should be indicated in some other way.</p>
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -73,16 +73,16 @@ should have a specified <a href="../modules/attribute.html#width">width</a> attr
<h3>Usage:</h3>
<ul>
<pre class="example">
-- create a layout containing two widgets separated by a sash
local layout = Layout {
type = &apos;panel&apos;, flow = &apos;x&apos;,
{ text = &apos;This is the left side&apos;, wrap = true, width = 100 },
{ type = &apos;sash&apos; },
{ text = &apos;This is the right side&apos;, wrap = true },
}
-- create a layout containing two widgets separated by a sash
local layout = Layout {
type = &apos;panel&apos;, flow = &apos;x&apos;,
{ text = &apos;This is the left side&apos;, wrap = true, width = 100 },
{ type = &apos;sash&apos; },
{ text = &apos;This is the right side&apos;, wrap = true },
}
-- show the layout
layout:show()
-- show the layout
layout:show()
</pre>
</ul>
@@ -98,7 +98,7 @@ should have a specified <a href="../modules/attribute.html#width">width</a> attr
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -78,7 +78,7 @@ number between 0 and 1, inclusive.</p>
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -70,17 +70,17 @@ display status messages.</p>
<h3>Usage:</h3>
<ul>
<pre class="example">
-- create a layout containing some buttons and a status bar
local layout = Layout {
{ type = &apos;panel&apos;, flow = &apos;x&apos;,
{ text = &apos;Do stuff&apos;, status = &apos;Press to do stuff&apos; },
{ text = &apos;Quit&apos;, status = &apos;Press to quit&apos; },
},
{ type = &apos;status&apos;, height = 24 },
}
-- create a layout containing some buttons and a status bar
local layout = Layout {
{ type = &apos;panel&apos;, flow = &apos;x&apos;,
{ text = &apos;Do stuff&apos;, status = &apos;Press to do stuff&apos; },
{ text = &apos;Quit&apos;, status = &apos;Press to quit&apos; },
},
{ type = &apos;status&apos;, height = 24 },
}
-- show the layout
layout:show()
-- show the layout
layout:show()
</pre>
</ul>
@@ -96,7 +96,7 @@ display status messages.</p>
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -81,7 +81,7 @@ item displayed in the content area.</p>
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -79,7 +79,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.3</a></i>
<i style="float:right;">Last updated 2015-12-07 03:00:19 </i>
<i style="float:right;">Last updated 2015-12-07 05:47:24 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -28,13 +28,13 @@ return { id = 'mainWindow', type = 'panel',
},
},
{ type = 'panel', id = 'toolbar', style = 'toolbar', flow = 'x',
{ type = 'button', id = 'newButton', style = 'toolButton', key = 'z',
{ id = 'newButton', style = 'toolButton', key = 'z',
icon = 'icon/32px/Blueprint.png',
status = 'Create a new thing' },
{ type = 'button', id = 'loadButton', style = 'toolButton',
{ id = 'loadButton', style = 'toolButton',
icon = 'icon/32px/Calendar.png',
status = 'Load a thing' },
{ type = 'button', id = 'saveButton', style = 'toolButton',
{ id = 'saveButton', style = 'toolButton',
icon = 'icon/32px/Harddrive.png',
status = 'Save a thing' },
},
@@ -48,34 +48,43 @@ return { id = 'mainWindow', type = 'panel',
align = 'top center' },
{ text = 'A man, a plan, a canal: Panama!', style = 'listThing' },
},
{ type = 'sash', width = 4, },
{ type = 'sash' },
{ 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 },
{ type = 'slider', height = 32, margin = 4, id = 'slidey', value = 0 },
{ type = 'panel', text = 'A stepper', align = 'bottom', height = 24, padding = 4 },
{ type = 'stepper', height = 32, margin = 4,
{ value = 1, text = 'Thing One' },
{ value = 2, text = 'Thing Two' },
{ value = 3, text = 'Thing Three' },
{ type = 'sash' },
{ type = 'panel', id = 'rightSideBox', width = 200, minwidth = 64, scroll = true,
{ id = 'flowTest',
{ minheight = 64,
{ type = 'label', text = 'Slider' },
{ type = 'slider', id = 'slidey', value = 0 },
},
{ minheight = 64,
{ type = 'label', text = 'Stepper' },
{ type = 'stepper',
{ value = 1, text = 'Thing One' },
{ value = 2, text = 'Thing Two' },
{ value = 3, text = 'Thing Three' },
},
},
{ minheight = 64,
{ type = 'label', text = 'Progress' },
{ type = 'progress', id = 'progressBar', },
},
},
{ type = 'panel', text = 'A progress bar', align = 'bottom', height = 24, padding = 4 },
{ type = 'progress', height = 32, margin = 4, id = 'progressBar', },
{ type = 'panel', text = 'A check box', align = 'bottom', height = 24, padding = 4 },
{ 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, wrap = true },
{ type = 'radio', text = 'Red fish', height = 32, padding = 4, },
{ type = 'radio', text = 'Blue fish', height = 32, padding = 4, },
{
{ type = 'label', text = 'Above layout' },
{ type = 'check', text = 'Flow horizontal', id = 'flowToggle', },
{ type = 'label', text = 'Some radio widgets' },
{ type = 'radio', text = 'One fish' },
{ type = 'radio', text = 'Two fish' },
{ type = 'radio', text = 'Red fish' },
{ type = 'radio', text = 'Blue fish' },
}
},
},
{ type = 'sash', height = 4, },
{ type = 'panel', flow = 'x', height = 48, padding = 2,
{ type = 'sash' },
{ type = 'panel', flow = 'x', height = 64,
{ type = 'text', id = 'aTextField', text = 'Testing «ταБЬℓσ»: 1<2 & 4+1>3, now 20% off!' },
{ type = 'button', key='return', width = 80, id = 'aButton', text = 'Styling!',
font = 'font/DejaVuSansMono.ttf' },
{ type = 'button', width = 90, id = 'aButton', text = 'Press me!' },
},
{ type = 'status', id = 'statusbar', height = 24, padding = 4, color = { 255, 0, 0 } },
{ type = 'status', id = 'statusbar' },
}

View File

@@ -10,6 +10,11 @@ layout.slidey:onChange(function (event)
layout.progressBar.value = event.value
end)
layout.flowToggle:onChange(function (event)
layout.flowTest.flow = event.value and 'x' or 'y'
layout.slidey.flow = event.value and 'y' or 'x'
end)
layout.newButton:onPress(function (event)
print('creating a new thing!')
end)

View File

@@ -6,6 +6,7 @@ return {
style = 'short',
},
toolButton = {
type = 'button',
align = 'center middle',
width = 48,
slices = function (self)

View File

@@ -27,6 +27,9 @@ function Style:getProperty (object, property, original)
local rule = rules[lookupValue]
if rule then
local value = self:getProperty(rule, property, original)
if type(value) == 'function' then
value = value(original)
end
if value ~= nil then return value end
end
end -- lookup values

View File

@@ -38,6 +38,14 @@ return function (config)
end
end
local function getControlHeight (self)
return self.flow == 'x' and 32
end
local function getControlWidth (self)
return self.flow ~= 'x' and 32
end
local function getMenuItemBackground (self)
return self.active and highlight
end
@@ -46,13 +54,30 @@ return function (config)
return self.hovered and highlight or lineColor
end
local function getSashHeight (self)
return self.parent.flow ~= 'x' and 4
end
local function getSashWidth (self)
return self.parent.flow == 'x' and 4
end
local function getTextSlices (self)
return self.focused and resources .. 'text_focused.png'
or resources .. 'text.png'
end
return {
control = {
flow = 'x',
height = getControlHeight,
width = getControlWidth,
color = textColor,
minheight = 28,
minwidth = 28,
},
button = {
type = 'control',
align = 'center middle',
padding = 6,
slices = getButtonSlices,
@@ -61,26 +86,83 @@ return function (config)
focusable = true,
color = textColor,
},
['stepper.left'] = {
type = 'button',
icon = resources .. 'triangle_left.png',
check = {
type = 'control',
focusable = true,
color = textColor,
icon = getCheckOrRadioIcon,
padding = 4,
},
['stepper.right'] = {
type = 'button',
icon = resources .. 'triangle_right.png',
label = {
type = 'control',
background = backColor,
padding = 4,
},
menu = {
height = 24,
},
['menu.expander'] = {
icon = resources .. 'triangle_right.png',
},
['menu.item'] = {
padding = 4,
align = 'left middle',
color = textColor,
background = getMenuItemBackground,
},
['menu.expander'] = {
panel = {
background = backColor,
color = textColor,
},
progress = {
type = 'control',
slices = resources .. 'button_pressed.png',
padding = 0,
},
['progress.bar'] = {
type = 'control',
slices = resources .. 'progress.png',
padding = 0,
minwidth = 12,
},
radio = {
type = 'control',
focusable = true,
color = textColor,
icon = getCheckOrRadioIcon,
padding = 4,
},
sash = {
background = getSashBackground,
height = getSashHeight,
width = getSashWidth,
},
slider = {
type = 'control',
slices = resources .. 'button_pressed.png',
padding = 0,
},
status = {
type = 'panel',
align = 'left middle',
padding = 4,
height = 22,
},
stepper = {
type = 'control',
slices = resources .. 'button_pressed.png',
},
['stepper.item'] = {
type = 'control',
align = 'center middle',
color = textColor,
},
['stepper.left'] = {
type = 'button',
icon = resources .. 'triangle_left.png',
},
['stepper.right'] = {
type = 'button',
icon = resources .. 'triangle_right.png',
},
submenu = {
@@ -89,60 +171,14 @@ return function (config)
slices = resources .. 'submenu.png',
color = textColor,
},
sash = {
background = getSashBackground
},
slider = {
slices = resources .. 'button_pressed.png',
padding = 0,
minwidth = 24,
minheight = 24
},
panel = {
background = backColor,
color = textColor,
},
progress = {
slices = resources .. 'button_pressed.png',
padding = 0,
minwidth = 24,
minheight = 24
},
['progress.bar'] = {
slices = resources .. 'progress.png',
padding = 0,
minwidth = 12,
},
stepper = {
slices = resources .. 'button_pressed.png',
},
['stepper.item'] = {
align = 'center middle',
color = textColor,
},
status = {
type = 'panel',
},
text = {
type = 'control',
align = 'left middle',
slices = getTextSlices,
padding = 6,
minwidth = 24,
minheight = 24,
focusable = true,
cursor = 'ibeam',
highlight = highlight,
color = textColor,
},
check = {
focusable = true,
color = textColor,
icon = getCheckOrRadioIcon
},
radio = {
focusable = true,
color = textColor,
icon = getCheckOrRadioIcon
},
}

Binary file not shown.

View File

@@ -47,30 +47,30 @@ function Widget.register (name, decorator)
end
local function maybeCall (something, ...)
if type(something) == 'function' then
return something(...)
end
return something
end
-- look for properties in attributes, Widget, style, and theme
local function metaIndex (self, property)
-- look in widget's own attributes
local A = Attribute[property]
if A then
local value = A.get and A.get(self) or self.attributes[property]
if value ~= nil then return maybeCall(value, self) end
if type(value) == 'function' then value = value(self) end
if value ~= nil then return value end
end
-- look in Widget class properties
local value = Widget[property]
if value ~= nil then return value end
-- look in style
local layout = self.layout
local style = layout:getStyle()
value = style and maybeCall(style:getProperty(self, property), self)
value = layout:getStyle():getProperty(self, property)
if value ~= nil then return value end
local theme = layout:getTheme()
return theme and maybeCall(theme:getProperty(self, property), self)
-- look in theme
return layout:getTheme():getProperty(self, property)
end
-- setting attributes triggers special behavior

View File

@@ -5,22 +5,22 @@ Buttons have no special behavior beyond that of generic widgets,
but themes should give buttons an appropriate appearance.
@usage
-- create a layout containing only a button
local layout = Layout {
type = 'button',
id = 'exampleButton',
text = 'Press me',
width = 100,
height = 32,
}
-- create a layout containing only a button
local layout = Layout {
type = 'button',
id = 'exampleButton',
text = 'Press me',
width = 100,
height = 32,
}
-- handle Press events
layout.exampleButton:onPress(function (event)
print 'You pressed the button.'
end)
-- handle Press events
layout.exampleButton:onPress(function (event)
print 'You pressed the button.'
end)
-- show the layout
layout:show()
-- show the layout
layout:show()
@widget button
--]]--

View File

@@ -10,16 +10,16 @@ then either or both of the siblings adjacent to the sash
should have a specified @{attribute.width|width} attribute.
@usage
-- create a layout containing two widgets separated by a sash
local layout = Layout {
type = 'panel', flow = 'x',
{ text = 'This is the left side', wrap = true, width = 100 },
{ type = 'sash' },
{ text = 'This is the right side', wrap = true },
}
-- create a layout containing two widgets separated by a sash
local layout = Layout {
type = 'panel', flow = 'x',
{ text = 'This is the left side', wrap = true, width = 100 },
{ type = 'sash' },
{ text = 'This is the right side', wrap = true },
}
-- show the layout
layout:show()
-- show the layout
layout:show()
@widget sash
--]]--

View File

@@ -8,21 +8,18 @@ number between 0 and 1, inclusive.
--]]--
return function (self)
local function clamp (value)
return value < 0 and 0 or value > 1 and 1 or value
end
self.value = clamp(self.value or 0.5)
self.step = self.step or 0.01
self.flow = 'x' -- TODO: support vertical slider
local spacer = self:addChild()
local thumb = self:addChild {
type = 'button',
align = 'middle center',
width = 0,
margin = 0,
}
@@ -46,9 +43,15 @@ return function (self)
local function press (event)
local x1, y1, w, h = self:getRectangle(true, true)
local x2, y2 = x1 + w, y1 + h
local halfThumb = thumb:getWidth() / 2
x1, x2 = x1 + halfThumb, x2 - halfThumb
self.value = clamp((event.x - x1) / (x2 - x1))
if self.flow == 'x' then
local halfThumb = thumb:getWidth() / 2
x1, x2 = x1 + halfThumb, x2 - halfThumb
self.value = clamp((event.x - x1) / (x2 - x1))
else
local halfThumb = thumb:getHeight() / 2
y1, y2 = y1 + halfThumb, y2 - halfThumb
self.value = 1 - clamp((event.y - y1) / (y2 - y1))
end
thumb:focus()
end
@@ -68,11 +71,22 @@ return function (self)
end)
self:onReshape(function (event)
-- TODO: eliminate redundancy with `press`
local x1, y1, w, h = self:getRectangle(true, true)
local x2, y2 = x1 + w, y1 + h
local halfThumb = thumb:getWidth() / 2
x1, x2 = x1 + halfThumb, x2 - halfThumb
spacer.width = self.value * (x2 - x1)
if self.flow == 'x' then
thumb.width = 0
thumb.height = false
local halfThumb = thumb:getWidth() / 2
x1, x2 = x1 + halfThumb, x2 - halfThumb
spacer.width = self.value * (x2 - x1)
spacer.height = false
else
thumb.width = false
thumb.height = 0
local halfThumb = thumb:getHeight() / 2
y1, y2 = y1 + halfThumb, y2 - halfThumb
spacer.width = false
spacer.height = (1 - self.value) * (y2 - y1)
end
end)
end

View File

@@ -7,21 +7,20 @@ status widgets exist in the same layout, only the last one created will
display status messages.
@usage
-- create a layout containing some buttons and a status bar
local layout = Layout {
{ type = 'panel', flow = 'x',
{ text = 'Do stuff', status = 'Press to do stuff' },
{ text = 'Quit', status = 'Press to quit' },
},
{ type = 'status', height = 24 },
}
-- create a layout containing some buttons and a status bar
local layout = Layout {
{ type = 'panel', flow = 'x',
{ text = 'Do stuff', status = 'Press to do stuff' },
{ text = 'Quit', status = 'Press to quit' },
},
{ type = 'status', height = 24 },
}
-- show the layout
layout:show()
-- show the layout
layout:show()
@widget status
--]]--
return function (self)
self.layout.statusWidget = self
end