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>

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, {
     handleLeftChange: {
         value: function(event) {
             var prevPosition;
-            if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){
+
                 if(!event.wasSetByCode) {
                     if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
                         this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "timeline", prevPosition);
                         this.savedPosition = null;
                 }
 
-            }
+
         }
     },
 
     handleTopChange: {
         value: function(event) {
             var prevPosition;
-            if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){
                 if(!event.wasSetByCode) {
                     if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
 
                     this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "timeline", prevPosition);
                     this.savedPosition = null;
                 }
-            }
+
         }
     },
 
     handleWidthChange:{
         value: function(event) {
             var prevPosition;
-            if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){
+
                 if(!event.wasSetByCode) {
                     if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
 
                     this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline", prevPosition);
                     this.savedPosition = null;
                 }
-            }
         }
     },
 
     handleHeightChange:{
         value: function(event) {
             var prevPosition;
-            if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){
+
                 if(!event.wasSetByCode) {
                     if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
 
                     this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "timeline", prevPosition);
                     this.savedPosition = null;
                 }
-            }
         }
     },
 
     handleLeftChanging: {
         value: function(event) {
-
-            if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){
                 if(!event.wasSetByCode) {
                     if(!this.savedPosition) this.savedPosition = this.leftPosition;
                     this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Changing", "timeline");
                 }
-            }
-
         }
     },
 
     handleTopChanging: {
         value: function(event) {
-            if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){
                 if(!event.wasSetByCode) {
                     if(!this.savedPosition) this.savedPosition = this.topPosition;
                     this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Changing", "timeline");
                 }
-            }
-
         }
     },
 
     handleWidthChanging:{
         value: function(event) {
-            if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){
                 if(!event.wasSetByCode) {
                     if(!this.savedPosition) this.savedPosition = this.dtextScaleX;
                     this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "timeline");
                 }
-            }
-
         }
     },
 
     handleHeightChanging:{
         value: function(event) {
-            if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){
                 if(!event.wasSetByCode) {
                     if(!this.savedPosition) this.savedPosition = this.dtextScaleY;
                     this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "timeline");
                 }
-            }
-
         }
     },
 
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.
                         </div>
 
                         <div data-montage-id="timeline_gutter" class="timelinegutter">
+                            <div class="sliderClass">
                             <div data-montage-id="tl_slider" class="tl_slider"></div>
+                            </div>
                             <input data-montage-id="end_hottext" class="endhottext">
                         </div>
                     </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, {
     },
     millisecondsOffset:{
         get:function () {
+
             return this._millisecondsOffset;
     },
         set:function (newVal) {
             if (newVal !== this._millisecondsOffset) {
 
+                this.tempValue  = newVal;
                 var tempValue = (1/newVal) * 1000000;
                 newVal = tempValue;
 
@@ -1704,6 +1706,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
+    zoomTrackContainerWidthChange:{
+        value:function () {
+
+            this.tempValue = this.tempValue/1000;
+            this.tempValue *= 30;
+
+            this.container_tracks.style.width = (this.tempValue * 80) + "