Uploaded image for project: 'Alloy'
  1. Alloy
  2. ALOY-1335

Use Alloy's deepExtend to handle conditional on-device style inheritance

    Details

    • Story Points:
      5
    • Sprint:
      2015 Sprint 24 Tooling

      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.

        Attachments

          Activity

            People

            • Assignee:
              fmiao Feon Sua Xin Miao
              Reporter:
              xavier Xavier Lacot
            • 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 Integration