CSSPanel - Resizer

6 files changed, 115 insertions, 42 deletions

diff --git a/js/panels/css-panel/css-panel.reel/css-panel.css b/js/panels/css-panel/css-panel.reel/css-panel.css
index e525c08f..7bcfbc1a 100644
--- a/js/panels/css-panel/css-panel.reel/css-panel.css
+++ b/js/panels/css-panel/css-panel.reel/css-panel.css
@@ -48,12 +48,4 @@
     -webkit-box-flex: 0;
 }
 
-/* ------------------
-   Resizer
-   ------------------ */
 
-.sub-panel-resizer {
-    width: 100%;
-    height: 3px;
-    background-color: red;
-}
diff --git a/js/panels/css-panel/css-panel.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html
index 4be4d6dd..8ee56086 100644
--- a/js/panels/css-panel/css-panel.reel/css-panel.html
+++ b/js/panels/css-panel/css-panel.reel/css-panel.html
@@ -40,7 +40,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 <section id="container" class="css-panel">
     <h3>Style Sheets</h3>
     <div id="style-sheet-view"></div>
-    <div data-montage-id="resizeBar" class="sub-panel-resizer"></div>
     <h3>Styles</h3>
     <div id="styles-view-container"></div>
 </section>
diff --git a/js/panels/css-panel/css-panel.reel/css-panel.js b/js/panels/css-panel/css-panel.reel/css-panel.js
index 21a466d5..b6e9613b 100644
--- a/js/panels/css-panel/css-panel.reel/css-panel.js
+++ b/js/panels/css-panel/css-panel.reel/css-panel.js
@@ -8,26 +8,6 @@ var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component;
 
 exports.CSSPanelNew = Montage.create(Component, {
-    _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;
-            }
-        }
-    },
 
 
     prepareForDraw : {
@@ -39,17 +19,7 @@ exports.CSSPanelNew = Montage.create(Component, {
         value: function() {
             console.log("css panel : draw. height: ", this.height);
 
-//            if(this.height) {
-//                console.log("CSS Panel draw - resizing to", (this.height + this._resizedHeight) + "px");
-//                this.styleSheetsView.element.style.height = (this.height + this._resizedHeight) + "px";
-//            }
-        }
-    },
-    didDraw: {
-        value: function() {
-            if(!this.isResizing) {
-                //this.height = this.element.offsetHeight;
-            }
+
         }
     }
 });
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 : {