From 79e9e90afa0b42238d44057eb518ca50a47a4357 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 11 Apr 2012 16:18:33 -0700 Subject: Timeline: Change Master Layer configuration menu to be on click; bug fix: Master Layer config menu does not scroll with layers. Bug fix: New layers do not take into account "show only animated layers" feature. --- js/panels/Timeline/Layer.reel/Layer.js | 3 - .../Timeline/TimelinePanel.reel/TimelinePanel.html | 22 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 83 ++-- .../TimelinePanel.reel/css/TimelinePanel.css | 428 ++++----------------- .../TimelinePanel.reel/scss/TimelinePanel.scss | 7 +- 5 files changed, 141 insertions(+), 402 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index f62d43a4..3bc87f68 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -542,9 +542,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); - - // Bind this.layerTag to the tag - } }, draw: { diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 09c1f98c..5234b43d 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -35,7 +35,8 @@ "timeline_disabler" : {"#" : "timeline-disabler"}, "checkable_relative" : {"#" : "checkable_relative"}, "checkable_absolute" : {"#" : "checkable_absolute"}, - "checkable_animated" : {"#" : "checkable_animated"} + "checkable_animated" : {"#" : "checkable_animated"}, + "tl_configbutton" : {"#" : "tl-configbutton"} } }, @@ -181,15 +182,18 @@
-
Master Layer
-
-
-
Use relative positioning
-
Use absolute positioning
-
-
Show only animated layers
-
+
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 eabe1a7a..191b87d5 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -342,6 +342,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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); + this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); + document.addEventListener("click", this.handleDocumentClick.bind(this), false); } }, @@ -781,6 +783,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData.isSelected = true; thingToPush.layerData._isFirstDraw = true; thingToPush.layerData.created = true; + + if (this.checkable_animated.classList.contains("checked")) { + thingToPush.layerData.isVisible = false; + } for (i = 0; i < this.arrLayersLength; i++) { this.arrLayers[i].layerData.isSelected = false; @@ -808,35 +814,37 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { restoreLayer:{ value:function (ele) { - var newLayerName, thingToPush = this.createLayerTemplate(); + var newLayerName, thingToPush = this.createLayerTemplate(); - this.currentLayerNumber = this.currentLayerNumber + 1; - newLayerName = "Layer " + this.currentLayerNumber; + this.currentLayerNumber = this.currentLayerNumber + 1; + newLayerName = "Layer " + this.currentLayerNumber; - if(ele.dataset.storedLayerName){ - newLayerName = ele.dataset.storedLayerName; - } - 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; - - // Are there styles to add? - thingToPush.layerData.arrLayerStyles = this.createLayerStyles(); - thingToPush.layerData.arrStyleTracks = this.createStyleTracks(); + if(ele.dataset.storedLayerName){ + newLayerName = ele.dataset.storedLayerName; + } + 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; + if (this.checkable_animated.classList.contains("checked")) { + thingToPush.layerData.isVisible = false; + } + // Are there styles to add? + thingToPush.layerData.arrLayerStyles = this.createLayerStyles(); + thingToPush.layerData.arrStyleTracks = this.createStyleTracks(); - if (this._openDoc) { - thingToPush.layerData.elementsList.push(ele); - } + if (this._openDoc) { + thingToPush.layerData.elementsList.push(ele); + } + + this.temparrLayers.splice(0, 0, thingToPush); + thingToPush.layerData.trackPosition = this.temparrLayers.length - 1; + thingToPush.layerData.layerPosition = this.temparrLayers.length - 1; - this.temparrLayers.splice(0, 0, thingToPush); - thingToPush.layerData.trackPosition = this.temparrLayers.length - 1; - thingToPush.layerData.layerPosition = this.temparrLayers.length - 1; + this._openDoc = false; - this._openDoc = false; -// } } }, @@ -1100,8 +1108,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, + handleConfigButtonClick: { + value: function(event) { + event.stopPropagation(); + this.handleCheckableClick(event); + + } + }, + handleDocumentClick: { + value: function(event) { + if (this.tl_configbutton.classList.contains("checked")) { + this.tl_configbutton.classList.remove("checked"); + } + } + }, + handleAnimatedClick: { value: function(event) { + if (typeof(this.application.ninja.currentDocument) === "undefined") { + return; + } + if (this.application.ninja.currentDocument == null) { + return; + } this.handleCheckableClick(event); this.application.ninja.currentDocument.boolShowOnlyAnimated = event.currentTarget.classList.contains("checked"); var boolHide = false, @@ -1129,14 +1158,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleRelativeClick: { value: function(event) { - this.handleCheckableClick(event); + if (!event.currentTarget.classList.contains("checked")) { + this.handleCheckableClick(event); + } this.checkable_absolute.classList.remove("checked"); // TODO: Use relative positioning } }, handleAbsoluteClick: { value: function(event) { - this.handleCheckableClick(event); + if (!event.currentTarget.classList.contains("checked")) { + this.handleCheckableClick(event); + } this.checkable_relative.classList.remove("checked"); // TODO: Use absolute positioning. } diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index d2a31033..29bf8d38 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -1,436 +1,138 @@ @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. - */ +/* 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%; -} +.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; -} +.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; -} +.leftinside { height: 100%; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; position: absolute; overflow: hidden; } /* line 43, ../scss/TimelinePanel.scss */ -.rightinside { - height: 100%; - width: 100%; - display: -webkit-box; - -webkit-box-orient: vertical; - position: absolute; -} +.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; -} +.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; -} +.tl_rightpane { width: 100%; position: relative; -webkit-box-flex: 1; } /* line 63, ../scss/TimelinePanel.scss */ -#bottomPanelContainer { - overflow: hidden !IMPORTANT; -} +#bottomPanelContainer { 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; -} +.layout-tracks { 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; -} +.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; -} +.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; -} +.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; -} +.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; -} +.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; -} +.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; -} +.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; -} +.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; -} +.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; -} +.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; -} +.layout_markers { 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; -} +.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"); -} +.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; -} +.container-tracks, .timelinemarkers, .mastertrack { 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; -} +.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; -} +.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; -} +.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; -} +.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; -} +.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; -} +.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; -} +.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; -} +.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; -} +.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%; -} +.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: #111111 0px 0px 14px inset; -} +.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: #111111 0px 0px 14px inset; } /* line 304, ../scss/TimelinePanel.scss */ -.timeline-dnd-helper { - -webkit-transform: scale(0.9, 0.9); -} +.timeline-dnd-helper { -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%; -} +.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; -} +.layer-master { position: relative; } + +/* line 319, ../scss/TimelinePanel.scss */ +.tl-configbutton { position: absolute; top: 0px; 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 331, ../scss/TimelinePanel.scss */ +.tl-configbutton:hover { width: 180px; } + +/* line 335, ../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 346, ../scss/TimelinePanel.scss */ +.tl-configbutton.checked .tl-dropdown { display: block; } + +/* line 350, ../scss/TimelinePanel.scss */ +.tl-configbutton .checkable { padding-left: 20px; height: 20px; line-height: 20px; margin-top: 3px; } + +/* line 356, ../scss/TimelinePanel.scss */ +.tl-configbutton .checkable:hover { background-color: #b2b2b2; color: #242424; text-shadow: none; } + +/* line 361, ../scss/TimelinePanel.scss */ +.tl-configbutton .checkable.checked { background-image: url(../images/icon-checkmark.png); background-repeat: no-repeat; background-position: 6px 4px; } + +/* line 367, ../scss/TimelinePanel.scss */ +.tl-configbutton .nj-divider { margin-top: 7px; } + +/* line 371, ../scss/TimelinePanel.scss */ +.layer-hidden { display: none; } diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss index 5ff710a1..716ee3d3 100644 --- a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss +++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss @@ -313,9 +313,12 @@ } /* Configuration menu */ +.layer-master { + position: relative; +} .tl-configbutton { position: absolute; - top: 23px; + top: 0px; right: 2px; width: 20px; height: 20px; @@ -340,7 +343,7 @@ box-shadow: 2px 2px 2px $color-app-shadow; display: none; } -.tl-configbutton:hover .tl-dropdown { +.tl-configbutton.checked .tl-dropdown { display: block; } -- cgit v1.2.3