From 6e9c9fd4d715567394038705e7a6ef7935e451d3 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 2 Apr 2012 17:11:30 -0700 Subject: Timeline: Bug fix: IKNINJA-1431, "Adding a new element to the stage with one layer in focus whose name is empty, Ninja creates an empty name layer for the element." --- js/panels/Timeline/Layer.reel/Layer.js | 69 ++++++++++++++------------- js/panels/Timeline/Layer.reel/css/Layer.css | 50 +++++++++++-------- js/panels/Timeline/Layer.reel/scss/Layer.scss | 9 ++++ 3 files changed, 74 insertions(+), 54 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index f1882985..bba113c0 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -67,10 +67,7 @@ var Layer = exports.Layer = Montage.create(Component, { /* Layer models: the name, ID, and selected and animation booleans for the layer */ _layerName:{ - serializable: true, - value:null, - writable:true, - enumerable:true + value: "Default Layer Name" }, layerName:{ @@ -79,20 +76,22 @@ var Layer = exports.Layer = Montage.create(Component, { return this._layerName; }, set:function(newVal){ - if (newVal !== this._layerName) { + console.log('Layer.layerName.set ', newVal); + this._layerEditable.value = newVal; this._layerName = newVal; this.layerData.layerName = newVal; - this.log('layerName setter: ' + newVal) - } + if (typeof(this.dynamicLayerName) !== "undefined") { + this.dynamicLayerName.value = newVal; + } + + console.log('layerName setter: ' + newVal) + } }, _layerID:{ - value:null, - writable:true, - serializable: true, - enumerable:true + value: "Default Layer ID" }, layerID:{ @@ -410,16 +409,25 @@ var Layer = exports.Layer = Montage.create(Component, { set:function(val){ this._layerData = val; if(this._layerData){ - this.setData(); + this.setData(true); } } }, setData:{ - value:function(){ - if (typeof(this.layerData) === "undefined") { + value:function(boolNeedsDraw){ + if (typeof(this._layerData) === "undefined") { + return; + } + + if (typeof(this._layerData.layerName) === "undefined") { return; } + + if (typeof(boolNeedsDraw) === "undefined") { + boolNeedsDraw = false; + } + this.layerName = this.layerData.layerName; this.layerID = this.layerData.layerID; this.arrLayerStyles = this.layerData.arrLayerStyles; @@ -438,7 +446,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.dtextScaleY = this.layerData.dtextScaleY; this.dtextRotate = this.layerData.dtextRotate; this._isFirstDraw = this.layerData._isFirstDraw; - this.needsDraw = true; + this.needsDraw = boolNeedsDraw; } }, @@ -455,7 +463,7 @@ var Layer = exports.Layer = Montage.create(Component, { set: function(newVal) { if (newVal !== this._bindingPoint) { this._bindingPoint = newVal; - this.setData(); + this.setData(true); } } }, @@ -478,23 +486,15 @@ 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; - that.needsDraw = true; - }, false); + this._layerEditable.addEventListener("blur", this.handleSelectorEditableBlur.bind(this), false); + this._layerEditable.addEventListener("change", this.handleSelectorEditableChange.bind(this), false); + this._layerEditable.editingClass = "editable2"; this._layerEditable.value = this.layerName; - this._layerEditable.needsDraw = true; + //this._layerEditable.needsDraw = true; this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); @@ -510,7 +510,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.element.addEventListener("mousedown", this, false); this.element.addEventListener("click", this, false); - // Drag and drop event hanlders + // Drag and drop event handlers this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); this.element.addEventListener("dragover", this.handleDragover.bind(this), false); @@ -712,10 +712,6 @@ var Layer = exports.Layer = Montage.create(Component, { this.deleteStyle(); } }, - handleSelectorEditableClick: { - value: function(event) { - } - }, handleSelectorEditableBlur : { value: function(event) { this.titleSelector.scrollLeft = 0; @@ -723,7 +719,12 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleSelectorEditableChange: { value: function(event) { - this.layerName = this.dynamicLayerName.value; + var newVal = "ONTD"; + if (this._layerEditable.value !== "") { + newVal = this._layerEditable.value; + } + this.dynamicLayerName.value = newVal; + this.layerName = newVal; this.needsDraw = true; } }, diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 8e36c2db..1aae8d67 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css @@ -139,7 +139,12 @@ font-size: 11px; } -/* line 130, ../scss/Layer.scss */ +/* line 132, ../scss/Layer.scss */ +.label-layer .collapsible-label br { + display: none; +} + +/* line 136, ../scss/Layer.scss */ .collapsible-clicker { position: absolute; width: 10px; @@ -152,23 +157,23 @@ background-repeat: no-repeat; } -/* line 141, ../scss/Layer.scss */ +/* line 147, ../scss/Layer.scss */ .collapsible-clicker.collapsible-collapsed { background-image: url(../images/icon-collapsed.png); } -/* line 144, ../scss/Layer.scss */ +/* line 150, ../scss/Layer.scss */ .collapsible-content .collapsible-clicker { left: 12px; } -/* line 147, ../scss/Layer.scss */ +/* line 153, ../scss/Layer.scss */ .container-layer .collapsible-content.collapsible-collapsed { height: 0px; overflow: hidden; } -/* line 153, ../scss/Layer.scss */ +/* line 159, ../scss/Layer.scss */ .label-layer .cssbutton, .label-style .cssbutton { width: 14px; @@ -178,21 +183,21 @@ background-repeat: no-repeat; } -/* line 160, ../scss/Layer.scss */ +/* line 166, ../scss/Layer.scss */ .label-layer .button-lock { background-image: url(../images/icon-lock.png); top: 3px; right: 27px; } -/* line 165, ../scss/Layer.scss */ +/* line 171, ../scss/Layer.scss */ .label-layer .button-visible { background-image: url(../images/icon-eye.png); top: 3px; right: 7px; } -/* line 170, ../scss/Layer.scss */ +/* line 176, ../scss/Layer.scss */ .label-style .button-add { background-image: url(../images/icon-plus.png); width: 15px; @@ -201,7 +206,7 @@ right: 11px; } -/* line 177, ../scss/Layer.scss */ +/* line 183, ../scss/Layer.scss */ .label-style .button-delete { background-image: url(../images/icon-minus.png); width: 15px; @@ -210,17 +215,17 @@ right: 31px; } -/* line 184, ../scss/Layer.scss */ +/* line 190, ../scss/Layer.scss */ .collapsible-content .layout-table { width: 99.9%; } -/* line 187, ../scss/Layer.scss */ +/* line 193, ../scss/Layer.scss */ .content-layer .collapsible-content { padding-left: 30px; } -/* line 190, ../scss/Layer.scss */ +/* line 196, ../scss/Layer.scss */ .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { width: 40%; height: 20px; @@ -229,24 +234,24 @@ text-align: left; } -/* line 197, ../scss/Layer.scss */ +/* line 203, ../scss/Layer.scss */ .collapsible-content .layout-table:first-child { border-top: 1px solid #505050; } -/* line 201, ../scss/Layer.scss */ +/* line 207, ../scss/Layer.scss */ .collapsible-content .hottextunit { width: auto; } -/* line 204, ../scss/Layer.scss */ +/* line 210, ../scss/Layer.scss */ .collapsible-transition { -webkit-transition-property: height; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease-in; } -/* line 212, ../scss/Layer.scss */ +/* line 218, ../scss/Layer.scss */ .editable2 { height: 20px; background-color: #242424 !important; @@ -258,24 +263,29 @@ text-overflow: clip; } -/* line 223, ../scss/Layer.scss */ +/* line 228, ../scss/Layer.scss */ +.editable2 br { + display: inline; +} + +/* line 232, ../scss/Layer.scss */ .label-style .disabled { cursor: default; } /* styles elements */ -/* line 228, ../scss/Layer.scss */ +/* line 237, ../scss/Layer.scss */ .content-style .item-template { display: none; } -/* line 231, ../scss/Layer.scss */ +/* line 240, ../scss/Layer.scss */ .content-style .layout-row.selected .layout-cell { background-color: #b2b2b2; color: #242424; } -/* line 235, ../scss/Layer.scss */ +/* line 244, ../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 12b6e599..80b88d4f 100644 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -127,6 +127,12 @@ font-size: 11px; } + + +.label-layer .collapsible-label br { + display: none; +} + .collapsible-clicker { position: absolute; width: 10px; @@ -219,6 +225,9 @@ -webkit-user-select: text; text-overflow: clip; } +.editable2 br { + display: inline; +} .label-style .disabled { cursor: default; -- cgit v1.2.3