Timeline: Bug fix: IKNINJA-1435

4 files changed, 83 insertions, 34 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 454c2742..eb9ff3a9 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -337,14 +337,14 @@
                                         <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span>
                                 </div>
                                 <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position">
-                                        <div class="layout-table">
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">X</div>
-                                                        <div class="layout-cell"><div data-montage-id="position-x"></div></div>
+                                        <div class="layout-tablew">
+                                                <div class="container-row">
+                                                        <div class="cell-property">X</div>
+                                                        <div class="cell-value"><div data-montage-id="position-x"></div></div>
                                                 </div>
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">Y</div>
-                                                        <div class="layout-cell"><div data-montage-id="position-y"></div></div>
+                                                <div class="container-row">
+                                                        <div class="cell-property">Y</div>
+                                                        <div class="cell-value"><div data-montage-id="position-y"></div></div>
                                                 </div>
                                         </div>
                                 </div>
@@ -353,26 +353,26 @@
                                         <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span>
                                 </div>
                                 <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform">
-                                        <div class="layout-table">
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">Scale X</div>
-                                                        <div class="layout-cell"><div data-montage-id="scale-x"></div></div>
+                                        <div class="layout-tablew">
+                                                <div class="container-row">
+                                                        <div class="cell-property">Scale X</div>
+                                                        <div class="cell-value"><div data-montage-id="scale-x"></div></div>
                                                 </div>
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">Scale Y</div>
-                                                        <div class="layout-cell"><div data-montage-id="scale-y"></div></div>
+                                                <div class="container-row">
+                                                        <div class="cell-property">Scale Y</div>
+                                                        <div class="cell-value"><div data-montage-id="scale-y"></div></div>
                                                 </div>
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">Skew X</div>
-                                                        <div class="layout-cell"><div data-montage-id="skew-x"></div></div>
+                                                <div class="container-row">
+                                                        <div class="cell-property">Skew X</div>
+                                                        <div class="cell-value"><div data-montage-id="skew-x"></div></div>
                                                 </div>
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">Skew Y</div>
-                                                        <div class="layout-cell"><div data-montage-id="skew-y"></div></div>
+                                                <div class="container-row">
+                                                        <div class="cell-property">Skew Y</div>
+                                                        <div class="cell-value"><div data-montage-id="skew-y"></div></div>
                                                 </div>
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">Rotation</div>
-                                                        <div class="layout-cell"><div data-montage-id="rotation"></div></div>
+                                                <div class="container-row">
+                                                        <div class="cell-property">Rotation</div>
+                                                        <div class="cell-value"><div data-montage-id="rotation"></div></div>
                                                 </div>
                                         </div>
                                         
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 2f0310a9..b713a197 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -514,8 +514,8 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.element.addEventListener("click", this, false);
             
                         // Drag and drop event handlers
-                        this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
-                        this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
+                        this.myLabel.addEventListener("mouseover", this.handleMouseover.bind(this), false);
+                        this.myLabel.addEventListener("mouseout", this.handleMouseout.bind(this), false);
                         this.element.addEventListener("dragover", this.handleDragover.bind(this), false);
                         this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
                         this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
index 2ea1e0f6..50e664c4 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -227,32 +227,57 @@
 }
 
 /* line 197, ../scss/Layer.scss */
+.collapsible-content .collapsible-content .layout-table .layout-row {
+  height: 20px;
+  overflow: hidden;
+}
+
+/* line 201, ../scss/Layer.scss */
 .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell {
   width: 40%;
   height: 20px;
   border-bottom: 1px solid #505050;
   line-height: 20px;
   text-align: left;
+  overflow: hidden;
+}
+
+/* line 210, ../scss/Layer.scss */
+.collapsible-content .collapsible-content .container-row {
+  border-bottom: 1px solid #505050;
+  height: 20px;
+}
+
+/* line 216, ../scss/Layer.scss */
+.collapsible-content .collapsible-content .cell-property,
+.collapsible-content .collapsible-content .cell-value {
+  width: 45%;
+  float: left;
+  height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 18px;
 }
 
-/* line 204, ../scss/Layer.scss */
+/* line 228, ../scss/Layer.scss */
 .collapsible-content .layout-table:first-child {
   border-top: 1px solid #505050;
 }
 
-/* line 208, ../scss/Layer.scss */
+/* line 232, ../scss/Layer.scss */
 .collapsible-content .hottextunit {
   width: auto;
 }
 
-/* line 211, ../scss/Layer.scss */
+/* line 235, ../scss/Layer.scss */
 .collapsible-transition {
   -webkit-transition-property: height;
   -webkit-transition-duration: 200ms;
   -webkit-transition-timing-function: ease-in;
 }
 
-/* line 219, ../scss/Layer.scss */
+/* line 243, ../scss/Layer.scss */
 .editable2 {
   height: 20px;
   background-color: #242424 !important;
@@ -264,29 +289,29 @@
   text-overflow: clip;
 }
 
-/* line 229, ../scss/Layer.scss */
+/* line 253, ../scss/Layer.scss */
 .editable2 br {
   display: inline;
 }
 
-/* line 233, ../scss/Layer.scss */
+/* line 257, ../scss/Layer.scss */
 .label-style .disabled {
   cursor: default;
 }
 
 /* styles elements */
-/* line 238, ../scss/Layer.scss */
+/* line 262, ../scss/Layer.scss */
 .content-style .item-template {
   display: none;
 }
 
-/* line 241, ../scss/Layer.scss */
+/* line 265, ../scss/Layer.scss */
 .content-style .layout-row.selected .layout-cell {
   background-color: #b2b2b2;
   color: #242424;