Uploaded image for project: 'Alloy'
  1. Alloy
  2. ALOY-210 Support Dynamic Styling
  3. ALOY-717

Improve "reflow"/"repaint" functionality when adding and removing classes

    Details

      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

          Issue Links

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                tlukasavage Tony Lukasavage
              • Watchers:
                4 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                    Git Source Code