-
Notifications
You must be signed in to change notification settings - Fork 114
Styling
Work in Progress
SRRecorderControlStyle
can be used to load custom resources from the Application bundle. The identifier
of Style is used to locate the <identifier>-info.json
data asset. The info file describes components Style consists of. Each component corresponds to a given appearance setting such as Dark Mode, Color Tint (before 10.14), Accessibility, etc. Style considers the current system and application settings to select the best matching component.
When it's time to actually lay out or draw the control, style loads and caches the best matching resources.
Before loading any resources, Style uses the current system settings to order the set of components specified in the info file. Order of precedence:
Resource names are specified using the following grammar:
<resource-name> ::= <identifier><components>-<name>
<components> ::= <appearance-fragment> <accessibility-fragment> <layout-direction-fragment> <tint-fragment>
<appearance-fragment> ::= "-aqua" | "-vibrantlight" | "-vibrantdark" | "-darkaqua" | ""
<accessibility-fragment> ::= "-acc" | ""
<layout-direction-fragment> ::= "-ltr" | "-lrt" | ""
<tint-fragment> ::= "-blue" | "-graphite" | ""
<identifier> ::= string
<name> ::= string
Examples are:
sr-mojave-aqua-image.png
sr-mojave-darkaqua-acc-file.json
sr-mojave-blue-valentine.jpeg
No actual parsing is ever done. Instead, specific names are constructed and looked up on-demand according to the info file.
If resources for the same component are identical there is no need to duplicate them: Style will try to resolve each resource from the most specific component to the most general. The latter is always considered and does not need to be explicitly specified in the info file.
The first file loaded by Style is <identifier>[<components>]-metrics.json
. It describes the layout and drawing options.
- The control is of fixed height and flexible width
The "." in the key name corresponds to the nested value
Key | Value |
---|---|
MinSize |
{"Width": float, "Height": float} , minimum size of the control to draw |
ShapeCornerRadius |
{"Width": float, "Height": float} , radius of the corners for the focus ring |
ShapeInsets |
{"Top": float, "Left": float, "Bottom": float, "Right": float} , insets relative to alignment frame for the focus ring |