From f3dc624fa464a79fd8e8cec1ddd16ed2109bda23 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 10 Feb 2012 16:05:27 -0800 Subject: Revert "Merge from /joseeight/ninja-internal/tree/FileIO" This reverts commit c48eeb01bd726895dc577d8b843b2a75883eee07. Signed-off-by: Ananya Sen --- js/panels/CSSPanel/CSSPanel.js | 6 +- js/panels/Resizer.js | 4 +- js/panels/Timeline/Collapser.js | 320 ------ js/panels/Timeline/Keyframe.reel/Keyframe.html | 27 - js/panels/Timeline/Keyframe.reel/Keyframe.js | 154 --- js/panels/Timeline/Keyframe.reel/css/Keyframe.css | 15 - js/panels/Timeline/Layer.reel/Layer.html | 168 ---- js/panels/Timeline/Layer.reel/Layer.js | 626 ------------ js/panels/Timeline/Layer.reel/css/Layer.css | 322 ------ js/panels/Timeline/Layer.reel/images/eye.png | Bin 1331 -> 0 bytes .../Timeline/Layer.reel/images/icon-collapsed.png | Bin 325 -> 0 bytes js/panels/Timeline/Layer.reel/images/icon-eye.png | Bin 550 -> 0 bytes js/panels/Timeline/Layer.reel/images/icon-lock.png | Bin 475 -> 0 bytes .../Timeline/Layer.reel/images/icon-minus.png | Bin 161 -> 0 bytes js/panels/Timeline/Layer.reel/images/icon-open.png | Bin 323 -> 0 bytes js/panels/Timeline/Layer.reel/images/icon-plus.png | Bin 230 -> 0 bytes .../Timeline/Layer.reel/images/lock_closed.png | Bin 1208 -> 0 bytes js/panels/Timeline/Layer.reel/images/lock_open.png | Bin 1186 -> 0 bytes .../Layer.reel/images/panelDisclosureIcon.png | Bin 3028 -> 0 bytes js/panels/Timeline/Layer.reel/scss/Layer.scss | 220 ----- js/panels/Timeline/Layer.reel/scss/config.rb | 9 - js/panels/Timeline/Span.reel/Span.html | 27 - js/panels/Timeline/Span.reel/Span.js | 41 - js/panels/Timeline/Span.reel/css/Span.css | 11 - js/panels/Timeline/Style.reel/Style.html | 91 -- js/panels/Timeline/Style.reel/Style.js | 648 ------------ js/panels/Timeline/Style.reel/css/Style.css | 133 --- js/panels/Timeline/Style.reel/scss/Style.scss | 70 -- js/panels/Timeline/Style.reel/scss/config.rb | 9 - js/panels/Timeline/TimelineController.js | 13 + .../Timeline/TimelinePanel.reel/TimelinePanel.css | 6 + .../Timeline/TimelinePanel.reel/TimelinePanel.html | 242 +---- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 1027 ++++---------------- .../TimelinePanel.reel/css/TimelinePanel.css | 251 ----- .../Timeline/TimelinePanel.reel/images/pause.png | Bin 1076 -> 0 bytes .../Timeline/TimelinePanel.reel/images/play.png | Bin 1190 -> 0 bytes .../TimelinePanel.reel/images/play_next.png | Bin 1185 -> 0 bytes .../TimelinePanel.reel/images/play_prev.png | Bin 1199 -> 0 bytes .../Timeline/TimelinePanel.reel/images/plus.png | Bin 1133 -> 0 bytes .../TimelinePanel.reel/images/timetick.jpg | Bin 737 -> 0 bytes .../Timeline/TimelinePanel.reel/images/trash.png | Bin 1154 -> 0 bytes .../Timeline/TimelineTrack.reel/TimelineTrack.html | 112 --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 433 --------- .../TimelineTrack.reel/css/TimelineTrack.css | 117 --- .../TimelineTrack.reel/images/gridline.jpg | Bin 724 -> 0 bytes .../TimelineTrack.reel/scss/TimelineTrack.scss | 65 -- .../Timeline/TimelineTrack.reel/scss/config.rb | 9 - js/panels/Timeline/Track.reel/Track.html | 61 -- js/panels/Timeline/Track.reel/Track.js | 186 ---- js/panels/Timeline/Track.reel/css/Track.css | 26 - js/panels/Timeline/Track.reel/images/gridline.jpg | Bin 724 -> 0 bytes .../Timeline/TrackSpacer.reel/TrackSpacer.html | 26 - js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js | 15 - .../Timeline/TrackSpacer.reel/css/TrackSpacer.css | 5 - js/panels/Timeline/Tween.reel/Tween.html | 48 - js/panels/Timeline/Tween.reel/Tween.js | 109 --- js/panels/Timeline/Tween.reel/css/Tween.css | 4 - 57 files changed, 258 insertions(+), 5398 deletions(-) delete mode 100644 js/panels/Timeline/Collapser.js delete mode 100644 js/panels/Timeline/Keyframe.reel/Keyframe.html delete mode 100644 js/panels/Timeline/Keyframe.reel/Keyframe.js delete mode 100644 js/panels/Timeline/Keyframe.reel/css/Keyframe.css delete mode 100644 js/panels/Timeline/Layer.reel/Layer.html delete mode 100644 js/panels/Timeline/Layer.reel/Layer.js delete mode 100644 js/panels/Timeline/Layer.reel/css/Layer.css delete mode 100644 js/panels/Timeline/Layer.reel/images/eye.png delete mode 100644 js/panels/Timeline/Layer.reel/images/icon-collapsed.png delete mode 100644 js/panels/Timeline/Layer.reel/images/icon-eye.png delete mode 100644 js/panels/Timeline/Layer.reel/images/icon-lock.png delete mode 100644 js/panels/Timeline/Layer.reel/images/icon-minus.png delete mode 100644 js/panels/Timeline/Layer.reel/images/icon-open.png delete mode 100644 js/panels/Timeline/Layer.reel/images/icon-plus.png delete mode 100644 js/panels/Timeline/Layer.reel/images/lock_closed.png delete mode 100644 js/panels/Timeline/Layer.reel/images/lock_open.png delete mode 100644 js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png delete mode 100644 js/panels/Timeline/Layer.reel/scss/Layer.scss delete mode 100644 js/panels/Timeline/Layer.reel/scss/config.rb delete mode 100644 js/panels/Timeline/Span.reel/Span.html delete mode 100644 js/panels/Timeline/Span.reel/Span.js delete mode 100644 js/panels/Timeline/Span.reel/css/Span.css delete mode 100644 js/panels/Timeline/Style.reel/Style.html delete mode 100644 js/panels/Timeline/Style.reel/Style.js delete mode 100644 js/panels/Timeline/Style.reel/css/Style.css delete mode 100644 js/panels/Timeline/Style.reel/scss/Style.scss delete mode 100644 js/panels/Timeline/Style.reel/scss/config.rb create mode 100755 js/panels/Timeline/TimelineController.js create mode 100755 js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css delete mode 100644 js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css delete mode 100644 js/panels/Timeline/TimelinePanel.reel/images/pause.png delete mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play.png delete mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play_next.png delete mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play_prev.png delete mode 100644 js/panels/Timeline/TimelinePanel.reel/images/plus.png delete mode 100644 js/panels/Timeline/TimelinePanel.reel/images/timetick.jpg delete mode 100644 js/panels/Timeline/TimelinePanel.reel/images/trash.png delete mode 100644 js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html delete mode 100644 js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js delete mode 100644 js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css delete mode 100644 js/panels/Timeline/TimelineTrack.reel/images/gridline.jpg delete mode 100644 js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss delete mode 100644 js/panels/Timeline/TimelineTrack.reel/scss/config.rb delete mode 100644 js/panels/Timeline/Track.reel/Track.html delete mode 100644 js/panels/Timeline/Track.reel/Track.js delete mode 100644 js/panels/Timeline/Track.reel/css/Track.css delete mode 100644 js/panels/Timeline/Track.reel/images/gridline.jpg delete mode 100644 js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html delete mode 100644 js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js delete mode 100644 js/panels/Timeline/TrackSpacer.reel/css/TrackSpacer.css delete mode 100644 js/panels/Timeline/Tween.reel/Tween.html delete mode 100644 js/panels/Timeline/Tween.reel/Tween.js delete mode 100644 js/panels/Timeline/Tween.reel/css/Tween.css (limited to 'js/panels') diff --git a/js/panels/CSSPanel/CSSPanel.js b/js/panels/CSSPanel/CSSPanel.js index cf8880a3..94860b30 100755 --- a/js/panels/CSSPanel/CSSPanel.js +++ b/js/panels/CSSPanel/CSSPanel.js @@ -20,9 +20,9 @@ exports.CSSPanel = Montage.create(PanelBase, { init : { enumerable:true, value : function (){ - this.minHeight = 195; - this.contentHeight = 195; - this.defaultHeight= 195; + this.minHeight = 300; + this.contentHeight = 300; + this.defaultHeight= 300; /* OLD WAY -- Removing the temporary div // TODO: Remove this comment once this is tested. diff --git a/js/panels/Resizer.js b/js/panels/Resizer.js index 3afe5d5b..69efd6ac 100755 --- a/js/panels/Resizer.js +++ b/js/panels/Resizer.js @@ -92,7 +92,7 @@ exports.Resizer = Montage.create(Component, { handleDblclick: { value : function() { - this.panel.addEventListener("webkitTransitionEnd", this, false); + this.panel.addEventListener("webkitTransitionEnd", this, true); if (this.isVertical) { this.panel.style.height = ""; } else { @@ -102,7 +102,7 @@ exports.Resizer = Montage.create(Component, { } }, - handleWebkitTransitionEnd: { + captureWebkitTransitionEnd: { value: function() { if(this.redrawStage) { this.application.ninja.stage.resizeCanvases = true; diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js deleted file mode 100644 index d286d84c..00000000 --- a/js/panels/Timeline/Collapser.js +++ /dev/null @@ -1,320 +0,0 @@ -/* - * Collapser: Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other. - * Required properties: - * clicker: The element that will be clicked on. - * content: The element that will expand or collapse as the clicker is clicked on. - * Optional properties: - * isCollapsed: Is the content collapsed. Set to true on serialization (or initialization) to start content in collapsed state. - * Can be manually set as well. - * collapsibleClass: The CSS class to apply to the content and the clicker when collapsed. Defaults to "collapsible-collapsed". - * isAnimated: Set to true to apply a transition to expand/collapse (defaults to false). - * transitionClass: If isAnimated is set to true, the component will apply transitionClass to the content during the - * collapse process. You can then define transitionClass in your style sheet with the desired CSS transitions. - * Defaults to "collapsible-transition". - * contentHeight: If both isAnimated and isCollapsedAtStart are set to true, set contentHeight to the height of the content - * (in pixels, but without the "px") when not collapsed. If this value is not set, the first time the content is expanded - * the transition will not work. Subsequent collapses (and expansions) will transition as expected. - * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to - * false for collapsers that will only be operated remotely. - * toggle(): Manually toggle the expand/collapse of the content. - * - */ -var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component, - Collapser = exports.Collapser = Montage.create(Component, { - - // This component has no template. - hasTemplate:{ - value: false - }, - - /* === BEGIN: Models === */ - - // contentHeight: Stores the height of the content just before collapse. - _contentHeight: { - value: 0 - }, - contentHeight: { - get: function() { - return this._contentHeight; - }, - set: function(newVal) { - this._contentHeight = newVal; - } - }, - - // isCollapsing: true if the collapser is collapsing (or expanding); used in the draw cycle. - _isCollapsing: { - value: false - }, - - // isAnimated: boolean to apply transition to expand/collapse - _isAnimated : { - value: false - }, - isAnimated: { - get: function() { - return this._isAnimated; - }, - set: function(newVal) { - this._isAnimated = newVal; - } - }, - - _bypassAnimation : { - value: false - }, - bypassAnimation: { - get: function() { - return this._bypassAnimation; - }, - set: function(newVal) { - this._bypassAnimation= newVal; - } - }, - - // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition. - // Note that this CSS class must be defined in your style sheet with the desired transitions. - _transitionClass : { - value: "collapsible-transition" - }, - transitionClass: { - get: function() { - return this._transitionClass; - }, - set: function(newVal) { - this._transitionClass = newVal; - } - }, - - // isCollapsed: is the content actually collapsed at this moment - _isCollapsed: { - value: "" - }, - isCollapsed : { - get: function() { - return this._isCollapsed; - }, - set: function(newVal) { - if (newVal !== this._isCollapsed) { - this._isCollapsed = newVal; - this.needsDraw = true; - } - - } - }, - - // collapsedClass: the class to apply to the clicker and content when the content is collapsed. - _collapsedClass : { - value: "collapsible-collapsed" - }, - collapsedClass: { - get: function() { - return this._collapsedClass; - }, - set: function(newVal) { - this._collapsedClass = newVal; - } - }, - - // _origOverflowValue: Stores the original overflow value of the collapsible element. - // Why store the value? While the collapsible element is collapsed, obviously we will need overflow: hidden. - // But when the collapsible element is open, we will need overflow to return to its original value. - _origOverflowValue : { - value: false - }, - - // isLabelClickable: Boolean for whether or not the label is clickable. If set to false, - // the label click listener is never applied. For collapsibles that will only be operated remotely. - // Defaults to true. - _isLabelClickable : { - value: true - }, - isLabelClickable : { - get: function() { - return this._isLabelClickable; - }, - set: function(newVal) { - this._isLabelClickable = newVal; - } - }, - - // labelClickEvent: an event to fire when the label is clicked. - _labelClickEvent: { - value: false - }, - labelClickEvent: { - get: function() { - return this._labelClickEvent; - }, - set: function(newVal) { - this._labelClickEvent = newVal; - } - }, - - // toggle: manually toggle the collapser. - toggle: { - value: function() { - if (this.bypassAnimation) { - this.isAnimated = false; - } - this.myContent.classList.remove(this.transitionClass); - this.handleCollapserLabelClick(); - } - }, - - /* === END: Models === */ - - /* === BEGIN: Draw cycle === */ - - prepareForDraw: { - value: function() { - // Add a click listener to the label for expand/collapse - if (this.isLabelClickable) { - this.clicker.identifier = "collapserLabel"; - this.clicker.addEventListener("click", this, false); - } - - // Get the original value of the overflow property: - this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); - - // If the content area is supposed to start out collapsed: - if (this.isCollapsed) { - this.myContent.style.height = "0px"; - // Set the overflow to hidden if it's not already - if (this._origOverflowValue !== "hidden") { - this.myContent.style.overflow = "hidden"; - } - this.myContent.classList.add(this.collapsedClass); - this.clicker.classList.add(this.collapsedClass); - } else { - this.myContent.style.height = "auto"; - this.myContent.classList.remove(this.collapsedClass); - this.clicker.classList.remove(this.collapsedClass); - } - } - }, - draw: { - value: function() { - // Is the content area expanding/collapsing? - this.myContent.classList.remove(this.transitionClass); - if (this._isCollapsing) { - - if (this.isAnimated) { - // Apply the transition class to the content. - this.myContent.classList.add(this.transitionClass); - - // Add a handler for the end of the transition, so we can tidy things up after - // the transition completes - this.myContent.identifier = "myContent"; - this.myContent.addEventListener("webkitTransitionEnd", this, false); - - this.myContent.style.overflow = "hidden"; - } - - // Next, are we expanding or collapsing? - if (this.myContent.classList.contains(this.collapsedClass)) { - // It's already collapsed so we are expanding - this.myContent.style.height = this.contentHeight + "px"; - this.isCollapsed = false; - - } else { - // It's expanded so we are collapsing - this.myContent.style.height = "0px"; - this.isCollapsed = true; - - // Set the overflow to hidden if it isn't already - if (this._origOverflowValue !== "hidden") { - this.myContent.style.overflow = "hidden"; - } - } - - // Toggle the CSS class and deactivate the collapsing flag because we are now done. - this.myContent.classList.toggle(this.collapsedClass); - this.clicker.classList.toggle(this.collapsedClass); - this._isCollapsing = false; - - // Special cases: If transition does not happen (in the case of a contentHeight of 0 - // or isAnimated = false) we need to manually fire it here to do the cleanup. - if ((this.contentHeight < 3) || (!this.isAnimated)) { - this.handleMyContentWebkitTransitionEnd(); - } - } - } - }, - - /* === END: Draw cycle === */ - - /* === BEGIN: Event handlers === */ - - // Handle a click on the label - handleCollapserLabelClick: { - value: function() { - - // The user has clicked on one of the expandos. What should we do? - // First, are we expanding or collapsing? - if (!this.myContent.classList.contains(this.collapsedClass)) { - // We are collapsing! - // Save the current height of the content. - this.contentHeight = this.myContent.offsetHeight; - // Set the current height of the content to a pixel height instead of "auto" - // so that the transition can happen. - // (This doesn't actually change the appearance of the element, - // so it's okay to do here, outside the draw cycle.) - this.myContent.style.height = this.contentHeight + "px"; - - this.isCollapsed = true; - } else { - this.isCollapsed = false; - } - - // Set the collapsing flag so when the draw cycle begins - // it will know to expand/collapse. - this._isCollapsing = true; - - // Set the component to run its draw cycle. - this.needsDraw = true; - - // Dispatch my labelClick event - if (this.labelClickEvent) { - this.labelClickEvent(this.bypassAnimation); - } - - } - }, - - // This handler is bound to the transitionEnd event. If transitions - // are disabled, it is called manually. - handleMyContentWebkitTransitionEnd: { - value: function(event) { - - // Are we animating the transitions? - if (this.isAnimated) { - // Yes, transitions are animated. - // Remove the event listener so it won't fire again. - this.myContent.removeEventListener("webkitTransitionEnd", this, false); - - // remove the CSS class that supplies the transition - this.myContent.classList.remove(this.transitionClass); - } - - // Set the height of the content area to auto; this way it can expand/collapse as interactions - // happen within. - if (!this.myContent.classList.contains(this.collapsedClass)) { - this.myContent.style.height = "auto"; - // Return the overflow to its original value if it wasn't hidden - if (this._origOverflowValue !== "hidden") { - this.myContent.style.overflow = this._origOverflowValue; - } - - } - - if (this.bypassAnimation) { - this.bypassAnimation = false; - this.isAnimated = true; - } - } - } - - /* === END: Event handlers === */ -}); \ No newline at end of file diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html deleted file mode 100644 index bf21994b..00000000 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - -
-
-
- - - \ No newline at end of file diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js deleted file mode 100644 index c82a9086..00000000 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ /dev/null @@ -1,154 +0,0 @@ -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; -var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; - -var Keyframe = exports.Keyframe = Montage.create(Component, { - - hasTemplate:{ - value: true - }, - - _position:{ - value:0 - }, - - position:{ - serializable:true, - get:function(){ - return this._position; - }, - set:function(value){ - this._position = value; - } - }, - - _id:{ - value:0 - }, - - id:{ - serializable:true, - get:function () { - return this._id; - }, - set:function (value) { - this._id = value; - } - }, - - _timelinePosition:{ - value:0 - }, - - timelinePosition:{ - serializable:true, - get:function () { - return this._timelinePosition; - }, - set:function (value) { - this._timelinePosition = value; - } - }, - - _containingTrack:{ - value:{} - }, - - containingTrack:{ - serializable:true, - get:function () { - return this._containingTrack; - }, - set:function (value) { - this._containingTrack = value; - } - }, - - _animatedProperties:{ - value:[] - }, - - animatedProperties:{ - serializable:true, - get:function () { - return this._animatedProperties; - }, - set:function (value) { - this._animatedProperties = value; - } - }, - - containingSpan:{ - value: null - }, - - prepareForDraw:{ - value:function(){ - this.tweenkeyframe.addEventListener("click", this, false); - this.animatedProperties = new Array(); - this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; - this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; - } - }, - - draw:{ - value:function(){ - this.tweenkeyframe.style.left = (this.position - 3) + "px"; - } - }, - - handleElementChange:{ - value:function (event) { - if(this.application.ninja.selectedElements[0]._element != this.containingTrack.animatedElement){ - alert("Wrong element selected for this keyframe track"); - return; - } - - if(event.detail.source && event.detail.source !== "keyframe") { - this.containingSpan.highlightSpan(); - if(this.containingTrack.animatedElement.offsetTop != this.animatedProperties["top"] && this.containingTrack.animatedElement.offsetLeft != this.animatedProperties["left"]){ - this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; - this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; - this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; - this.containingTrack.updateKeyframeRule(); - } - } - } - }, - - deselect:{ - value:function(){ - this.tweenkeyframe.classList.remove("keyframeSelected"); - this.eventManager.removeEventListener("elementChange", this, false); - } - }, - - select:{ - value:function(){ - this.application.ninja.timeline.deselectKeyframes(); - this.tweenkeyframe.classList.add("keyframeSelected"); - this.application.ninja.timeline.playhead.style.left = (this.timelinePosition - 2) + "px"; - this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px"; - this.application.ninja.timeline.selectedKeyframes.push(this); - - var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - var currentMillisec = currentMillisecPerPixel * this.timelinePosition; - this.application.ninja.timeline.updateTimeText(currentMillisec); - - var currentTop = this.animatedProperties["top"] + "px"; - var currentLeft = this.animatedProperties["left"] + "px"; - - ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe"); - ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe"); - - // turn on element change event listener - this.eventManager.addEventListener("elementChange", this, false); - } - }, - - handleClick:{ - value:function(ev){ - this.select(); - } - } -}); diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css deleted file mode 100644 index 4afc1180..00000000 --- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css +++ /dev/null @@ -1,15 +0,0 @@ -.tween_keyframe{ - position: absolute; - height: 16px; - width: 5px; - background-color: white; - z-index: 23; - border-radius: 3px; -} - -.tween_keyframe.keyframeSelected{ - background-color: #570e19; - border-style: solid; - border-width: thin; - border-color: #d6d1cf; -} \ No newline at end of file diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html deleted file mode 100644 index dd819b2b..00000000 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ /dev/null @@ -1,168 +0,0 @@ - - - - - - - - - -
-
- Label - -
-
-
-
-
- Position - -
-
-
-
-
X
-
100px
-
-
-
Y
-
100px
-
-
-
Z
-
100px
-
-
-
-
- Transform - -
-
-
-
-
Scale X
-
100px
-
-
-
Scale Y
-
100px
-
-
-
Skew X
-
100px
-
-
-
Skew Y
-
100px
-
-
-
Rotation
-
100px
-
-
- -
-
- Style - -
-
-
-
-
-
-
-
-
-
-
- - \ No newline at end of file diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js deleted file mode 100644 index 71a1f01f..00000000 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ /dev/null @@ -1,626 +0,0 @@ -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; -var Collapser = require("js/panels/Timeline/Collapser").Collapser; -var Hintable = require("js/components/hintable.reel").Hintable; -var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle; -var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText; -var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; -var nj = require("js/lib/NJUtils").NJUtils; - -var Layer = exports.Layer = Montage.create(Component, { - - hasTemplate:{ - value: true - }, - - /* Begin: Models */ - - /* Main collapser model: the main collapser for the layer */ - _mainCollapser : { - value: false - }, - mainCollapser: { - get: function() { - return this._mainCollapser; - }, - set: function(newVal) { - this._mainCollapser = newVal; - } - }, - - /* Style models: the array of styles, and the repetition that uses them */ - _arrLayerStyles : { - serializable: true, - enumerable: true, - serializable: true, - value: [] - }, - arrLayerStyles : { - serializable: true, - enumerable: true, - serializable: true, - get: function() { - return this._arrLayerStyles; - }, - set: function(newVal) { - this._arrLayerStyles = newVal; - } - }, - _styleRepetition : { - value: false - }, - styleRepetition : { - get: function() { - return this._styleRepetition; - }, - set: function(newVal) { - this._styleRepetition = newVal; - } - }, - _styleCounter : { - value: 0 - }, - - /* Layer models: the name, ID, and selected and animation booleans for the layer */ - _layerName:{ - serializable: true, - value:null, - writable:true, - enumerable:true - }, - - layerName:{ - serializable: true, - get:function(){ - return this._layerName; - }, - set:function(newVal){ - if (newVal !== this._layerName) { - this._layerEditable.value = newVal; - this._layerName = newVal; - this._layerEditable.needsDraw = true; - this.needsDraw = true; - - } - - } - }, - _layerID:{ - value:null, - writable:true, - serializable: true, - enumerable:true - }, - - layerID:{ - serializable: true, - get:function(){ - return this._layerID; - }, - set:function(value){ - this._layerID = value; - } - }, - - /* isSelected: whether or not the layer is currently selected. */ - _isSelected:{ - value: false, - writable: true, - serializable: true, - enumerable: false - }, - - isSelected:{ - get:function(){ - return this._isSelected; - }, - set:function(value){ - if (value !== this._isSelected) { - // Only concerned about different values - if (value === false) { - // If changing from false to true, we need to deselect any associated styles - this.selectStyle(false); - } - this._isSelected = value; - this.needsDraw = true; - } - - } - }, - - /* isActive: Whether or not the user is actively clicking within the layer; used to communicate state with - * TimelinePanel. - */ - _isActive: { - value: false - }, - isActive: { - get: function() { - return this._isActive; - }, - set: function(newVal) { - this._isActive = newVal; - } - }, - - - _isAnimated:{ - value: false, - writable: true, - enumerable: false - }, - - isAnimated:{ - get:function(){ - return this._isAnimated; - }, - set:function(value){ - this._isAnimated = value; - } - }, - _justAdded: { - value: false - }, - _layerEditable : { - value: false - }, - - // Are the various collapsers collapsed or not - _isMainCollapsed : { - value: "" - }, - isMainCollapsed : { - get: function() { - return this._isMainCollapsed; - }, - set: function(newVal) { - if (newVal !== this._isMainCollapsed) { - this._isMainCollapsed = newVal; - this.needsDraw = true; - } - } - }, - - _isTransformCollapsed : { - value: true - }, - isTransformCollapsed : { - get: function() { - return this._isTransformCollapsed; - }, - set: function(newVal) { - if (newVal !== this._isTransformCollapsed) { - this._isTransformCollapsed = newVal; - this.needsDraw = true; - } - } - }, - - _isPositionCollapsed : { - value: true - }, - isPositionCollapsed : { - get: function() { - return this._isPositionCollapsed; - }, - set: function(newVal) { - if (newVal !== this._isPositionCollapsed) { - this._isPositionCollapsed = newVal; - this.needsDraw = true; - } - } - }, - - _isStyleCollapsed : { - value: true - }, - isStyleCollapsed : { - get: function() { - return this._isStyleCollapsed; - }, - set: function(newVal) { - if (newVal !== this._isStyleCollapsed) { - this._isStyleCollapsed = newVal; - this.needsDraw = true; - } - } - }, - - - /* END: Models */ - - /* Begin: Draw cycle */ - prepareForDraw: { - value: function() { - - // Initialize myself - this.init(); - - var that = this; - - this.positionCollapser = Collapser.create(); - this.transformCollapser = Collapser.create(); - this.styleCollapser = Collapser.create(); - - // Make it editable! - this._layerEditable = Hintable.create(); - this._layerEditable.element = this.titleSelector; - this.titleSelector.identifier = "selectorEditable"; - this.titleSelector.addEventListener("click", this, false); - this._layerEditable.addEventListener("blur", function(event) { - that.handleSelectorEditableBlur(event); - }, false); - this._layerEditable.addEventListener("change", function(event) { - that.dynamicLayerName.value = that._layerEditable.value; - that.needsDraw = true; - }, false); - this._layerEditable.editingClass = "editable2"; - this._layerEditable.value = this.layerName; - this._layerEditable.needsDraw = true; - - // Change the markup into collapsible sections using the nifty Collapser component! - this.mainCollapser = Collapser.create(); - this.mainCollapser.clicker = this.clicker; - this.mainCollapser.myContent = this.myContent; - this.mainCollapser.contentHeight = 60; - this.myContent.style.height = "0px"; - this.mainCollapser.element = this.element; - //this.mainCollapser.isCollapsedAtStart = true; - this.mainCollapser.isCollapsed = this.isMainCollapsed; - this.mainCollapser.isAnimated = true; - this.element.setAttribute("data-layerid", this.layerID); - this.mainCollapser.labelClickEvent = function(boolBypass) { - var newEvent = document.createEvent("CustomEvent"); - newEvent.initCustomEvent("layerEvent", false, true); - newEvent.layerEventLocale = "content-main"; - newEvent.layerEventType = "labelClick"; - newEvent.layerID = that.layerID; - newEvent.bypassAnimation = boolBypass; - defaultEventManager.dispatchEvent(newEvent); - that.isMainCollapsed = that.mainCollapser.isCollapsed; - } - this.mainCollapser.needsDraw = true; - - this.positionCollapser.clicker = this.clickerPosition; - this.positionCollapser.myContent = this.contentPosition; - this.positionCollapser.element = this.element; - this.positionCollapser.contentHeight = 60; - // this.positionCollapser.isCollapsedAtStart = true; - this.positionCollapser.isCollapsed = this.isPositionCollapsed; - this.positionCollapser.isAnimated = true; - this.positionCollapser.labelClickEvent = function(boolBypass) { - var newEvent = document.createEvent("CustomEvent"); - newEvent.initCustomEvent("layerEvent", false, true); - newEvent.layerEventLocale = "content-position"; - newEvent.layerEventType = "labelClick"; - newEvent.layerID = that.layerID; - newEvent.bypassAnimation = boolBypass; - defaultEventManager.dispatchEvent(newEvent); - that.isPositionCollapsed = that.positionCollapser.isCollapsed; - } - this.positionCollapser.needsDraw = true; - - this.transformCollapser.clicker = this.clickerTransform; - this.transformCollapser.myContent = this.contentTransform; - this.transformCollapser.element = this.element; - this.transformCollapser.contentHeight = 100; - // this.transformCollapser.isCollapsedAtStart = true; - this.transformCollapser.isCollapsed = this.isTransformCollapsed; - this.transformCollapser.isAnimated = true; - this.transformCollapser.labelClickEvent = function(boolBypass) { - var newEvent = document.createEvent("CustomEvent"); - newEvent.initCustomEvent("layerEvent", false, true); - newEvent.layerEventLocale = "content-transform"; - newEvent.layerEventType = "labelClick"; - newEvent.layerID = that.layerID; - newEvent.bypassAnimation = boolBypass; - defaultEventManager.dispatchEvent(newEvent); - that.isTransformCollapsed = that.transformCollapser.isCollapsed; - } - this.transformCollapser.needsDraw = true; - - this.styleCollapser.clicker = this.clickerStyle; - this.styleCollapser.myContent = this.contentStyle; - this.styleCollapser.element = this.element; - this.styleCollapser.isCollapsed = this.isStyleCollapsed; - this.styleCollapser.isAnimated = true; - this.styleCollapser.labelClickEvent = function(boolBypass) { - var newEvent = document.createEvent("CustomEvent"); - newEvent.initCustomEvent("layerEvent", false, true); - newEvent.layerEventLocale = "content-style"; - newEvent.layerEventType = "labelClick"; - newEvent.layerID = that.layerID; - newEvent.bypassAnimation = boolBypass; - defaultEventManager.dispatchEvent(newEvent); - that.isStyleCollapsed = that.styleCollapser.isCollapsed; - } - this.styleCollapser.needsDraw = true; - - // Add event listeners to add and delete style buttons - this.buttonAddStyle.identifier = "addStyle"; - this.buttonAddStyle.addEventListener("click", this, false); - - this.buttonDeleteStyle.identifier = "deleteStyle"; - this.buttonDeleteStyle.addEventListener("click", this, false); - - // Add mousedown listener to set isActive - this.element.addEventListener("mousedown", this, false); - //this.element.addEventListener("click", this, false); - - } - }, - draw: { - value: function() { - - // Coordinate the collapsers - if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) { - this.mainCollapser.bypassAnimation = true; - this.mainCollapser.toggle(); - } - if (this.positionCollapser.isCollapsed !== this.isPositionCollapsed) { - this.positionCollapser.bypassAnimation = true; - this.positionCollapser.toggle(); - } - if (this.transformCollapser.isCollapsed !== this.isTransformCollapsed) { - this.transformCollapser.bypassAnimation = true; - this.transformCollapser.toggle(); - } - if (this.styleCollapser.isCollapsed !== this.isStyleCollapsed) { - this.styleCollapser.bypassAnimation = true; - this.styleCollapser.toggle(); - } - - if (this.isSelected) { - this.element.classList.add("selected"); - } else { - this.element.classList.remove("selected"); - } - } - }, - /* End: Draw cycle */ - - /* Begin: Controllers */ - - // Initialize a just-created layer with some basic defaults and needed selectors. - init: { - value: function() { - // Default some vars - //this.arrLayerStyles = []; - - // Get some selectors. - this.label = this.element.querySelector(".label-layer"); - this.titleSelector = this.label.querySelector(".collapsible-label"); - this.clicker = this.element.querySelector(".collapsible-clicker"); - this.myContent = this.element.querySelector(".content-layer"); - this.clickerPosition = this.element.querySelector(".clicker-position"); - this.contentPosition = this.element.querySelector(".content-position"); - this.clickerTransform = this.element.querySelector(".clicker-transform"); - this.contentTransform = this.element.querySelector(".content-transform"); - this.clickerStyle = this.element.querySelector(".clicker-style"); - this.contentStyle = this.element.querySelector(".content-style"); - this.buttonAddStyle = this.element.querySelector(".button-add"); - this.buttonDeleteStyle = this.element.querySelector(".button-delete"); - } - }, - selectLayer:{ - value:function(){ - // this.mainCollapser.header.classList.add("layerSelected"); - this.element.classList.add("layerSelected"); - this.isSelected = true; - } - }, - deselectLayer:{ - value:function(){ - // this.mainCollapser.header.classList.remove("layerSelected"); - this.element.classList.remove("layerSelected"); - this.isSelected = false; - } - }, - addStyle : { - value: function() { - // Add a new style rule. It should be added above the currently selected rule, - // Or at the end, if no rule is selected. - - var newLength = 0, - mySelection = 0, - // newStyle = LayerStyle.create(), - newStyle = {}, - newEvent = document.createEvent("CustomEvent"); - - this.isStyleCollapsed = false; - - newEvent.initCustomEvent("layerEvent", false, true); - newEvent.layerEventLocale = "styles"; - newEvent.layerEventType = "newStyle"; - newEvent.layerID = this.layerID; - newEvent.styleID = this.layerID + "@" + this._styleCounter; - - newStyle.styleID = newEvent.styleID; - newStyle.whichView = "hintable"; - newStyle.editorProperty = ""; - newStyle.editorValue = ""; - newStyle.ruleTweener = false; - newStyle.isSelected = false; - - if (!!this.styleRepetition.selectedIndexes) { - mySelection = this.styleRepetition.selectedIndexes[0]; - this.arrLayerStyles.splice(mySelection, 0, newStyle); - //this.styleRepetition.selectedIndexes = [mySelection]; - this.selectStyle(mySelection); - } else { - newLength = this.arrLayerStyles.length; - this.arrLayerStyles.push(newStyle); - mySelection = this.arrLayerStyles.length; - // this.styleRepetition.selectedIndexes = [mySelection-1]; - this.selectStyle(mySelection-1); - } - - // Set up the event info and dispatch the event - - newEvent.styleSelection = mySelection; - defaultEventManager.dispatchEvent(newEvent); - - } - }, - deleteStyle : { - value: function() { - var newEvent = document.createEvent("CustomEvent"), - selectedIndex = 0; - if (this.arrLayerStyles.length > 0) { - if (!!this.styleRepetition.selectedIndexes) { - - selectedIndex = this.styleRepetition.selectedIndexes[0]; - - // Set up the event info and dispatch the event - newEvent.initCustomEvent("layerEvent", false, true); - newEvent.layerEventLocale = "styles"; - newEvent.layerEventType = "deleteStyle"; - newEvent.layerID = this.layerID; - newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID; - newEvent.styleSelection = selectedIndex; - defaultEventManager.dispatchEvent(newEvent); - - // Delete the style from the view - this.arrLayerStyles.splice(selectedIndex, 1); - - } else { - alert('TODO: what should happen when no rule is selected and the user clicks the delete button?') - } - } - } - }, - selectStyle : { - value: function(styleIndex) { - - // Select a style based on its index. - // use layerIndex = false to deselect all styles. - var i = 0, - arrLayerStylesLength = this.arrLayerStyles.length; - - // First, update this.arrStyles[].isSelected - for (i = 0; i < arrLayerStylesLength; i++) { - if (i === styleIndex) { - this.arrLayerStyles[i].isSelected = true; - } else { - this.arrLayerStyles[i].isSelected = false; - } - } - - // Next, update this.styleRepetition.selectedIndexes. - if (styleIndex !== false) { - this.styleRepetition.selectedIndexes = [styleIndex]; - } else { - this.styleRepetition.selectedIndexes = null; - } - - } - }, - getActiveStyleIndex : { - value: function() { - // Searches through the styles and looks for one that has - // set its isActive flag to true. - var i = 0, - returnVal = false, - arrLayerStylesLength = this.arrLayerStyles.length; - - for (i = 0; i < arrLayerStylesLength; i++) { - if (this.arrLayerStyles[i].isActive === true) { - returnVal = i; - this.arrLayerStyles[i].isActive = false; - } - } - return returnVal; - } - }, - /* End: Controllers */ - - /* Begin: Event handlers */ - handleAddStyleClick: { - value: function(event) { - // Stop the event propagation - //event.stopPropagation(); - this.addStyle(); - } - }, - handleDeleteStyleClick: { - value: function(event) { - //event.stopPropagation(); - this.deleteStyle(); - } - }, - handleSelectorEditableClick: { - value: function(event) { - } - }, - handleSelectorEditableBlur : { - value: function(event) { - this.titleSelector.scrollLeft = 0; - } - }, - handleSelectorEditableChange: { - value: function(event) { - this.layerName = this.dynamicLayerName.value; - this.needsDraw = true; - } - }, - handleMousedown: { - value: function(event) { - this.isActive = true; - // Check ALL THE CLICKS - // Are they in a particular style? If so, we need to select that style and - // deselect the others. - var ptrParent = nj.queryParentSelector(event.target, ".content-style"); - if (ptrParent !== false) { - // Why yes, the click was within a layer. But which one? - var myIndex = this.getActiveStyleIndex(); - this.selectStyle(myIndex); - } - } - }, - handleLayerClick : { - value: function(event) { - // Check ALL THE CLICKS - // Are they in a particular style? If so, we need to select that style and - // deselect the others. - var ptrParent = nj.queryParentSelector(event.target, ".content-style"); - if (ptrParent !== false) { - // Why yes, the click was within a layer. But which one? - var myIndex = this.getActiveStyleIndex(); - this.selectStyle(myIndex); - } - } - }, - /* End: Event handlers */ - - /* Begin: Logging routines */ - _boolDebug: { - enumerable: false, - value: false // set to true to enable debugging to console; false for turning off all debugging. - }, - boolDebug: { - get: function() { - return this._boolDebug; - }, - set: function(boolDebugSwitch) { - this._boolDebug = boolDebugSwitch; - } - }, - log: { - value: function(strMessage) { - if (this.boolDebug) { - console.log(this.getLineNumber() + ": " + strMessage); - } - } - }, - getLineNumber: { - value: function() { - try { - throw new Error('bazinga') - }catch(e){ - return e.stack.split("at")[3].split(":")[2]; - } - } - } - /* End: Logging routines */ - -}); \ No newline at end of file diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css deleted file mode 100644 index 39869c92..00000000 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ /dev/null @@ -1,322 +0,0 @@ -@charset "UTF-8"; -/* Layer.scss - * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.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. - */ -/* - * _colors.scss - * Defines the colors for the UI of the application. - * To create a new theme, copy this file and change the values as desired. - * Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values. - */ -/* Colors for radio buttons and other form elements */ -/* Base colors for dividers - * - * Dividers consist of a div with a background color and either - * a top & bottom border (in the case of horizontal dividers) - * or a left & right border (in the case of vertical dividers), - * for a total of three different colors. - * - */ -/* top and left */ -/* Middle */ -/* Bottom and right */ -/* Main background color of entire app */ -/* Main app background color. */ -/* rgba version */ -/* Main app border color */ -/* color of drop shadows */ -/* Stage color */ -/* body border color */ -/* Body background color */ -/* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */ -/* Colors for tools: background, text, how they interact with the UI */ -/* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */ -/* used for editable items in their non-edit state, etc. */ -/* Border for panel and for block elements */ -/* Shadow for text and block elements */ -/* Colors for scroll bars */ -/* - 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. - */ -/* - * themes/themename/mixins.scss - * Mixins that are theme-dependent (e.g. sprite mixins, etc) - */ -/* - 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. - */ -/* - * mixins.scss - * Generic mixins. Theme-specific mixins (e.g. for sprites) - * should go in the theme/themename/mixins.scss file. - */ -/* line 16, ../scss/Layer.scss */ -.layerLabel { - width: 100%; - color: white; - height: 21px; - font-family: 'Droid Sans'; - font-size: 12px; - text-shadow: 1px 1px 1px #3a3a3a; - display: -webkit-box; - -webkit-box-orient: horizontal; -} - -/* line 26, ../scss/Layer.scss */ -.layerLabel.layerSelected { - background-color: #b2b2b2; - color: #242424; -} - -/* line 30, ../scss/Layer.scss */ -.layerLabel { - width: 100%; - height: 18px; - padding-left: 25px; - padding-top: 2px; - -webkit-box-flex: 1; -} - -/* line 37, ../scss/Layer.scss */ -.layerDisclosure { - background-image: url("../images/panelDisclosureIcon.png"); - background-repeat: no-repeat; - width: 16px; - height: 16px; - /*float: left;*/ - -webkit-transition-property: rotate; - -webkit-transition-duration: 0.2s; - -webkit-transition-timing-function: linear; - padding-right: 2px; - -webkit-box-flex: 0; -} - -/* line 50, ../scss/Layer.scss */ -.layerHide { - background-image: url("../images/eye.png"); - background-repeat: no-repeat; - /*float: right;*/ - width: 16px; - height: 16px; - padding-right: 4px; - -webkit-box-flex: 0; -} - -/* line 59, ../scss/Layer.scss */ -.layerLock { - background-image: url("../images/lock_open.png"); - background-repeat: no-repeat; - /*float: right;*/ - width: 16px; - height: 16px; - padding-right: 4px; - -webkit-box-flex: 0; -} - -/******************************************/ -/* line 71, ../scss/Layer.scss */ -.container-layer { - background-color: #474747; - color: white; - font-size: 12px; - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); -} - -/* line 77, ../scss/Layer.scss */ -.selected .container-layer { - background-color: #474747; -} - -/* line 80, ../scss/Layer.scss */ -.selected .container-layer .label-layer { - background-color: #b2b2b2; - color: #242424; -} - -/* line 85, ../scss/Layer.scss */ -.userlayers .collapsible-label { - display: block; - width: 100px; - height: 21px; - line-height: 20px; - color: white; - margin-left: 30px; - margin-right: 20px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* line 97, ../scss/Layer.scss */ -.layerSelected .label-layer { - background-color: #b2b2b2; - color: #242424; -} - -/* line 101, ../scss/Layer.scss */ -.content-layer { - background-color: #474747; - color: white; -} - -/* line 105, ../scss/Layer.scss */ -.content-layer .collapsible-label { - background-position: 14px 5px; - border-width: 0px; -} - -/* line 112, ../scss/Layer.scss */ -.label-layer, -.label-position, -.label-transform, -.label-style { - position: relative; - border-bottom: 1px solid #505050; - cursor: pointer; -} - -/* line 119, ../scss/Layer.scss */ -.content-layer .collapsible-label, -.content-layer .collapsible-content { - font-size: 11px; -} - -/* line 123, ../scss/Layer.scss */ -.collapsible-clicker { - position: absolute; - width: 10px; - height: 10px; - top: 5px; - left: 5px; - margin: 0px; - padding: 0px; - background-image: url(../images/icon-open.png); - background-repeat: no-repeat; -} - -/* line 134, ../scss/Layer.scss */ -.collapsible-clicker.collapsible-collapsed { - background-image: url(../images/icon-collapsed.png); -} - -/* line 137, ../scss/Layer.scss */ -.collapsible-content .collapsible-clicker { - left: 12px; -} - -/* line 140, ../scss/Layer.scss */ -.content-layer.collapsible-collapsed { - height: 0px; - overflow: hidden; -} - -/* line 146, ../scss/Layer.scss */ -.label-layer .cssbutton, -.label-style .cssbutton { - width: 14px; - height: 14px; - overflow: hidden; - position: absolute; - background-repeat: no-repeat; -} - -/* line 153, ../scss/Layer.scss */ -.label-layer .button-lock { - background-image: url(../images/icon-lock.png); - top: 3px; - right: 27px; -} - -/* line 158, ../scss/Layer.scss */ -.label-layer .button-visible { - background-image: url(../images/icon-eye.png); - top: 3px; - right: 7px; -} - -/* line 163, ../scss/Layer.scss */ -.label-style .button-add { - background-image: url(../images/icon-plus.png); - width: 15px; - height: 15px; - top: 3px; - right: 11px; -} - -/* line 170, ../scss/Layer.scss */ -.label-style .button-delete { - background-image: url(../images/icon-minus.png); - width: 15px; - height: 15px; - top: 3px; - right: 31px; -} - -/* line 177, ../scss/Layer.scss */ -.collapsible-content .layout-table { - width: 99.9%; -} - -/* line 180, ../scss/Layer.scss */ -.content-layer .collapsible-content { - padding-left: 30px; -} - -/* line 183, ../scss/Layer.scss */ -.collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { - width: 40%; - height: 20px; - border-bottom: 1px solid #505050; - line-height: 20px; - text-align: left; -} - -/* line 190, ../scss/Layer.scss */ -.collapsible-content .layout-table:first-child { - border-top: 1px solid #505050; -} - -/* line 193, ../scss/Layer.scss */ -.collapsible-transition { - -webkit-transition-property: height; - -webkit-transition-duration: 200ms; - -webkit-transition-timing-function: ease-in; -} - -/* line 199, ../scss/Layer.scss */ -.editable2 { - height: 20px; - background-color: #242424 !important; - color: #b2b2b2 !important; - border-width: 0px; - font-size: 11px; - overflow: hidden; - -webkit-user-select: text; - text-overflow: clip; -} - -/* styles elements */ -/* line 211, ../scss/Layer.scss */ -.content-style .item-template { - display: none; -} - -/* line 214, ../scss/Layer.scss */ -.content-style .layout-row.selected .layout-cell { - background-color: #b2b2b2; - color: #242424; -} - -/* line 218, ../scss/Layer.scss */ -.style-row { - height: 20px; -} diff --git a/js/panels/Timeline/Layer.reel/images/eye.png b/js/panels/Timeline/Layer.reel/images/eye.png deleted file mode 100644 index 8ec1759e..00000000 Binary files a/js/panels/Timeline/Layer.reel/images/eye.png and /dev/null differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-collapsed.png b/js/panels/Timeline/Layer.reel/images/icon-collapsed.png deleted file mode 100644 index d2823a89..00000000 Binary files a/js/panels/Timeline/Layer.reel/images/icon-collapsed.png and /dev/null differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-eye.png b/js/panels/Timeline/Layer.reel/images/icon-eye.png deleted file mode 100644 index 6178654e..00000000 Binary files a/js/panels/Timeline/Layer.reel/images/icon-eye.png and /dev/null differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-lock.png b/js/panels/Timeline/Layer.reel/images/icon-lock.png deleted file mode 100644 index e06b4f22..00000000 Binary files a/js/panels/Timeline/Layer.reel/images/icon-lock.png and /dev/null differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-minus.png b/js/panels/Timeline/Layer.reel/images/icon-minus.png deleted file mode 100644 index 20a047f5..00000000 Binary files a/js/panels/Timeline/Layer.reel/images/icon-minus.png and /dev/null differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-open.png b/js/panels/Timeline/Layer.reel/images/icon-open.png deleted file mode 100644 index 8dc14271..00000000 Binary files a/js/panels/Timeline/Layer.reel/images/icon-open.png and /dev/null differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-plus.png b/js/panels/Timeline/Layer.reel/images/icon-plus.png deleted file mode 100644 index ad1381b9..00000000 Binary files a/js/panels/Timeline/Layer.reel/images/icon-plus.png and /dev/null differ diff --git a/js/panels/Timeline/Layer.reel/images/lock_closed.png b/js/panels/Timeline/Layer.reel/images/lock_closed.png deleted file mode 100644 index 8ff213b7..00000000 Binary files a/js/panels/Timeline/Layer.reel/images/lock_closed.png and /dev/null differ diff --git a/js/panels/Timeline/Layer.reel/images/lock_open.png b/js/panels/Timeline/Layer.reel/images/lock_open.png deleted file mode 100644 index 9db30f8d..00000000 Binary files a/js/panels/Timeline/Layer.reel/images/lock_open.png and /dev/null differ diff --git a/js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png b/js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png deleted file mode 100644 index 4db78f13..00000000 Binary files a/js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png and /dev/null differ diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss deleted file mode 100644 index 7473a275..00000000 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ /dev/null @@ -1,220 +0,0 @@ -@charset "UTF-8"; - -/* Layer.scss - * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css. - */ - -// Import theme settings -@import "../../../../../_scss/imports/themes/default/colors"; -// @import "../../../../.