From 1eab667e0c5297688360671a4f413df49dab4dbc Mon Sep 17 00:00:00 2001
From: Tyler Keating <tyler@7x7software.com>
Date: Mon, 20 Apr 2015 16:32:14 -0600
Subject: [PATCH] Added samples for the new themes at different control sizes.

---
 resources/views_page.js  | 24 ++++++++++++++++++++++++
 views/views_item_view.js |  2 +-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/resources/views_page.js b/resources/views_page.js
index 83c34ad..3eb6d75 100644
--- 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
index 169740d..05076d5 100644
--- 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 */