Added samples for the new themes at different control sizes.

sproutcore · Apr 20, 2015 · 1eab667 · 1eab667
1 parent 84e94ec
commit 1eab667
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/resources/views_page.js b/resources/views_page.js
@@ -44,9 +44,33 @@ Showcase.viewsPage = SC.Page.create({
           title: 'Capsule',
           example: "SC.ButtonView.extend({  layout: { width: 100, height: 24, centerX: 0, centerY: 0 },  themeName: 'capsule',  title: 'Click Me'  });"
         }),
+        Showcase.ViewsItemContent.create({
+          title: 'Capsule: SC.SMALL_CONTROL_SIZE',
+          example: "SC.ButtonView.extend({  controlSize: SC.SMALL_CONTROL_SIZE,  layout: { width: 80, height: 18, centerX: 0, centerY: 0 },  themeName: 'capsule',  title: 'Click Me'  });"
+        }),
+        Showcase.ViewsItemContent.create({
+          title: 'Capsule: SC.HUGE_CONTROL_SIZE',
+          example: "SC.ButtonView.extend({  controlSize: SC.HUGE_CONTROL_SIZE,  layout: { width: 110, height: 30, centerX: 0, centerY: 0 },  themeName: 'capsule',  title: 'Click Me'  });"
+        }),
+        Showcase.ViewsItemContent.create({
+          title: 'Capsule: SC.JUMBO_CONTROL_SIZE',
+          example: "SC.ButtonView.extend({  controlSize: SC.JUMBO_CONTROL_SIZE,  layout: { width: 130, height: 44, centerX: 0, centerY: 0 },  themeName: 'capsule',  title: 'Click Me'  });"
+        }),
         Showcase.ViewsItemContent.create({
           title: 'Pointers',
           example: "SC.View.extend({  childViews: ['pointLeftButton', 'pointRightButton'],  pointLeftButton: SC.ButtonView.extend({  layout: { width: 100, height: 24, centerX: -50, centerY: 0 },  themeName: 'point-left',  title: 'Back'  }),  pointRightButton: SC.ButtonView.extend({  layout: { width: 100, height: 24, centerX: 50, centerY: 0 },  themeName: 'point-right',  title: 'Forward'  })  });"
+        }),
+        Showcase.ViewsItemContent.create({
+          title: 'Pointers: SC.SMALL_CONTROL_SIZE',
+          example: "SC.View.extend({  childViews: ['pointLeftButton', 'pointRightButton'],  pointLeftButton: SC.ButtonView.extend({  controlSize: SC.SMALL_CONTROL_SIZE,  layout: { width: 80, height: 18, centerX: -40, centerY: 0 },  themeName: 'point-left',  title: 'Back'  }),  pointRightButton: SC.ButtonView.extend({  controlSize: SC.SMALL_CONTROL_SIZE,  layout: { width: 80, height: 18, centerX: 40, centerY: 0 },  themeName: 'point-right',  title: 'Forward'  })  });"
+        }),
+        Showcase.ViewsItemContent.create({
+          title: 'Pointers: SC.HUGE_CONTROL_SIZE',
+          example: "SC.View.extend({  childViews: ['pointLeftButton', 'pointRightButton'],  pointLeftButton: SC.ButtonView.extend({  controlSize: SC.HUGE_CONTROL_SIZE,  layout: { width: 110, height: 30, centerX: -55, centerY: 0 },  themeName: 'point-left',  title: 'Back'  }),  pointRightButton: SC.ButtonView.extend({  controlSize: SC.HUGE_CONTROL_SIZE,  layout: { width: 110, height: 30, centerX: 55, centerY: 0 },  themeName: 'point-right',  title: 'Forward'  })  });"
+        }),
+        Showcase.ViewsItemContent.create({
+          title: 'Pointers: SC.JUMBO_CONTROL_SIZE',
+          example: "SC.View.extend({  childViews: ['pointLeftButton', 'pointRightButton'],  pointLeftButton: SC.ButtonView.extend({  controlSize: SC.JUMBO_CONTROL_SIZE,  layout: { width: 130, height: 44, centerX: -65, centerY: 0 },  themeName: 'point-left',  title: 'Back'  }),  pointRightButton: SC.ButtonView.extend({  controlSize: SC.JUMBO_CONTROL_SIZE,  layout: { width: 130, height: 44, centerX: 65, centerY: 0 },  themeName: 'point-right',  title: 'Forward'  })  });"
         })
       ]
     })

diff --git a/views/views_item_view.js b/views/views_item_view.js
@@ -24,7 +24,7 @@ Showcase.ViewsItemView = SC.View.extend({
     var owner = this.get('owner'),
         exampleHeight = owner.get('exampleHeight');
 
-    return { left: 60, top: 70, right: 60, height: exampleHeight }
+    return { left: 30, top: 70, right: 30, height: exampleHeight }
   }.property().cacheable(),
 
   /** @private */