aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorKruti Shah2012-07-16 16:27:58 -0700
committerKruti Shah2012-07-16 16:27:58 -0700
commitcdcc677c827b65e3c689d4207c0117f94e4d6d57 (patch)
treeb5bdfe71a60840a351bafff699ba819e40525a23 /js/panels/Timeline
parentec15c5ed111f8d2608941c2ce86fb4b6f68117a0 (diff)
downloadninja-cdcc677c827b65e3c689d4207c0117f94e4d6d57.tar.gz
Styling of Zoom Slider + Grid Cut off limit taken care of + Hot text Bug (left,top,width,height) changing it now changes the element on stage
Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js26
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html2
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js18
-rwxr-xr-xjs/panels/Timeline/TimelinePanel.reel/images/knob.pngbin0 -> 1036 bytes
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss23
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js4
6 files changed, 52 insertions, 21 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 291e3416..c10731a3 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -1071,105 +1071,89 @@ var Layer = exports.Layer = Montage.create(Component, {
1071 handleLeftChange: { 1071 handleLeftChange: {
1072 value: function(event) { 1072 value: function(event) {
1073 var prevPosition; 1073 var prevPosition;
1074 if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){ 1074
1075 if(!event.wasSetByCode) { 1075 if(!event.wasSetByCode) {
1076 if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; 1076 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
1077 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "timeline", prevPosition); 1077 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "timeline", prevPosition);
1078 this.savedPosition = null; 1078 this.savedPosition = null;
1079 } 1079 }
1080 1080
1081 } 1081
1082 } 1082 }
1083 }, 1083 },
1084 1084
1085 handleTopChange: { 1085 handleTopChange: {
1086 value: function(event) { 1086 value: function(event) {
1087 var prevPosition; 1087 var prevPosition;
1088 if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){
1089 if(!event.wasSetByCode) { 1088 if(!event.wasSetByCode) {
1090 if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; 1089 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
1091 1090
1092 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "timeline", prevPosition); 1091 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "timeline", prevPosition);
1093 this.savedPosition = null; 1092 this.savedPosition = null;
1094 } 1093 }
1095 } 1094
1096 } 1095 }
1097 }, 1096 },
1098 1097
1099 handleWidthChange:{ 1098 handleWidthChange:{
1100 value: function(event) { 1099 value: function(event) {
1101 var prevPosition; 1100 var prevPosition;
1102 if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){ 1101
1103 if(!event.wasSetByCode) { 1102 if(!event.wasSetByCode) {
1104 if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; 1103 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
1105 1104
1106 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline", prevPosition); 1105 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline", prevPosition);
1107 this.savedPosition = null; 1106 this.savedPosition = null;
1108 } 1107 }
1109 }
1110 } 1108 }
1111 }, 1109 },
1112 1110
1113 handleHeightChange:{ 1111 handleHeightChange:{
1114 value: function(event) { 1112 value: function(event) {
1115 var prevPosition; 1113 var prevPosition;
1116 if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){ 1114
1117 if(!event.wasSetByCode) { 1115 if(!event.wasSetByCode) {
1118 if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; 1116 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
1119 1117
1120 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "timeline", prevPosition); 1118 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "timeline", prevPosition);
1121 this.savedPosition = null; 1119 this.savedPosition = null;
1122 } 1120 }
1123 }
1124 } 1121 }
1125 }, 1122 },
1126 1123
1127 handleLeftChanging: { 1124 handleLeftChanging: {
1128 value: function(event) { 1125 value: function(event) {
1129
1130 if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){
1131 if(!event.wasSetByCode) { 1126 if(!event.wasSetByCode) {
1132 if(!this.savedPosition) this.savedPosition = this.leftPosition; 1127 if(!this.savedPosition) this.savedPosition = this.leftPosition;
1133 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Changing", "timeline"); 1128 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Changing", "timeline");
1134 } 1129 }
1135 }
1136
1137 } 1130 }
1138 }, 1131 },
1139 1132
1140 handleTopChanging: { 1133 handleTopChanging: {
1141 value: function(event) { 1134 value: function(event) {
1142 if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){
1143 if(!event.wasSetByCode) { 1135 if(!event.wasSetByCode) {
1144 if(!this.savedPosition) this.savedPosition = this.topPosition; 1136 if(!this.savedPosition) this.savedPosition = this.topPosition;
1145 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Changing", "timeline"); 1137 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Changing", "timeline");
1146 } 1138 }
1147 }
1148
1149 } 1139 }
1150 }, 1140 },
1151 1141
1152 handleWidthChanging:{ 1142 handleWidthChanging:{
1153 value: function(event) { 1143 value: function(event) {
1154 if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){
1155 if(!event.wasSetByCode) { 1144 if(!event.wasSetByCode) {
1156 if(!this.savedPosition) this.savedPosition = this.dtextScaleX; 1145 if(!this.savedPosition) this.savedPosition = this.dtextScaleX;
1157 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "timeline"); 1146 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "timeline");
1158 } 1147 }
1159 }
1160
1161 } 1148 }
1162 }, 1149 },
1163 1150
1164 handleHeightChanging:{ 1151 handleHeightChanging:{
1165 value: function(event) { 1152 value: function(event) {
1166 if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){
1167 if(!event.wasSetByCode) { 1153 if(!event.wasSetByCode) {
1168 if(!this.savedPosition) this.savedPosition = this.dtextScaleY; 1154 if(!this.savedPosition) this.savedPosition = this.dtextScaleY;
1169 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "timeline"); 1155 this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "timeline");
1170 } 1156 }
1171 }
1172
1173 } 1157 }
1174 }, 1158 },
1175 1159
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 57285704..9ae5d3d5 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -216,7 +216,9 @@ POSSIBILITY OF SUCH DAMAGE.
216 </div> 216 </div>
217 217
218 <div data-montage-id="timeline_gutter" class="timelinegutter"> 218 <div data-montage-id="timeline_gutter" class="timelinegutter">
219 <div class="sliderClass">
219 <div data-montage-id="tl_slider" class="tl_slider"></div> 220 <div data-montage-id="tl_slider" class="tl_slider"></div>
221 </div>
220 <input data-montage-id="end_hottext" class="endhottext"> 222 <input data-montage-id="end_hottext" class="endhottext">
221 </div> 223 </div>
222 </div> 224 </div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 88b37563..0bf025ab 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -505,11 +505,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
505 }, 505 },
506 millisecondsOffset:{ 506 millisecondsOffset:{
507 get:function () { 507 get:function () {
508
508 return this._millisecondsOffset; 509 return this._millisecondsOffset;
509 }, 510 },
510 set:function (newVal) { 511 set:function (newVal) {
511 if (newVal !== this._millisecondsOffset) { 512 if (newVal !== this._millisecondsOffset) {
512 513
514 this.tempValue = newVal;
513 var tempValue = (1/newVal) * 1000000; 515 var tempValue = (1/newVal) * 1000000;
514 newVal = tempValue; 516 newVal = tempValue;
515 517
@@ -1704,6 +1706,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1704 } 1706 }
1705 }, 1707 },
1706 1708
1709 zoomTrackContainerWidthChange:{
1710 value:function () {
1711
1712 this.tempValue = this.tempValue/1000;
1713 this.tempValue *= 30;
1714
1715 this.container_tracks.style.width = (this.tempValue * 80) + "