aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rwxr-xr-xjs/components/layout/bread-crumb.reel/bread-crumb.css10
-rwxr-xr-xjs/ninja.reel/ninja.html101
-rwxr-xr-xjs/ninja.reel/ninja.js120
-rwxr-xr-xjs/panels/Splitter.js2
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css4
-rw-r--r--js/panels/resize-composer.js34
-rwxr-xr-xjs/stage/stage-view.reel/stage-view.js12
7 files changed, 240 insertions, 43 deletions
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css
index dcfd471c..26a56b45 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.css
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.css
@@ -4,14 +4,20 @@
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 6
7.breadcrumbTrail{ 7.breadcrumbTrail {
8
8 background-color: #282828; 9 background-color: #282828;
9 border-style: double;
10 height: 26px; 10 height: 26px;
11 position:relative; 11 position:relative;
12 -webkit-box-flex: 0; 12 -webkit-box-flex: 0;
13} 13}
14 14
15.mainContentContainer > section.breadcrumbTrail {
16 border:0;
17 margin:0;
18 border-bottom:1px solid #000;
19 margin-bottom:1px;
20}
15.breadcrumbTrail button.nj-skinned { 21.breadcrumbTrail button.nj-skinned {
16 float: left; 22 float: left;
17 width: 60px; 23 width: 60px;
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index f9e1efdd..7b5a6e52 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -77,34 +77,83 @@
77 "name": "Splitter", 77 "name": "Splitter",
78 "properties": { 78 "properties": {
79 "element": {"#": "bottomSplitter"}, 79 "element": {"#": "bottomSplitter"},
80 "panel": {"#": "bottomPanelContainer"}, 80 "panel": {"@": "timeline"}
81 "resizeBar": {"#": "timelineResizer"}
82 } 81 }
83 }, 82 },
84 83
85 "resizer1": { 84 "resizer1": {
86 "module": "js/panels/Resizer", 85 "module": "js/panels/resize-composer",
87 "name": "Resizer", 86 "name": "ResizeComposer",
88 "properties": { 87 "properties": {
89 "element": {"#": "rightPanelResizer"}, 88 "element": {"#": "rightPanelResizer"},
90 "id": "rightPanelResizer", 89 "component": {"@": "owner"},
91 "panel": {"#": "rightPanelContainer"}, 90 "yAxis": false
92 "isVertical": false, 91 },
93 "redrawStage": true 92 "listeners": [
94 } 93 {
94 "type": "resizeStart",
95 "listener": {"@": "owner"}
96 },
97 {
98 "type": "resizeMove",
99 "listener": {"@": "owner"}
100 },
101 {
102 "type": "resizeEnd",
103 "listener": {"@": "owner"}
104 }
105 ]
95 }, 106 },
96 107
97 "resizer2": { 108 "resizer2": {
98 "module": "js/panels/Resizer", 109 "module": "js/panels/resize-composer",
99 "name": "Resizer", 110 "name": "ResizeComposer",
100 "properties": { 111 "properties": {
101 "element": {"#": "timelineResizer"}, 112 "element": {"#": "timelineResizer"},
102 "id": "timelineResizer", 113 "component": {"@": "owner"},
103 "panel": {"#": "bottomPanelContainer"}, 114 "xAxis": false
104 "isVertical": true, 115 },
105 "isInversed": true, 116 "listeners": [
106 "redrawStage": true 117 {
107 } 118 "type": "resizeStart",
119 "listener": {"@": "owner"}
120 },
121 {
122 "type": "resizeMove",
123 "listener": {"@": "owner"}
124 },
125 {
126 "type": "resizeEnd",
127 "listener": {"@": "owner"}
128 }
129 ]
130 },
131
132 "Resizer": {
133 "module": "js/panels/resize-composer",
134 "name": "ResizeComposer",
135 "properties": {
136 "element": {"#": "pasteboardResizer"},
137 "component": {"@": "owner"}
138 },
139 "listeners": [
140 {
141 "type": "resizeStart",
142 "listener": {"@": "owner"}
143 },
144 {
145 "type": "resizeMove",
146 "listener": {"@": "owner"}
147 },
148 {
149 "type": "resizeEnd",
150 "listener": {"@": "owner"}
151 },
152 {
153 "type": "resizeReset",
154 "listener": {"@": "owner"}
155 }
156 ]
108 }, 157 },
109 158
110 "stageMode": { 159 "stageMode": {
@@ -321,7 +370,10 @@
321 "documentBar": {"@": "documentBar"}, 370 "documentBar": {"@": "documentBar"},
322 "ioMediator": {"@": "ioMediator"}, 371 "ioMediator": {"@": "ioMediator"},
323 "timeline": {"@": "timeline"}, 372 "timeline": {"@": "timeline"},
324 "mainMenuController": {"@": "mainMenuController"} 373 "mainMenuController": {"@": "mainMenuController"},
374 "rightPanelContainer": {"#": "rightPanelContainer" },
375 "panelSplitter": {"@": "splitter3"},
376 "timelineSplitter": {"@": "splitter4"}
325 } 377 }
326 } 378 }
327 } 379 }
@@ -374,7 +426,9 @@
374 <section id="mainContent"> 426 <section id="mainContent">
375 <section id="rulerLeft"></section> 427 <section id="rulerLeft"></section>
376 <section id="stageAndScenesContainer"></section> 428 <section id="stageAndScenesContainer"></section>
429 <section id="pasteboardResizer" class="pasteboardResizer resizeBar"></section>
377 </section> 430 </section>
431 <section id="timelineResizer" class="timelineResizer resizeBar"></section>
378 <section id="stateBar"> 432 <section id="stateBar">
379 <section id="documentBarContainer"> 433 <section id="documentBarContainer">
380 <div id="documentBar" class="documentBar"><a href="#">HTML</a></div> 434 <div id="documentBar" class="documentBar"><a href="#">HTML</a></div>
@@ -382,20 +436,13 @@
382 </section> 436 </section>
383 437
384 <section id="breadCrumbComponent"></section> 438 <section id="breadCrumbComponent"></section>
385 439 <div id="timelinePanelComponent" data-montage-id="timelinePanel" class="timelinePanel"></div>
386 <section id="timelineResizer" class="timelineResizer resizeBar"></section>
387
388 <section id="bottomPanelContainer" class="panelContainer">
389 <section id="timelinePanel" class="panel">
390 <div id="timelinePanelComponent"></div>
391 </section>
392 </section>
393 </section> 440 </section>
394 </section> 441 </section>
395 442
396 <section data-montage-id="rightPanelResizer" class="rightPanelResizer resizeBar"></section> 443 <section data-montage-id="rightPanelResizer" class="rightPanelResizer resizeBar"></section>
397 444
398 <section id="rightPanelContainer" class="rightPanelContainer panelContainer"> 445 <section id="rightPanelContainer" data-montage-id="rightPanelContainer" class="rightPanelContainer panelContainer">
399 <section id="rightPanelContent" class="rightPanelContent"> 446 <section id="rightPanelContent" class="rightPanelContent">
400 </section> 447 </section>
401 </section> 448 </section>
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index c76c7d46..ca094936 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -23,6 +23,93 @@ exports.Ninja = Montage.create(Component, {
23 value: null 23 value: null
24 }, 24 },
25 25
26 _isResizing: {
27 value: false
28 },
29 _resizedHeight : {
30 value: 0
31 },
32 _height: {
33 value: null
34 },
35
36 height: {
37 get: function() {
38 return this._height;
39 },
40 set: function(val) {
41 if(this._height != val) {
42 this._height = val;
43 this.needsDraw = true;
44 }
45
46 }
47 },
48
49 _resizedWidth : {
50 value: 0
51 },
52 _width: {
53 value: null
54 },
55
56 width: {
57 get: function() {
58 return this._width;