CSSPanel - Resizer

1 files changed, 58 insertions, 0 deletions

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() {
+            if(!this.isResizing) {
+                this.height = this.styleSheetList.element.offsetHeight;
+            }
         }
     }
 });
\ No newline at end of file