Titanium JIRA Archive
Alloy (ALOY)

[ALOY-1051] Font properties not properly merged when using dynamic styles

GitHub Issuen/a
TypeImprovement
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2014-06-17T21:10:17.000+0000
Affected Version/sAlloy 1.4.0
Fix Version/sAlloy 1.5.0
ComponentsStyling
Labels1.4.0-rc, alloy, font, merge, qe-manualtest
ReporterShuo Liang
AssigneeTim Poulsen
Created2014-06-12T08:08:17.000+0000
Updated2014-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>
*index.js*
function doClick(e) {
    alert(JSON.stringify($.createStyle({
      classes: ['family', 'size']
    })));
}
$.index.open();
*index.tss*
".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

FileDateSize
iOS Simulator Screen shot 12 Jun 2014 10.01.58.png2014-06-12T08:08:17.000+000052499
merge.zip2014-06-12T08:08:17.000+00009324

Comments

  1. Ingo Muschenetz 2014-06-12

    [~skypanther] Can you see if this is an improvement and please update the title to be more reflective of the issue?
  2. Tim Poulsen 2014-06-12

    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.
  3. Tim Poulsen 2014-06-17

    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.
  4. Fokke Zandbergen 2014-07-25

    [~skypanther] could this be in 1.4.1 as well plz?
  5. Federico Casali 2014-08-11

    Verified working as expected. TiSDK 3.4.0.v2014080810171 Appcelerator Studio 3.3.1.201408080925 Alloy 1.5.0-dev
  6. Federico Casali 2014-09-25

    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)

JSON Source