wip widget size classes

Author: joshuarule

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

@@ -18,18 +18,28 @@
         opacity: .75;
     }
 
-    @media (min-width: 65em) {
-        width: calc(50% - 1em);
-        max-width: 100%;
-    }
+    &.Widget--small {
+        @media (min-width: 65em) {
+            width: calc(50% - 1em);
+            max-width: 100%;
+        }
 
-    @media (min-width: 90em) {
-        width: calc(33% - .825em);
-        max-width: calc(50% - 1em);
+        @media (min-width: 90em) {
+            width: calc(33.333% - 1em);
+            max-width: calc(50% - 1em);
+        }
     }
 
-    &.Widget-size-2 { width: 50%; }
-    &.Widget-size-3 { width: 100%; max-width: 100%;}
+    &.Widget--medium {
+        @media (min-width: 65em) {
+            width: calc(100% - 1em);
+        }
+
+        @media (min-width: 90em) {
+            width: calc(66.666% - 1em);
+            max-width: calc(100% - 1em);
+        }
+    }
 }
 
 .WidgetWrapper-removeButton {
@@ -56,3 +66,12 @@
         transform: scale(1);
     }
 }
+
+/* Widget Size Selector */
+
+.Widget-sizeSelector {
+    position: absolute;
+    top: .5rem;
+    right: 2rem;
+    font-size: .75em;
+}

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

@@ -6,7 +6,12 @@
     {
         "owner": {
             "properties": {
-                "element": {"#": "owner"}
+                "element": {"#": "owner"},
+                "sizeOptions": [
+                    {"value": "small", "label": "small"},
+                    {"value": "medium", "label": "medium"},
+                    {"value": "large", "label": "large"}
+                ]
             }
         },
 
@@ -20,12 +25,21 @@
                 "object": {"<-": "@owner.object"}
             }
         },
-
         "removeWidgetButton": {
             "prototype": "montage/ui/button.reel",
             "properties": {
                 "element": {"#": "removeButton"}
             }
+        },
+        "sizeSelector": {
+            "prototype": "blue-shark/ui/tabs.reel",
+            "properties": {
+                "element": {"#": "sizeSelector"}
+            },
+            "bindings": {
+                "options": {"<-": "@owner.sizeOptions"},
+                "selection": {"<->": "@owner.size"}
+            }
         }
     }
     </script>
@@ -36,6 +50,7 @@
         <button data-montage-id="removeButton" class="WidgetWrapper-removeButton">
             <svg><use xlink:href="#i-trashCan"/></svg>
         </button>
+        <div data-montage-id="sizeSelector" class="Widget-sizeSelector"></div>
     </div>
 </body>
 </html>

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

@@ -11,6 +11,31 @@ exports.WidgetWrapper = AbstractDraggableComponent.specialize(/** @lends WidgetW
 
     _placeHolderStrategy: {
         value: "remove"
+    },
+
+    _size: {
+        value: null
+    },
+
+    size: {
+        get: function () {
+            return this._size;
+        },
+        set: function (option) {
+            if(this._size !== option) {
+                this.classList.remove("Widget--" + this._size);
+                this.classList.add("Widget--" + option);
+                this._size = option;
+            }
+        }
+    },
+
+    enterDocument: {
+        value: function (isFirstTime) {
+            if(isFirstTime) {
+                this.size = "small";
+            }
+        }
     }
 
 });

ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.js

@@ -19,18 +19,6 @@
     @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 {
@@ -163,5 +151,3 @@
         opacity: 1;
     }
 }
-
-

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

@@ -6,17 +6,11 @@
     {
         "owner": {
             "properties": {
-                "element": {"#": "owner"},
-                "sizeOptions": [
-                    {"value": "small"},
-                    {"value": "medium"},
-                    {"value": "large"}
-                ]
+                "element": {"#": "owner"}
             },
             "bindings": {
                 "classList.has('flip')": {"<-": "this.isFlipped"},
-                "classList.has('has-settings')": {"<-": "@owner.hasSettings"},
-                "size": {"<-": "@sizeSelector.selectedValue"}
+                "classList.has('has-settings')": {"<-": "@owner.hasSettings"}
             }
         },
 
@@ -52,17 +46,6 @@
             "bindings": {
                 "value": {"<-": "'WidgetName-Settings'"}
             }
-        },
-
-        "sizeSelector": {
-            "prototype": "blue-shark/ui/select.reel",
-            "properties": {
-                "element": {"#": "sizeSelector"},
-                "selectedValue": "medium"
-            },
-            "bindings": {
-                "options": {"<-": "@owner.sizeOptions.map{value}"}
-            }
         }
     }
     </script>
@@ -76,7 +59,6 @@
                     <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.css

@@ -5,22 +5,6 @@ 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