CSSPanel - Resizer

3 files changed, 114 insertions, 2 deletions

diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css
index dfb67d13..7a46e387 100644
--- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css
+++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css
@@ -3,9 +3,16 @@
  No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
+
+.style-sheets-view-container {
+    position: relative;
+    overflow: hidden;
+}
+
 .style-sheets-view-container ul {
     margin: 0;
     padding: 0;
+    min-height: 55px;
 }
 .style-sheets-view-container li {
     list-style-type: none;
@@ -16,4 +23,27 @@
 }
 .style-sheets-view-container li:last-child {
     margin-bottom: 5px;
+}
+
+/* ---------------
+   Toolbar
+------------------- */
+
+.style-sheets-toolbar-container {
+    bottom: 0;
+    height: 24px;
+    position: absolute;
+    width: 100%;
+}
+
+/* ------------------
+   Resizer
+   ------------------ */
+
+.sub-panel-resizer {
+    bottom: 0;
+    cursor: row-resize;
+    height: 4px;
+    position: absolute;
+    width: 100%;
 }
\ No newline at end of file
diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html
index 092b189f..09e2e3ce 100644
--- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html
+++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html
@@ -14,7 +14,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "module" : "js/panels/css-panel/style-sheets-view.reel",
                 "name" : "StyleSheetsView",
                 "properties" : {
-                    "element" : {"#" : "style-sheets-view-container"}
+                    "element" : {"#" : "style-sheets-view-container"},
+                    "styleSheetList" : {"@" : "styleSheetList"}
                 }
             },
             "arrayController" : {
@@ -85,6 +86,28 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "properties": {
                     "element": {"#": "style-sheets-toolbar"}
                 }
+            },
+            "resizer": {
+                "module": "js/panels/resize-composer",
+                "name": "ResizeComposer",
+                "properties": {
+                    "element": {"#": "resizeBar"},
+                    "component": {"@": "owner"}
+                },
+                "listeners": [
+                    {
+                        "type": "resizeStart",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeMove",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeEnd",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             }
         }
     </script>
@@ -95,9 +118,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
     <ul id="sheet-list">
         <li><div id="sheet-item"></div></li>
     </ul>
-    <div id="style-sheets-toolbar-container">
+    <div id="style-sheets-toolbar-container" class="style-sheets-toolbar-container">
         <div id="style-sheets-toolbar"></div>
     </div>
+    <div data-montage-id="resizeBar" class="sub-panel-resizer"></div>
 </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
index b1315311..95adddd0 100644
--- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
+++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
@@ -14,6 +14,27 @@ exports.StyleSheetsView = Montage.create(Component, {
     showToolbar : {
         value: false
     },
+    _resizedHeight : {
+        value: null
+    },
+    isResizing : {
+        value: null
+    },
+    _height: {
+        value: null
+    },
+    height: {
+        get: function() {
+            return this._height;
+        },
+        set: function(val) {
+            if(this._height !== val) {
+                this._height = val;
+                this.needsDraw = true;
+            }
+        }
+    },
+
     styleSheets : {
         value: []
     },
@@ -33,6 +54,7 @@ exports.StyleSheetsView = Montage.create(Component, {
     _initView : {
         value: false
     },
+
     handleStyleSheetsReady : {
         value: function(e) {
             this._initView = this.needsDraw = true;
@@ -48,6 +70,30 @@ exports.StyleSheetsView = Montage.create(Component, {
             this.styleSheets.push(e._event.detail);
         }
     },
+    handleResizeStart: {
+        value:function(e) {
+            this.isResizing = true;
+            this.needsDraw = true;
+        }
+    },
+
+    handleResizeMove: {
+        value:function(e) {
+            this._resizedHeight = e._event.dY;
+            this.needsDraw = true;
+        }
+    },
+
+    handleResizeEnd: {
+        value: function(e) {
+            this.height += this._resizedHeight;
+            this._resizedHeight = 0;
+            this.isResizing = false;
+            this.needsDraw = true;
+        }
+    },
+
+
     prepareForDraw : {
         value: function() {
             console.log("style sheet view - prepare for draw");
@@ -63,6 +109,18 @@ exports.StyleSheetsView = Montage.create(Component, {
                 this.styleSheets = this.stylesController.userStyleSheets;
                 this._initView = false;
             }
+
+            if(this.height) {
+                console.log("StyleSheetsView draw - resizing to", (this.height + this._resizedHeight) + "px");
+                this.styleSheetList.element.style.height = (this.height + this._resizedHeight) + "px";
+            }
+        }
+    },
+    didDraw: {
+        value: function() {