[ALOY-1335] Use Alloy's deepExtend to handle conditional on-device style inheritance
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Critical |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2015-11-30T20:50:07.000+0000 |
Affected Version/s | alloy 1.7.28 |
Fix Version/s | Release 5.2.0, alloy 1.7.29 |
Components | Styling |
Labels | Alloy, inheritance, styles |
Reporter | Xavier Lacot |
Assignee | Feon Sua Xin Miao |
Created | 2015-11-27T10:41:20.000+0000 |
Updated | 2016-01-20T23:18:33.000+0000 |
Description
Alloy selectors provide ways to overload style rules based on switches (formFactor, OS, conditional rules, etc.). Say the TSS is somehow:
...
".title-home": {
bottom: 4,
},
".title-home[formFactor=tablet]": {
bottom: 8
},
...
The generated code will look like:
Alloy.deepExtend(true, o, {
bottom: 4
});
Alloy.isTablet && _.extend(o, {
bottom: 8
});
If this works fine with most of the properties, this is particularly annoying with font or nested properties. For instance,
".title-home": {
font: {
fontFamily: "Delius-Regular",
fontSize: 11
}
},
".title-home[formFactor=tablet]": {
font: {
fontSize: 22
}
},
will result in the font name being simply ignored on tablets, as _.extend()
is not a deepExtend method. We're lucky, Alloy provides a deepExtend()
implementation which we may want to use. I therefore propose to switch from _.extend()
to Alloy's deepExtend
implementation. This will allow much more efficient ways of integrating complex graphical interfaces, with style inheritances all across the app:
<Label class="fonticon icon-row-right icon-arrow-md icon-arrow-right white" />
All styles are merged deeply, and it becomes unnecessary to repeat over and over the font name.
I _know_ that this change may break many tests, but I strongly believe that this behavior is the right way styles _should_ work, in the sake for development efficiency.
A pull request has been proposed in https://github.com/appcelerator/alloy/pull/744
Thank you [~xavier]! Didn't even know we were not deep merging this as do deep merge normal classes? Wonderful!
PR merged. To test: 1. Create an project 2. Add a label in index.xml, i.e
<Label class="title-home">Hello, World</Label>
3. Add the following style to index.tss4. Build the project for handheld devices, the label text should be in bold.
Verified fixed, using: MacOS 10.11.3 (15D21) Studio 4.4.0.201511241829 Ti SDK 5.2.0.v20160114021251 Appc NPM 4.2.3-1 Appc CLI 5.2.0-232 Alloy 1.7.33 Xcode 7.2 (7C68) Node v0.12.7 Java 1.7.0_80 Now using Alloy's deepExtend() over .extend() and can now see the generated code is conditioned properly. Used the provided steps and code to verify that the fonts are being bolded.