From 69703fdce0b7394fc9810d8f310126d39100ee43 Mon Sep 17 00:00:00 2001 From: airstruck Date: Mon, 7 Dec 2015 04:22:36 -0500 Subject: [PATCH] simplify style system --- doc/classes/Event.html | 2 +- doc/classes/Layout.html | 2 +- doc/classes/Widget.html | 2 +- doc/index.html | 4 +- doc/modules/attribute.html | 2 +- doc/widget types/status.html | 86 +++++++++++++++++ doc/widget_types/button.html | 86 +++++++++++++++++ doc/widget_types/check.html | 86 +++++++++++++++++ doc/widget_types/menu.html | 86 +++++++++++++++++ doc/widget_types/menu.item.html | 86 +++++++++++++++++ doc/widget_types/progress.html | 85 +++++++++++++++++ doc/widget_types/radio.html | 86 +++++++++++++++++ doc/widget_types/sash.html | 90 ++++++++++++++++++ doc/widget_types/slider.html | 85 +++++++++++++++++ doc/widget_types/status.html | 86 +++++++++++++++++ doc/widget_types/stepper.html | 88 ++++++++++++++++++ doc/widget_types/text.html | 86 +++++++++++++++++ doc/widgets/button.html | 106 +++++++++++++++++++++ doc/widgets/check.html | 90 ++++++++++++++++++ doc/widgets/menu.html | 86 +++++++++++++++++ doc/widgets/menu.item.html | 86 +++++++++++++++++ doc/widgets/progress.html | 85 +++++++++++++++++ doc/widgets/radio.html | 93 +++++++++++++++++++ doc/widgets/sash.html | 105 +++++++++++++++++++++ doc/widgets/slider.html | 85 +++++++++++++++++ doc/widgets/status.html | 103 +++++++++++++++++++++ doc/widgets/stepper.html | 88 ++++++++++++++++++ doc/widgets/text.html | 86 +++++++++++++++++ example/style.lua | 12 +-- luigi/backend/ffisdl.lua | 3 +- luigi/backend/ffisdl/text.lua | 17 +--- luigi/input.lua | 11 +-- luigi/style.lua | 21 +---- luigi/theme/dark.lua | 159 ++------------------------------ luigi/theme/light.lua | 141 ++++++++++++++-------------- luigi/widget.lua | 4 +- luigi/widget/button.lua | 23 ++++- luigi/widget/check.lua | 13 ++- luigi/widget/radio.lua | 16 +++- luigi/widget/sash.lua | 20 +++- luigi/widget/status.lua | 18 ++++ 41 files changed, 2227 insertions(+), 292 deletions(-) create mode 100644 doc/widget types/status.html create mode 100644 doc/widget_types/button.html create mode 100644 doc/widget_types/check.html create mode 100644 doc/widget_types/menu.html create mode 100644 doc/widget_types/menu.item.html create mode 100644 doc/widget_types/progress.html create mode 100644 doc/widget_types/radio.html create mode 100644 doc/widget_types/sash.html create mode 100644 doc/widget_types/slider.html create mode 100644 doc/widget_types/status.html create mode 100644 doc/widget_types/stepper.html create mode 100644 doc/widget_types/text.html create mode 100644 doc/widgets/button.html create mode 100644 doc/widgets/check.html create mode 100644 doc/widgets/menu.html create mode 100644 doc/widgets/menu.item.html create mode 100644 doc/widgets/progress.html create mode 100644 doc/widgets/radio.html create mode 100644 doc/widgets/sash.html create mode 100644 doc/widgets/slider.html create mode 100644 doc/widgets/status.html create mode 100644 doc/widgets/stepper.html create mode 100644 doc/widgets/text.html diff --git a/doc/classes/Event.html b/doc/classes/Event.html index 1f90656..7cf7f18 100644 --- a/doc/classes/Event.html +++ b/doc/classes/Event.html @@ -165,7 +165,7 @@
generated by LDoc 1.4.3 -Last updated 2015-12-06 11:22:48 +Last updated 2015-12-07 03:00:19
diff --git a/doc/classes/Layout.html b/doc/classes/Layout.html index 63917f8..752f031 100644 --- a/doc/classes/Layout.html +++ b/doc/classes/Layout.html @@ -402,7 +402,7 @@ found, and focuses that widget.
generated by LDoc 1.4.3 -Last updated 2015-12-06 11:22:48 +Last updated 2015-12-07 03:00:19
diff --git a/doc/classes/Widget.html b/doc/classes/Widget.html index ecd0c3c..30bb642 100644 --- a/doc/classes/Widget.html +++ b/doc/classes/Widget.html @@ -621,7 +621,7 @@ This table is identical to the constructed widget.
generated by LDoc 1.4.3 -Last updated 2015-12-06 11:22:48 +Last updated 2015-12-07 03:00:19
diff --git a/doc/index.html b/doc/index.html index 1df6bf7..7597e2d 100644 --- a/doc/index.html +++ b/doc/index.html @@ -66,7 +66,7 @@ - + @@ -136,7 +136,7 @@
generated by LDoc 1.4.3 -Last updated 2015-12-06 11:22:48 +Last updated 2015-12-07 03:00:19
diff --git a/doc/modules/attribute.html b/doc/modules/attribute.html index 3d766ca..0085714 100644 --- a/doc/modules/attribute.html +++ b/doc/modules/attribute.html @@ -741,7 +741,7 @@ child widgets appear.
generated by LDoc 1.4.3 -Last updated 2015-12-06 11:22:48 +Last updated 2015-12-07 03:00:19
diff --git a/doc/widget types/status.html b/doc/widget types/status.html new file mode 100644 index 0000000..f045eeb --- /dev/null +++ b/doc/widget types/status.html @@ -0,0 +1,86 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget status

+

A status bar.

+

+ +

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-05 16:15:11 +
+
+ + diff --git a/doc/widget_types/button.html b/doc/widget_types/button.html new file mode 100644 index 0000000..852ed5a --- /dev/null +++ b/doc/widget_types/button.html @@ -0,0 +1,86 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget button

+

A simple button.

+

+ +

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-05 16:16:13 +
+
+ + diff --git a/doc/widget_types/check.html b/doc/widget_types/check.html new file mode 100644 index 0000000..fb4076f --- /dev/null +++ b/doc/widget_types/check.html @@ -0,0 +1,86 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget check

+

A check box.

+

+ +

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-05 16:16:13 +
+
+ + diff --git a/doc/widget_types/menu.html b/doc/widget_types/menu.html new file mode 100644 index 0000000..c542b3e --- /dev/null +++ b/doc/widget_types/menu.html @@ -0,0 +1,86 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget menu

+

A menu bar.

+

+ +

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-05 16:16:13 +
+
+ + diff --git a/doc/widget_types/menu.item.html b/doc/widget_types/menu.item.html new file mode 100644 index 0000000..b73c77d --- /dev/null +++ b/doc/widget_types/menu.item.html @@ -0,0 +1,86 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget menu.item

+

A menu item.

+

When a menu is created, any sub-items not having a specified type +are automatically given a type of 'menu.item'. These widgets should +not be explicitly created.

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-05 16:16:13 +
+
+ + diff --git a/doc/widget_types/progress.html b/doc/widget_types/progress.html new file mode 100644 index 0000000..0d1fa46 --- /dev/null +++ b/doc/widget_types/progress.html @@ -0,0 +1,85 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget progress

+

A progress bar.

+

Set the widget's value property to a decimal value +between 0 and 1 (inclusive) to change the width of the bar.

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-05 16:16:13 +
+
+ + diff --git a/doc/widget_types/radio.html b/doc/widget_types/radio.html new file mode 100644 index 0000000..bab6847 --- /dev/null +++ b/doc/widget_types/radio.html @@ -0,0 +1,86 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget radio

+

A radio button.

+

+ +

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-05 16:16:13 +
+
+ + diff --git a/doc/widget_types/sash.html b/doc/widget_types/sash.html new file mode 100644 index 0000000..1ae9dc6 --- /dev/null +++ b/doc/widget_types/sash.html @@ -0,0 +1,90 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget sash

+

A sash.

+

Dragging this widget resizes the widgets adjacent to it. +A sash must be adjacent to a widget with a specified size +in the same direction as the parent element's flow.

+ +

For example, if the parent of the sash is flow = 'x' +then either or both of the siblings next to the sash +must have a specified width property.

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-05 16:16:13 +
+
+ + diff --git a/doc/widget_types/slider.html b/doc/widget_types/slider.html new file mode 100644 index 0000000..5534d44 --- /dev/null +++ b/doc/widget_types/slider.html @@ -0,0 +1,85 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget slider

+

A slider.

+

Dragging this widget changes its value property to a +number between 0 and 1, inclusive.

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-05 16:16:13 +
+
+ + diff --git a/doc/widget_types/status.html b/doc/widget_types/status.html new file mode 100644 index 0000000..3a6f935 --- /dev/null +++ b/doc/widget_types/status.html @@ -0,0 +1,86 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget status

+

A status bar.

+

+ +

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-05 16:16:13 +
+
+ + diff --git a/doc/widget_types/stepper.html b/doc/widget_types/stepper.html new file mode 100644 index 0000000..b66a562 --- /dev/null +++ b/doc/widget_types/stepper.html @@ -0,0 +1,88 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget stepper

+

A stepper.

+

This widget is composed of two buttons and a content area. +Upon creation, this widget's children are moved into an +items property. The items are displayed one at a time in +the content area. Pressing the buttons cycles through the +item displayed in the content area.

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-05 16:16:13 +
+
+ + diff --git a/doc/widget_types/text.html b/doc/widget_types/text.html new file mode 100644 index 0000000..a91c971 --- /dev/null +++ b/doc/widget_types/text.html @@ -0,0 +1,86 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget text

+

A text entry area.

+

+ +

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-05 16:16:13 +
+
+ + diff --git a/doc/widgets/button.html b/doc/widgets/button.html new file mode 100644 index 0000000..0b04c3c --- /dev/null +++ b/doc/widgets/button.html @@ -0,0 +1,106 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget button

+

A button.

+

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,
+    }
+
+    -- handle Press events
+    layout.exampleButton:onPress(function (event)
+        print 'You pressed the button.'
+    end)
+
+    -- show the layout
+    layout:show()
+
    +
+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-07 03:00:19 +
+
+ + diff --git a/doc/widgets/check.html b/doc/widgets/check.html new file mode 100644 index 0000000..20ed8c3 --- /dev/null +++ b/doc/widgets/check.html @@ -0,0 +1,90 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget check

+

A check box.

+

Check boxes toggle their value attribute between +true and false when pressed.

+ +

Changing the value of a check box causes it to change its appearance to +indicate its value. The standard themes use the icon +attribute for this purpose. If a custom icon is provided when using the +standard themes, the widget's value should be indicated in some other way.

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-07 03:00:19 +
+
+ + diff --git a/doc/widgets/menu.html b/doc/widgets/menu.html new file mode 100644 index 0000000..a272601 --- /dev/null +++ b/doc/widgets/menu.html @@ -0,0 +1,86 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget menu

+

A menu bar.

+

+ +

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-07 03:00:19 +
+
+ + diff --git a/doc/widgets/menu.item.html b/doc/widgets/menu.item.html new file mode 100644 index 0000000..f05cb08 --- /dev/null +++ b/doc/widgets/menu.item.html @@ -0,0 +1,86 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget menu.item

+

A menu item.

+

When a menu is created, any sub-items not having a specified type +are automatically given a type of 'menu.item'. These widgets should +not be explicitly created.

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-07 03:00:19 +
+
+ + diff --git a/doc/widgets/progress.html b/doc/widgets/progress.html new file mode 100644 index 0000000..5b835c2 --- /dev/null +++ b/doc/widgets/progress.html @@ -0,0 +1,85 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget progress

+

A progress bar.

+

Set the widget's value property to a decimal value +between 0 and 1 (inclusive) to change the width of the bar.

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-07 03:00:19 +
+
+ + diff --git a/doc/widgets/radio.html b/doc/widgets/radio.html new file mode 100644 index 0000000..9f9d257 --- /dev/null +++ b/doc/widgets/radio.html @@ -0,0 +1,93 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget radio

+

A radio button.

+

Radio buttons change their value attribute to +true when pressed. Radio buttons should also have a group +attribute. When a radio button is pressed, other radio buttons +in the same layout with the same group attribute change their values +to false.

+ +

Changing the value of a radio button causes it to change its appearance to +indicate its value. The standard themes use the icon +attribute for this purpose. If a custom icon is provided when using the +standard themes, the widget's value should be indicated in some other way.

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-07 03:00:19 +
+
+ + diff --git a/doc/widgets/sash.html b/doc/widgets/sash.html new file mode 100644 index 0000000..bd09f26 --- /dev/null +++ b/doc/widgets/sash.html @@ -0,0 +1,105 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget sash

+

A sash.

+

Dragging this widget resizes the widgets adjacent to it. +A sash should be adjacent to a widget with a specified size +in the same direction as the parent element's flow.

+ +

For example, if the parent of the sash is flow = 'x' +then either or both of the siblings adjacent to the sash +should have a specified 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 },
+    }
+
+    -- show the layout
+    layout:show()
+
    +
+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-07 03:00:19 +
+
+ + diff --git a/doc/widgets/slider.html b/doc/widgets/slider.html new file mode 100644 index 0000000..4f2c869 --- /dev/null +++ b/doc/widgets/slider.html @@ -0,0 +1,85 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget slider

+

A slider.

+

Dragging this widget changes its value property to a +number between 0 and 1, inclusive.

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-07 03:00:19 +
+
+ + diff --git a/doc/widgets/status.html b/doc/widgets/status.html new file mode 100644 index 0000000..a0e3951 --- /dev/null +++ b/doc/widgets/status.html @@ -0,0 +1,103 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget status

+

A status bar.

+

This widget will display the status attribute of the +hovered widget. Only one status widget should exist per layout. If multiple +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 },
+    }
+
+    -- show the layout
+    layout:show()
+
    +
+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-07 03:00:19 +
+
+ + diff --git a/doc/widgets/stepper.html b/doc/widgets/stepper.html new file mode 100644 index 0000000..3e2c917 --- /dev/null +++ b/doc/widgets/stepper.html @@ -0,0 +1,88 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget stepper

+

A stepper.

+

This widget is composed of two buttons and a content area. +Upon creation, this widget's children are moved into an +items property. The items are displayed one at a time in +the content area. Pressing the buttons cycles through the +item displayed in the content area.

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-07 03:00:19 +
+
+ + diff --git a/doc/widgets/text.html b/doc/widgets/text.html new file mode 100644 index 0000000..9e47fda --- /dev/null +++ b/doc/widgets/text.html @@ -0,0 +1,86 @@ + + + + + Reference + + + + +
+ +
+ +
+
+
+ + +
+ + + + + + +
+ +

Widget text

+

A text entry area.

+

+ +

+ + + +
+
+ + + + +
+
+
+generated by LDoc 1.4.3 +Last updated 2015-12-07 03:00:19 +
+
+ + diff --git a/example/style.lua b/example/style.lua index fcc4670..831a2ba 100644 --- a/example/style.lua +++ b/example/style.lua @@ -8,12 +8,11 @@ return { toolButton = { align = 'center middle', width = 48, - }, - toolButton_focused = { - slices = 'defer', - }, - toolButton_not_hovered = { - slices = false, + slices = function (self) + return self.focused and 'defer' + or self.hovered and 'defer' + or false + end }, statusbar = { align = 'left middle', @@ -32,7 +31,6 @@ return { type = 'submenu', width = 600, height = 400, - float = true, }, dialogHead = { type = 'panel', diff --git a/luigi/backend/ffisdl.lua b/luigi/backend/ffisdl.lua index 3d77a65..2c4d025 100644 --- a/luigi/backend/ffisdl.lua +++ b/luigi/backend/ffisdl.lua @@ -85,6 +85,7 @@ Backend.run = function () end end + sdl.renderSetClipRect(renderer, nil) sdl.setRenderDrawColor(renderer, 0, 0, 0, 255) sdl.renderClear(renderer) callback.draw() @@ -273,8 +274,6 @@ local stack = {} Backend.pop = function () local history = stack[#stack] local color = history.color or { 0, 0, 0, 255 } - Backend.setColor(history.color or { 0, 0, 0, 255 }) - Backend.sdl = sdl sdl.setRenderDrawColor(renderer, color[1], color[2], color[3], color[4] or 255) diff --git a/luigi/backend/ffisdl/text.lua b/luigi/backend/ffisdl/text.lua index c0d7213..53db63e 100644 --- a/luigi/backend/ffisdl/text.lua +++ b/luigi/backend/ffisdl/text.lua @@ -36,18 +36,9 @@ local function renderMulti (self, font, text, color, align, limit) local height = #lines * lineHeight color = sdl.Color(color or 0) - local r, g, b, a - - --[[ - if sdl.BYTEORDER == sdl.BIG_ENDIAN then - r, g, b, a = 0xFF000000, 0x00FF0000, 0x0000FF00, 0x000000FF - else - r, g, b, a = 0x000000FF, 0x0000FF00, 0x00FF0000, 0xFF000000 - end - --]] - - -- values from SDL_ttf.c - r, g, b, a = 0x00FF0000, 0x0000FF00, 0x000000FF, 0xFF000000 + -- mask values from SDL_ttf.c + -- TODO: something with sdl.BYTEORDER == sdl.BIG_ENDIAN ? + local r, g, b, a = 0x00FF0000, 0x0000FF00, 0x000000FF, 0xFF000000 local surface = ffi.gc( sdl.createRGBSurface(sdl.SWSURFACE, limit, height, 32, r, g, b, a), @@ -61,7 +52,7 @@ local function renderMulti (self, font, text, color, align, limit) sdl.freeSurface) if lineSurface ~= nil then sdl.setSurfaceBlendMode(lineSurface, sdl.BLENDMODE_NONE) - + local w, h = lineSurface.w, lineSurface.h local top = (index - 1) * lineHeight diff --git a/luigi/input.lua b/luigi/input.lua index f3f24e6..c6276b3 100644 --- a/luigi/input.lua +++ b/luigi/input.lua @@ -213,12 +213,9 @@ end function Input:handleReshape (layout, width, height) local root = layout.root - if root.float then - root:reshape() - else - root.width = width - root.height = height - end + root:reshape() + root.dimensions.width = width + root.dimensions.height = height Event.Reshape:emit(layout, { target = layout }) end @@ -228,7 +225,7 @@ function Input:handleWheelMove (layout, x, y) local mx, my = Backend.getMousePosition() local widget = layout:getWidgetAt(mx, my) local hit = true - + if not widget then hit = nil widget = layout.root diff --git a/luigi/style.lua b/luigi/style.lua index 823ae92..fbe899f 100644 --- a/luigi/style.lua +++ b/luigi/style.lua @@ -13,6 +13,7 @@ function Style:getProperty (object, property, original) local value = rawget(object, property) if value ~= nil then return value end + local rules = self.rules original = original or object for _, lookupName in ipairs(self.lookupNames) do @@ -23,7 +24,8 @@ function Style:getProperty (object, property, original) lookup = { lookup } end for _, lookupValue in ipairs(lookup) do - for _, rule in ipairs(self:getRules(original, lookupValue)) do + local rule = rules[lookupValue] + if rule then local value = self:getProperty(rule, property, original) if value ~= nil then return value end end @@ -32,21 +34,4 @@ function Style:getProperty (object, property, original) end -- lookup names end -function Style:getRules (object, lookupValue) - local rules = self.rules - local result = {} - - for _, flag in ipairs { 'pressed', 'focused', 'hovered', 'active' } do - if rawget(object, flag) then - result[#result + 1] = rules[lookupValue .. '_' .. flag] - else - result[#result + 1] = rules[lookupValue .. '_not_' .. flag] - end - end - - result[#result + 1] = rules[lookupValue] - - return result -end - return Style diff --git a/luigi/theme/dark.lua b/luigi/theme/dark.lua index 459d3e0..951f98d 100644 --- a/luigi/theme/dark.lua +++ b/luigi/theme/dark.lua @@ -1,157 +1,12 @@ local RESOURCE = (...):gsub('%.', '/') .. '/' +local REL = (...):gsub('[^.]*$', '') return function (config) config = config or {} - - local backColor = config.backColor or { 40, 40, 40 } - local lineColor = config.lineColor or { 60, 60, 60 } - local textColor = config.textColor or { 240, 240, 240 } - local highlight = config.highlight or { 0x00, 0x5c, 0x94 } - - return { - button = { - align = 'center middle', - padding = 6, - slices = RESOURCE .. 'button.png', - minwidth = 24, - minheight = 24, - focusable = true, - color = textColor, - }, - button_hovered = { - slices = RESOURCE .. 'button_hovered.png' - }, - button_focused = { - slices = RESOURCE .. 'button_focused.png', - }, - button_pressed = { - slices = RESOURCE .. 'button_pressed.png', - }, - - ['stepper.left'] = { - type = 'button', - icon = RESOURCE .. 'triangle_left.png', - }, - - ['stepper.right'] = { - type = 'button', - icon = RESOURCE .. 'triangle_right.png', - }, - menu = { - height = 24, - }, - ['menu.item'] = { - padding = 4, - align = 'left middle', - color = { 0, 0, 0 }, - color = textColor, - }, - ['menu.item_active'] = { - background = highlight, - }, - ['menu.expander'] = { - icon = RESOURCE .. 'triangle_right.png', - }, - submenu = { - padding = 10, - margin = -10, - slices = RESOURCE .. 'submenu.png', - color = textColor, - }, - sash = { - background = lineColor - }, - sash_hovered = { - background = highlight - }, - slider = { - slices = RESOURCE .. 'button_pressed.png', - padding = 0, - minwidth = 24, - minheight = 24 - }, - panel = { - background = backColor, - color = textColor, - }, - progress = { - slices = RESOURCE .. 'button_pressed.png', - padding = 0, - minwidth = 24, - minheight = 24 - }, - ['progress.bar'] = { - slices = RESOURCE .. 'progress.png', - padding = 0, - minwidth = 12, - }, - slider_hovered = { - }, - stepper = { - slices = RESOURCE .. 'button_pressed.png', - }, - ['stepper.item'] = { - align = 'center middle', - color = textColor, - }, - text = { - align = 'left middle', - slices = RESOURCE .. 'text.png', - padding = 6, - minwidth = 24, - minheight = 24, - focusable = true, - cursor = 'ibeam', - highlight = highlight, - color = textColor, - }, - text_focused = { - slices = RESOURCE .. 'text_focused.png', - }, - check = { - focusable = true, - color = textColor, - }, - ['check.unchecked'] = { - icon = RESOURCE .. 'check_unchecked.png', - }, - ['check.checked'] = { - icon = RESOURCE .. 'check_checked.png', - }, - ['check.unchecked_pressed'] = { - icon = RESOURCE .. 'check_unchecked_pressed.png', - }, - ['check.checked_pressed'] = { - icon = RESOURCE .. 'check_checked_pressed.png', - }, - ['check.unchecked_focused'] = { - icon = RESOURCE .. 'check_unchecked_focused.png', - }, - ['check.checked_focused'] = { - icon = RESOURCE .. 'check_checked_focused.png', - }, - radio = { - focusable = true, - color = textColor, - }, - ['radio.unchecked'] = { - icon = RESOURCE .. 'radio_unchecked.png', - }, - ['radio.checked'] = { - icon = RESOURCE .. 'radio_checked.png', - }, - ['radio.unchecked_pressed'] = { - icon = RESOURCE .. 'radio_unchecked_pressed.png', - }, - ['radio.checked_pressed'] = { - icon = RESOURCE .. 'radio_checked_pressed.png', - }, - ['radio.unchecked_focused'] = { - icon = RESOURCE .. 'radio_unchecked_focused.png', - }, - ['radio.checked_focused'] = { - icon = RESOURCE .. 'radio_checked_focused.png', - }, - } - + config.resources = config.resources or RESOURCE + config.backColor = config.backColor or { 40, 40, 40 } + config.lineColor = config.lineColor or { 60, 60, 60 } + config.textColor = config.textColor or { 240, 240, 240 } + config.highlight = config.highlight or { 0x00, 0x5c, 0x94 } + return require(REL .. 'light')(config) end diff --git a/luigi/theme/light.lua b/luigi/theme/light.lua index ba9d5ef..ac6e796 100644 --- a/luigi/theme/light.lua +++ b/luigi/theme/light.lua @@ -2,38 +2,74 @@ local RESOURCE = (...):gsub('%.', '/') .. '/' return function (config) config = config or {} - + local resources = config.resources or RESOURCE local backColor = config.backColor or { 240, 240, 240 } local lineColor = config.lineColor or { 220, 220, 220 } + local textColor = config.textColor or { 0, 0, 0 } local highlight = config.highlight or { 0x19, 0xAE, 0xFF } + local function getButtonSlices (self) + return self.pressed and resources .. 'button_pressed.png' + or self.focused and resources .. 'button_focused.png' + or self.hovered and resources .. 'button_hovered.png' + or resources .. 'button.png' + end + + local function getCheckOrRadioIcon (self) + local prefix = resources .. self.type + if self.pressed then + if self.value then + return prefix .. '_checked_pressed.png' + else + return prefix .. '_unchecked_pressed.png' + end + elseif self.focused then + if self.value then + return prefix .. '_checked_focused.png' + else + return prefix .. '_unchecked_focused.png' + end + else + if self.value then + return prefix .. '_checked.png' + else + return prefix .. '_unchecked.png' + end + end + end + + local function getMenuItemBackground (self) + return self.active and highlight + end + + local function getSashBackground (self) + return self.hovered and highlight or lineColor + end + + local function getTextSlices (self) + return self.focused and resources .. 'text_focused.png' + or resources .. 'text.png' + end + return { button = { align = 'center middle', padding = 6, - slices = RESOURCE .. 'button.png', + slices = getButtonSlices, minwidth = 24, minheight = 24, - focusable = true - }, - button_hovered = { - slices = RESOURCE .. 'button_hovered.png' - }, - button_focused = { - slices = RESOURCE .. 'button_focused.png', - }, - button_pressed = { - slices = RESOURCE .. 'button_pressed.png', + focusable = true, + color = textColor, }, ['stepper.left'] = { type = 'button', - icon = RESOURCE .. 'triangle_left.png', + icon = resources .. 'triangle_left.png', }, ['stepper.right'] = { type = 'button', - icon = RESOURCE .. 'triangle_right.png', + icon = resources .. 'triangle_right.png', }, menu = { height = 24, @@ -41,107 +77,72 @@ return function (config) ['menu.item'] = { padding = 4, align = 'left middle', - color = { 0, 0, 0 } - }, - ['menu.item_active'] = { - background = highlight, + color = textColor, + background = getMenuItemBackground, }, ['menu.expander'] = { - icon = RESOURCE .. 'triangle_right.png', + icon = resources .. 'triangle_right.png', }, submenu = { padding = 10, margin = -10, - slices = RESOURCE .. 'submenu.png', + slices = resources .. 'submenu.png', + color = textColor, }, sash = { - background = lineColor - }, - sash_hovered = { - background = highlight + background = getSashBackground }, slider = { - slices = RESOURCE .. 'button_pressed.png', + slices = resources .. 'button_pressed.png', padding = 0, minwidth = 24, minheight = 24 }, panel = { background = backColor, + color = textColor, }, progress = { - slices = RESOURCE .. 'button_pressed.png', + slices = resources .. 'button_pressed.png', padding = 0, minwidth = 24, minheight = 24 }, ['progress.bar'] = { - slices = RESOURCE .. 'progress.png', + slices = resources .. 'progress.png', padding = 0, minwidth = 12, }, - slider_hovered = { - }, stepper = { - slices = RESOURCE .. 'button_pressed.png', + slices = resources .. 'button_pressed.png', }, ['stepper.item'] = { align = 'center middle', + color = textColor, + }, + status = { + type = 'panel', }, text = { align = 'left middle', - slices = RESOURCE .. 'text.png', + slices = getTextSlices, padding = 6, minwidth = 24, minheight = 24, focusable = true, cursor = 'ibeam', highlight = highlight, - }, - text_focused = { - slices = RESOURCE .. 'text_focused.png', + color = textColor, }, check = { focusable = true, - }, - ['check.unchecked'] = { - icon = RESOURCE .. 'check_unchecked.png', - }, - ['check.checked'] = { - icon = RESOURCE .. 'check_checked.png', - }, - ['check.unchecked_pressed'] = { - icon = RESOURCE .. 'check_unchecked_pressed.png', - }, - ['check.checked_pressed'] = { - icon = RESOURCE .. 'check_checked_pressed.png', - }, - ['check.unchecked_focused'] = { - icon = RESOURCE .. 'check_unchecked_focused.png', - }, - ['check.checked_focused'] = { - icon = RESOURCE .. 'check_checked_focused.png', + color = textColor, + icon = getCheckOrRadioIcon }, radio = { focusable = true, - }, - ['radio.unchecked'] = { - icon = RESOURCE .. 'radio_unchecked.png', - }, - ['radio.checked'] = { - icon = RESOURCE .. 'radio_checked.png', - }, - ['radio.unchecked_pressed'] = { - icon = RESOURCE .. 'radio_unchecked_pressed.png', - }, - ['radio.checked_pressed'] = { - icon = RESOURCE .. 'radio_checked_pressed.png', - }, - ['radio.unchecked_focused'] = { - icon = RESOURCE .. 'radio_unchecked_focused.png', - }, - ['radio.checked_focused'] = { - icon = RESOURCE .. 'radio_checked_focused.png', + color = textColor, + icon = getCheckOrRadioIcon }, } diff --git a/luigi/widget.lua b/luigi/widget.lua index 2003b77..d249b25 100644 --- a/luigi/widget.lua +++ b/luigi/widget.lua @@ -66,8 +66,8 @@ local function metaIndex (self, property) local layout = self.layout local style = layout:getStyle() - value = style and style:getProperty(self, property) - if value ~= nil and value ~= 'defer' then return maybeCall(value, self) end + value = style and maybeCall(style:getProperty(self, property), self) + if value ~= nil and value ~= 'defer' then return value end local theme = layout:getTheme() return theme and maybeCall(theme:getProperty(self, property), self) diff --git a/luigi/widget/button.lua b/luigi/widget/button.lua index dfee653..7f2c9ca 100644 --- a/luigi/widget/button.lua +++ b/luigi/widget/button.lua @@ -1,5 +1,26 @@ --[[-- -A simple button. +A button. + +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, + } + + -- handle Press events + layout.exampleButton:onPress(function (event) + print 'You pressed the button.' + end) + + -- show the layout + layout:show() @widget button --]]-- diff --git a/luigi/widget/check.lua b/luigi/widget/check.lua index c8791c7..d9b01c9 100644 --- a/luigi/widget/check.lua +++ b/luigi/widget/check.lua @@ -1,6 +1,14 @@ --[[-- A check box. +Check boxes toggle their @{attribute.value|value} attribute between +`true` and `false` when pressed. + +Changing the value of a check box causes it to change its appearance to +indicate its value. The standard themes use the @{attribute.icon|icon} +attribute for this purpose. If a custom icon is provided when using the +standard themes, the widget's value should be indicated in some other way. + @widget check --]]-- @@ -9,10 +17,5 @@ return function (self) self.value = not self.value end) - self:onChange(function () - local subtype = self.value and 'check.checked' or 'check.unchecked' - self.type = { 'check', subtype } - end) - self.value = not not self.value end diff --git a/luigi/widget/radio.lua b/luigi/widget/radio.lua index 671ebc6..c10ceb3 100644 --- a/luigi/widget/radio.lua +++ b/luigi/widget/radio.lua @@ -1,6 +1,17 @@ --[[-- A radio button. +Radio buttons change their @{attribute.value|value} attribute to +`true` when pressed. Radio buttons should also have a `group` +attribute. When a radio button is pressed, other radio buttons +in the same layout with the same `group` attribute change their values +to `false`. + +Changing the value of a radio button causes it to change its appearance to +indicate its value. The standard themes use the @{attribute.icon|icon} +attribute for this purpose. If a custom icon is provided when using the +standard themes, the widget's value should be indicated in some other way. + @widget radio --]]-- @@ -24,10 +35,5 @@ return function (self) end end) - self:onChange(function () - local subtype = self.value and 'radio.checked' or 'radio.unchecked' - self.type = { 'radio', subtype } - end) - self.value = not not self.value end diff --git a/luigi/widget/sash.lua b/luigi/widget/sash.lua index 358c5a0..537b39c 100644 --- a/luigi/widget/sash.lua +++ b/luigi/widget/sash.lua @@ -2,12 +2,24 @@ A sash. Dragging this widget resizes the widgets adjacent to it. -A sash must be adjacent to a widget with a specified size -in the same direction as the parent element's `flow`. +A sash should be adjacent to a widget with a specified size +in the same direction as the parent element's @{attribute.flow|flow}. For example, if the parent of the sash is `flow = 'x'` -then either or both of the siblings next to the sash -must have a specified `width` property. +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 }, + } + + -- show the layout + layout:show() @widget sash --]]-- diff --git a/luigi/widget/status.lua b/luigi/widget/status.lua index ee48b1f..631d7d2 100644 --- a/luigi/widget/status.lua +++ b/luigi/widget/status.lua @@ -1,6 +1,24 @@ --[[-- A status bar. +This widget will display the @{attribute.status|status} attribute of the +hovered widget. Only one status widget should exist per layout. If multiple +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 }, + } + + -- show the layout + layout:show() + @widget status --]]--
buttonA simple button.A button.
check