diff options
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 | ||
10 | exports.CSSPanelNew = Montage.create(Component, { | 10 | exports.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 | }, |
17 | _resizedHeight : { | ||
18 | value: null | ||
19 | }, | ||
20 | isResizing : { | ||
21 | value: null | ||