-
Skew Y
-
+
-
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
From a36266b640207b3a95aaa145def263a469ecee15 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Thu, 5 Apr 2012 11:47:21 -0700
Subject: Timeline: Bit of code cleanup in Layer.js
---
js/panels/Timeline/Layer.reel/Layer.js | 26 +++++++++++++-------------
1 file changed, 13 insertions(+), 13 deletions(-)
(limited to 'js')
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b713a197..b8ab1539 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -480,31 +480,23 @@ var Layer = exports.Layer = Montage.create(Component, {
// Initialize myself
this.init();
- var that = this;
+
// Make it editable!
this._layerEditable = Hintable.create();
this._layerEditable.element = this.titleSelector;
this.titleSelector.identifier = "selectorEditable";
this.titleSelector.addEventListener("click", this, false);
- this._layerEditable.addEventListener("blur", function(event) {
- that.handleSelectorEditableBlur(event);
- }, false);
- this._layerEditable.addEventListener("change", function(event) {
- that.dynamicLayerName.value = that._layerEditable.value;
- this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = that.dynamicLayerName.value;
- that.needsDraw = true;
- this.application.ninja.documentController.activeDocument.needsSave = true;
- }, false);
+ this._layerEditable.addEventListener("blur", this.handleSelectorEditableBlur.bind(this), false);
+ this._layerEditable.addEventListener("change", this.handleLayerNameChange.bind(this), false);
this._layerEditable.editingClass = "editable2";
this._layerEditable.value = this.layerName;
- //this._layerEditable.needsDraw = true;
-
+
+ // Collapser event handlers.
this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false);
this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false);
this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false);
-
// Add event listeners to add and delete style buttons
this.buttonAddStyle.addEventListener("click", this.handleAddStyleClick.bind(this), false);
this.buttonDeleteStyle.addEventListener("click", this.handleDeleteStyleClick.bind(this), false);
@@ -705,6 +697,14 @@ var Layer = exports.Layer = Montage.create(Component, {
/* End: Controllers */
/* Begin: Event handlers */
+ handleLayerNameChange: {
+ value: function(event) {
+ this.dynamicLayerName.value = this._layerEditable.value;
+ this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.dynamicLayerName.value;
+ this.needsDraw = true;
+ this.application.ninja.documentController.activeDocument.needsSave = true;
+ }
+ },
handleAddStyleClick: {
value: function(event) {
this.addStyle();
--
cgit v1.2.3
From a8ea8f377919c7f1a6af69311f55fd57727d9058 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Thu, 5 Apr 2012 13:40:14 -0700
Subject: Timeline: Improved drag-and-drop performance. Also fix problems with
expand/collapse getting out of synch during drag-and-drop.
---
js/panels/Timeline/Layer.reel/Layer.js | 28 ++++++++--------------
.../Timeline/TimelinePanel.reel/TimelinePanel.js | 22 +++++++++++++----
.../Timeline/TimelineTrack.reel/TimelineTrack.js | 26 +++++++-------------
3 files changed, 36 insertions(+), 40 deletions(-)
(limited to 'js')
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b8ab1539..3bcc1401 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -311,11 +311,9 @@ var Layer = exports.Layer = Montage.create(Component, {
return this._isMainCollapsed;
},
set: function(newVal) {
- if (newVal !== this._isMainCollapsed) {
- this.log('layer.js: isMainCollapsed: ' + newVal);
- this._isMainCollapsed = newVal;
- this.layerData.isMainCollapsed = newVal;
- }
+ this._isMainCollapsed = newVal;
+ this.layerData.isMainCollapsed = newVal;
+
}
},
@@ -329,10 +327,8 @@ var Layer = exports.Layer = Montage.create(Component, {
return this._isTransformCollapsed;
},
set: function(newVal) {
- if (newVal !== this._isTransformCollapsed) {
- this._isTransformCollapsed = newVal;
- this.layerData.isTransformCollapsed = newVal;
- }
+ this._isTransformCollapsed = newVal;
+ this.layerData.isTransformCollapsed = newVal;
}
},
@@ -346,10 +342,8 @@ var Layer = exports.Layer = Montage.create(Component, {
return this._isPositionCollapsed;
},
set: function(newVal) {
- if (newVal !== this._isPositionCollapsed) {
- this._isPositionCollapsed = newVal;
- this.layerData.isPositionCollapsed = newVal;
- }
+ this._isPositionCollapsed = newVal;
+ this.layerData.isPositionCollapsed = newVal;
}
},
@@ -363,10 +357,8 @@ var Layer = exports.Layer = Montage.create(Component, {
return this._isStyleCollapsed;
},
set: function(newVal) {
- if (newVal !== this._isStyleCollapsed) {
- this._isStyleCollapsed = newVal;
- this.layerData.isStyleCollapsed = newVal;
- }
+ this._isStyleCollapsed = newVal;
+ this.layerData.isStyleCollapsed = newVal;
}
},
_bypassAnimation : {
@@ -379,7 +371,7 @@ var Layer = exports.Layer = Montage.create(Component, {
return this._bypassAnimation;
},
set: function(newVal) {
- if ((newVal !== this._bypassAnimation) && (typeof(this.layerData) !== "undefined")) {
+ if (typeof(this.layerData) !== "undefined") {
this._bypassAnimation = newVal;
this.layerData.bypassAnimation = newVal;
}
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 647d2f4e..2df447db 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -294,12 +294,24 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
if (newVal !== this._dropLayerID) {
this._dropLayerID = newVal;
- var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID),
+ var myNewArray = [],
+ dragLayerIndex = this.getLayerIndexByID(this.dragLayerID),
dropLayerIndex = this.getLayerIndexByID(this.dropLayerID),
- dragLayer = this.arrLayers[dragLayerIndex];
+ dragLayer = myNewArray[dragLayerIndex],
+ thing;
+
+ // Copy arrLayers into new array; we want to avoid referencing.
+ for (thing in this.arrLayers) {
+ myNewArray[thing] = this.arrLayers[thing];
+ }
- this.arrLayers.splice(dragLayerIndex, 1);
- this.arrLayers.splice(dropLayerIndex, 0, dragLayer);
+ // Operate on new array
+ myNewArray.splice(dragLayerIndex, 1);
+ myNewArray.splice(dropLayerIndex, 0, dragLayer);
+
+ // Feed new array into repetition
+ this.arrLayers = myNewArray;
+ // Store reference in currentDocument.
this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
// Clear for future DnD
@@ -307,7 +319,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this._dragLayerID = null;
// Sometimes, just to be fun, the drop and dragend events don't fire.
- // So just in case, set the draw routine to delete the helper.
+ // To avoid this, set the draw routine to delete the helper here.
this._deleteHelper = true;
this.needsDraw = true;
}
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index edca4306..8b639758 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -42,10 +42,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
return this._isMainCollapsed;
},
set:function (newVal) {
- if (newVal !== this._isMainCollapsed) {
- this._isMainCollapsed = newVal;
- this.trackData.isMainCollapsed = newVal;
- }
+ this._isMainCollapsed = newVal;
+ this.trackData.isMainCollapsed = newVal;
}
},
_isTransformCollapsed:{
@@ -56,10 +54,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
return this._isTransformCollapsed;
},
set:function (newVal) {
- if (newVal !== this._isTransformCollapsed) {
- this._isTransformCollapsed = newVal;
- this.trackData.isTransformCollapsed = newVal;
- }
+ this._isTransformCollapsed = newVal;
+ this.trackData.isTransformCollapsed = newVal;
}
},
_isPositionCollapsed:{
@@ -70,10 +66,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
return this._isPositionCollapsed;
},
set:function (newVal) {
- if (newVal !== this._isPositionCollapsed) {
- this._isPositionCollapsed = newVal;
- this.trackData.isPositionCollapsed = newVal;
- }
+ this._isPositionCollapsed = newVal;
+ this.trackData.isPositionCollapsed = newVal;
}
},
_isStyleCollapsed:{
@@ -84,10 +78,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
return this._isStyleCollapsed;
},
set:function (newVal) {
- if (newVal !== this._isStyleCollapsed) {
- this._isStyleCollapsed = newVal;
- this.trackData.isStyleCollapsed = newVal;
- }
+ this._isStyleCollapsed = newVal;
+ this.trackData.isStyleCollapsed = newVal;
}
},
_bypassAnimation : {
@@ -100,7 +92,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
return this._bypassAnimation;
},
set: function(newVal) {
- if ((newVal !== this._bypassAnimation) && (typeof(this.trackData) !== "undefined")) {
+ if (typeof(this.trackData) !== "undefined") {
this._bypassAnimation = newVal;
this.trackData.bypassAnimation = newVal;
}
--
cgit v1.2.3