Merge remote-tracking branch 'ninja-jduran/TimelineUber' into timeline-local

9 files changed, 129 insertions, 13 deletions

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css
index 89233c64..2d339411 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.css
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.css
@@ -37,21 +37,53 @@
 .mp_property
 {
     height:40px;
+    position: relative;
 }
 
 .mp_property > .prop-label
 {
-  float: left;
-  /*width:86px;*/
-  margin: 0px 8px 2px 5px;
+    position:relative;
+    top:12px;
+    float: left;
+    width: 100px;
 }
 
 .mp_property > .prop-controller
 {
-  float: right;
-  clear: left;
-  width: auto;
-  margin: 0px 0px 3px 0px;
+    position:relative;
+    top:12px;
+    left: 10px;
+    float: left;
+}
+
+.mp_property .hottext,
+.mp_property .hottextInput
+{
+    width: 30px;
+}
+
+.mp_property .button
+{
+    width: 30px;
+    height: 20px;
+}
+
+.mp_property .inputRow
+{
+    top: 8px;
+    position: relative;
+}
+
+.mp_properties_list
+{
+   padding-bottom: 8px;
+}
+
+.mp_properties_list > .mp_property > .colortoolbar
+{
+        width: 27px !important;
+        height: 27px !important;
+    overflow:hidden !important;
 }
 
 .mp_buttons {
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html
index 34f68554..ae0ee2c8 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.html
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.html
@@ -104,7 +104,7 @@
 
             <hr />
 
-            <div id="mp_properties_list" class="mp_properties_list" style="-webkit-user-select: none;">
+            <div id="mp_properties_list" class="mp_properties_list">
                 <div id="mp_property" class="mp_property"></div>
             </div>
 
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index b44761bc..bbccf45d 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -237,7 +237,7 @@ exports.MaterialsPopup = Montage.create(Component, {
             }
             else
             {
-                this.materialsData = this._dummyData1;
+                this.materialsData = this._dummyData1.slice(0);
             }
             
            this.needsDraw = true;
diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js
index ac45b4ba..98ebb36a 100755
--- a/js/panels/Splitter.js
+++ b/js/panels/Splitter.js
@@ -55,7 +55,7 @@ exports.Splitter = Montage.create(Component, {
         },
         set: function(value) {
             this._collapsed = value;
-            this.needsDraw = true;
+
             this.application.localStorage.setItem(this.element.getAttribute("data-montage-id"), {"version": this.version, "value": value});
         }
     },
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 5410c77c..0a67df43 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -187,6 +187,25 @@ var Tween = exports.Tween = Montage.create(Component, {
         }
     },
 
+    setAbsoluteTweenProperties:{
+        value:function () {
+            if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) {
+                this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;
+                this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
+                this.parentComponent.parentComponent.updateKeyframeRule();
+            }
+            // highlight the tween's span
+            this.tweenspan.highlightSpan();
+            this.isTweenAnimated = true;
+        }
+    },
+
+    setRelativeTweenProperties:{
+        value:function(){
+
+        }
+    },
+
     selectTween:{
         value: function(){
             // turn on event listener for element change
diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
index f82d3660..0928da3a 100755
--- a/js/panels/properties.reel/properties.css
+++ b/js/panels/properties.reel/properties.css
@@ -47,6 +47,11 @@ padding-right:6px;
 
 }
 
+.propertiesPanel button.nj-skinned {
+    margin-left: -12px;
+    margin-top: -3px;
+}
+
 .propertiesPanel hr {
     border: 0;
     border-top: 1px solid #3c3c3c;
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index d5acd503..625e3eb6 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -146,8 +146,12 @@ exports.Properties = Montage.create(Component, {
         value: function(event) {
 //            console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update
             if(event.detail.source && event.detail.source !== "pi") {
+                var el = this.application.ninja.currentDocument.documentRoot;
+                if(this.application.ninja.selectedElements.length) {
+                    el = this.application.ninja.selectedElements[0];
+                }
+
                 // TODO - This should only update the properties that were changed.
-                var el = this.application.ninja.selectedElements[0];
                 this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left"));
                 this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top"));
                 this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height"));
@@ -194,6 +198,19 @@ exports.Properties = Montage.create(Component, {
             this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(stage, "height"));
             this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(stage, "width"));
 
+            if(this.threeD.inGlobalMode)
+            {
+                this.threeD.xAngle = ElementsMediator.get3DProperty(stage, "xAngle");
+                this.threeD.yAngle = ElementsMediator.get3DProperty(stage, "yAngle");
+                this.threeD.zAngle = ElementsMediator.get3DProperty(stage, "zAngle");
+            }
+
+            if(ElementsMediator.getProperty(stage, "-webkit-transform-style") === "preserve-3d") {
+                this.threeD.flatten = false;
+            } else {
+                this.threeD.flatten = true;
+            }
+
             if(this.customPi !== stage.elementModel.pi) {
                 // We need to unregister color chips from the previous selection from the Color Model
                 var len = this.customSections.length;
@@ -258,6 +275,11 @@ exports.Properties = Montage.create(Component, {
             this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height"));
             this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width"));
 
+            if(ElementsMediator.getProperty(el, "-webkit-transform-style") === "preserve-3d") {
+                this.threeD.flatten = false;