From d07b97043b69335136a5946ef161d721c95d1ce9 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Thu, 5 Apr 2012 11:22:42 -0700
Subject: Timeline: Bug fix: IKNINJA-1435
---
js/panels/Timeline/Layer.reel/Layer.html | 46 +++++++++++++--------------
js/panels/Timeline/Layer.reel/Layer.js | 4 +--
js/panels/Timeline/Layer.reel/css/Layer.css | 43 +++++++++++++++++++------
js/panels/Timeline/Layer.reel/scss/Layer.scss | 24 ++++++++++++++
4 files changed, 83 insertions(+), 34 deletions(-)
(limited to 'js')
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;
}
-/* line 245, ../scss/Layer.scss */
+/* line 269, ../scss/Layer.scss */
.style-row {
height: 20px;
}
diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss
index df3f93d5..391bae38 100644
--- a/js/panels/Timeline/Layer.reel/scss/Layer.scss
+++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss
@@ -194,13 +194,37 @@
.content-layer .collapsible-content {
padding-left: 30px;
}
+.collapsible-content .collapsible-content .layout-table .layout-row {
+ height: 20px;
+ overflow: hidden;
+}
.collapsible-content .collapsible-content .layout-table .layout-row .layout-cell {
width: 40%;
height: 20px;
border-bottom: 1px solid $color-menu-divider;
line-height: 20px;
text-align: left;
+ overflow: hidden;
+}
+
+.collapsible-content .collapsible-content .container-row {
+ border-bottom: 1px solid $color-menu-divider;
+ height: 20px;
}
+
+.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;
+}
+
+
+
.collapsible-content .layout-table:first-child {
border-top: 1px solid $color-menu-divider;
}
--
cgit v1.2.3