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/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 + 5 files changed, 906 insertions(+) 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 (limited to 'js/panels/Timeline/Style.reel') diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/panels/Timeline/Style.reel/Style.html new file mode 100644 index 00000000..f10ad842 --- /dev/null +++ b/js/panels/Timeline/Style.reel/Style.html @@ -0,0 +1,91 @@ + + + + + + + + +

+ + + +

+ + \ No newline at end of file diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js new file mode 100644 index 00000000..13a5db3e --- /dev/null +++ b/js/panels/Timeline/Style.reel/Style.js @@ -0,0 +1,603 @@ +/* + * Style component: Edits and manages a single style rule for a Layer in the Timeline. + * Public Properties: + * editorProperty: The CSS property for the style. + * editorValue: The value for the editorProperty. + * whichView: Which view to show, the hintable view (where a new property can be typed in) + * or the propval view (where the property's value can be set with the tweener). + * Valid values are "hintable" and "propval", defaults to "hintable". + * + */ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +var LayerStyle = exports.LayerStyle = Montage.create(Component, { + + hasTemplate:{ + value: true + }, + + /* === BEGIN: Models === */ + + // Property for this editor + _editorProperty: { + serializable: true, + value: "" + }, + editorProperty: { + serializable: true, + get: function() { + return this._editorProperty; + }, + set: function(newVal) { + this._editorProperty = newVal; + this.needsDraw = true; + } + }, + + // Value for the property for this editor. + _editorValue: { + serializable: true, + value: "" + }, + editorValue: { + serializable: true, + get: function() { + return this._editorValue; + }, + set: function(newVal) { + this._editorValue = newVal; + this.needsDraw = true; + } + }, + + // The tweener used to change the value for this property. + _ruleTweener: { + serializable: true, + value: false + }, + ruleTweener: { + serializable: true, + get: function() { + return this._ruleTweener; + }, + set: function(newVal) { + this._ruleTweener = newVal; + this.needsDraw = true; + } + }, + + // The hintable we use to change the Property + _myHintable: { + value: "" + }, + myHintable: { + get: function() { + return this._myHintable; + }, + set: function(newVal) { + this._myHintable = newVal; + } + }, + _myHintableValue : { + value: null + }, + myHintableValue: { + get: function() { + return this._myHintableValue; + }, + set: function(newVal) { + this._myHintableValue = newVal; + } + }, + + // swapViews: Is a view swap happening? + _swapViews : { + value: true + }, + + // whichView: which view should we show: hintable or propval + _whichView : { + serializable: true, + value: "hintable" + }, + whichView: { + serializable: true, + get: function() { + return this._whichView; + }, + set: function(newVal) { + if (this._whichView !== newVal) { + if ((newVal !== "hintable") && (newVal !== "propval")) { + this.log("Error: Unknown view -"+newVal+"- requested for style.js."); + return; + } + this._whichView = newVal; + this._swapViews = true; + this.needsDraw = true; + } + } + }, + + // styleID: the id for this style; + // Used to publish events + _styleID : { + serializable: true, + value: null + }, + styleID: { + serializable: true, + get: function() { + return this._styleID; + }, + set: function(newVal) { + this._styleID = newVal; + this.needsDraw = true; + } + }, + + /* === END: Models === */ + + /* === BEGIN : Draw cycle === */ + prepareForDraw: { + value: function() { + this.init(); + } + }, + draw: { + value: function() { + + if (this._swapViews === true) { + // Show the right thing + this._showView(); + } + } + }, + didDraw: { + value: function() { + if (this._swapViews === true) { + // View swap has been completed. + this._swapViews === false; + } + } + }, + /* === END: Draw cycle === */ + + /* === BEGIN: controllers === */ + + // handleStylePropertyDblClick: What happens when the user double-clicks on the style property + handleStylePropertyDblclick: { + value: function(event) { + this.whichView = "hintable"; + } + }, + + // handleHintableStop: What happens when the hintable issues its stop event + handleHintableStop: { + value: function(event) { + // this should be handled via binding, but somehow is not. Setting manually for now. + this.editorProperty = this.myHintable.value; + + // Change views. + this.whichView = "propval"; + } + }, + + // Init: Initialize the component with some useful selectors and other defaults. + init : { + value: function() { + + var arrHints = [], + i = 0; + + // Get the array of hints from _myTweenables: + for (i = 0; i < this._myTweenables.length; i++) { + arrHints.push(this._myTweenables[i].property) + } + + // Set useful information for the hintable + this.myHintable.editingClass = "editable2"; + this.myHintable.hints = arrHints; + + // Bind a handler to the Hintable's change event + this.myHintable.identifier = "hintable"; + this.myHintable.addEventListener("stop", this, false); + + // Add the click handler to the styleProperty: When the user double-clicks on it, we want to start the editor. + this.styleProperty.identifier = "styleProperty"; + this.styleProperty.addEventListener("dblclick", this, false); + + // Get some selectors that we'll be using + this.editorHottextContainer = this.element.querySelector(".editor-hottext"); + this.editorInputContainer = this.element.querySelector(".editor-input"); + this.editorColorContainer = this.element.querySelector(".editor-color"); + this.containerHintable = this.element.querySelector(".row-hintable"); + this.containerPropvals = this.element.querySelector(".container-propvals"); + this.valueEditorInput = this.element.querySelector(".editor-input input"); + + } + }, + + // showView: Show the appropriate view + _showView : { + value: function() { + if (this.whichView === "hintable") { + this.containerHintable.classList.remove("hidden"); + this.containerPropvals.classList.add("hidden"); + this.myHintable.start(); + } else { + this.containerHintable.classList.add("hidden"); + this.containerPropvals.classList.remove("hidden"); + this._showTweener(); + } + } + }, + + // showTweener: show the appropriate tweener + _showTweener : { + value: function() { + // Which tweener should we show? + // First, get the appropriate editor type from the data structure. + var tweenable = {}, + i = 0; + + tweenable.tweener = "input"; + + for (i = 0; i < this._myTweenables.length; i++) { + if (this._myTweenables[i].property === this.editorProperty) { + tweenable = this._myTweenables[i]; + } + } + + if (tweenable.tweener === "hottext" ) { + this.editorInputContainer.classList.add("hidden"); + this.editorColorContainer.classList.add("hidden"); + this.editorHottextContainer.classList.remove("hidden"); + this.valueEditorHottext.acceptableUnits = [tweenable.units]; + this.valueEditorHottext.units = tweenable.units; + this.valueEditorHottext.minValue = tweenable.min; + this.valueEditorHottext.maxValue = tweenable.max; + this.valueEditorHottext.needsDraw = true; + } else if (tweenable.tweener === "color" ) { + this.editorInputContainer.classList.add("hidden"); + this.editorColorContainer.classList.remove("hidden"); + this.editorHottextContainer.classList.add("hidden"); + // TODO: set up color chip here. + } else if (tweenable.tweener === "input"){ + this.editorInputContainer.classList.remove("hidden"); + this.editorColorContainer.classList.add("hidden"); + this.editorHottextContainer.classList.add("hidden"); + this.valueEditorInput.value = this.editorValue; + } else { + this.log("Warning: unknown tweenable -"+tweenable.tweener+"- specified in style.js.") + } + } + }, + + /* === END: Controllers === */ + + _myTweenables: { + value: [ + { + "property" : "background-color", + "tweener" : "color", + "units" : "", + "min" : "", + "max" : "", + "default" :"#FFFFFF" + }, + { + "property" : "background-position-x", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "background-position-y", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "border-color", + "tweener" : "color", + "units" : "", + "min" : "", + "max" : "", + "default" : "#FFFFFF" + }, + { + "property" : "border-width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "border-bottom-color", + "tweener" : "color", + "units" : "", + "default" : "#FFFFFF" + }, + { + "property" : "border-bottom-width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "border-left-color", + "tweener" : "color", + "units" : "", + "default" : "#FFFFFF" + }, + { + "property" : "border-left-width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "border-top-color", + "tweener" : "color", + "units" : "", + "default" : "#FFFFFF" + }, + { + "property" : "border-top-width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "border-right-color", + "tweener" : "color", + "units" : "", + "default" : "#FFFFFF" + }, + { + "property" : "border-right-width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "border-radius", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "bottom", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "color", + "tweener" : "color", + "units" : "", + "default" : "#FFFFFF" + }, + { + "property" : "margin", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "margin-left", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "margin-right", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "margin-top", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "margin-bottom", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "padding", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "padding-left", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "padding-right", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "padding-top", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "padding-bottom", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "max-height", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "max-width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "min-height", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "min-width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "opacity", + "tweener" : "hottext", + "units" : "%", + "min" : 0, + "max" : 100, + "default" : 100 + }, + { + "property" : "text-indent", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "top", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "right", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "left", + "tweener" : "hottext", + "units" : "px", + "min" : -9999, + "max" : 9999, + "default" : 0 + }, + { + "property" : "width", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + }, + { + "property" : "height", + "tweener" : "hottext", + "units" : "px", + "min" : 0, + "max" : 9999, + "default" : 0 + } + ] + + }, + + /* 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/Style.reel/css/Style.css b/js/panels/Timeline/Style.reel/css/Style.css new file mode 100644 index 00000000..6c7542cb --- /dev/null +++ b/js/panels/Timeline/Style.reel/css/Style.css @@ -0,0 +1,133 @@ +/* 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 12, ../scss/Style.scss */ +.hidden { + display: none; +} + +/* line 15, ../scss/Style.scss */ +.row-editor { + position: relative; + height: 14px; +} + +/* line 19, ../scss/Style.scss */ +.style-padding { + padding-left: 5px; + padding-top: 3px; + padding-right: 5px; +} + +/* line 24, ../scss/Style.scss */ +.style-row { + height: 20px; + border-bottom: 1px solid #505050; +} + +/* line 29, ../scss/Style.scss */ +div.content-style div.editable2 { + height: 14px; + background-color: #242424 !important; + color: #b2b2b2 !important; + border-width: 0px; + font-size: 11px; + overflow: hidden; + -webkit-user-select: text; + white-space: nowrap; + text-overflow: clip; + width: 100%; +} + +/* line 43, ../scss/Style.scss */ +.content-style.collapsible-content, +.content-style.collapsible-content div, +.content-style.collapsible-content span { + overflow: visible; + text-overflow: visible; +} + +/* line 48, ../scss/Style.scss */ +div.content-style div.cell-property, +div.content-style div.cell-value { + width: 45%; + float: left; + height: 18px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 18px; +} + +/* line 57, ../scss/Style.scss */ +div.content-style div.cell-property div { + min-width: 90%; + height: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* line 65, ../scss/Style.scss */ +div.content-style input.nj-skinned { + height: 10px; + font-size: 12px; + top: -3px; +} diff --git a/js/panels/Timeline/Style.reel/scss/Style.scss b/js/panels/Timeline/Style.reel/scss/Style.scss new file mode 100644 index 00000000..f15f553d --- /dev/null +++ b/js/panels/Timeline/Style.reel/scss/Style.scss @@ -0,0 +1,70 @@ +/* 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/mixins"; + +// Import generic mixins and styles +@import "../../../../../_scss/imports/scss/mixins"; + +.hidden { + display: none; +} +.row-editor { + position: relative; + height: 14px; +} +.style-padding { + padding-left: 5px; + padding-top: 3px; + padding-right: 5px; +} +.style-row { + height: 20px; + border-bottom: 1px solid $color-menu-divider; +} + +div.content-style div.editable2 { + height: 14px; + 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; + white-space: nowrap; + text-overflow: clip; + width: 100%; +} +.content-style.collapsible-content, +.content-style.collapsible-content div, +.content-style.collapsible-content span { + overflow: visible; + text-overflow: visible; +} +div.content-style div.cell-property, +div.content-style div.cell-value { + width: 45%; + float: left; + height: 18px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 18px; +} +div.content-style div.cell-property div { + min-width: 90%; + height: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +div.content-style input.nj-skinned { + height: 10px; + font-size: 12px; + top: -3px; +} + diff --git a/js/panels/Timeline/Style.reel/scss/config.rb b/js/panels/Timeline/Style.reel/scss/config.rb new file mode 100644 index 00000000..e5a99b70 --- /dev/null +++ b/js/panels/Timeline/Style.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 -- cgit v1.2.3 From b4dd3e269b9de188e015f4cfac29c70a684f4c4f Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 18:25:15 -0800 Subject: Fix problem with resizer set to capture all webkitTransitionEnd events. Update collapser to use namespaced webkitTransitionEnd events for forward compatibility. Signed-off-by: Jonathan Duran --- js/panels/Timeline/Style.reel/Style.html | 2 +- js/panels/Timeline/Style.reel/Style.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/Style.reel') diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/panels/Timeline/Style.reel/Style.html index f10ad842..c6f29626 100644 --- a/js/panels/Timeline/Style.reel/Style.html +++ b/js/panels/Timeline/Style.reel/Style.html @@ -33,7 +33,7 @@ } }, "hottextunit" : { - "module" : "montage/ui/hottextunit.reel", + "module" : "js/components/hottextunit.reel", "name" : "HotTextUnit", "properties" : { "element" : {"#":"value-editor-hottext"} diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index 13a5db3e..796385d0 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -521,7 +521,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { "property" : "text-indent", "tweener" : "hottext", "units" : "px", - "min" : 0, + "min" : -9999, "max" : 9999, "default" : 0 }, -- cgit v1.2.3 From ad81fc7e75225d24ffaf59bb179a32aa12f5141a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 7 Feb 2012 18:44:06 -0800 Subject: Timeline: select/deselect layers. Work on focus/blur for layers. --- js/panels/Timeline/Style.reel/Style.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'js/panels/Timeline/Style.reel') diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index 796385d0..bf254795 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -19,6 +19,23 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { }, /* === BEGIN: Models === */ + // isSelected: whether or not the style is selected + _isSelected: { + serializable: true, + value: false + }, + isSelected: { + serializable: true, + get: function() { + return this._isSelected; + }, + set: function(newVal) { + if (newVal !== this._isSelected) { + this._isSelected = newVal; + this.needsDraw = true; + } + } + }, // Property for this editor _editorProperty: { @@ -152,6 +169,11 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { // Show the right thing this._showView(); } + if (this.isSelected) { + this.element.classList.add("selected"); + } else { + this.element.classList.remove("selected"); + } } }, didDraw: { -- cgit v1.2.3 From a8c16ca440b8ded3b78b59c767539e8c080680e7 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 8 Feb 2012 16:12:58 -0800 Subject: Squashed commit of the following: commit 46292bddbfbe7415c6852142dd10fd02a276722a Author: Jon Reid Date: Wed Feb 8 14:32:22 2012 -0800 Timeline: turn off console logging. commit b8de88393182bc6e819c3d6a290ade2f804236ac Merge: e651344 37b952c Author: Jon Reid Date: Wed Feb 8 14:10:06 2012 -0800 Merge branch 'Timeline-jduran' into Timeline-jreid commit e651344d5d6c2911b31a54510c65a349c4d52db2 Author: Jon Reid Date: Wed Feb 8 14:08:25 2012 -0800 Timeline: Bug fixes IKNINJA-947: Weird behavior with adding layers with an empty layer name selected IKNINJA-990: Multiple styles can be highlighted at the same time even when they are under different layers IKNINJA-1063: Styles can be added while style column is collapsed IKNINJA-970: When there is no style added yet, the arrow sign should be in a collapsed mode Signed-off-by: Jonathan Duran --- js/panels/Timeline/Style.reel/Style.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) (limited to 'js/panels/Timeline/Style.reel') diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index bf254795..e6e03901 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -36,6 +36,21 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } } }, + + /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with + * parent Layer. + */ + _isActive: { + value: false + }, + isActive: { + get: function() { + return this._isActive; + }, + set: function(newVal) { + this._isActive = newVal; + } + }, // Property for this editor _editorProperty: { @@ -153,6 +168,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.needsDraw = true; } }, + + handleMousedown: { + value: function(event) { + this.isActive = true; + } + }, /* === END: Models === */ @@ -238,6 +259,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.containerPropvals = this.element.querySelector(".container-propvals"); this.valueEditorInput = this.element.querySelector(".editor-input input"); + // mousedown listener to handle + this.element.addEventListener("mousedown", this, false); } }, -- cgit v1.2.3