aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel
diff options
context:
space:
mode:
authorEric Guzman2012-04-23 22:37:34 -0700
committerEric Guzman2012-04-23 22:37:34 -0700
commit946fae3acf8ca9f384b662e40f406506e8b90ea7 (patch)
tree4b7afe0543a37f678ac1e12512bc9bd6315a40cd /js/panels/css-panel
parentcdd1189e349e2974681e2c451e861e5b0db570e4 (diff)
downloadninja-946fae3acf8ca9f384b662e40f406506e8b90ea7.tar.gz
CSSPanel - Resizer
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r--js/panels/css-panel/css-panel.reel/css-panel.css8
-rw-r--r--js/panels/css-panel/css-panel.reel/css-panel.html1
-rw-r--r--js/panels/css-panel/css-panel.reel/css-panel.js32
-rw-r--r--js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css30
-rw-r--r--js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html28
-rw-r--r--js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js58
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 @@
48 -webkit-box-flex: 0; 48 -webkit-box-flex: 0;
49} 49}
50 50
51/* ------------------
52 Resizer
53 ------------------ */
54 51
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 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
40<section id="container" class="css-panel"> 40<section id="container" class="css-panel">
41 <h3>Style Sheets</h3> 41 <h3>Style Sheets</h3>
42 <div id="style-sheet-view"></div> 42 <div id="style-sheet-view"></div>
43 <div data-montage-id="resizeBar" class="sub-panel-resizer"></div>
44 <h3>Styles</h3> 43 <h3>Styles</h3>
45 <div id="styles-view-container"></div> 44 <div id="styles-view-container"></div>
46</section> 45</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,
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 _resizedHeight : {
12 value: null
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 }
29 }
30 },
31 11
32 12
33 prepareForDraw : { 13 prepareForDraw : {
@@ -39,17 +19,7 @@ exports.CSSPanelNew = Montage.create(Component, {
39 value: function() { 19 value: function() {
40 console.log("css panel : draw. height: ", this.height); 20 console.log("css panel : draw. height: ", this.height);
41 21
42// if(this.height) { 22
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 }
53 } 23 }
54 } 24 }
55}); 25});
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 @@
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> 3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */ 5 </copyright> */
6
7.style-sheets-view-container {
8 position: relative;
9 overflow: hidden;
10}
11
6.style-sheets-view-container ul { 12.style-sheets-view-container ul {
7 margin: 0; 13 margin: 0;
8 padding: 0; 14 padding: 0;
15 min-height: 55px;
9} 16}
10.style-sheets-view-container li { 17.style-sheets-view-container li {
11 list-style-type: none; 18 list-style-type: none;
@@ -16,4 +23,27 @@
16} 23}
17.style-sheets-view-container li:last-child { 24.style-sheets-view-container li:last-child {
18 margin-bottom: 5px; 25 margin-bottom: 5px;
26}
27
28/* ---------------
29 Toolbar
30------------------- */
31
32.style-sheets-toolbar-container {
33 bottom: 0;
34 height: 24px;
35 position: absolute;
36 width: 100%;
37}
38
39/* ------------------
40 Resizer
41 ------------------ */
42
43.sub-panel-resizer {
44 bottom: 0;
45 cursor: row-resize;
46 height: 4px;
47 position: absolute;
48 width: 100%;
19} \ No newline at end of file 49} \ 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
14 "module" : "js/panels/css-panel/style-sheets-view.reel", 14 "module" : "js/panels/css-panel/style-sheets-view.reel",
15 "name" : "StyleSheetsView", 15 "name" : "StyleSheetsView",
16 "properties" : { 16 "properties" : {
17 "element" : {"#" : "style-sheets-view-container"} 17 "element" : {"#" : "style-sheets-view-container"},
18 "styleSheetList" : {"@" : "styleSheetList"}
18 } 19 }
19 }, 20 },
20 "arrayController" : { 21 "arrayController" : {
@@ -85,6 +86,28 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
85 "properties": { 86 "properties": {
86 "element": {"#": "style-sheets-toolbar"} 87 "element": {"#": "style-sheets-toolbar"}
87 } 88 }
89 },
90 "resizer": {
91 "module": "js/panels/resize-composer",
92 "name": "ResizeComposer",
93 "properties": {
94 "element": {"#": "resizeBar"},
95 "component": {"@": "owner"}
96 },
97 "listeners": [
98 {
99 "type": "resizeStart",
100 "listener": {"@": "owner"}
101 },
102 {
103 "type": "resizeMove",
104 "listener": {"@": "owner"}
105 },
106 {
107 "type": "resizeEnd",
108 "listener": {"@": "owner"}
109 }
110 ]
88 } 111 }
89 } 112 }
90 </script> 113 </script>
@@ -95,9 +118,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
95 <ul id="sheet-list"> 118 <ul id="sheet-list">
96 <li><div id="sheet-item"></div></li> 119 <li><div id="sheet-item"></div></li>
97 </ul> 120 </ul>
98 <div id="style-sheets-toolbar-container"> 121 <div id="style-sheets-toolbar-container" class="style-sheets-toolbar-container">
99 <div id="style-sheets-toolbar"></div> 122 <div id="style-sheets-toolbar"></div>
100 </div> 123 </div>
124 <div data-montage-id="resizeBar" class="sub-panel-resizer"></div>
101</div> 125</div>
102</body> 126</body>
103</html> \ No newline at end of file 127</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, {
14 showToolbar : { 14 showToolbar : {
15 value: false 15 value: false
16 }, 16