aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js31
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css75
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss5
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js690
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js16
5 files changed, 607 insertions, 210 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b0f6d220..4a737490 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -133,6 +133,20 @@ var Layer = exports.Layer = Montage.create(Component, {
133 } 133 }
134 }, 134 },
135 135
136 _stageElement: {
137 value: null
138 },
139
140 stageElement: {
141 get: function() {
142 return this._stageElement;
143 },
144 set: function(newVal) {
145 this._stageElement = newVal;
146 this.layerData.stageElement = newVal;
147 }
148 },
149
136 150
137 _elementsList : { 151 _elementsList : {
138 value: [] 152 value: []
@@ -398,6 +412,7 @@ var Layer = exports.Layer = Montage.create(Component, {
398 412
399 this.layerName = this.layerData.layerName; 413 this.layerName = this.layerData.layerName;
400 this.layerID = this.layerData.layerID; 414 this.layerID = this.layerData.layerID;
415 this.stageElement = this.layerData.stageElement
401 this.arrLayerStyles = this.layerData.arrLayerStyles; 416 this.arrLayerStyles = this.layerData.arrLayerStyles;
402 this.isMainCollapsed = this.layerData.isMainCollapsed; 417 this.isMainCollapsed = this.layerData.isMainCollapsed;
403 this.isPositionCollapsed = this.layerData.isPositionCollapsed; 418 this.isPositionCollapsed = this.layerData.isPositionCollapsed;
@@ -494,10 +509,14 @@ var Layer = exports.Layer = Montage.create(Component, {
494 }, 509 },
495 draw: { 510 draw: {
496 value: function() { 511 value: function() {
497 if (this.isSelected) { 512 var boolHasClass = this.element.classList.contains("layerSelected");
498 this.element.classList.add("selected"); 513 if (this.isSelected && !boolHasClass) {
499 } else { 514 //console.log('Layer.draw, adding selection for layer ', this.layerName)
500 this.element.classList.remove("selected"); 515 this.element.classList.add("layerSelected");
516 }
517 if (!this.isSelected && boolHasClass) {
518 //console.log('Layer.draw, removing selection for layer ', this.layerName)
519 this.element.classList.remove("layerSelected");
501 } 520 }
502 } 521 }
503 }, 522 },
@@ -674,7 +693,7 @@ var Layer = exports.Layer = Montage.create(Component, {
674 this.dynamicLayerName.value = this._layerEditable.value; 693 this.dynamicLayerName.value = this._layerEditable.value;
675 this.needsDraw = true; 694 this.needsDraw = true;
676 this.application.ninja.documentController.activeDocument.needsSave = true; 695 this.application.ninja.documentController.activeDocument.needsSave = true;
677 this.layerData.elementsList[0].setAttribute("id",this.dynamicLayerName.value); 696 this.layerData.stageElement.setAttribute("id",this.dynamicLayerName.value);
678 } 697 }
679 }, 698 },
680 handleAddStyleClick: { 699 handleAddStyleClick: {
@@ -786,7 +805,7 @@ var Layer = exports.Layer = Montage.create(Component, {
786 }, 805 },
787 handleDragstart: { 806 handleDragstart: {
788 value: function(event) { 807 value: function(event) {
789 this.parentComponent.parentComponent.dragLayerID = this.layerID; 808 //this.parentComponent.parentComponent.dragLayerID = this.layerID;
790 event.dataTransfer.setData('Text', 'Layer'); 809 event.dataTransfer.setData('Text', 'Layer');
791 this.parentComponent.parentComponent.draggingType = "layer"; 810 this.parentComponent.parentComponent.draggingType = "layer";
792 } 811 }
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
index 3648fda5..788a786e 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -71,26 +71,27 @@
71} 71}
72 72
73/******************************************/ 73/******************************************/
74/* line 77, ../scss/Layer.scss */ 74/* line 78, ../scss/Layer.scss */
75.container-layer { 75.container-layer,
76.container-layer.selected {
76 background-color: #474747; 77 background-color: #474747;
77 color: white; 78 color: white;
78 font-size: 12px; 79 font-size: 12px;
79 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); 80 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
80} 81}
81 82
82/* line 83, ../scss/Layer.scss */ 83/* line 84, ../scss/Layer.scss */
83.selected .container-layer { 84.selected .container-layer {
84 background-color: #474747; 85 background-color: #474747;
85} 86}
86 87
87/* line 86, ../scss/Layer.scss */ 88/* line 87, ../scss/Layer.scss */
88.selected .container-layer .label-layer { 89.selected .container-layer .label-layer {
89 background-color: #b2b2b2; 90 background-color: #b2b2b2;
90 color: #242424; 91 color: #242424;
91} 92}
92 93
93/* line 91, ../scss/Layer.scss */ 94/* line 92, ../scss/Layer.scss */
94.userlayers .collapsible-label { 95.userlayers .collapsible-label {
95 display: block; 96 display: block;
96 height: 21px; 97 height: 21px;
@@ -103,32 +104,32 @@
103 text-overflow: ellipsis; 104 text-overflow: ellipsis;
104} 105}
105 106
106/* line 103, ../scss/Layer.scss */ 107/* line 104, ../scss/Layer.scss */
107.userlayers .layer-tag { 108.userlayers .layer-tag {
108 position: absolute; 109 position: absolute;
109 top: 3px; 110 top: 3px;
110 left: 20px; 111 left: 20px;
111} 112}
112 113
113/* line 110, ../scss/Layer.scss */ 114/* line 111, ../scss/Layer.scss */
114.layerSelected .label-layer { 115.layerSelected .label-layer {
115 background-color: #b2b2b2; 116 background-color: #b2b2b2;
116 color: #242424; 117 color: #242424;
117} 118}
118 119
119/* line 114, ../scss/Layer.scss */ 120/* line 115, ../scss/Layer.scss */
120.content-layer { 121.content-layer {
121 background-color: #474747; 122 background-color: #474747;
122 color: white; 123 color: white;
123} 124}
124 125
125/* line 118, ../scss/Layer.scss */ 126/* line 119, ../scss/Layer.scss */
126.content-layer .collapsible-label { 127.content-layer .collapsible-label {
127 background-position: 14px 5px; 128 background-position: 14px 5px;
128 border-width: 0px; 129 border-width: 0px;
129} 130}
130 131
131/* line 126, ../scss/Layer.scss */ 132/* line 127, ../scss/Layer.scss */
132.label-layer, 133.label-layer,
133.label-position, 134.label-position,
134.label-transform, 135.label-transform,
@@ -139,20 +140,20 @@
139 cursor: pointer; 140 cursor: pointer;
140} 141}
141 142
142/* line 134, ../scss/Layer.scss */ 143/* line 135, ../scss/Layer.scss */
143.content-layer .collapsible-label, 144.content-layer .collapsible-label,
144.content-layer .collapsible-content, 145.content-layer .collapsible-content,
145.content-layer .layer-tag { 146.content-layer .layer-tag {
146 font-size: 11px; 147 font-size: 11px;
147} 148}
148 149
149/* line 141, ../scss/Layer.scss */ 150/* line 142, ../scss/Layer.scss */
150.label-layer .collapsible-label br, 151.label-layer .collapsible-label br,
151.content-style .editable br { 152.content-style .editable br {
152 display: none; 153 display: none;
153} 154}
154 155
155/* line 145, ../scss/Layer.scss */ 156/* line 146, ../scss/Layer.scss */
156.collapsible-clicker { 157.collapsible-clicker {
157 position: absolute; 158 position: absolute;
158 width: 10px; 159 width: 10px;
@@ -165,23 +166,23 @@
165 background-repeat: no-repeat; 166 background-repeat: no-repeat;
166} 167}
167 168
168/* line 156, ../scss/Layer.scss */ 169/* line 157, ../scss/Layer.scss */
169.collapsible-clicker.collapsible-collapsed { 170.collapsible-clicker.collapsible-collapsed {
170 background-image: url(../images/icon-collapsed.png); 171 background-image: url(../images/icon-collapsed.png);
171} 172}
172 173
173/* line 159, ../scss/Layer.scss */ 174/* line 160, ../scss/Layer.scss */
174.collapsible-content .collapsible-clicker { 175.collapsible-content .collapsible-clicker {
175 left: 12px; 176 left: 12px;
176} 177}
177 178