initial widget sizing classes

Author: joshuarule

ui/dashboard/widgets/widget.reel/_widget.css

@@ -19,6 +19,18 @@
     @nest .drawer-is-open &:hover {
         box-shadow: 0px 0px 2px 2px rgba(43,156,216,1);
     }
+
+    &.small {
+        background: green;
+    }
+
+    &.medium {
+        background: orange;
+    }
+
+    &.large {
+        background: purple;
+    }
 }
 
 .Widget-header {

ui/dashboard/widgets/widget.reel/widget.css

@@ -6,11 +6,17 @@
     {
         "owner": {
             "properties": {
-                "element": {"#": "owner"}
+                "element": {"#": "owner"},
+                "sizeOptions": [
+                    {"value": "small"},
+                    {"value": "medium"},
+                    {"value": "large"}
+                ]
             },
             "bindings": {
                 "classList.has('flip')": {"<-": "this.isFlipped"},
-                "classList.has('has-settings')": {"<-": "@owner.hasSettings"}
+                "classList.has('has-settings')": {"<-": "@owner.hasSettings"},
+                "size": {"<-": "@sizeSelector.selectedValue"}
             }
         },
 
@@ -46,6 +52,17 @@
             "bindings": {
                 "value": {"<-": "'WidgetName-Settings'"}
             }
+        },
+
+        "sizeSelector": {
+            "prototype": "blue-shark/ui/select.reel",
+            "properties": {
+                "element": {"#": "sizeSelector"},
+                "selectedValue": "medium"
+            },
+            "bindings": {
+                "options": {"<-": "@owner.sizeOptions.map{value}"}
+            }
         }
     }
     </script>
@@ -59,6 +76,7 @@
                     <div data-param="widget-content" class="Widget-content-front"></div>
                 </div>
                 <div data-montage-id="infoWidgetButton" class="Widget-info Button--primary"></div>
+                <div data-montage-id="sizeSelector" class="Widget-sizeSelector"></div>
             </div>
             <div class="Widget-back">
                 <div data-montage-id="settingsTitle" class="Widget-header"></div>

ui/dashboard/widgets/widget.reel/widget.html

@@ -5,6 +5,22 @@ var Component = require("montage/ui/component").Component;
  * @extends Component
  */
 exports.Widget = Component.specialize({
+    _size: {
+        value: null
+    },
+
+    size: {
+        get: function () {
+            return this._size;
+        },
+        set: function (option) {
+            if(this._size !== option) {
+                this.classList.remove("is-" + this._size);
+                this.classList.add("is-" + option);
+                this._size = option;
+            }
+        }
+    },
 
     isFlipped: {
         value: false