Adds design modes support to SC.Pane, allowing the design of an applicat... #853

Closed
wants to merge 11 commits into from

2 participants

@publickeating
SproutCore member

...ion to very efficiently and easily change depending on the width of the display.

While a design may be flexible for a wide range of display widths, at a certain point it no longer makes sense to keep stretching or compressing views and instead it is better to completely alter the design. A prime example is that a design that can flex between a medium sized display like a tablet and a large sized display like a desktop, will not likely work for a small display like a smartphone. In order to very easily alter the design, SC.Pane provides the designModes property which includes the width thresholds that you want to trigger a change to the overall design of the application. Each time a threshold width is crossed, the child views will be updated with the new design mode. At this point, any properties dependent on 'designMode' will recompute allowing you to adjust settings such as isVisible.

As well, SC.View has a new property 'designLayouts' that is simply the layouts for the 'designModes' you define. For example, if the design mode becomes 'small' any child view that has a 'small' designLayout will have its layout automatically set.

This completes work spec #843. See the work spec for more details.

  • I'll try to add a demo of this in use to Showcase before too long
publickeating added some commits Oct 16, 2012
@publickeating publickeating Adds design modes support to SC.Pane, allowing the design of an appli…
…cation to very efficiently and easily change depending on the width of the display.

While a design may be flexible for a wide range of display widths, at a certain point it no longer makes sense to keep stretching or compressing views and instead it is better to completely alter the design.  A prime example is that a design that can flex between a medium sized display like a tablet and a large sized display like a desktop, will not likely work for a small display like a smartphone.  In order to very easily alter the design, SC.Pane provides the designModes property which includes the width thresholds that you want to trigger a change to the overall design of the application.  Each time a threshold width is crossed, the child views will be updated with the new design mode.  At this point, any properties dependent on 'designMode' will recompute allowing you to adjust settings such as isVisible.

As well, SC.View has a new property 'designLayouts' that is simply the layouts for the 'designModes' you define.  For example, if the design mode becomes 'small' any child view that has a 'small' designLayout will have its layout automatically set.

This completes work spec #843.
193d98b
@publickeating publickeating Removes leftover code. ea201d0
@publickeating publickeating Adds automatic design mode class name addition. If the pane implement…
…s designModes and the current design mode is 'large', the pane and its childViews will get a 'large' class name added. This allows the developer to write CSS like this:

    .my-view {
      &.small { line-height: 24px; }
      &.large { line-height: 36px; }
    }

I found that almost every view in a design mode of the app needed small adjustments to their CSS for the current mode.  While it was possible to use classNameBindings on to the 'designMode' property, it ended up being used on almost every child view which meant a lot of repeated typing, plus classNameBindings would have resulted in an additional observer on each child view.  Since design mode changes are distinct events in the app, we don't need to bind them up and can do it much more efficiently with a direct approach.
c72d9a6
@publickeating
SproutCore member

Update. I've got a fairly interesting demo of how to use this in the works. As well, in the process of creating the demo, I've discovered further improvements to make this even easier to apply. Namely, instead of each design needing a layout, it can just include adjustments to the main layout. Allowing:

// common layout to all designs
layout: { top: 20 },

// adjustments per design mode
designAdjustments: {
   small: { left: 10, right: 10 },
   large: { left: 20, right: 20 }
 }

Will be adding more commits to this.

@dcporter
SproutCore member

designAdjustments is awesome and will be easier in the common case. But there are cases when .adjust fails, like if you're switching between incompatible layout schemes ( {top, height} to {top, bottom} ) – are designLayouts also available? Or in that case does the developer have to fall back on adjustDesign? I'm not sure which is less confusing.

publickeating added some commits Oct 28, 2012
@publickeating publickeating Refactors design mode out of SC.Pane and into SC.Application.
- This makes it easy to set designModes only once per application, instead of having to set it over and over per pane.
- Also fixes application of design mode to take into account the mode that the view may already be in and thus we can exit early.
- Switches designLayouts to designAdjustments, so that you don't have to set a full layout for each mode.
29b8927
@publickeating publickeating Adds design mode(s) tests (currently failing - to be updated to new A…
…PI).
0fefa0e
@publickeating publickeating Tidies whitespace. 8300ce2
@publickeating publickeating Fixes design mode tests to match the updated API. 3ce4608
@publickeating publickeating Removes observation of designModes on SC.Application. These should ju…
…st be set one time or else not used at all and we can do without the binding.
a94bb87
@publickeating publickeating Improves design modes documentation and binds the current design mode…
… back to the application.
7833e9e
@publickeating publickeating Fixes bug if no newAdjustment exists but we are unsetting a previous …
…adjustment for design modes.
3d6a4e9
@publickeating publickeating Prevents exception if the child view doesn't have updateDesignMode su…
…pport (i.e. is not an SC.View, such as SC.TemplateView).
715c558
@publickeating
SproutCore member

Need to fix this to support aspect ratio "modes"

@dcporter
SproutCore member

Just to clarify for the record. My concern above about designAdjustments was ill-founded – if you need to adjust away certain layout properties, you can just adjust them to null. For example, to go from top-bottom-left-right to top-bottom-left-width: myView.adjust({ right: null, width: 45 }).

@publickeating publickeating deleted the team/publickeating/design_modes branch Dec 5, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment