Custom Widget Themes

Transcript

1. Collabora Productivity LIBOCON19 Custom Widget Themes By Tomaž Vajngerl Collabora Productivity
2. .. 2 collabora online . com Col Custom Widget Themes Widget Themes in LibreOffice Native Widget Framework (NWF) • Draw the widgets using a backend (gtk, qt) No Widget Theme (SAL_NO_NWF=1) • Whatever the widget draws by default • So called Windows 95 look
3. .. 3 collabora online . com Col Custom Widget Themes Collabora Online Widgets Dialogs use »no widget theme« default rendering • Non-native look • Can’t use NWF backends either Not just for »Online« usage any more • Online as an iOS app • Online as an Android app
4. Custom Widget Themes .. 4 Col collabora online . com Dialogs without a widget theme
5. Custom Theme for iOS
6. .. 6 collabora online . com Col Custom Widget Themes iOS Custom Theme Thanks to Adfinis to sponsor this work Suited for the iOS app Mimics native iOS look Created by Pedro Silva – UI designer at Collabora Productivity Located in vcl/uiconfig/theme_definitions/ios
7. .. 7 collabora online . com Col Custom Widget Themes Custom Theme – used for iOS app
8. How widget custom themes work.
9. .. 9 collabora online . com Col Custom Widget Themes Adding Custom Widget Themes Custom implementation of NWF interface • But we draw the interface depending on a definition Make more widget themes possible Decide which theme to use depending on runtime environment
10. .. 10 collabora online . com Col Custom Widget Themes Theme Definition We don’t want to write drawing code for each theme • Should be easy just for the designer to change We need a definition of a theme • When to draw what • How to draw
11. Custom Widget Themes .. 11 Col collabora online . com Theme definition example <editbox> <part value="Entire" height="32"> <state enabled="true"> <external source="common-rect.svg" /> </state> <state enabled="false"> <external source="common-rect-disabled.svg" /> </state> <state focused="true"> <external source="common-rect-focus.svg" /> </state> </part> </editbox> Part of vcl/uiconfig/theme_definitions/ios/definition.xml
12. .. 12 collabora online . com Col Custom Widget Themes Theme Definition Widget Styles (colours) Widget Properties (behaviour) Widget look & feel
13. .. 13 collabora online . com Col Custom Widget Themes Theme Definition - Styles Background colours Text colours Border colours State colours (active, checked,…) ... faceColor, checkedColor, lightColor, lightBorderColor, shadowColor, darkShadowColor, buttonTextColor, buttonRolloverTextColor, radioCheckTextColor, groupTextColor, labelTextColor, windowColor, windowTextColor, dialogColor, dialogTextColor, workspaceColor, monoColor, fieldColor, fieldTextColor, fieldRolloverTextColor, activeColor, activeBorderColor, deactiveColor, deactiveTextColor, deactiveBorderColor, menuColor, menuBarColor, menuBarRolloverColor, menuBorderColor, menuTextColor, menuBarTextColor, menuBarRolloverTextColor, menuBarHighlightTextColor, menuHighlightColor, menuHighlightTextColor, highlightColor, highlightTextColor, activeTabColor, inactiveTabColor, tabTextColor, tabRolloverTextColor, tabHighlightTextColor, disableColor, helpColor, helpTextColor, linkColor, visitedLinkColor, toolTextColor, fontColor
14. .. 14 collabora online . com Col Custom Widget Themes Theme Definition - Properties Behaviour of some widget element • i.e. Tab alignment (differs in macOS, Windows) Margins, Sizes,… Currently hard-coded
15. .. 15 collabora online . com Col Custom Widget Themes Theme Definition – Look & Feel Defining how each widget is drawn Each has 3 levels: • Widget Type • Widget Part • Widget State
16. .. 16 collabora online . com Col Custom Widget Themes Widget Type Definition The type of the widget – i.e. Pushbutton, Combobox • See enum class ControlType @ include/vcl/salnativewidgets.hxx
17. .. 17 collabora online . com Col Custom Widget Themes Widget Part Definition Widget parts are defined by the widget • See enum class ControlPart @ include/vcl/salnativewidgets.hxx
18. .. 18 collabora online . com Col Custom Widget Themes Widget States Definition Supported states: enabled, focused, pressed, rollover, default, selected, button-value, extra Multiple states can be active at the same time • But it always resolves to one solution ON Disabled + ON Pressed + ON OFF Disabled + OFF Pressed + OFF
19. .. 19 collabora online . com Col Custom Widget Themes Drawing of a widget Simple definition to draw • Line, Rounded rectangle • Only for simple parts and testing Vector definition • SVG as an image (<image>) • SVG with special resize (<external>)
20. SVG as image Fixed size, but takes HiDPI into account Used for all that doesn’t need to be resized: • Radiobutton • Checkbox • Combobox (button) • ...
21. .. 21 collabora online . com Col Custom Widget Themes SVG with special resize – Part 1 Conventional resizing proportionally resizes the whole vector image • Everything gets bigger, smaller Not good for widgets
22. .. 22 collabora online . com Col Custom Widget Themes SVG with special resize – Part 2 What we need is just to put new space in the middle • Get the middle • Iterate over the points • If the point is over the middle, add delta size • Do it for both dimensions
23. .. 23 collabora online . com Col Custom Widget Themes SVG with special resize – Part 3 Reused the svgio parser • Only a subset of SVG is supported Changed the parser to use a visitor pattern • But just for the new code Creates DrawCommands, which are consumed by VCL • Simple – supports rectangle and path for now + properties (fill, stroke colour, opacity) • Soon some simple gradients
24. .. 24 collabora online . com Col Custom Widget Themes Performance and Caching Widget elements are very repetitive For SVG “as an image” elements cache as bitmap • SVG parsing is expensive • SVG image could be very complex For SVG elements with custom resizing, cache the DrawCommands • Place to the correct position • Just execute the draw commands
25. Collabora Productivity Thank you for listening! By Tomaž Vajngerl • Custom theme for iOS • vcl/uiconfig/theme_definitions/ios • Theme definition • Main theme definition in XML (definition.xml) • Definition for colour style, parameters, widget type/part/states • SVG for drawing the widget • Many thanks to Adfinis to sponsor the work