Titanium

[ALOY-717] Improve "reflow"/"repaint" functionality when adding and removing classes

GitHub Issuen/a
TypeSub-task
PriorityHigh
StatusResolved
ResolutionFixed
Resolution Date2013-08-26T11:37:24.000+0000
Affected Version/sn/a
Fix Version/sAlloy 1.2.0, 2013 Sprint 15
ComponentsRuntime, Styling
Labelsnotable, qe-testadded
ReporterTony Lukasavage
AssigneeUnknown
Created2013-06-21T15:57:20.000+0000
Updated2018-03-07T22:25:55.000+0000

Description

problem

Currently when adding/removing position or visual properties from a proxy via the Alloy.addClass() or Alloy.removeClass(), these properties are not reset. To illustrate what I mean, consider the following styles: 
".label": {
    text: "I'm in the middle",
    width: 150
}

".right": {
    text: "I'll be on the right",
    right: 0
}
If I create an XML UI component like this: 
<Label class="label"/>
The label will say "I'm in the middle" and be centered. If I add the "right" class to it via Alloy.addClass(), as expected, it will then say "I'll be on the right" and will move to the right side of the screen. If I then use Alloy.removeClass() to remove the "right" class, the expectation would be that it would move back to the center and reset the text to the original. Unfortunately, only the text will be reset since it will be reapplied by the "label" class, but right:0 will remain attached to the proxy, keeping it on the right. We need to devise a way to automatically, and safely, reset positioning and visual properties on a proxy when removing classes.

workaround

The case given above would behave as expected if you set right:null in the "label" style, like this: 
".label": {
    text: "I'm in the middle",
    width: 150,
    right: null
}

".right": {
    text: "I'll be on the right",
    right: 0
}

Attachments

FileDateSize
alloy717_1_android_4.0.4.png2013-08-26T10:56:54.000+000052970
alloy717_1.png2013-08-26T10:56:54.000+000056886
alloy717_3_android_4.0.4.png2013-08-26T10:56:54.000+000096952
alloy717_5.png2013-08-26T10:56:54.000+000084559

Comments

  1. Tony Lukasavage 2013-07-16 PR: https://github.com/appcelerator/alloy/pull/181 test app: https://github.com/appcelerator/alloy/tree/master/test/apps/testing/ALOY-717 Functional testing should be confirmed on all supported platforms. To confirm that everything is working as expected do the following:

    Run the app, it should start without error

    Read the first class name in the list presented on the screen.

    Click the "change classes" button

    The first class will be removed and the Label will reflect that in its text and properties. For example, the first click will remove the "transform" class, which should make the text display flat instead of rotated 45 degrees.

    Repeat steps 2-4 until you cycle through all properties and end up back to the original state

  2. Paras Mishra 2013-08-26 Executed the app https://github.com/appcelerator/alloy/tree/master/test/apps/testing/ALOY-717 on Linux OS. Steps to reproduce: 1. Run the app, it should start without error 2. Read the first class name in the list presented on the screen. 3. Click the "change classes" button 4. The first class will be removed and the Label will reflect that in its text and properties. For example, the first click will remove the "transform" class, which should make the text display flat instead of rotated 45 degrees. 5. Repeat steps 2-4 until you cycle through all properties and end up back to the original state Actual: After cycling through all properties original state is not reached.Screen shots are attached. Issue occurs on android 2.3.6 devices. Using the Test Environment as Device: Google nexus 3, android v4.0.4 Device: Samasung Galaxy Note, android v2.3.6 OS: Ubuntu 10.04.4 LTS SDK: 3.1.3.v20130822140128, 3.1.2 GA Appcelerator Studio: 3.1.3.201308201707 Alloy: 1.2.1-cr2 CLI version : 3.1.2
  3. Tony Lukasavage 2013-08-26 [~pmishra] the issue you cite on android is a direct result of this linked ticket: TIMOB-14568 The functionality from Alloy's perspective is executing as expected. The app will work as expected when all linked tickets are resolved, and this particular issue will be resolved when the aforementioned ticket is resolved.

JSON Source