From 2082fa6912eec2ffabd2081b7706e8e1b88a9711 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 2 Feb 2012 19:03:59 -0800 Subject: Initial Text Tool Implementation Has rich-text-editor in place need to place with finalized version when complete --- js/panels/CSSPanel/CSSPanel.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'js/panels') diff --git a/js/panels/CSSPanel/CSSPanel.js b/js/panels/CSSPanel/CSSPanel.js index 94860b30..cf8880a3 100644 --- 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 = 300; - this.contentHeight = 300; - this.defaultHeight= 300; + this.minHeight = 195; + this.contentHeight = 195; + this.defaultHeight= 195; /* OLD WAY -- Removing the temporary div // TODO: Remove this comment once this is tested. -- cgit v1.2.3 From a39bad832722a10f6556f91e94c3301a41f59bd5 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 13:30:49 -0800 Subject: merge new timeline Signed-off-by: Jonathan Duran --- js/panels/Timeline/Collapser.js | 319 +++++++++++ js/panels/Timeline/Keyframe.reel/Keyframe.html | 27 + js/panels/Timeline/Keyframe.reel/Keyframe.js | 147 +++++ js/panels/Timeline/Keyframe.reel/css/Keyframe.css | 11 + js/panels/Timeline/Layer.reel/Layer.html | 158 ++++++ js/panels/Timeline/Layer.reel/Layer.js | 511 +++++++++++++++++ js/panels/Timeline/Layer.reel/css/Layer.css | 322 +++++++++++ js/panels/Timeline/Layer.reel/images/eye.png | Bin 0 -> 1331 bytes .../Timeline/Layer.reel/images/icon-collapsed.png | Bin 0 -> 325 bytes js/panels/Timeline/Layer.reel/images/icon-eye.png | Bin 0 -> 550 bytes js/panels/Timeline/Layer.reel/images/icon-lock.png | Bin 0 -> 475 bytes .../Timeline/Layer.reel/images/icon-minus.png | Bin 0 -> 161 bytes js/panels/Timeline/Layer.reel/images/icon-open.png | Bin 0 -> 323 bytes js/panels/Timeline/Layer.reel/images/icon-plus.png | Bin 0 -> 230 bytes .../Timeline/Layer.reel/images/lock_closed.png | Bin 0 -> 1208 bytes js/panels/Timeline/Layer.reel/images/lock_open.png | Bin 0 -> 1186 bytes .../Layer.reel/images/panelDisclosureIcon.png | Bin 0 -> 3028 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 | 35 ++ js/panels/Timeline/Span.reel/css/Span.css | 6 + js/panels/Timeline/Style.reel/Style.html | 91 +++ js/panels/Timeline/Style.reel/Style.js | 603 ++++++++++++++++++++ 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 | 230 +++++++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 615 +++++++++++++-------- .../TimelinePanel.reel/css/TimelinePanel.css | 249 +++++++++ .../Timeline/TimelinePanel.reel/images/pause.png | Bin 0 -> 1076 bytes .../Timeline/TimelinePanel.reel/images/play.png | Bin 0 -> 1190 bytes .../TimelinePanel.reel/images/play_next.png | Bin 0 -> 1185 bytes .../TimelinePanel.reel/images/play_prev.png | Bin 0 -> 1199 bytes .../Timeline/TimelinePanel.reel/images/plus.png | Bin 0 -> 1133 bytes .../TimelinePanel.reel/images/timetick.jpg | Bin 0 -> 737 bytes .../Timeline/TimelinePanel.reel/images/trash.png | Bin 0 -> 1154 bytes .../Timeline/TimelineTrack.reel/TimelineTrack.html | 112 ++++ .../Timeline/TimelineTrack.reel/TimelineTrack.js | 414 ++++++++++++++ .../TimelineTrack.reel/css/TimelineTrack.css | 117 ++++ .../TimelineTrack.reel/images/gridline.jpg | Bin 0 -> 724 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 0 -> 724 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 | 47 ++ js/panels/Timeline/Tween.reel/Tween.js | 109 ++++ js/panels/Timeline/Tween.reel/css/Tween.css | 4 + 55 files changed, 4741 insertions(+), 266 deletions(-) create mode 100644 js/panels/Timeline/Collapser.js create mode 100644 js/panels/Timeline/Keyframe.reel/Keyframe.html create mode 100644 js/panels/Timeline/Keyframe.reel/Keyframe.js create mode 100644 js/panels/Timeline/Keyframe.reel/css/Keyframe.css create mode 100644 js/panels/Timeline/Layer.reel/Layer.html create mode 100644 js/panels/Timeline/Layer.reel/Layer.js create mode 100644 js/panels/Timeline/Layer.reel/css/Layer.css create mode 100644 js/panels/Timeline/Layer.reel/images/eye.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-collapsed.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-eye.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-lock.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-minus.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-open.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-plus.png create mode 100644 js/panels/Timeline/Layer.reel/images/lock_closed.png create mode 100644 js/panels/Timeline/Layer.reel/images/lock_open.png create mode 100644 js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png create mode 100644 js/panels/Timeline/Layer.reel/scss/Layer.scss create mode 100644 js/panels/Timeline/Layer.reel/scss/config.rb create mode 100644 js/panels/Timeline/Span.reel/Span.html create mode 100644 js/panels/Timeline/Span.reel/Span.js create mode 100644 js/panels/Timeline/Span.reel/css/Span.css create mode 100644 js/panels/Timeline/Style.reel/Style.html create mode 100644 js/panels/Timeline/Style.reel/Style.js create mode 100644 js/panels/Timeline/Style.reel/css/Style.css create mode 100644 js/panels/Timeline/Style.reel/scss/Style.scss create mode 100644 js/panels/Timeline/Style.reel/scss/config.rb delete mode 100644 js/panels/Timeline/TimelineController.js delete mode 100644 js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css create mode 100644 js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/pause.png create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play.png create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play_next.png create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play_prev.png create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/plus.png create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/timetick.jpg create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/trash.png create mode 100644 js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html create mode 100644 js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js create mode 100644 js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css create mode 100644 js/panels/Timeline/TimelineTrack.reel/images/gridline.jpg create mode 100644 js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss create mode 100644 js/panels/Timeline/TimelineTrack.reel/scss/config.rb create mode 100644 js/panels/Timeline/Track.reel/Track.html create mode 100644 js/panels/Timeline/Track.reel/Track.js create mode 100644 js/panels/Timeline/Track.reel/css/Track.css create mode 100644 js/panels/Timeline/Track.reel/images/gridline.jpg create mode 100644 js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html create mode 100644 js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js create mode 100644 js/panels/Timeline/TrackSpacer.reel/css/TrackSpacer.css create mode 100644 js/panels/Timeline/Tween.reel/Tween.html create mode 100644 js/panels/Timeline/Tween.reel/Tween.js create mode 100644 js/panels/Timeline/Tween.reel/css/Tween.css (limited to 'js/panels') diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js new file mode 100644 index 00000000..2fbe8e83 --- /dev/null +++ b/js/panels/Timeline/Collapser.js @@ -0,0 +1,319 @@ +/* + * 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.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.handleWebkitTransitionEnd(); + } + } + } + }, + + /* === 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. + handleWebkitTransitionEnd: { + 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 new file mode 100644 index 00000000..bf21994b --- /dev/null +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html @@ -0,0 +1,27 @@ + + + + + + + + + +
+
+
+ + + \ No newline at end of file diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js new file mode 100644 index 00000000..1259fa63 --- /dev/null +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -0,0 +1,147 @@ +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +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; + } + }, + + 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 - 2) + "px"; + } + }, + + handleElementChange:{ + value:function (event) { + + if(event.detail.source && event.detail.source !== "pi") { + + var items = this.application.ninja.selectedElements; + + // update this keyframe's animated properties from the item[0] element props + this.animatedProperties["top"] = items[0]._element.offsetTop; + this.animatedProperties["left"] = items[0]._element.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 currentTop = this.animatedProperties["top"] + "px"; + var currentLeft = this.animatedProperties["left"] + "px"; + + this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "top", currentTop); + this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "left", currentLeft); + + // 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 new file mode 100644 index 00000000..e66bcf10 --- /dev/null +++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css @@ -0,0 +1,11 @@ +.tween_keyframe{ + position: absolute; + height: 16px; + width: 4px; + background-color: white; + z-index: 23; +} + +.tween_keyframe.keyframeSelected{ + background-color: blue; +} \ No newline at end of file diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html new file mode 100644 index 00000000..add6cb38 --- /dev/null +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -0,0 +1,158 @@ + + + + + + + + + +
+
+ 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 new file mode 100644 index 00000000..29171272 --- /dev/null +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -0,0 +1,511 @@ +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 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:{ + value: false, + writable: true, + enumerable: false + }, + + isSelected:{ + get:function(){ + return this._isSelected; + }, + set:function(value){ + this._isSelected = value; + } + }, + _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); + + } + }, + 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(); + } + } + }, + /* 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"); + + 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; + + if (!!this.styleRepetition.selectedIndexes) { + mySelection = this.styleRepetition.selectedIndexes[0]; + this.arrLayerStyles.splice(mySelection, 0, newStyle); + this.styleRepetition.selectedIndexes = [mySelection]; + } else { + newLength = this.arrLayerStyles.length; + this.arrLayerStyles.push(newStyle); + mySelection = this.arrLayerStyles.length; + this.styleRepetition.selectedIndexes = [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?') + } + } + } + }, + /* 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; + } + }, + /* 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 new file mode 100644 index 00000000..39869c92 --- /dev/null +++ b/js/panels/Timeline/Layer.reel/css/Layer.css @@ -0,0 +1,322 @@ +@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 new file mode 100644 index 00000000..8ec1759e Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/eye.png differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-collapsed.png b/js/panels/Timeline/Layer.reel/images/icon-collapsed.png new file mode 100644 index 00000000..d2823a89 Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-collapsed.png differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-eye.png b/js/panels/Timeline/Layer.reel/images/icon-eye.png new file mode 100644 index 00000000..6178654e Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-eye.png differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-lock.png b/js/panels/Timeline/Layer.reel/images/icon-lock.png new file mode 100644 index 00000000..e06b4f22 Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-lock.png differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-minus.png b/js/panels/Timeline/Layer.reel/images/icon-minus.png new file mode 100644 index 00000000..20a047f5 Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-minus.png differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-open.png b/js/panels/Timeline/Layer.reel/images/icon-open.png new file mode 100644 index 00000000..8dc14271 Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-open.png differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-plus.png b/js/panels/Timeline/Layer.reel/images/icon-plus.png new file mode 100644 index 00000000..ad1381b9 Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-plus.png differ diff --git a/js/panels/Timeline/Layer.reel/images/lock_closed.png b/js/panels/Timeline/Layer.reel/images/lock_closed.png new file mode 100644 index 00000000..8ff213b7 Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/lock_closed.png differ diff --git a/js/panels/Timeline/Layer.reel/images/lock_open.png b/js/panels/Timeline/Layer.reel/images/lock_open.png new file mode 100644 index 00000000..9db30f8d Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/lock_open.png differ diff --git a/js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png b/js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png new file mode 100644 index 00000000..4db78f13 Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png differ diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss new file mode 100644 index 00000000..7473a275 --- /dev/null +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -0,0 +1,220 @@ +@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 "../../../../../_scss/imports/themes/default/fonts"; +@import "../../../../../_scss/imports/themes/default/mixins"; + +// Import generic mixins and styles +@import "../../../../../_scss/imports/scss/mixins"; +// @import "../../../../../_scss/imports/scss/Base"; + +.layerLabel{ + width: 100%; + color: $color-panel-text; + height: 21px; + font-family: 'Droid Sans'; + font-size: 12px; + text-shadow: 1px 1px 1px $color-panel-shadow; + display: -webkit-box; + -webkit-box-orient: horizontal; +} +.layerLabel.layerSelected { + background-color: $color-panel-hilite-bg; + color: $color-panel-hilite-text; +} +.layerLabel{ + width:100%; + height:18px; + padding-left: 25px; + padding-top: 2px; + -webkit-box-flex: 1; +} +.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; +} +.layerHide{ + background-image: url('../images/eye.png'); + background-repeat: no-repeat; + /*float: right;*/ + width: 16px; + height: 16px; + padding-right: 4px; + -webkit-box-flex: 0; +} +.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; +} + +/******************************************/ + +.container-layer { + background-color: $color-panel-bg; + color: $color-panel-text; + font-size: 12px; + text-shadow: 1px 1px 1px $color-app-shadow; +} +.selected .container-layer { + background-color: $color-panel-bg; +} +.selected .container-layer .label-layer { + background-color: $color-panel-hilite-bg; + color: $color-panel-hilite-text; +} + +.userlayers .collapsible-label { + display: block; + width: 100px; + height: 21px; + line-height: 20px; + color: $color-panel-text; + margin-left: 30px; + margin-right: 20px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.layerSelected .label-layer { + background-color: $color-panel-hilite-bg; + color: $color-panel-hilite-text; +} +.content-layer { + background-color: $color-panel-bg; + color: $color-panel-text; +} +.content-layer .collapsible-label { + background-position: 14px 5px; + border-width: 0px; +} +.label-layer, +.label-position, +.label-transform, +.label-style { + position: relative; + border-bottom: 1px solid #505050; + cursor: pointer; +} + +.content-layer .collapsible-label, +.content-layer .collapsible-content { + font-size: 11px; +} + +.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; +} +.collapsible-clicker.collapsible-collapsed { + background-image: url(../images/icon-collapsed.png); +} +.collapsible-content .collapsible-clicker { + left: 12px; +} +.content-layer.collapsible-collapsed { + height: 0px; + overflow: hidden; +} + +.label-layer .cssbutton, +.label-style .cssbutton { + width: 14px; + height: 14px; + overflow: hidden; + position: absolute; + background-repeat: no-repeat; +} +.label-layer .button-lock { + background-image: url(../images/icon-lock.png); + top: 3px; + right: 27px; +} +.label-layer .button-visible { + background-image: url(../images/icon-eye.png); + top: 3px; + right: 7px; +} +.label-style .button-add { + background-image: url(../images/icon-plus.png); + width: 15px; + height: 15px; + top: 3px; + right: 11px; +} +.label-style .button-delete { + background-image: url(../images/icon-minus.png); + width: 15px; + height: 15px; + top: 3px; + right: 31px; +} +.collapsible-content .layout-table { + width: 99.9%; +} +.content-layer .collapsible-content { + padding-left: 30px; +} +.collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { + width: 40%; + height: 20px; + border-bottom: 1px solid $color-menu-divider; + line-height: 20px; + text-align: left; +} +.collapsible-content .layout-table:first-child { + border-top: 1px solid $color-menu-divider; +} +.collapsible-transition { + -webkit-transition-property: height; + -webkit-transition-duration: 200ms; + -webkit-transition-timing-function: ease-in; +} + +.editable2 { + height: 20px; + background-color: $color-panel-hilite-text !IMPORTANT; + color: $color-panel-hilite-bg !IMPORTANT; + border-width: 0px; + font-size: 11px; + overflow: hidden; + -webkit-user-select: text; + text-overflow: clip; +} + +/* styles elements */ +.content-style .item-template { + display: none; +} +.content-style .layout-row.selected .layout-cell { + background-color: $color-panel-hilite-bg; + color: $color-panel-hilite-text; +} +.style-row { + height: 20px; +} diff --git a/js/panels/Timeline/Layer.reel/scss/config.rb b/js/panels/Timeline/Layer.reel/scss/config.rb new file mode 100644 index 00000000..e5a99b70 --- /dev/null +++ b/js/panels/Timeline/Layer.reel/scss/config.rb @@ -0,0 +1,9 @@ +# Require any additional compass plugins here. +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "../css" +sass_dir = "" +images_dir = "../images/" +javascripts_dir = "../js" +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html new file mode 100644 index 00000000..e36a25d6 --- /dev/null +++ b/js/panels/Timeline/Span.reel/Span.html @@ -0,0 +1,27 @@ + +