CSS Panel - Add stub for resizer

3 files changed, 47 insertions, 6 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 6d296a8e..e525c08f 100644
--- a/js/panels/css-panel/css-panel.reel/css-panel.css
+++ b/js/panels/css-panel/css-panel.reel/css-panel.css
@@ -47,3 +47,13 @@
     top: 8px;
     -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 61ec82bf..4be4d6dd 100644
--- a/js/panels/css-panel/css-panel.reel/css-panel.html
+++ b/js/panels/css-panel/css-panel.reel/css-panel.html
@@ -15,10 +15,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "name" : "CSSPanelNew",
                 "properties" : {
                     "element" : {"#" : "container"},
-                    "controller": {"@": "cssPanelController"}
+                    "styleSheetsView": {"@": "styleSheetsView"}
                 }
             },
-            "styleSheetView": {
+
+            "styleSheetsView": {
                 "module" : "js/panels/css-panel/style-sheets-view.reel",
                 "name": "StyleSheetsView",
                 "properties": {
@@ -39,6 +40,7 @@ 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 228e91f6..21a466d5 100644
--- a/js/panels/css-panel/css-panel.reel/css-panel.js
+++ b/js/panels/css-panel/css-panel.reel/css-panel.js
@@ -8,11 +8,28 @@ var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component;
 
 exports.CSSPanelNew = Montage.create(Component, {
-    templateDidLoad : {
-        value: function() {
-            console.log("css panel : template did load");
+    _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 : {
         value: function() {
             console.log("css panel : prepare for draw");
@@ -20,7 +37,19 @@ exports.CSSPanelNew = Montage.create(Component, {
     },
     draw : {
         value: function() {
-            console.log("css panel : draw");
+            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;
+            }
         }
     }
 });