From 26f1524c049791cb9cd81695c57b84d952a2e7e6 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 15 May 2012 16:08:26 -0700 Subject: Timeline: Multiselect from the layer panel. --- js/panels/Timeline/Layer.reel/Layer.js | 12 +++-- js/panels/Timeline/Layer.reel/css/Layer.css | 75 ++++++++++++++------------- js/panels/Timeline/Layer.reel/scss/Layer.scss | 5 +- 3 files changed, 49 insertions(+), 43 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index b0f6d220..418d2226 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -494,10 +494,14 @@ var Layer = exports.Layer = Montage.create(Component, { }, draw: { value: function() { - if (this.isSelected) { - this.element.classList.add("selected"); - } else { - this.element.classList.remove("selected"); + var boolHasClass = this.element.classList.contains("layerSelected"); + if (this.isSelected && !boolHasClass) { + //console.log('Layer.draw, adding selection for layer ', this.layerName) + this.element.classList.add("layerSelected"); + } + if (!this.isSelected && boolHasClass) { + //console.log('Layer.draw, removing selection for layer ', this.layerName) + this.element.classList.remove("layerSelected"); } } }, diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 3648fda5..788a786e 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css @@ -71,26 +71,27 @@ } /******************************************/ -/* line 77, ../scss/Layer.scss */ -.container-layer { +/* line 78, ../scss/Layer.scss */ +.container-layer, +.container-layer.selected { background-color: #474747; color: white; font-size: 12px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); } -/* line 83, ../scss/Layer.scss */ +/* line 84, ../scss/Layer.scss */ .selected .container-layer { background-color: #474747; } -/* line 86, ../scss/Layer.scss */ +/* line 87, ../scss/Layer.scss */ .selected .container-layer .label-layer { background-color: #b2b2b2; color: #242424; } -/* line 91, ../scss/Layer.scss */ +/* line 92, ../scss/Layer.scss */ .userlayers .collapsible-label { display: block; height: 21px; @@ -103,32 +104,32 @@ text-overflow: ellipsis; } -/* line 103, ../scss/Layer.scss */ +/* line 104, ../scss/Layer.scss */ .userlayers .layer-tag { position: absolute; top: 3px; left: 20px; } -/* line 110, ../scss/Layer.scss */ +/* line 111, ../scss/Layer.scss */ .layerSelected .label-layer { background-color: #b2b2b2; color: #242424; } -/* line 114, ../scss/Layer.scss */ +/* line 115, ../scss/Layer.scss */ .content-layer { background-color: #474747; color: white; } -/* line 118, ../scss/Layer.scss */ +/* line 119, ../scss/Layer.scss */ .content-layer .collapsible-label { background-position: 14px 5px; border-width: 0px; } -/* line 126, ../scss/Layer.scss */ +/* line 127, ../scss/Layer.scss */ .label-layer, .label-position, .label-transform, @@ -139,20 +140,20 @@ cursor: pointer; } -/* line 134, ../scss/Layer.scss */ +/* line 135, ../scss/Layer.scss */ .content-layer .collapsible-label, .content-layer .collapsible-content, .content-layer .layer-tag { font-size: 11px; } -/* line 141, ../scss/Layer.scss */ +/* line 142, ../scss/Layer.scss */ .label-layer .collapsible-label br, .content-style .editable br { display: none; } -/* line 145, ../scss/Layer.scss */ +/* line 146, ../scss/Layer.scss */ .collapsible-clicker { position: absolute; width: 10px; @@ -165,23 +166,23 @@ background-repeat: no-repeat; } -/* line 156, ../scss/Layer.scss */ +/* line 157, ../scss/Layer.scss */ .collapsible-clicker.collapsible-collapsed { background-image: url(../images/icon-collapsed.png); } -/* line 159, ../scss/Layer.scss */ +/* line 160, ../scss/Layer.scss */ .collapsible-content .collapsible-clicker { left: 12px; } -/* line 162, ../scss/Layer.scss */ +/* line 163, ../scss/Layer.scss */ .container-layer .collapsible-content.collapsible-collapsed { height: 0px; overflow: hidden; } -/* line 168, ../scss/Layer.scss */ +/* line 169, ../scss/Layer.scss */ .label-layer .cssbutton, .label-style .cssbutton { width: 14px; @@ -191,21 +192,21 @@ background-repeat: no-repeat; } -/* line 175, ../scss/Layer.scss */ +/* line 176, ../scss/Layer.scss */ .label-layer .button-lock { background-image: url(../images/icon-lock.png); top: 3px; right: 27px; } -/* line 180, ../scss/Layer.scss */ +/* line 181, ../scss/Layer.scss */ .label-layer .button-visible { background-image: url(../images/icon-eye.png); top: 3px; right: 7px; } -/* line 185, ../scss/Layer.scss */ +/* line 186, ../scss/Layer.scss */ .label-style .button-add { background-image: url(../images/icon-plus.png); width: 15px; @@ -214,7 +215,7 @@ right: 11px; } -/* line 192, ../scss/Layer.scss */ +/* line 193, ../scss/Layer.scss */ .label-style .button-delete { background-image: url(../images/icon-minus.png); width: 15px; @@ -223,28 +224,28 @@ right: 31px; } -/* line 199, ../scss/Layer.scss */ +/* line 200, ../scss/Layer.scss */ .timeline-track .collapsible-content { position: relative; } -/* line 202, ../scss/Layer.scss */ +/* line 203, ../scss/Layer.scss */ .collapsible-content .layout-table { width: 99.9%; } -/* line 205, ../scss/Layer.scss */ +/* line 206, ../scss/Layer.scss */ .content-layer .collapsible-content { padding-left: 30px; } -/* line 208, ../scss/Layer.scss */ +/* line 209, ../scss/Layer.scss */ .collapsible-content .collapsible-content .layout-table .layout-row { height: 20px; overflow: hidden; } -/* line 212, ../scss/Layer.scss */ +/* line 213, ../scss/Layer.scss */ .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { width: 40%; height: 20px; @@ -254,13 +255,13 @@ overflow: hidden; } -/* line 221, ../scss/Layer.scss */ +/* line 222, ../scss/Layer.scss */ .collapsible-content .collapsible-content .container-row { border-bottom: 1px solid #505050; height: 20px; } -/* line 227, ../scss/Layer.scss */ +/* line 228, ../scss/Layer.scss */ .collapsible-content .collapsible-content .cell-property, .collapsible-content .collapsible-content .cell-value { width: 45%; @@ -272,24 +273,24 @@ line-height: 18px; } -/* line 239, ../scss/Layer.scss */ +/* line 240, ../scss/Layer.scss */ .collapsible-content .layout-table:first-child { border-top: 1px solid #505050; } -/* line 243, ../scss/Layer.scss */ +/* line 244, ../scss/Layer.scss */ .collapsible-content .hottextunit { width: auto; } -/* line 246, ../scss/Layer.scss */ +/* line 247, ../scss/Layer.scss */ .collapsible-transition { -webkit-transition-property: height; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease-in; } -/* line 254, ../scss/Layer.scss */ +/* line 255, ../scss/Layer.scss */ .editable2 { height: 20px; background-color: #242424 !important; @@ -301,29 +302,29 @@ text-overflow: clip; } -/* line 264, ../scss/Layer.scss */ +/* line 265, ../scss/Layer.scss */ .editable2 br { display: inline; } -/* line 268, ../scss/Layer.scss */ +/* line 269, ../scss/Layer.scss */ .label-style .disabled { cursor: default; } /* styles elements */ -/* line 273, ../scss/Layer.scss */ +/* line 274, ../scss/Layer.scss */ .content-style .item-template { display: none; } -/* line 276, ../scss/Layer.scss */ +/* line 277, ../scss/Layer.scss */ .content-style .layout-row.selected .layout-cell { background-color: #b2b2b2; color: #242424; } -/* line 280, ../scss/Layer.scss */ +/* line 281, ../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 a407c9dc..8f8881dd 100644 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -74,7 +74,8 @@ /******************************************/ -.container-layer { +.container-layer, +.container-layer.selected { background-color: $color-panel-bg; color: $color-panel-text; font-size: 12px; @@ -108,7 +109,7 @@ .layerSelected .label-layer { - background-color: $color-panel-hilite-bg; + background-color: $color-menu-hilite-bg; color: $color-panel-hilite-text; } .content-layer { -- cgit v1.2.3 From a696dffcc84b4d2719f8fa918676f9575858ca9a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 17 May 2012 16:52:16 -0700 Subject: Timeline: Multiselect improvements. New convenience methods. Multiselect drag and drop. --- js/panels/Timeline/Layer.reel/Layer.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 418d2226..4a737490 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -133,6 +133,20 @@ var Layer = exports.Layer = Montage.create(Component, { } }, + _stageElement: { + value: null + }, + + stageElement: { + get: function() { + return this._stageElement; + }, + set: function(newVal) { + this._stageElement = newVal; + this.layerData.stageElement = newVal; + } + }, + _elementsList : { value: [] @@ -398,6 +412,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.layerName = this.layerData.layerName; this.layerID = this.layerData.layerID; + this.stageElement = this.layerData.stageElement this.arrLayerStyles = this.layerData.arrLayerStyles; this.isMainCollapsed = this.layerData.isMainCollapsed; this.isPositionCollapsed = this.layerData.isPositionCollapsed; @@ -678,7 +693,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.dynamicLayerName.value = this._layerEditable.value; this.needsDraw = true; this.application.ninja.documentController.activeDocument.needsSave = true; - this.layerData.elementsList[0].setAttribute("id",this.dynamicLayerName.value); + this.layerData.stageElement.setAttribute("id",this.dynamicLayerName.value); } }, handleAddStyleClick: { @@ -790,7 +805,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleDragstart: { value: function(event) { - this.parentComponent.parentComponent.dragLayerID = this.layerID; + //this.parentComponent.parentComponent.dragLayerID = this.layerID; event.dataTransfer.setData('Text', 'Layer'); this.parentComponent.parentComponent.draggingType = "layer"; } -- cgit v1.2.3 From ef499e92341c9bd6edbee70f86dc5a6fe8b461eb Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 17 May 2012 18:14:17 -0700 Subject: Timeline: More bug fixes and code cleanup for multiselect. --- js/panels/Timeline/Layer.reel/Layer.js | 12 ------------ 1 file changed, 12 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 4a737490..48b2dfdf 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -524,14 +524,6 @@ var Layer = exports.Layer = Montage.create(Component, { value: function() { // console.log("Layer.didDraw: Layer "+ this.layerID ); if (this._isFirstDraw === true) { - if (this.isSelected === true) { - if (this.application.ninja.currentDocument._uuid === this._docUUID) { - // Once we're done drawing the first time we need to tell the TimelinePanel if - // this layer is supposed to be selected. - //console.log('layerName ' + this.layerName); - this.parentComponent.parentComponent.selectedLayerID = this.layerID; - } - } this._isFirstDraw = false; this.layerData._isFirstDraw = false; @@ -539,7 +531,6 @@ var Layer = exports.Layer = Montage.create(Component, { this.mainCollapser.myContent.style.height = "auto"; this.mainCollapser.myContent.classList.remove(this.mainCollapser.collapsedClass); this.mainCollapser.clicker.classList.remove(this.mainCollapser.collapsedClass); - } if (this.isPositionCollapsed === false) { this.positionCollapser.myContent.style.height = "auto"; @@ -553,9 +544,6 @@ var Layer = exports.Layer = Montage.create(Component, { } } - - - } }, /* End: Draw cycle */ -- cgit v1.2.3 From 6c4f58ab9dd2f60d509d3e1c1ba0c94a6995691d Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 18 May 2012 15:05:50 -0700 Subject: Timeline: Fix element insertion to use new TimelinePanel properties and multiselect. Fix Property Panel so changing an ID there will actually change an ID on the element (broken by switch from id to data-montage-id change). --- js/panels/Timeline/Layer.reel/Layer.js | 22 ---------------------- 1 file changed, 22 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 48b2dfdf..4fb3e43c 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -500,11 +500,6 @@ var Layer = exports.Layer = Montage.create(Component, { this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); this.element.addEventListener("drop", this.handleDrop.bind(this), false); - - this.eventManager.addEventListener("updatedID", this, false); - - - } }, draw: { @@ -854,23 +849,6 @@ var Layer = exports.Layer = Montage.create(Component, { } } }, - - handleUpdatedID:{ - value:function(event){ - var i= this.application.ninja.timeline.arrLayers.length; - if(event.detail.id){ - for(var k=0;k