aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/style-sheets-view.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/style-sheets-view.reel')
-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
3 files changed, 114 insertions, 2 deletions
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
22 },
23 _height: {
24 value: null
25 },
26 height: {
27 get: function() {
28 return this._height;
29 },
30 set: function(val) {
31 if(this._height !== val) {
32 this._height = val;
33 this.needsDraw = true;
34 }
35 }
36 },
37
17 styleSheets : { 38 styleSheets : {
18 value: [] 39 value: []
19 }, 40 },
@@ -33,6 +54,7 @@ exports.StyleSheetsView = Montage.create(Component, {
33 _initView : { 54 _initView : {
34 value: false 55 value: false
35 }, 56 },
57
36 handleStyleSheetsReady : { 58 handleStyleSheetsReady : {
37 value: function(e) { 59 value: function(e) {
38 this._initView = this.needsDraw = true; 60 this._initView = this.needsDraw = true;
@@ -48,6 +70,30 @@ exports.StyleSheetsView = Montage.create(Component, {
48 this.styleSheets.push(e._event.detail); 70 this.styleSheets.push(e._event.detail);
49 } 71 }
50 }, 72 },
73 handleResizeStart: {
74 value:function(e) {
75 this.isResizing = true;
76 this.needsDraw = true;
77 }
78 },
79
80 handleResizeMove: {
81 value:function(e) {
82 this._resizedHeight = e._event.dY;
83 this.needsDraw = true;
84 }
85 },
86
87 handleResizeEnd: {
88 value: function(e) {
89 this.height += this._resizedHeight;
90 this._resizedHeight = 0;
91 this.isResizing = false;
92 this.needsDraw = true;
93 }
94 },
95
96
51 prepareForDraw : { 97 prepareForDraw : {
52 value: function() { 98 value: function() {
53 console.log("style sheet view - prepare for draw"); 99 console.log("style sheet view - prepare for draw");
@@ -63,6 +109,18 @@ exports.StyleSheetsView = Montage.create(Component, {
63 this.styleSheets = this.stylesController.userStyleSheets; 109 this.styleSheets = this.stylesController.userStyleSheets;
64 this._initView = false; 110 this._initView = false;
65 } 111 }
112
113 if(this.height) {
114 console.log("StyleSheetsView draw - resizing to", (this.height + this._resizedHeight) + "px");
115 this.styleSheetList.element.style.height = (this.height + this._resizedHeight) + "px";
116 }
117 }
118 },
119 didDraw: {
120 value: function() {
121 if(!this.isResizing) {
122