aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorEric Guzman2012-04-23 11:49:06 -0700
committerEric Guzman2012-04-23 11:49:06 -0700
commit97f21076db2603a1437f8bade3d9713433d473fe (patch)
tree8e9011978d03580a020fa103bf4854514ad375b1 /js
parent4cefebd99813f05713deb2f72bba0a035dfcb508 (diff)
downloadninja-97f21076db2603a1437f8bade3d9713433d473fe.tar.gz
CSS Panel - Add stub for resizer
Diffstat (limited to 'js')
-rw-r--r--js/panels/css-panel/css-panel.reel/css-panel.css10
-rw-r--r--js/panels/css-panel/css-panel.reel/css-panel.html6
-rw-r--r--js/panels/css-panel/css-panel.reel/css-panel.js37
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 @@
47 top: 8px; 47 top: 8px;
48 -webkit-box-flex: 0; 48 -webkit-box-flex: 0;
49} 49}
50
51/* ------------------
52 Resizer
53 ------------------ */
54
55.sub-panel-resizer {
56 width: 100%;
57 height: 3px;
58 background-color: red;
59}
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
15 "name" : "CSSPanelNew", 15 "name" : "CSSPanelNew",
16 "properties" : { 16 "properties" : {
17 "element" : {"#" : "container"}, 17 "element" : {"#" : "container"},
18 "controller": {"@": "cssPanelController"} 18 "styleSheetsView": {"@": "styleSheetsView"}
19 } 19 }
20 }, 20 },
21 "styleSheetView": { 21
22 "styleSheetsView": {
22 "module" : "js/panels/css-panel/style-sheets-view.reel", 23 "module" : "js/panels/css-panel/style-sheets-view.reel",
23 "name": "StyleSheetsView", 24 "name": "StyleSheetsView",
24 "properties": { 25 "properties": {
@@ -39,6 +40,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
39<section id="container" class="css-panel"> 40<section id="container" class="css-panel">
40 <h3>Style Sheets</h3> 41 <h3>Style Sheets</h3>
41 <div id="style-sheet-view"></div> 42 <div id="style-sheet-view"></div>
43 <div data-montage-id="resizeBar" class="sub-panel-resizer"></div>
42 <h3>Styles</h3> 44 <h3>Styles</h3>
43 <div id="styles-view-container"></div> 45 <div id="styles-view-container"></div>
44</section> 46</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,
8 Component = require("montage/ui/component").Component; 8 Component = require("montage/ui/component").Component;
9 9
10exports.CSSPanelNew = Montage.create(Component, { 10exports.CSSPanelNew = Montage.create(Component, {
11 templateDidLoad : { 11 _resizedHeight : {
12 value: function() { 12 value: null
13 console.log("css panel : template did load"); 13 },
14 isResizing : {
15 value: null
16 },
17 _height: {
18 value: null
19 },
20 height: {
21 get: function() {
22 return this._height;
23 },
24 set: function(val) {
25 if(this._height !== val) {
26 this._height = val;
27 this.needsDraw = true;
28 }
14 } 29 }
15 }, 30 },
31
32
16 prepareForDraw : { 33 prepareForDraw : {
17 value: function() { 34 value: function() {
18 console.log("css panel : prepare for draw"); 35 console.log("css panel : prepare for draw");
@@ -20,7 +37,19 @@ exports.CSSPanelNew = Montage.create(Component, {
20 }, 37 },
21 draw : { 38 draw : {
22 value: function() { 39 value: function() {
23 console.log("css panel : draw"); 40 console.log("css panel : draw. height: ", this.height);
41
42// if(this.height) {
43// console.log("CSS Panel draw - resizing to", (this.height + this._resizedHeight) + "px");
44// this.styleSheetsView.element.style.height = (this.height + this._resizedHeight) + "px";
45// }
46 }
47 },
48 didDraw: {
49 value: function() {
50 if(!this.isResizing) {
51 //this.height = this.element.offsetHeight;
52 }
24 } 53 }
25 } 54 }
26}); 55});