From 4c492e2f9d01a699aba8ccdd1a2b04238749ea3c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 10 Apr 2012 14:49:20 -0700 Subject: Timeline: New Features: Tag name now present in each layer. Configuration dropdown in Master Layer; Show Only Animated Layers toggle. --- js/panels/Timeline/Layer.reel/Layer.html | 16 + js/panels/Timeline/Layer.reel/Layer.js | 42 +- js/panels/Timeline/Layer.reel/css/Layer.css | 73 ++- js/panels/Timeline/Layer.reel/scss/Layer.scss | 16 +- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 13 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 72 ++- .../TimelinePanel.reel/css/TimelinePanel.css | 685 +++++++++++++-------- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 24 +- 8 files changed, 625 insertions(+), 316 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index eb9ff3a9..9a9623b8 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -17,6 +17,7 @@ "element": {"#": "layer"}, "styleRepetition" : {"@":"repetition1"}, "dynamicLayerName" : {"@":"dtext1"}, + "dynamicLayerTag" : {"@": "dtext2"}, "slotStyle" : {"@":"slot1"}, "mainCollapser" : {"@" : "mainCollapser"}, "positionCollapser" : {"@" : "positionCollapser"}, @@ -41,6 +42,20 @@ } } }, + "dtext2" : { + "module" : "montage/ui/dynamic-text.reel", + "name" : "DynamicText", + "properties" : { + "element" : {"#" : "layer-tag"} + }, + "bindings" : { + "value" : { + "boundObject" : {"@": "owner"}, + "boundObjectPropertyPath" : "layerTag", + "oneway" : false + } + } + }, "repetition1": { "module": "montage/ui/repetition.reel", "name": "Repetition", @@ -326,6 +341,7 @@
+ Label
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index f9edfca6..f62d43a4 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -99,6 +99,20 @@ var Layer = exports.Layer = Montage.create(Component, { this.layerData.layerID = value; } }, + _layerTag:{ + value: "tag" + }, + + layerTag:{ + serializable: true, + get:function(){ + return this._layerTag; + }, + set:function(newVal){ + this._layerTag = newVal; + this.layerData.layerTag = newVal; + } + }, /* Position and Transform hottext values */ _dtextPositionX : { @@ -290,9 +304,30 @@ var Layer = exports.Layer = Montage.create(Component, { }, set:function(value){ this._isAnimated = value; - this.layerData.isAnimated = newVal; + this.layerData.isAnimated = value; + } + }, + _isVisible:{ + value: true + }, + + isVisible:{ + get:function(){ + return this._isVisible; + }, + set:function(value){ + if (this._isVisible !== value) { + this._isVisible = value; + if (value === true) { + this.element.classList.remove("layer-hidden"); + } else { + this.element.classList.add("layer-hidden"); + } + } + this.layerData.isVisible = value; } }, + _justAdded: { value: false }, @@ -433,6 +468,9 @@ var Layer = exports.Layer = Montage.create(Component, { this.dtextScaleY = this.layerData.dtextScaleY; this.dtextRotate = this.layerData.dtextRotate; this._isFirstDraw = this.layerData._isFirstDraw; + this.layerTag = this.layerData.layerTag; + this.isVisible = this.layerData.isVisible; + this.isAnimated = this.layerData.isAnimated; this.needsDraw = boolNeedsDraw; } }, @@ -504,6 +542,8 @@ 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); + + // Bind this.layerTag to the tag } }, diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 50e664c4..179571af 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css @@ -93,36 +93,42 @@ /* line 91, ../scss/Layer.scss */ .userlayers .collapsible-label { display: block; - width: 100px; height: 21px; line-height: 20px; color: white; - margin-left: 30px; - margin-right: 20px; + margin-left: 80px; + margin-right: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* line 103, ../scss/Layer.scss */ +.userlayers .layer-tag { + position: absolute; + top: 3px; + left: 20px; +} + +/* line 110, ../scss/Layer.scss */ .layerSelected .label-layer { background-color: #b2b2b2; color: #242424; } -/* line 107, ../scss/Layer.scss */ +/* line 114, ../scss/Layer.scss */ .content-layer { background-color: #474747; color: white; } -/* line 111, ../scss/Layer.scss */ +/* line 118, ../scss/Layer.scss */ .content-layer .collapsible-label { background-position: 14px 5px; border-width: 0px; } -/* line 119, ../scss/Layer.scss */ +/* line 126, ../scss/Layer.scss */ .label-layer, .label-position, .label-transform, @@ -133,19 +139,20 @@ cursor: pointer; } -/* line 126, ../scss/Layer.scss */ +/* line 134, ../scss/Layer.scss */ .content-layer .collapsible-label, -.content-layer .collapsible-content { +.content-layer .collapsible-content, +.content-layer .layer-tag { font-size: 11px; } -/* line 133, ../scss/Layer.scss */ +/* line 141, ../scss/Layer.scss */ .label-layer .collapsible-label br, .content-style .editable br { display: none; } -/* line 137, ../scss/Layer.scss */ +/* line 145, ../scss/Layer.scss */ .collapsible-clicker { position: absolute; width: 10px; @@ -158,23 +165,23 @@ background-repeat: no-repeat; } -/* line 148, ../scss/Layer.scss */ +/* line 156, ../scss/Layer.scss */ .collapsible-clicker.collapsible-collapsed { background-image: url(../images/icon-collapsed.png); } -/* line 151, ../scss/Layer.scss */ +/* line 159, ../scss/Layer.scss */ .collapsible-content .collapsible-clicker { left: 12px; } -/* line 154, ../scss/Layer.scss */ +/* line 162, ../scss/Layer.scss */ .container-layer .collapsible-content.collapsible-collapsed { height: 0px; overflow: hidden; } -/* line 160, ../scss/Layer.scss */ +/* line 168, ../scss/Layer.scss */ .label-layer .cssbutton, .label-style .cssbutton { width: 14px; @@ -184,21 +191,21 @@ background-repeat: no-repeat; } -/* line 167, ../scss/Layer.scss */ +/* line 175, ../scss/Layer.scss */ .label-layer .button-lock { background-image: url(../images/icon-lock.png); top: 3px; right: 27px; } -/* line 172, ../scss/Layer.scss */ +/* line 180, ../scss/Layer.scss */ .label-layer .button-visible { background-image: url(../images/icon-eye.png); top: 3px; right: 7px; } -/* line 177, ../scss/Layer.scss */ +/* line 185, ../scss/Layer.scss */ .label-style .button-add { background-image: url(../images/icon-plus.png); width: 15px; @@ -207,7 +214,7 @@ right: 11px; } -/* line 184, ../scss/Layer.scss */ +/* line 192, ../scss/Layer.scss */ .label-style .button-delete { background-image: url(../images/icon-minus.png); width: 15px; @@ -216,23 +223,23 @@ right: 31px; } -/* line 191, ../scss/Layer.scss */ +/* line 199, ../scss/Layer.scss */ .collapsible-content .layout-table { width: 99.9%; } -/* line 194, ../scss/Layer.scss */ +/* line 202, ../scss/Layer.scss */ .content-layer .collapsible-content { padding-left: 30px; } -/* line 197, ../scss/Layer.scss */ +/* line 205, ../scss/Layer.scss */ .collapsible-content .collapsible-content .layout-table .layout-row { height: 20px; overflow: hidden; } -/* line 201, ../scss/Layer.scss */ +/* line 209, ../scss/Layer.scss */ .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { width: 40%; height: 20px; @@ -242,13 +249,13 @@ overflow: hidden; } -/* line 210, ../scss/Layer.scss */ +/* line 218, ../scss/Layer.scss */ .collapsible-content .collapsible-content .container-row { border-bottom: 1px solid #505050; height: 20px; } -/* line 216, ../scss/Layer.scss */ +/* line 224, ../scss/Layer.scss */ .collapsible-content .collapsible-content .cell-property, .collapsible-content .collapsible-content .cell-value { width: 45%; @@ -260,24 +267,24 @@ line-height: 18px; } -/* line 228, ../scss/Layer.scss */ +/* line 236, ../scss/Layer.scss */ .collapsible-content .layout-table:first-child { border-top: 1px solid #505050; } -/* line 232, ../scss/Layer.scss */ +/* line 240, ../scss/Layer.scss */ .collapsible-content .hottextunit { width: auto; } -/* line 235, ../scss/Layer.scss */ +/* line 243, ../scss/Layer.scss */ .collapsible-transition { -webkit-transition-property: height; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease-in; } -/* line 243, ../scss/Layer.scss */ +/* line 251, ../scss/Layer.scss */ .editable2 { height: 20px; background-color: #242424 !important; @@ -289,29 +296,29 @@ text-overflow: clip; } -/* line 253, ../scss/Layer.scss */ +/* line 261, ../scss/Layer.scss */ .editable2 br { display: inline; } -/* line 257, ../scss/Layer.scss */ +/* line 265, ../scss/Layer.scss */ .label-style .disabled { cursor: default; } /* styles elements */ -/* line 262, ../scss/Layer.scss */ +/* line 270, ../scss/Layer.scss */ .content-style .item-template { display: none; } -/* line 265, ../scss/Layer.scss */ +/* line 273, ../scss/Layer.scss */ .content-style .layout-row.selected .layout-cell { background-color: #b2b2b2; color: #242424; } -/* line 269, ../scss/Layer.scss */ +/* line 277, ../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 391bae38..8e5e50db 100644 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -90,16 +90,23 @@ .userlayers .collapsible-label { display: block; - width: 100px; height: 21px; line-height: 20px; color: $color-panel-text; - margin-left: 30px; - margin-right: 20px; + margin-left: 80px; + margin-right: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + +.userlayers .layer-tag { + position: absolute; + top: 3px; + left: 20px; +} + + .layerSelected .label-layer { background-color: $color-panel-hilite-bg; color: $color-panel-hilite-text; @@ -123,7 +130,8 @@ } .content-layer .collapsible-label, -.content-layer .collapsible-content { +.content-layer .collapsible-content, +.content-layer .layer-tag { font-size: 11px; } diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 9eb126e0..09c1f98c 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -32,7 +32,10 @@ "container_tracks" : {"#" : "container-tracks"}, "end_hottext" : {"@" : "endHottext"}, "container_layers" : {"#" : "container-layers"}, - "timeline_disabler" : {"#" : "timeline-disabler"} + "timeline_disabler" : {"#" : "timeline-disabler"}, + "checkable_relative" : {"#" : "checkable_relative"}, + "checkable_absolute" : {"#" : "checkable_absolute"}, + "checkable_animated" : {"#" : "checkable_animated"} } }, @@ -179,6 +182,14 @@
Master Layer
+
+
+
Use relative positioning
+
Use absolute positioning
+
+
Show only animated layers
+
+
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 8fec1d7d..f218868a 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -349,6 +349,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); + + // Bind the handlers for the config menu + this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); + this.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false); + this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false); } }, @@ -431,8 +436,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { returnObj.layerData.trackPosition = 0; returnObj.layerData.arrStyleTracks = []; returnObj.layerData.tweens = []; + returnObj.layerData.layerTag = ""; + returnObj.layerData.isVisible = true; + returnObj.layerData.isTrackAnimated = false; returnObj.parentElementUUID = null; returnObj.parentElement = null; + return returnObj; } }, @@ -590,7 +599,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected; this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; - + if (this.application.ninja.currentDocument.boolShowOnlyAnimated) { + // Fake a click. + var evt = document.createEvent("MouseEvents"); + evt.initMouseEvent("click"); + this.checkable_animated.dispatchEvent(evt); + } } } }, @@ -610,7 +624,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.application.ninja.timeline.playheadmarker.style.left = "0px"; this.application.ninja.timeline.updateTimeText(0.00); this.timebar.style.width = "0px"; - + this.checkable_animated.classList.remove("checked"); this.currentLayerNumber = 0; this.currentLayerSelected = false; this.selectedKeyframes = []; @@ -773,6 +787,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayerNumber = this.currentLayerNumber + 1; newLayerName = "Layer " + this.currentLayerNumber; thingToPush.layerData.layerName = newLayerName; + thingToPush.layerData.layerTag = "<" + object.nodeName.toLowerCase() + ">"; thingToPush.layerData.layerID = this.currentLayerNumber; thingToPush.parentElement = this.application.ninja.currentSelectedContainer; thingToPush.layerData.isSelected = true; @@ -815,6 +830,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } thingToPush.layerData.layerName = newLayerName; thingToPush.layerData.layerID = this.currentLayerNumber; + thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">"; thingToPush.parentElementUUID = this.hashKey; thingToPush.parentElement = this.application.ninja.currentSelectedContainer; @@ -880,7 +896,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleElementAdded:{ value:function() { - this.createNewLayer(); + this.createNewLayer(this.application.ninja.selectedElements[0]); this.currentLayerSelected.layerData.elementsList.push(this.application.ninja.selectedElements[0]); this.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.currentLayerSelected.layerData.layerName; } @@ -1096,6 +1112,56 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, + handleAnimatedClick: { + value: function(event) { + this.handleCheckableClick(event); + this.application.ninja.currentDocument.boolShowOnlyAnimated = event.currentTarget.classList.contains("checked"); + var boolHide = false, + i = 0, + arrLayersLength = this.arrLayers.length; + if (event.currentTarget.classList.contains("checked")) { + // Hide layers with isAnimated = false; + boolHide = true; + } + + for (i = 0; i < arrLayersLength; i++) { + if (boolHide) { + // Hide layers with isAnimated = false + if (this.arrLayers[i].layerData.isTrackAnimated === false) { + this.arrLayers[i].layerData.isVisible = false; + this.triggerLayerBinding(i); + } + } else { + this.arrLayers[i].layerData.isVisible = true; + this.triggerLayerBinding(i); + } + } + + } + }, + handleRelativeClick: { + value: function(event) { + this.handleCheckableClick(event); + this.checkable_absolute.classList.remove("checked"); + // TODO: Use relative positioning + } + }, + handleAbsoluteClick: { + value: function(event) { + this.handleCheckableClick(event); + this.checkable_relative.classList.remove("checked"); + // TODO: Use absolute positioning. + } + }, + handleCheckableClick: { + value: function(event) { + if (event.currentTarget.classList.contains("checked")) { + event.currentTarget.classList.remove("checked"); + } else { + event.currentTarget.classList.add("checked"); + } + } + }, // Trigger the layer/track data binding triggerLayerBinding : { value: function(intIndex) { diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 2e420b98..d2a31033 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -1,297 +1,436 @@ +@charset "UTF-8"; /* This file contains proprietary software owned by Motorola Mobility, Inc.
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ +/* TimelinePanel.scss + * Main SCSS file for TimelinePanel component, compiled by SASS into the file css/TimelinePanel.css. + */ +/* line 22, ../scss/TimelinePanel.scss */ +.tl_container { + display: -webkit-box; + -webkit-box-orient: vertical; + height: 100%; +} + +/* line 27, ../scss/TimelinePanel.scss */ +.maintimeline { + -webkit-box-flex: 1; + display: -webkit-box; + -webkit-box-orient: horizontal; + height: 100%; + position: relative; + margin-top: 1px; +} + +/* line 35, ../scss/TimelinePanel.scss */ +.leftinside { + height: 100%; + width: 100%; + display: -webkit-box; + -webkit-box-orient: vertical; + position: absolute; + overflow: hidden; +} -.tl_container{ - display: -webkit-box; - -webkit-box-orient: vertical; - height: 100%; -} -.maintimeline{ - -webkit-box-flex: 1; - display: -webkit-box; - -webkit-box-orient: horizontal; - height : 100%; - position: relative; - margin-top:1px; -} -.leftinside{ - height: 100%; - width: 100%; - display: -webkit-box; - -webkit-box-orient: vertical; - position:absolute; - overflow: hidden; -} -.rightinside{ - height: 100%; - width: 100%; - display: -webkit-box; - -webkit-box-orient: vertical; - position:absolute; -} -.tl_leftpane{ - min-width: 200px; - max-width: 500px; - position: relative; - overflow: hidden; - -webkit-box-flex: 0; -} -.tl_rightpane{ - width: 100%; - position: relative; - -webkit-box-flex: 1; +/* line 43, ../scss/TimelinePanel.scss */ +.rightinside { + height: 100%; + width: 100%; + display: -webkit-box; + -webkit-box-orient: vertical; + position: absolute; } +/* line 50, ../scss/TimelinePanel.scss */ +.tl_leftpane { + min-width: 200px; + max-width: 500px; + position: relative; + overflow: hidden; + -webkit-box-flex: 0; +} + +/* line 57, ../scss/TimelinePanel.scss */ +.tl_rightpane { + width: 100%; + position: relative; + -webkit-box-flex: 1; +} + +/* line 63, ../scss/TimelinePanel.scss */ #bottomPanelContainer { - overflow: hidden !IMPORTANT; + overflow: hidden !IMPORTANT; } +/* line 67, ../scss/TimelinePanel.scss */ .layout-tracks { - width: 100%; - height: 100%; - padding-bottom: 6px; - box-sizing: border-box; - overflow: auto; - position: relative; -} -.tl_layertracks{ - background-color: #222; - height: 100%; - width: 100%; - -webkit-box-flex: 1; - padding-top: 21px; - box-sizing: border-box; -} -.layerresizer{ - height: auto; - width:6px; - border-right-style: solid; - border-right-color: #333; - border-right-width: thin; - border-left-style: solid; - border-left-color: #000; - border-left-width: thin; - background-color: #222; - cursor: col-resize; - -webkit-box-flex: 0; -} -.timelinecontroller{ - height:20px; - background-color: #222; - -webkit-box-flex: 0; - border-bottom-style: solid; - border-bottom-width: thin; - border-bottom-color: #000; -} -.timelinecontrols{ - width: 100%; - padding-left: 6px; - padding-top: 2px; - height: 18px; - background-color: #222; - float: left; -} -.timetext{ - float: right; - padding-right: 10px; - color: white; -} -.rewindbutton{ - background-image: url('../images/play_prev.png'); - background-repeat: no-repeat; - height: 18px; - width: 18px; - float: left; - padding-right: 5px; -} -.playbutton{ - background-image: url('../images/play.png'); - background-repeat: no-repeat; - height: 18px; - width: 18px; - float: left; - padding-right: 5px; -} -.pausebutton{ - background-image: url('../images/pause.png'); - background-repeat: no-repeat; - height: 18px; - width: 18px; - float: left; - padding-right: 5px; -} -.forwardbutton{ - background-image: url('../images/play_next.png'); - background-repeat: no-repeat; - height: 18px; - width: 18px; - float: left; - padding-right: 5px; -} -.timelinemarkers{ - height: 20px; - width: 100%; - background-color: #222; - border-bottom-style: solid; - border-bottom-width: thin; - border-bottom-color: #000; - -webkit-box-flex: 0; - position: absolute; - background-image: url("../images/timetick.jpg"); - overflow: visible; + width: 100%; + height: 100%; + padding-bottom: 6px; + box-sizing: border-box; + overflow: auto; + position: relative; +} + +/* line 75, ../scss/TimelinePanel.scss */ +.tl_layertracks { + background-color: #292929; + height: 100%; + width: 100%; + -webkit-box-flex: 1; + padding-top: 21px; + box-sizing: border-box; +} + +/* line 83, ../scss/TimelinePanel.scss */ +.layerresizer { + height: auto; + width: 6px; + border-right-style: solid; + border-right-color: #3a3a3a; + border-right-width: thin; + border-left-style: solid; + border-left-color: black; + border-left-width: thin; + background-color: #232323; + cursor: col-resize; + -webkit-box-flex: 0; +} + +/* line 96, ../scss/TimelinePanel.scss */ +.timelinecontroller { + height: 20px; + background-color: #474747; + -webkit-box-flex: 0; + border-bottom-style: solid; + border-bottom-width: thin; + border-bottom-color: black; } + +/* line 104, ../scss/TimelinePanel.scss */ +.timelinecontrols { + width: 100%; + padding-left: 6px; + padding-top: 2px; + height: 18px; + background-color: #474747; + float: left; +} + +/* line 112, ../scss/TimelinePanel.scss */ +.timetext { + float: right; + padding-right: 10px; + color: white; +} + +/* line 117, ../scss/TimelinePanel.scss */ +.rewindbutton { + background-image: url("../images/play_prev.png"); + background-repeat: no-repeat; + height: 18px; + width: 18px; + float: left; + padding-right: 5px; +} + +/* line 125, ../scss/TimelinePanel.scss */ +.playbutton { + background-image: url("../images/play.png"); + background-repeat: no-repeat; + height: 18px; + width: 18px; + float: left; + padding-right: 5px; +} + +/* line 133, ../scss/TimelinePanel.scss */ +.pausebutton { + background-image: url("../images/pause.png"); + background-repeat: no-repeat; + height: 18px; + width: 18px; + float: left; + padding-right: 5px; +} + +/* line 141, ../scss/TimelinePanel.scss */ +.forwardbutton { + background-image: url("../images/play_next.png"); + background-repeat: no-repeat; + height: 18px; + width: 18px; + float: left; + padding-right: 5px; +} + +/* line 149, ../scss/TimelinePanel.scss */ +.timelinemarkers { + height: 20px; + width: 100%; + background-color: #474747; + border-bottom-style: solid; + border-bottom-width: thin; + border-bottom-color: black; + -webkit-box-flex: 0; + position: absolute; + background-image: url("../images/timetick.jpg"); + overflow: visible; +} + +/* line 161, ../scss/TimelinePanel.scss */ .layout_markers { - position: absolute; - overflow: hidden; - top: 0px; - left: 0px; - height: 20px; - width: 100%; - border-bottom-style: solid; -} - -.masterlayer{ - font-family: 'Droid Sans'; - font-size: 12px; - text-shadow: 1px 1px 1px black; - height: 18px; - background-color: #474747; - border-bottom-style: solid; - border-bottom-width: thin; - border-bottom-color: #555; - color: white; - padding-left: 15px; - padding-top: 2px; -} -.mastertrack{ - -webkit-box-flex: 0; - color: white; - height: 20px; - width: 100%; - border-bottom-style: solid; - border-bottom-width: thin; - border-bottom-color: #444; - background-color: #222; - background-image: url("../../Track.reel/images/gridline.jpg"); + position: absolute; + overflow: hidden; + top: 0px; + left: 0px; + height: 20px; + width: 100%; + border-bottom-style: solid; } +/* line 171, ../scss/TimelinePanel.scss */ +.masterlayer { + font-family: 'Droid Sans'; + font-size: 12px; + text-shadow: 1px 1px 1px black; + height: 18px; + background-color: #474747; + border-bottom-style: solid; + border-bottom-width: thin; + border-bottom-color: #3a3a3a; + color: white; + padding-left: 15px; + padding-top: 2px; +} + +/* line 184, ../scss/TimelinePanel.scss */ +.mastertrack { + -webkit-box-flex: 0; + color: white; + height: 20px; + width: 100%; + border-bottom-style: solid; + border-bottom-width: thin; + border-bottom-color: #3a3a3a; + background-color: #232323; + background-image: url("../../Track.reel/images/gridline.jpg"); +} + +/* line 198, ../scss/TimelinePanel.scss */ .container-tracks, .timelinemarkers, .mastertrack { - width: 2000px; -} -.userlayers{ - width: 100%; - background-color: #222; - -webkit-box-flex: 1; - overflow: hidden; - border-bottom-style: solid; - border-bottom-width: thin; - border-bottom-color: #000; -} -.timelinegutter{ - height: 16px; - padding-top: 1px; - padding-left: 6px; - -webkit-box-flex: 0; - background-color: #222; - border-top-style: solid; - border-top-width: thin; - border-top-color: #444; -} -.newlayerbutton{ - background-image: url('../images/plus.png'); - background-repeat: no-repeat; - height: 16px; - width: 16px; - float: left; - padding-right: 5px; -} -.deletelayerbutton{ - background-image: url('../images/trash.png'); - background-repeat: no-repeat; - height: 16px; - width: 16px; - float: left; - padding-right: 5px; -} -.tracktick{ - height: 100%; - width: 15px; - border-right-color: #444; - border-right-style: solid; - border-right-width: thin; - float: left; -} -.timemark{ - font-family: 'Droid Sans'; - font-size: 12px; - text-shadow: 1px 1px 1px black; - width: 76px; - color: #808080; - float: left; - padding-top: 6px; - padding-left: 4px; - text-align: left; -} -.playhead{ - height: 14px; - width: 6px; - position: absolute; - top: 6px; - left: -3px; - z-index: 92; - background-color: #b50003; - opacity: 0.5; -} -.playheadmarker{ - height: 100%; - width: 1px; - background-color: #cccccc; - top: 0; - left: 0; - position: absolute; - z-index: 91; -} -.timebar{ - height: 3px; - width:0; - background-color: #ff0003; - opacity: 0.3; - top:10px; - position: absolute; - border-top: #c7a19f thin solid; - border-right: #ffffff thin solid; -} -.endhottext{ - float: right; - font-family: 'Droid Sans'; - font-size: 12px; - text-shadow: 1px 1px 1px black; - color: white; - margin-top: 0%; + width: 2000px; +} + +/* line 201, ../scss/TimelinePanel.scss */ +.userlayers { + width: 100%; + background-color: #292929; + -webkit-box-flex: 1; + overflow: hidden; + border-bottom-style: solid; + border-bottom-width: thin; + border-bottom-color: black; +} + +/* line 210, ../scss/TimelinePanel.scss */ +.timelinegutter { + height: 16px; + padding-top: 1px; + padding-left: 6px; + -webkit-box-flex: 0; + background-color: #474747; + border-top-style: solid; + border-top-width: thin; + border-top-color: #3a3a3a; } + +/* line 220, ../scss/TimelinePanel.scss */ +.newlayerbutton { + background-image: url("../images/plus.png"); + background-repeat: no-repeat; + height: 16px; + width: 16px; + float: left; + padding-right: 5px; +} + +/* line 228, ../scss/TimelinePanel.scss */ +.deletelayerbutton { + background-image: url("../images/trash.png"); + background-repeat: no-repeat; + height: 16px; + width: 16px; + float: left; + padding-right: 5px; +} + +/* line 236, ../scss/TimelinePanel.scss */ +.tracktick { + height: 100%; + width: 15px; + border-right-color: #3a3a3a; + border-right-style: solid; + border-right-width: thin; + float: left; +} + +/* line 244, ../scss/TimelinePanel.scss */ +.timemark { + font-family: 'Droid Sans'; + font-size: 12px; + text-shadow: 1px 1px 1px #3a3a3a; + width: 76px; + color: gray; + float: left; + padding-top: 6px; + padding-left: 4px; + text-align: left; +} + +/* line 255, ../scss/TimelinePanel.scss */ +.playhead { + height: 14px; + width: 6px; + position: absolute; + top: 6px; + left: -3px; + z-index: 92; + background-color: #b50003; + opacity: 0.5; +} + +/* line 265, ../scss/TimelinePanel.scss */ +.playheadmarker { + height: 100%; + width: 1px; + background-color: white; + top: 0; + left: 0; + position: absolute; + z-index: 91; + opacity: 0.7; +} + +/* line 275, ../scss/TimelinePanel.scss */ +.timebar { + height: 3px; + width: 0; + background-color: #ff0003; + opacity: 0.3; + top: 10px; + position: absolute; + border-top: #c7a19f thin solid; + border-right: #ffffff thin solid; +} + +/* line 285, ../scss/TimelinePanel.scss */ +.endhottext { + float: right; + font-family: 'Droid Sans'; + font-size: 12px; + text-shadow: 1px 1px 1px #3a3a3a; + color: white; + margin-top: 0%; +} + +/* line 293, ../scss/TimelinePanel.scss */ .timeline-disabled { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - background-color: rgba(30,30,30, 0.796); - z-index: 100; - display: none; - box-shadow: rgb(17, 17, 17) 0px 0px 14px inset; + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + background-color: rgba(30, 30, 30, 0.796); + z-index: 100; + display: none; + box-shadow: #111111 0px 0px 14px inset; } + +/* line 304, ../scss/TimelinePanel.scss */ .timeline-dnd-helper { - -webkit-transform: scale(.9, .9); -} -.tl_slider{ - width: 65px; - height: 5px; - background: none; - float:left; - margin-left: 5%; + -webkit-transform: scale(0.9, 0.9); +} + +/* line 307, ../scss/TimelinePanel.scss */ +.tl_slider { + width: 65px; + height: 5px; + background: none; + float: left; + margin-left: 5%; +} + +/* Configuration menu */ +/* line 316, ../scss/TimelinePanel.scss */ +.tl-configbutton { + position: absolute; + top: 23px; + right: 2px; + width: 20px; + height: 20px; + background-image: url(../images/icon-gear.png); + background-repeat: no-repeat; + cursor: pointer; + z-index: 100; + background-position: 100% 0px; +} + +/* line 328, ../scss/TimelinePanel.scss */ +.tl-configbutton:hover { + width: 180px; +} + +/* line 332, ../scss/TimelinePanel.scss */ +.tl-configbutton .tl-dropdown { + position: absolute; + border: 1px solid black; + top: 16px; + right: 2px; + width: 180px; + padding-bottom: 7px; + background-color: #474747; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); + display: none; +} + +/* line 343, ../scss/TimelinePanel.scss */ +.tl-configbutton:hover .tl-dropdown { + display: block; +} + +/* line 347, ../scss/TimelinePanel.scss */ +.tl-configbutton .checkable { + padding-left: 20px; + height: 20px; + line-height: 20px; + margin-top: 3px; +} + +/* line 353, ../scss/TimelinePanel.scss */ +.tl-configbutton .checkable:hover { + background-color: #b2b2b2; + color: #242424; + text-shadow: none; +} + +/* line 358, ../scss/TimelinePanel.scss */ +.tl-configbutton .checkable.checked { + background-image: url(../images/icon-checkmark.png); + background-repeat: no-repeat; + background-position: 6px 4px; +} + +/* line 364, ../scss/TimelinePanel.scss */ +.tl-configbutton .nj-divider { + margin-top: 7px; +} + +/* line 368, ../scss/TimelinePanel.scss */ +.layer-hidden { + display: none; } diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 8b639758..64ac08d3 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -32,6 +32,28 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } }, + _isVisible:{ + value: true + }, + + isVisible:{ + get:function(){ + return this._isVisible; + }, + set:function(value){ + if (this._isVisible !== value) { + this._isVisible = value; + if (this.element !== null) { + if (value === true) { + this.element.classList.remove("layer-hidden"); + } else { + this.element.classList.add("layer-hidden"); + } + } + } + this.trackData.isVisible = value; + } + }, // Are the various collapsers collapsed or not _isMainCollapsed:{ @@ -390,6 +412,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.isTransformCollapsed = this.trackData.isTransformCollapsed; this.isStyleCollapsed = this.trackData.isStyleCollapsed; this.trackPosition = this.trackData.trackPosition; + this.isVisible = this.trackData.isVisible; this.needsDraw = true; } }, @@ -454,7 +477,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.retrieveStoredTweens(); } } - } } } -- cgit v1.2.3