From 6431037185722a63064c2f2fb31fe0e325c9653a Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 19 Jul 2012 10:19:41 -0700 Subject: FIx 3D animation workflow Can now add 3D to any keyframe and all the tween will initialize their 3D identity matrices Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 26 ++++++++++++++++++++++ js/panels/Timeline/Tween.reel/Tween.js | 4 ++++ 2 files changed, 30 insertions(+) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index f3ab0d84..56e5d2f1 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -354,6 +354,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + _enabled3D:{ + value:false + }, + enabled3D:{ + serializable:true, + get:function () { + return this._enabled3D; + }, + set:function (val) { + this._enabled3D = val; + this.trackData.enabled3D = val; + } + }, + _ruleList:{ value:[] }, @@ -495,6 +509,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.trackPosition = this.trackData.trackPosition; this.isVisible = this.trackData.isVisible; this.stageElement = this.trackData.stageElement; + this.enabled3D = this.trackData.enabled3D; this.trackEditorProperty = "master"; this.needsDraw = true; } @@ -1087,6 +1102,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + initial3DforAllTweens:{ + value:function(){ + var j; + var tweensLength = this.tweens.length; + for (j = 0; j < tweensLength; j++) { + this.tweens[j].tweenData.tweenedProperties["-webkit-transform"] = "perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"; + } + this.enabled3D = true; + } + }, + addAnimationRuleToElement:{ value:function (tweenEvent) { this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 0f567fbd..e3f9e71a 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -299,6 +299,10 @@ var Tween = exports.Tween = Montage.create(Component, { this.parentComponent.parentComponent.updateKeyframeRule(); this.isTweenAnimated = true; } + + if(!this.parentComponent.parentComponent.enabled3D){ + this.parentComponent.parentComponent.initial3DforAllTweens(); + } if (eventDetail.source === "translateTool" || eventDetail.source === "rotateTool") { var arrMat = eventDetail.data.value[0].properties.mat, -- cgit v1.2.3 From 0df5ad6391df5d285cb8b93dc23e2595cddaec3c Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 19 Jul 2012 10:36:31 -0700 Subject: Re-added Radial Blur and Raiders materials --- js/panels/Materials/materials-data.json | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'js/panels') diff --git a/js/panels/Materials/materials-data.json b/js/panels/Materials/materials-data.json index abdacbe1..8e025185 100644 --- a/js/panels/Materials/materials-data.json +++ b/js/panels/Materials/materials-data.json @@ -28,10 +28,18 @@ "label": "Pulse", "id" : "Pulse" }, + { + "label": "Radial Blur", + "id" : "Radial Blur" + }, { "label": "Radial Gradient", "id" : "Radial Gradient" }, + { + "label": "Raiders", + "id" : "Raiders" + }, { "label": "Taper", "id" : "Taper" -- cgit v1.2.3 From fc13ef1e806116bb7ece5bb06604fa4f5714a6ed Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 19 Jul 2012 10:55:22 -0700 Subject: Squashed commit of the following: commit 0285afe3d4bd458a51f11241f13ea6ffdb0283ed Merge: 2f9f5e3 16d06ba Author: Nivesh Rajbhandari Date: Thu Jul 19 10:54:25 2012 -0700 Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations commit 2f9f5e369eb96f6c81b5e4bcbe09b418825e2864 Author: Nivesh Rajbhandari Date: Wed Jul 18 17:15:19 2012 -0700 Fixed selection bounds not drawing in nested tags. Signed-off-by: Nivesh Rajbhandari commit b0a3507f9d27579ad511c69314a09136d7f7c6a0 Author: Nivesh Rajbhandari Date: Wed Jul 18 11:07:44 2012 -0700 Layout info needs to redraw if stage is updated. Signed-off-by: Nivesh Rajbhandari commit 63c5e0bf52c33706ba597cb69f7794e287bd0f06 Author: Nivesh Rajbhandari Date: Tue Jul 17 15:40:54 2012 -0700 Per feedback from QE, we are still going to draw tool feedback on each mouse move so the selection bounds are not out of sync with the elements. Signed-off-by: Nivesh Rajbhandari commit 0599a742092b985c4002977e501e3b457173f1d9 Author: Nivesh Rajbhandari Date: Tue Jul 17 15:28:25 2012 -0700 Fixed grid not drawing correctly when switching documents and when adding/removing elements. Signed-off-by: Nivesh Rajbhandari commit fd9410606ee6358910d65b2cb5f71812fd44a7c4 Author: Nivesh Rajbhandari Date: Tue Jul 17 11:36:09 2012 -0700 Updated drawing feedback to handle matrix 2d values entered via CSS Panel. Signed-off-by: Nivesh Rajbhandari commit 559c16c7ac8c9f40b94a011a6f932d4f97df66a7 Author: Nivesh Rajbhandari Date: Mon Jul 16 17:14:28 2012 -0700 IKNinja-751 - Selection boundary doesn't follow the transform applied in the CSS Panel. Signed-off-by: Nivesh Rajbhandari commit e2da5340159db5cd6f75bf6c9b7eb9cbf959e5cd Merge: 7cc5de3 5146f22 Author: Nivesh Rajbhandari Date: Mon Jul 16 15:36:28 2012 -0700 Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations commit 7cc5de39e41b4220f53c91b15b0cf0ed53e0b0f6 Author: Nivesh Rajbhandari Date: Mon Jul 16 14:52:06 2012 -0700 Check if ownerDocument.defaultValue is null. Signed-off-by: Nivesh Rajbhandari commit 5ae97995a28a4b06fb7f8703eb8090ea16d88acd Merge: d17974d 0ede302 Author: Nivesh Rajbhandari Date: Mon Jul 16 09:27:22 2012 -0700 Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations commit d17974d77273bb635311cb6466f4427cf4d9e5d4 Author: Nivesh Rajbhandari Date: Mon Jul 16 08:45:05 2012 -0700 Pass in selectedElements array directly to drawUtils when drawing selection bounds instead of creating a duplicate array. Signed-off-by: Nivesh Rajbhandari commit 0b1ea3144cb3e2c1d272f60da32423d0604ace3b Author: Nivesh Rajbhandari Date: Fri Jul 13 14:03:40 2012 -0700 Fixed line tool not drawing the width and height info. Signed-off-by: Nivesh Rajbhandari commit b9c70e8d9ae324aa21fa5490edc71d8503bcefbc Author: Nivesh Rajbhandari Date: Fri Jul 13 12:42:25 2012 -0700 Used cached offsetWidth and offsetHeight. Signed-off-by: Nivesh Rajbhandari commit 9e17ac7124745ba745014efe149b31dee4fe658f Author: Nivesh Rajbhandari Date: Thu Jul 12 16:25:41 2012 -0700 Converting tabs to spaces … again! Signed-off-by: Nivesh Rajbhandari commit 351726c951bb73c28f0e15ea1ab32e85cc735688 Author: Nivesh Rajbhandari Date: Thu Jul 12 16:14:31 2012 -0700 Tabs should be 4 spaces. Signed-off-by: Nivesh Rajbhandari commit 250c419aa2dbcb10f012817ee7039aca77cb2518 Merge: 3f8d61a 2880e1d Author: Nivesh Rajbhandari Date: Thu Jul 12 16:08:31 2012 -0700 Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations commit 3f8d61a676da3992947ed9a2ed0e449780fcfbe0 Author: Nivesh Rajbhandari Date: Thu Jul 12 15:53:44 2012 -0700 Rotate tool was not working immediately after switching selection and selection bounds were not drawing after resizing canvases. Signed-off-by: Nivesh Rajbhandari commit e2e1f81e3b6917e1032e1b99b79c266937f3bb25 Author: Nivesh Rajbhandari Date: Thu Jul 12 12:15:59 2012 -0700 Single draw cycle for stage updates and tool drawings. Signed-off-by: Nivesh Rajbhandari commit 95a90b4c95ee3163c97bea317144366674e49ade Author: Nivesh Rajbhandari Date: Mon Jun 18 11:46:38 2012 -0700 Single draw cycle for the stage and layout. Signed-off-by: Nivesh Rajbhandari commit 21966b1515d80d2161a14e5a19bc66f3f49a92ce Author: Nivesh Rajbhandari Date: Fri Jun 15 13:33:14 2012 -0700 Cache element offsets, including offsetParent. Signed-off-by: Nivesh Rajbhandari commit 80c563c8ba06149691c6c1e754dd9a5e43bc7d4b Author: Nivesh Rajbhandari Date: Mon Jul 9 17:30:00 2012 -0700 Open materials editor popup next to PI button. Signed-off-by: Nivesh Rajbhandari Signed-off-by: Nivesh Rajbhandari --- .../materials-library-panel.js | 14 +++++++++++++- js/panels/Splitter.js | 2 ++ js/panels/css-panel/styles-view-delegate.js | 3 ++- 3 files changed, 17 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js index aef48230..4b9044ae 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js @@ -116,6 +116,14 @@ exports.MaterialsLibraryPanel = Montage.create(Component, { handleShowMaterialPopup: { enumerable: false, value: function (event) { + var piButton = this.application.eventManager.componentClaimingPointer("mouse"); + if(piButton) { + this.selectedMaterialNode = piButton.element; + } else { + this.selectedMaterialNode = null; + } + + this.materialId = event.detail.materialId; this._showMaterialPopup(event.detail); } }, @@ -213,7 +221,11 @@ exports.MaterialsLibraryPanel = Montage.create(Component, { contentHt = parseFloat(content.style.height) || content.offsetHeight || 0, contentWd = parseFloat(content.style.width) || content.offsetWidth || 0, pt = webkitConvertPointFromNodeToPage(this.selectedMaterialNode, new WebKitPoint(0, 0)); - return {top: pt.y - contentHt + 10, left: pt.x - contentWd + 10}; + if(!pt) { + return defaultPosition; + } else { + return {top: pt.y - contentHt + 10, left: pt.x - contentWd + 10}; + } } } }); diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js index 39e51901..0e7a4e68 100755 --- a/js/panels/Splitter.js +++ b/js/panels/Splitter.js @@ -111,6 +111,8 @@ exports.Splitter = Montage.create(Component, { else this.panel.classList.remove("collapsed"); this.element.classList.remove("collapsed"); if(this._resizeBar != null) this.resizeBar.classList.remove("collapsed"); + // webkitTransitionEnd is not fired when expanded, so force draw here. + this.application.ninja.stage.resizeCanvases = true; } } }, diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 6b80663a..113300b2 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -337,7 +337,8 @@ exports.StylesViewDelegate = Montage.create(Component, { type : 'cssChange', data: { "prop": property, - "value": value + "value": value, + "els": this.application.ninja.selectedElements }, redraw: null }); -- cgit v1.2.3 From 431b6fa7610e59074b4ebb3e9e712672f185b8ad Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 19 Jul 2012 11:44:50 -0700 Subject: Renamed Raiders material to Dark Blur, and Paris to Blue Sky. --- js/panels/Materials/materials-data.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Materials/materials-data.json b/js/panels/Materials/materials-data.json index 8e025185..6fe5da69 100644 --- a/js/panels/Materials/materials-data.json +++ b/js/panels/Materials/materials-data.json @@ -5,10 +5,18 @@ "label": "Ninja Materials", "children": [ { + "label": "Blue Sky", + "id" : "Blue Sky" + }, + { "label": "Bump Metal", "id" : "Bump Metal" }, - { + { + "label": "Dark Blur", + "id" : "Dark Blur" + }, + { "label": "Flag", "id" : "Flag" }, @@ -16,10 +24,6 @@ "label": "Linear Gradient", "id" : "Linear Gradient" }, - { - "label": "Paris", - "id" : "Paris" - }, { "label": "Plasma", "id" : "Plasma" @@ -36,10 +40,6 @@ "label": "Radial Gradient", "id" : "Radial Gradient" }, - { - "label": "Raiders", - "id" : "Raiders" - }, { "label": "Taper", "id" : "Taper" -- cgit v1.2.3 From 7b7f4157dfd1d3ad2b4a266c92594da56a619254 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 19 Jul 2012 11:58:23 -0700 Subject: Improve keyframe selection by moving playhead marker to lower z-index Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 4 ++-- js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss | 2 +- js/panels/Timeline/Tween.reel/Tween.js | 6 ++++++ 3 files changed, 9 insertions(+), 3 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index f9f5e98c..201b530e 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -113,7 +113,7 @@ POSSIBILITY OF SUCH DAMAGE. .playhead { height: 14px; width: 6px; position: absolute; top: 6px; left: -3px; z-index: 92; background-color: #b50003; opacity: 0.5; visibility: hidden; } /* line 291, ../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: 1; opacity: 0.7; } /* line 301, ../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; } @@ -165,7 +165,7 @@ POSSIBILITY OF SUCH DAMAGE. .tl_slider { width: 127px; height: 5px; float: left; clear: none; margin: 2px 0px 0px 0px; } /* line 409, ../scss/TimelinePanel.scss */ -.tl_slider .slider-track { background: #29292; width: 127px; height: 4px; border: 1px solid #000; top: 3px; } +.tl_slider .slider-track { background: #292929; width: 127px; height: 4px; border: 1px solid #000; top: 3px; } /* line 417, ../scss/TimelinePanel.scss */ .sliderClass { float: left; width: 127px; } diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss index d2d813bb..b07c50b2 100644 --- a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss +++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss @@ -295,7 +295,7 @@ POSSIBILITY OF SUCH DAMAGE. top: 0; left: 0; position: absolute; - z-index: 91; + z-index: 1; opacity: 0.7; } .timebar{ diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index e3f9e71a..c9b59253 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -377,6 +377,12 @@ var Tween = exports.Tween = Montage.create(Component, { this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween"); this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween"); + + if(this.parentComponent.parentComponent.enabled3D){ + var current3DMatrix = this.tweenedProperties["-webkit-transform"]; + this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "-webkit-transform", [current3DMatrix], "Change", "tween"); + } + } } }, -- cgit v1.2.3 From 6403ec6d21048c93138ddcbcc59fc4677121ed5e Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 19 Jul 2012 15:53:54 -0700 Subject: Timeline: updated livePreview to timeline play. Hide canvas and draw red outline - Changed the play button to a toggle button - livePreview code in stage activated via bindings - Draw a red outline of the canvas when in play Signed-off-by: Valerio Virgillito --- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 22 ++++-- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 31 ++++----- .../TimelinePanel.reel/css/TimelinePanel.css | 81 ++++++++++++---------- .../TimelinePanel.reel/scss/TimelinePanel.scss | 26 ++++--- 4 files changed, 96 insertions(+), 64 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index c287e68e..0d769c23 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -54,7 +54,6 @@ POSSIBILITY OF SUCH DAMAGE. "playheadmarker": {"#": "playhead_marker"}, "timetext" : {"#": "time_text"}, "timebar" : {"#": "time_bar"}, - "container_tracks" : {"#" : "container-tracks"}, "end_hottext" : {"@" : "endHottext"}, "container_layers" : {"#" : "container-layers"}, "container_tracks" : {"#" : "container-tracks"}, @@ -62,8 +61,23 @@ POSSIBILITY OF SUCH DAMAGE. "checkable_animated" : {"#" : "checkable_animated"}, "tl_configbutton" : {"#" : "tl-configbutton"}, "checkable_lock" : {"#" : "checkable_lock"}, - "checkable_visible":{"#" : "checkable_visible"}, - "play_button" : {"#" : "play_button"} + "checkable_visible":{"#" : "checkable_visible"} + + } + }, + + "playButton": { + "prototype": "montage/ui/toggle-button.reel", + "properties": { + "element": {"#": "play_button"}, + "identifier": "playButton", + "pressedClass": "pausebutton", + "pressedLabel": "", + "unpressedLabel": "", + "pressed": false + }, + "bindings": { + "pressed": {"<->": "@owner.stage.timelinePlay"} } }, @@ -190,7 +204,7 @@ POSSIBILITY OF SUCH DAMAGE.
-
+
00:00:00
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 4e9771d4..521c315d 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -36,6 +36,21 @@ var Montage = require("montage/core/core").Montage, var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { + _stage: { + value: null + }, + + stage: { + get: function() { + return this._stage; + }, + set: function(value) { + if(value) { + this._stage = value; + } + } + }, + /* === BEGIN: Models === */ _user_layers: { value: null @@ -1015,7 +1030,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false); this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false); this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false); - this.play_button.addEventListener("click", this.handlePlayButtonClick.bind(this), false); this.addPropertyChangeListener("currentDocument.model.domContainer", this); // Start the panel out in disabled mode by default @@ -1638,21 +1652,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - handlePlayButtonClick:{ - value:function(ev){ - this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview; - - if (this.application.ninja.appModel.livePreview) { - this.play_button.classList.remove("playbutton"); - this.play_button.classList.add("pausebutton"); - - } else { - this.play_button.classList.remove("pausebutton"); - this.play_button.classList.add("playbutton"); - } - } - }, - handleKeyframeShortcut:{ value:function(action){ var tempEv = {}; diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index f9f5e98c..f82feb71 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -68,107 +68,116 @@ POSSIBILITY OF SUCH DAMAGE. .rewindbutton { background-image: url("../images/play_prev.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } /* line 150, ../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: transparent url("../images/play.png") no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; border: none; margin: 0; min-width: 0; opacity: 0.8; } -/* line 158, ../scss/TimelinePanel.scss */ -.pausebutton { background-image: url("../images/pause.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } +/* line 162, ../scss/TimelinePanel.scss */ +.playbutton:hover { background-color: #474747; opacity: 1; } /* line 166, ../scss/TimelinePanel.scss */ +.playbutton.active:hover { background-color: #474747; opacity: 1; } + +/* line 170, ../scss/TimelinePanel.scss */ +.playbutton:focus { -webkit-box-shadow: none; } + +/* line 173, ../scss/TimelinePanel.scss */ +.pausebutton { background-image: url("../images/pause.png"); } + +/* line 176, ../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 174, ../scss/TimelinePanel.scss */ +/* line 184, ../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 186, ../scss/TimelinePanel.scss */ +/* line 196, ../scss/TimelinePanel.scss */ .layout_markers { position: absolute; overflow: hidden; top: 0px; left: 0px; height: 20px; width: 100%; border-bottom-style: solid; } -/* line 196, ../scss/TimelinePanel.scss */ +/* line 206, ../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 209, ../scss/TimelinePanel.scss */ +/* line 219, ../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 223, ../scss/TimelinePanel.scss */ +/* line 233, ../scss/TimelinePanel.scss */ .container-tracks, .timelinemarkers, .mastertrack { width: 2000px; } -/* line 226, ../scss/TimelinePanel.scss */ +/* line 236, ../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 235, ../scss/TimelinePanel.scss */ +/* line 245, ../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 245, ../scss/TimelinePanel.scss */ +/* line 255, ../scss/TimelinePanel.scss */ .newlayerbutton { background-image: url("../images/plus.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; } -/* line 253, ../scss/TimelinePanel.scss */ +/* line 263, ../scss/TimelinePanel.scss */ .deletelayerbutton { background-image: url("../images/trash.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; } -/* line 261, ../scss/TimelinePanel.scss */ +/* line 271, ../scss/TimelinePanel.scss */ .tracktick { height: 100%; width: 15px; border-right-color: #3a3a3a; border-right-style: solid; border-right-width: thin; float: left; } -/* line 269, ../scss/TimelinePanel.scss */ +/* line 279, ../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 280, ../scss/TimelinePanel.scss */ +/* line 290, ../scss/TimelinePanel.scss */ .playhead { height: 14px; width: 6px; position: absolute; top: 6px; left: -3px; z-index: 92; background-color: #b50003; opacity: 0.5; visibility: hidden; } -/* line 291, ../scss/TimelinePanel.scss */ +/* line 301, ../scss/TimelinePanel.scss */ .playheadmarker { height: 100%; width: 1px; background-color: white; top: 0; left: 0; position: absolute; z-index: 91; opacity: 0.7; } -/* line 301, ../scss/TimelinePanel.scss */ +/* line 311, ../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 311, ../scss/TimelinePanel.scss */ +/* line 321, ../scss/TimelinePanel.scss */ .timelinegutter .endhottext { float: right; font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px #3a3a3a; color: white; margin-top: 0%; } -/* line 319, ../scss/TimelinePanel.scss */ +/* line 329, ../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; } -/* line 330, ../scss/TimelinePanel.scss */ +/* line 340, ../scss/TimelinePanel.scss */ .timeline-dnd-helper { -webkit-transform: scale(0.9, 0.9); } -/* line 333, ../scss/TimelinePanel.scss */ +/* line 343, ../scss/TimelinePanel.scss */ .tl_slider { width: 65px; height: 5px; background: none; float: left; margin-left: 5%; } /* Configuration menu */ -/* line 342, ../scss/TimelinePanel.scss */ +/* line 352, ../scss/TimelinePanel.scss */ .layer-master { position: relative; } -/* line 345, ../scss/TimelinePanel.scss */ +/* line 355, ../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 357, ../scss/TimelinePanel.scss */ +/* line 367, ../scss/TimelinePanel.scss */ .tl-configbutton:hover { width: 180px; } -/* line 361, ../scss/TimelinePanel.scss */ +/* line 371, ../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 372, ../scss/TimelinePanel.scss */ +/* line 382, ../scss/TimelinePanel.scss */ .tl-configbutton.checked .tl-dropdown { display: block; } -/* line 376, ../scss/TimelinePanel.scss */ +/* line 386, ../scss/TimelinePanel.scss */ .tl-configbutton .checkable { padding-left: 20px; height: 20px; line-height: 20px; margin-top: 3px; } -/* line 382, ../scss/TimelinePanel.scss */ +/* line 392, ../scss/TimelinePanel.scss */ .tl-configbutton .checkable:hover { background-color: #b2b2b2; color: #242424; text-shadow: none; } -/* line 387, ../scss/TimelinePanel.scss */ +/* line 397, ../scss/TimelinePanel.scss */ .tl-configbutton .checkable.checked { background-image: url(../images/icon-checkmark.png); background-repeat: no-repeat; background-position: 6px 4px; } -/* line 393, ../scss/TimelinePanel.scss */ +/* line 403, ../scss/TimelinePanel.scss */ .tl-configbutton .nj-divider { margin-top: 7px; } -/* line 397, ../scss/TimelinePanel.scss */ +/* line 407, ../scss/TimelinePanel.scss */ .layer-hidden { display: none; } -/* line 401, ../scss/TimelinePanel.scss */ +/* line 411, ../scss/TimelinePanel.scss */ .tl_slider { width: 127px; height: 5px; float: left; clear: none; margin: 2px 0px 0px 0px; } -/* line 409, ../scss/TimelinePanel.scss */ -.tl_slider .slider-track { background: #29292; width: 127px; height: 4px; border: 1px solid #000; top: 3px; } +/* line 419, ../scss/TimelinePanel.scss */ +.tl_slider .slider-track { background: #292929; width: 127px; height: 4px; border: 1px solid #000; top: 3px; } -/* line 417, ../scss/TimelinePanel.scss */ +/* line 427, ../scss/TimelinePanel.scss */ .sliderClass { float: left; width: 127px; } -/* line 422, ../scss/TimelinePanel.scss */ +/* line 432, ../scss/TimelinePanel.scss */ .sliderClass .knob { background: url(../images/knob.png) no-repeat transparent center center; margin-bottom: 2px; } diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss index d2d813bb..cf6df347 100644 --- a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss +++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss @@ -148,20 +148,30 @@ POSSIBILITY OF SUCH DAMAGE. padding-right: 5px; } .playbutton{ - background-image: url('../images/play.png'); - background-repeat: no-repeat; + background: transparent url("../images/play.png") no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; + + border: none; + margin: 0; + min-width: 0; + opacity: 0.8; +} +.playbutton:hover { + background-color: #474747; + opacity: 1; +} +.playbutton.active:hover { + background-color: #474747; + opacity: 1; +} +.playbutton:focus { + -webkit-box-shadow: none; } .pausebutton{ - background-image: url('../images/pause.png'); - background-repeat: no-repeat; - height: 18px; - width: 18px; - float: left; - padding-right: 5px; + background-image: url("../images/pause.png"); } .forwardbutton{ background-image: url('../images/play_next.png'); -- cgit v1.2.3