[ALOY-1051] Font properties not properly merged when using dynamic styles
| GitHub Issue | n/a |
|---|---|
| Type | Improvement |
| Priority | High |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2014-06-17T21:10:17.000+0000 |
| Affected Version/s | Alloy 1.4.0 |
| Fix Version/s | Alloy 1.5.0 |
| Components | Styling |
| Labels | 1.4.0-rc, alloy, font, merge, qe-manualtest |
| Reporter | Shuo Liang |
| Assignee | Tim Poulsen |
| Created | 2014-06-12T08:08:17.000+0000 |
| Updated | 2014-10-28T15:48:36.000+0000 |
Description
The new font deep-merge is awesome, but it doesn't work when you pass multiple classes defining different font properties to
$.UI.create or $.createStyle.
As the following code, the attached example project and screenshot show the merge works for the label defined in the XML, but using $.createStyle upon clicking the label does not.
*index.xml*
<Alloy>
<Window class="container">
<Label top="100" id="label" class="family size" onClick="doClick">Hello, World</Label>
</Window>
</Alloy>
function doClick(e) {
alert(JSON.stringify($.createStyle({
classes: ['family', 'size']
})));
}
$.index.open();
".container": {
backgroundColor:"white"
}
"Label": {
top: 100,
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#000"
}
".family": {
font: {
fontFamily: 'AmericanTypewriter'
}
}
".size": {
font: {
fontSize: 30
}
}
Attachments
| File | Date | Size |
|---|---|---|
| iOS Simulator Screen shot 12 Jun 2014 10.01.58.png | 2014-06-12T08:08:17.000+0000 | 52499 |
| merge.zip | 2014-06-12T08:08:17.000+0000 | 9324 |
[~skypanther] Can you see if this is an improvement and please update the title to be more reflective of the issue?
Because we're so far past code freeze for Alloy 1.4 and the complexity of the changes needed to implement this feature, I'm pushing it out till the next version. In the meantime, if you need to use dynamic styles with complex font or gradient properties, I suggest you explicitly list all the required properties in each class. Alternatively, you can watch this ticket and once we push the changes to GitHub, you can install Alloy from there to take advantage of the improvement.
PR https://github.com/appcelerator/alloy/pull/453 Test apps: use the app included in the pull request (which implements the one in the Description) and also the advanced/dynamic_styling app (in the Alloy repo) Functional test: 1. Run the included test app 2. Click the label. The alert should describe the merged font style, which should include both the font family and font size, which are set in separate classes. 3. Run the advanced/dynamic_styling sample app (in the Alloy repo). Compare its output with this change to that exhibited when the app is built with Alloy 1.3.1 or Alloy 1.4.0.
[~skypanther] could this be in 1.4.1 as well plz?
Verified working as expected. TiSDK 3.4.0.v2014080810171 Appcelerator Studio 3.3.1.201408080925 Alloy 1.5.0-dev
Re-verified (following issues reported in Jira ALOY-1144 and ALOY-1146) working as expected with: TiSDK 3.4.0.v20140924140915 Appcelerator Studio 3.4.0.201409231834 CLI 3.4.0-rc4 Alloy 1.5.0-rc4 Xcode6 on Android Google Nexus Galaxy 4.3 and iOS 8 (iPhone 5, iPad mini and iPhone 6 simulators)