From 969137ba4520103348a496ac9b99063dc4ec8f96 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 5 Apr 2012 10:38:57 -0700 Subject: Timeline: Bug fix for IKNINJA-1086, "CSS Style Suggestion stops working" --- js/components/hintable.reel/hintable.js | 8 +++++ js/panels/Timeline/Layer.reel/css/Layer.css | 47 ++++++++++++++------------- js/panels/Timeline/Layer.reel/scss/Layer.scss | 3 +- 3 files changed, 34 insertions(+), 24 deletions(-) diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js index cbfe2d9b..6e3b2aaf 100644 --- a/js/components/hintable.reel/hintable.js +++ b/js/components/hintable.reel/hintable.js @@ -157,6 +157,14 @@ exports.Hintable = Montage.create(Editable, { this._super(arguments); + /// Remove the phantom "
" element that is generated when + /// content editable element is empty + this._children(this._element, function(item) { + return item.nodeName === 'BR'; + }).forEach(function(item) { + this._element.removeChild(item); + }, this); + if(k === 39) { selection = window.getSelection(); text = selection.baseNode.textContent; diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 1aae8d67..2ea1e0f6 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css @@ -139,12 +139,13 @@ font-size: 11px; } -/* line 132, ../scss/Layer.scss */ -.label-layer .collapsible-label br { +/* line 133, ../scss/Layer.scss */ +.label-layer .collapsible-label br, +.content-style .editable br { display: none; } -/* line 136, ../scss/Layer.scss */ +/* line 137, ../scss/Layer.scss */ .collapsible-clicker { position: absolute; width: 10px; @@ -157,23 +158,23 @@ background-repeat: no-repeat; } -/* line 147, ../scss/Layer.scss */ +/* line 148, ../scss/Layer.scss */ .collapsible-clicker.collapsible-collapsed { background-image: url(../images/icon-collapsed.png); } -/* line 150, ../scss/Layer.scss */ +/* line 151, ../scss/Layer.scss */ .collapsible-content .collapsible-clicker { left: 12px; } -/* line 153, ../scss/Layer.scss */ +/* line 154, ../scss/Layer.scss */ .container-layer .collapsible-content.collapsible-collapsed { height: 0px; overflow: hidden; } -/* line 159, ../scss/Layer.scss */ +/* line 160, ../scss/Layer.scss */ .label-layer .cssbutton, .label-style .cssbutton { width: 14px; @@ -183,21 +184,21 @@ background-repeat: no-repeat; } -/* line 166, ../scss/Layer.scss */ +/* line 167, ../scss/Layer.scss */ .label-layer .button-lock { background-image: url(../images/icon-lock.png); top: 3px; right: 27px; } -/* line 171, ../scss/Layer.scss */ +/* line 172, ../scss/Layer.scss */ .label-layer .button-visible { background-image: url(../images/icon-eye.png); top: 3px; right: 7px; } -/* line 176, ../scss/Layer.scss */ +/* line 177, ../scss/Layer.scss */ .label-style .button-add { background-image: url(../images/icon-plus.png); width: 15px; @@ -206,7 +207,7 @@ right: 11px; } -/* line 183, ../scss/Layer.scss */ +/* line 184, ../scss/Layer.scss */ .label-style .button-delete { background-image: url(../images/icon-minus.png); width: 15px; @@ -215,17 +216,17 @@ right: 31px; } -/* line 190, ../scss/Layer.scss */ +/* line 191, ../scss/Layer.scss */ .collapsible-content .layout-table { width: 99.9%; } -/* line 193, ../scss/Layer.scss */ +/* line 194, ../scss/Layer.scss */ .content-layer .collapsible-content { padding-left: 30px; } -/* line 196, ../scss/Layer.scss */ +/* line 197, ../scss/Layer.scss */ .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { width: 40%; height: 20px; @@ -234,24 +235,24 @@ text-align: left; } -/* line 203, ../scss/Layer.scss */ +/* line 204, ../scss/Layer.scss */ .collapsible-content .layout-table:first-child { border-top: 1px solid #505050; } -/* line 207, ../scss/Layer.scss */ +/* line 208, ../scss/Layer.scss */ .collapsible-content .hottextunit { width: auto; } -/* line 210, ../scss/Layer.scss */ +/* line 211, ../scss/Layer.scss */ .collapsible-transition { -webkit-transition-property: height; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease-in; } -/* line 218, ../scss/Layer.scss */ +/* line 219, ../scss/Layer.scss */ .editable2 { height: 20px; background-color: #242424 !important; @@ -263,29 +264,29 @@ text-overflow: clip; } -/* line 228, ../scss/Layer.scss */ +/* line 229, ../scss/Layer.scss */ .editable2 br { display: inline; } -/* line 232, ../scss/Layer.scss */ +/* line 233, ../scss/Layer.scss */ .label-style .disabled { cursor: default; } /* styles elements */ -/* line 237, ../scss/Layer.scss */ +/* line 238, ../scss/Layer.scss */ .content-style .item-template { display: none; } -/* line 240, ../scss/Layer.scss */ +/* line 241, ../scss/Layer.scss */ .content-style .layout-row.selected .layout-cell { background-color: #b2b2b2; color: #242424; } -/* line 244, ../scss/Layer.scss */ +/* line 245, ../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 80b88d4f..df3f93d5 100644 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -129,7 +129,8 @@ -.label-layer .collapsible-label br { +.label-layer .collapsible-label br, +.content-style .editable br { display: none; } -- cgit v1.2.3 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(-) 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 @@
-
-
-
X
-
+
+
+
X
+
-
-
Y
-
+
+
Y
+
@@ -353,26 +353,26 @@
-
-
-
Scale X
-
+
+
+
Scale X
+
-
-
Scale Y
-
+
+
Scale Y
+
-
-
Skew X
-
+
+
Skew X
+
-
-
Skew Y
-
+
+
Skew Y
+
-
-
Rotation
-
+
+
Rotation
+
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(-) 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(-) 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