Major
Detail
Detail
Major
#26986
Do not use theme variables directly but only via CSS variables
The developer can use the Top-Logic theme variables in stylesheets (CSS files) by placing the variable name inside percent signs: %TL_THEME_VARIABLE_NAME%.
When the application is launched, all CSS files are merged and one large comprehensive file is created per theme, replacing the theme variables with their value. This is unattractive, as the user is deprived of the possibility to use the browser console inspector to find out if and which theme variable might be used in the examined location.
It is difficult to find out how the theme variables are related to parts of the layout.
Implementation
Instead of replacing the theme variables directly with their value, CSS variables are used to allow the user to use the developer tools to find out which variables have influence in the examined part of the layout.
For each theme variable X` used in a CSS file, a CSS variable `--X: value is defined with the value of the theme variable. The evaluation of the theme variable must be changed accordingly from %X% to var(--X). The CSS variables are defined in the CSS selector :root.
Code migration
- In CSS files search for the regular expression %([A-Za-z_][-A-Za-z_0-9\.@/]*)% (pattern of the name of a theme variable) and replace it with var(--$1).
- CSS variables cannot be used inside url (details here). Unless the variables are used explicitly in the Java code, their type can be wrapped from <icon> to <string> and their value in url(...) in the appropriate theme-settings.xml definitions. Otherwise, new variables must be created. In the CSS files, the url(var(--foobar) can then be replaced by var(--foobar) for the variable foobar.
- Values of variables used for further calculation must be used within a CSS calc function. Expressions of the form width: -var(--myWidth) are invalid. Instead, the expression width: calc(-1*var(--myWidth)) can be used. To identify corresponding problems the regular expression :\s*([^\s]+\s*var\(--[a-zA-Z_-]+\)|var\(--[a-zA-Z_-]+\)[^\s]+\s*)\s*; can be used for CSS files. Not all search hits are problems, since CSS shortcuts also exist, such as margin: 5px 10px, which set a margin for all pages.
- Dialog#createDialog has been removed.
- LayoutUtils#createDialogInfo the signature for width and height was changed from int to tl:DisplayDimension.
- In tl:SizeInfo the widthUnit and heightUnit configuration options have been removed and the type of height and widht has been changed from int to tl:DisplayDimension. Instead of, for example, configuring width and height separately in tl:DialogInfo via the value and their unit, this is now done directly via height and width respectively.
{{#!xml <dialogInfo
height="100"
heightUnit="px"
width="50"
widthUnit="%"
/> }} becomes: {{#!xml <dialogInfo
height="100px"
width="50%"
/> }}}
- The templates
- editAttributedDialog.xml
- createAttributed.xml
- riskDialog.xml
- createAttributedNoSecLayout.xml
now have unity for the width and height parameters.
- The configuration tl:SortConfigDialog for dialogs for sorting columns now has only the options width and height (value with unit) instead of the options dialogWidth, dialogHeight, dialogWidthUnit and dialogHeightUnit.
Test
Start demo. In the application, examine parts of the layout using the Developer Tools inspector. You should see the use of CSS variables. In particular, a large set of variables should be defined in the CSS selector :root.