Widget sizing

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

@@ -6,30 +6,41 @@
         cursor: grab;
     }
 
-    @nest .Sideboard & {
-        margin-left:    0;
-        margin-right:   0;
-        margin-top:     0;
-        width: 100%;
-        max-width: 100%;
-    }
 
     &.isDragging {
         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.333% - 1em);
+            max-width: calc(50% - 1em);
+        }
     }
 
-    @media (min-width: 90em) {
-        width: calc(33% - .825em);
-        max-width: calc(50% - 1em);
+    &.Widget--medium {
+        @media (min-width: 65em) {
+            width: calc(100% - 1em);
+        }
+
+        @media (min-width: 90em) {
+            width: calc(66.666% - 1em);
+            max-width: calc(100% - 1em);
+        }
     }
 
-    &.Widget-size-2 { width: 50%; }
-    &.Widget-size-3 { width: 100%; max-width: 100%;}
+    @nest .Sideboard & {
+        margin-left:    0;
+        margin-right:   0;
+        margin-top:     0;
+        width: 100%;
+        max-width: 100%;
+    }
 }
 
 .WidgetWrapper-removeButton {
@@ -56,3 +67,20 @@
         transform: scale(1);
     }
 }
+
+/* Widget Size Selector */
+
+.Widget-sizeSelector {
+    position: absolute;
+    display: none;
+    bottom: .5rem;
+    left: .5rem;
+    font-size: .75em;
+    box-shadow: 0 0 4px 0px rgba(0,0,0,1);
+    z-index: 1;
+
+    @nest .Main.drawer-is-open .Dashboard & {
+        display: block;
+    }
+
+}

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

@@ -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.js

@@ -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.reel/_widget.css

@@ -61,12 +61,12 @@
         right: 0;
         bottom: 0;
         border-radius: var(--widget-border-radius);
-        background: rgba(0,0,0,.75);
+        background: rgba(0,0,0,.5);
         transition: visibility .35s ease-in-out, opacity .35s ease-in-out;
-        z-index: 2;
+        z-index: 1;
     }
 
-    @nest .drawer-is-open .has-settings &:before {
+    @nest .drawer-is-open &:before {
         visibility: visible;
         opacity: 1;
     }
@@ -141,19 +141,19 @@
     }
 }
 
+/* Button */
+
 .Widget-info {
     position: absolute;
-    z-index: 10;
-    left: 1em;
-    bottom:  1em;
+    right:   .5em;
+    bottom:  .5em;
     visibility: hidden;
     opacity: 0;
     transition: visibility .35s ease-in-out, opacity .35s ease-in-out;
+    z-index: 1;
 
     @nest .drawer-is-open .has-settings & {
         visibility: visible;
         opacity: 1;
     }
 }
-
-

ui/drawer.reel/_drawer.css

@@ -122,3 +122,12 @@
         margin-right: 1em;
     }
 }
+
+/* Drawer Layout Button */
+
+.Drawer-layoutButton {
+
+    @nest .layout-has-changed & {
+        display: inline-block;
+    }
+}