From f1387bc995766b8d941f93e605a91c49c8931645 Mon Sep 17 00:00:00 2001
From: Kruti Shah
Date: Tue, 22 May 2012 10:28:41 -0700
Subject: Layer Control

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
---
 js/panels/Timeline/Style.reel/Style.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

(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 c39f3a56..91abaa71 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -221,7 +221,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 		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";
 		}
@@ -303,6 +302,9 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 				this.valueEditorHottext.units = tweenable.units;
 				this.valueEditorHottext.minValue = tweenable.min;
 				this.valueEditorHottext.maxValue = tweenable.max;
+                this.valueEditorHottext.identifier="hottext"
+                this.valueEditorHottext.addEventListener("change",this,false);
+                this.valueEditorHottext.addEventListener("changing",this,false);
 				this.valueEditorHottext.needsDraw = true;
 			} else if (tweenable.tweener === "color" ) {
 				this.editorInputContainer.classList.add("hidden");
@@ -612,6 +614,21 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
     		}
     	]
     	
+    },
+
+    handleHottextChange:{
+        value:function(){
+            debugger;
+            this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + "%"] , "Change", "timeline");
+        }
+    },
+
+    handleHottextChanging:{
+        value:function(){
+
+           debugger;
+           this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + "%"] , "Changing", "timeline");
+        }
     },
 	
 	/* Begin: Logging routines */
-- 
cgit v1.2.3


From fdc4f5c7f81ae3b9adeca2232e60268b4be594a2 Mon Sep 17 00:00:00 2001
From: Kruti Shah
Date: Tue, 22 May 2012 15:32:42 -0700
Subject: Style Layer Control

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
---
 js/panels/Timeline/Style.reel/Style.js | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

(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 91abaa71..532982f7 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -316,6 +316,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 				this.editorColorContainer.classList.add("hidden");
 				this.editorHottextContainer.classList.add("hidden");
 				this.valueEditorInput.value = this.editorValue;
+                this.valueEditorInput.addEventListener("blur",this,false);
 			} else {
 				this.log("Warning: unknown tweenable -"+tweenable.tweener+"- specified in style.js.")
 			}
@@ -559,7 +560,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
     		{
     			"property" : "opacity",
     			"tweener" : "hottext",
-    			"units" : "%",
+    			"units" : "",
     			"min" : 0,
     			"max" : 100,
     			"default" : 100
@@ -617,19 +618,31 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
     },
 
     handleHottextChange:{
-        value:function(){
-            debugger;
-            this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + "%"] , "Change", "timeline");
+        value:function(event){
+
+            if(this.editorValue===""){
+                this.editorValue = 0;
+            }
+            this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline");
         }
     },
 
     handleHottextChanging:{
-        value:function(){
+        value:function(event){
+
+            if(this.editorValue===""){
+                this.editorValue = 0;
+            }
+            this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + event.target._units ] , "Changing", "timeline");
+        }
+    },
 
-           debugger;
-           this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + "%"] , "Changing", "timeline");
+    handleBlur:{
+        value:function(event){
+            this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [event.target.value] , "Change", "timeline");
         }
     },
+
 	
 	/* Begin: Logging routines */
     _boolDebug: {
-- 
cgit v1.2.3


From fadf2a5f05c9b3e19caa2f18fc6d4d0e1e4fb02f Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Thu, 24 May 2012 16:06:02 -0700
Subject: Timeline: Bug fix IKNINJA 1566: Adding a css style property makes the
 blow layer name disappear.

---
 js/panels/Timeline/Style.reel/css/Style.css   | 79 ++++++---------------------
 js/panels/Timeline/Style.reel/scss/Style.scss |  3 +
 2 files changed, 19 insertions(+), 63 deletions(-)

(limited to 'js/panels/Timeline/Style.reel')

diff --git a/js/panels/Timeline/Style.reel/css/Style.css b/js/panels/Timeline/Style.reel/css/Style.css
index 6c7542cb..0cc8a1f8 100644
--- a/js/panels/Timeline/Style.reel/css/Style.css
+++ b/js/panels/Timeline/Style.reel/css/Style.css
@@ -1,88 +1,36 @@
-/* Layer.scss
- * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
- */
 /* <copyright>
  This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
  No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
-/*
- * _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 */
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
-/*
- * themes/themename/mixins.scss
- * Mixins that are theme-dependent (e.g. sprite mixins, etc)
- */
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
-/*
- * mixins.scss
- * Generic mixins.  Theme-specific mixins (e.g. for sprites) 
- * should go in the theme/themename/mixins.scss file.
+/* Layer.scss
+ * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
  */
-/* line 12, ../scss/Style.scss */
+/* line 18, ../scss/Style.scss */
 .hidden {
   display: none;
 }
 
-/* line 15, ../scss/Style.scss */
+/* line 21, ../scss/Style.scss */
 .row-editor {
   position: relative;
   height: 14px;
 }
 
-/* line 19, ../scss/Style.scss */
+/* line 25, ../scss/Style.scss */
 .style-padding {
   padding-left: 5px;
   padding-top: 3px;
   padding-right: 5px;
 }
 
-/* line 24, ../scss/Style.scss */
+/* line 30, ../scss/Style.scss */
 .style-row {
   height: 20px;
   border-bottom: 1px solid #505050;
 }
 
-/* line 29, ../scss/Style.scss */
+/* line 35, ../scss/Style.scss */
 div.content-style div.editable2 {
   height: 14px;
   background-color: #242424 !important;
@@ -96,7 +44,7 @@ div.content-style div.editable2 {
   width: 100%;
 }
 
-/* line 43, ../scss/Style.scss */
+/* line 49, ../scss/Style.scss */
 .content-style.collapsible-content,
 .content-style.collapsible-content div,
 .content-style.collapsible-content span {
@@ -104,7 +52,7 @@ div.content-style div.editable2 {
   text-overflow: visible;
 }
 
-/* line 48, ../scss/Style.scss */
+/* line 54, ../scss/Style.scss */
 div.content-style div.cell-property,
 div.content-style div.cell-value {
   width: 45%;
@@ -116,7 +64,7 @@ div.content-style div.cell-value {
   line-height: 18px;
 }
 
-/* line 57, ../scss/Style.scss */
+/* line 63, ../scss/Style.scss */
 div.content-style div.cell-property div {
   min-width: 90%;
   height: 100%;
@@ -125,9 +73,14 @@ div.content-style div.cell-property div {
   white-space: nowrap;
 }
 
-/* line 65, ../scss/Style.scss */
+/* line 71, ../scss/Style.scss */
 div.content-style input.nj-skinned {
   height: 10px;
   font-size: 12px;
   top: -3px;
 }
+
+/* line 76, ../scss/Style.scss */
+div.style-row .container-propvals {
+  overflow: hidden;
+}
diff --git a/js/panels/Timeline/Style.reel/scss/Style.scss b/js/panels/Timeline/Style.reel/scss/Style.scss
index 30bf43fe..66028cbe 100644
--- a/js/panels/Timeline/Style.reel/scss/Style.scss
+++ b/js/panels/Timeline/Style.reel/scss/Style.scss
@@ -73,4 +73,7 @@ div.content-style input.nj-skinned {
 	font-size: 12px;
 	top: -3px;
 }
+div.style-row .container-propvals {
+	overflow: hidden;
+}
 
-- 
cgit v1.2.3


From 4a8a293ba3fdf934a431152a9351f45092fb3695 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Fri, 25 May 2012 14:01:45 -0700
Subject: Timeline: bug fix: better selection/deselection of styles within
 layers.

---
 js/panels/Timeline/Style.reel/Style.js        | 5 +++--
 js/panels/Timeline/Style.reel/scss/Style.scss | 4 ++++
 2 files changed, 7 insertions(+), 2 deletions(-)

(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 c39f3a56..d712f2bd 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -35,6 +35,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 			return this._isSelected;
 		},
 		set: function(newVal) {
+			console.log("Style["+this.styleID+"].isSelected.set ", newVal)
 			if (newVal !== this._isSelected) {
 				this._isSelected = newVal;
 				this.needsDraw = true;
@@ -191,9 +192,9 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
     			this._showView();
     		}
     		if (this.isSelected) {
-    			this.element.classList.add("selected");
+    			this.element.classList.add("style-selected");
     		} else {
-    			this.element.classList.remove("selected");
+    			this.element.classList.remove("style-selected");
     		}
     	}
     },
diff --git a/js/panels/Timeline/Style.reel/scss/Style.scss b/js/panels/Timeline/Style.reel/scss/Style.scss
index 66028cbe..3ea943d8 100644
--- a/js/panels/Timeline/Style.reel/scss/Style.scss
+++ b/js/panels/Timeline/Style.reel/scss/Style.scss
@@ -77,3 +77,7 @@ div.style-row .container-propvals {
 	overflow: hidden;
 }
 
+.content-style .style-row.style-selected {
+	//background-color: red !important;
+}
+
-- 
cgit v1.2.3


From 82b0c1b8ee197e23fbd5184cbb0522ca76e651c8 Mon Sep 17 00:00:00 2001
From: Kruti Shah
Date: Thu, 31 May 2012 14:27:51 -0700
Subject: Color Chip

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
---
 js/panels/Timeline/Style.reel/Style.html |   7 +-
 js/panels/Timeline/Style.reel/Style.js   | 662 +++++++++++++++++--------------
 2 files changed, 377 insertions(+), 292 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 5be159c3..cdc355e7 100644
--- a/js/panels/Timeline/Style.reel/Style.html
+++ b/js/panels/Timeline/Style.reel/Style.html
@@ -19,7 +19,8 @@
                         "styleProperty" : {"#": "container-property"},
                         "valueEditorHottext" : {"@":"hottextunit"},
                         "dtextProperty" : {"@":"dtext1"},
-                        "myHintable" : {"@" :"hintable"}
+                        "myHintable" : {"@" :"hintable"},
+                        "_fillColorCtrl": {"#": "fillColorCtrl"}
                     }
                 },
 	            "dtext1" : {
@@ -78,7 +79,9 @@
 						<div data-montage-id="value-editor-hottext"></div>
 					</div>
 					<div class="cell-value value-editor editor-color hidden">
-						<div data-montage-id="value-editor-color">[&nbsp;]</div>
+						<div data-montage-id="value-editor-color">
+                            <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
+						</div>
 					</div>
 					<div class="cell-value value-editor editor-input hidden">
 						<!-- <div data-montage-id="value-editor-input"></div> -->
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index fa848cc0..102e9f25 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -17,6 +17,8 @@
 
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
+var ElementsMediator =  	require("js/mediators/element-mediator").ElementMediator
+
 
 var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 
@@ -169,7 +171,27 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
  			this.needsDraw = true;
  		}
  	},
- 	
+
+    addedColorChips:
+        { value: false },
+
+    _fill: {
+        enumerable: false,
+        value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] }
+    },
+
+    fill: {
+        enumerable: true,
+        get: function () {
+            return this._fill;
+        },
+        set: function (value) {
+            if (value !== this._fill) {
+                this._fill = value;
+            }
+        }
+    },
+
  	handleMousedown: {
  		value: function(event) {
  			this.isActive = true;
@@ -196,6 +218,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
     		} else {
     			this.element.classList.remove("style-selected");
     		}
+
+
     	}
     },
     didDraw: {
@@ -311,6 +335,38 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 				this.editorInputContainer.classList.add("hidden");
 				this.editorColorContainer.classList.remove("hidden");
 				this.editorHottextContainer.classList.add("hidden");
+
+                if(tweenable.colorType === "fill"){
+                                    this._isFill = true;
+                                }else{
+                                    if(tweenable.colorType === "stroke"){
+                                        this._isFill = false;
+                                        this._borderSide = tweenable.strokePosition
+                                    }
+
+                                }
+
+                if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
+                    // setup fill color
+                    this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+                    this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
+
+    //                setup stroke color
+    //                this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+    //                this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl);
+
+                    this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
+
+                    this.addedColorChips = true;
+                }
+
+                if (this.addedColorChips) {
+                    this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
+    //                this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color);
+                }
+
+
+
 				// TODO: set up color chip here.
 			} else if (tweenable.tweener === "input"){
 				this.editorInputContainer.classList.remove("hidden");
@@ -327,295 +383,321 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 	/* === 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" : -9999,
-    			"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
-    		}
-    	]
-    	
+        value: [
+            {
+                "property" : "background-color",
+                "tweener" : "color",
+                "units" : "",
+                "min" : "",
+                "max" : "",
+                "default" :"#FFFFFF",
+                "colorType" :"fill"
+            },
+            {
+                "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",
+                "colorType" : "stroke",
+                "strokePosition" : false
+            },
+            {
+                "property" : "border-width",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "border-bottom-color",
+                "tweener" : "color",
+                "units" : "",
+                "default" : "#FFFFFF",
+                "colorType" : "stroke",
+                "strokePosition" : "bottom"
+
+            },
+            {
+                "property" : "border-bottom-width",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "border-left-color",
+                "tweener" : "color",
+                "units" : "",
+                "default" : "#FFFFFF",
+                "colorType" : "stroke",
+                "strokePosition" : "left"
+
+            },
+            {
+                "property" : "border-left-width",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "border-top-color",
+                "tweener" : "color",
+                "units" : "",
+                "default" : "#FFFFFF",
+                "colorType" : "stroke",
+                "strokePosition" : "top"
+
+            },
+            {
+                "property" : "border-top-width",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : 0,
+                "max" : 9999,
+                "default" : 0
+            },
+            {
+                "property" : "border-right-color",
+                "tweener" : "color",
+                "units" : "",
+                "default" : "#FFFFFF",
+                "colorType" : "stroke",
+                "strokePosition" : "right"
+
+            },
+            {
+                "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" : -9999,
+                "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
+            }
+        ]
+
+    },
+
+    handleFillColorChange: {
+        value: function (event) {
+debugger;
+
+            var fillColorObject={};
+            fillColorObject.color=event._event.color;
+            fillColorObject.mode=event._event.colorMode;
+            ElementsMediator.setColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
+        }
     },
 
     handleHottextChange:{
-- 
cgit v1.2.3


From 66007a04da84cae1d81af5340b11706d5f25c89d Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Thu, 31 May 2012 17:09:45 -0700
Subject: Timeline: Bug fixes for deleting styles and their associated tracks
 correctly.

---
 js/panels/Timeline/Style.reel/Style.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(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 d712f2bd..185c9bb0 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -35,7 +35,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 			return this._isSelected;
 		},
 		set: function(newVal) {
-			console.log("Style["+this.styleID+"].isSelected.set ", newVal)
+			//console.log("Style["+this.styleID+"].isSelected.set ", newVal)
 			if (newVal !== this._isSelected) {
 				this._isSelected = newVal;
 				this.needsDraw = true;
-- 
cgit v1.2.3


From 2390c512a501755d0b0adf429123e0fe7f34bb77 Mon Sep 17 00:00:00 2001
From: Kruti Shah
Date: Fri, 1 Jun 2012 10:58:43 -0700
Subject: Layer Controls

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
---
 js/panels/Timeline/Style.reel/Style.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(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 102e9f25..9209e8b9 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -691,12 +691,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 
     handleFillColorChange: {
         value: function (event) {
-debugger;
 
             var fillColorObject={};
             fillColorObject.color=event._event.color;
             fillColorObject.mode=event._event.colorMode;
-            ElementsMediator.setColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
+            console.log(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement);
+            ElementsMediator.setColor([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
         }
     },
 
@@ -706,7 +706,7 @@ debugger;
             if(this.editorValue===""){
                 this.editorValue = 0;
             }
-            this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline");
+            this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline");
         }
     },
 
@@ -716,13 +716,13 @@ debugger;
             if(this.editorValue===""){
                 this.editorValue = 0;
             }
-            this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [this.editorValue + event.target._units ] , "Changing", "timeline");
+            this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units ] , "Changing", "timeline");
         }
     },
 
     handleBlur:{
         value:function(event){
-            this.application.ninja.elementMediator.setProperty(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.elementsList, this.editorProperty, [event.target.value] , "Change", "timeline");
+            this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline");
         }
     },
 
-- 
cgit v1.2.3


From e4c12f183f001cb9c051131dda7f5bddbe5b1619 Mon Sep 17 00:00:00 2001
From: Kruti Shah
Date: Fri, 1 Jun 2012 11:00:34 -0700
Subject: Clean up

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
---
 js/panels/Timeline/Style.reel/Style.js | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

(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 9209e8b9..669091af 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -337,26 +337,19 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 				this.editorHottextContainer.classList.add("hidden");
 
                 if(tweenable.colorType === "fill"){
-                                    this._isFill = true;
-                                }else{
-                                    if(tweenable.colorType === "stroke"){
-                                        this._isFill = false;
-                                        this._borderSide = tweenable.strokePosition
-                                    }
-
-                                }
+                    this._isFill = true;
+                }else{
+                    if(tweenable.colorType === "stroke"){
+                        this._isFill = false;
+                        this._borderSide = tweenable.strokePosition
+                    }
+                }
 
                 if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
                     // setup fill color
                     this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
                     this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
-
-    //                setup stroke color
-    //                this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
-    //                this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl);
-
                     this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
-
                     this.addedColorChips = true;
                 }
 
@@ -695,7 +688,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
             var fillColorObject={};
             fillColorObject.color=event._event.color;
             fillColorObject.mode=event._event.colorMode;
-            console.log(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement);
             ElementsMediator.setColor([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
         }
     },
-- 
cgit v1.2.3


From 4338d57eed565f723bfb7cbcefca65836b68953b Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Fri, 1 Jun 2012 14:26:30 -0700
Subject: Timeline: Better style selection and deselection. Automatic
 re-selection of previously selected style when parent layer is reselected.

---
 js/panels/Timeline/Style.reel/Style.js        |  2 +-
 js/panels/Timeline/Style.reel/css/Style.css   | 12 ++++++++++++
 js/panels/Timeline/Style.reel/scss/Style.scss |  8 ++++++--
 3 files changed, 19 insertions(+), 3 deletions(-)

(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 185c9bb0..5c1c9eeb 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -35,7 +35,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 			return this._isSelected;
 		},
 		set: function(newVal) {
-			//console.log("Style["+this.styleID+"].isSelected.set ", newVal)
+
 			if (newVal !== this._isSelected) {
 				this._isSelected = newVal;
 				this.needsDraw = true;
diff --git a/js/panels/Timeline/Style.reel/css/Style.css b/js/panels/Timeline/Style.reel/css/Style.css
index 0cc8a1f8..bb65b0c7 100644
--- a/js/panels/Timeline/Style.reel/css/Style.css
+++ b/js/panels/Timeline/Style.reel/css/Style.css
@@ -84,3 +84,15 @@ div.content-style input.nj-skinned {
 div.style-row .container-propvals {
   overflow: hidden;
 }
+
+/* line 80, ../scss/Style.scss */
+.content-style .style-row.selected {
+  background-color: #474747;
+  color: white;
+}
+
+/* line 84, ../scss/Style.scss */
+.content-style .style-row.style-selected {
+  background-color: #b2b2b2;
+  color: #242424;
+}
diff --git a/js/panels/Timeline/Style.reel/scss/Style.scss b/js/panels/Timeline/Style.reel/scss/Style.scss
index 3ea943d8..c5287b00 100644
--- a/js/panels/Timeline/Style.reel/scss/Style.scss
+++ b/js/panels/Timeline/Style.reel/scss/Style.scss
@@ -77,7 +77,11 @@ div.style-row .container-propvals {
 	overflow: hidden;
 }
 
+.content-style .style-row.selected {
+  background-color: $color-panel-bg;
+  color: $color-panel-text;
+}
 .content-style .style-row.style-selected {
-	//background-color: red !important;
+  background-color: $color-panel-hilite-bg;
+  color: $color-panel-hilite-text;
 }
-
-- 
cgit v1.2.3


From 10620ff1a9b42528d84f2c6cc4f64a1790a0d8b7 Mon Sep 17 00:00:00 2001
From: Kruti Shah
Date: Mon, 4 Jun 2012 10:13:30 -0700
Subject: LC

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
---
 js/panels/Timeline/Style.reel/Style.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(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 669091af..efc004e9 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -310,6 +310,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 			// First, get the appropriate editor type from the data structure.
 			var tweenable = {},
 				i = 0;
+
+            if (this.ruleTweener === true) {
+               return;
+            } else {
+               this.ruleTweener = true;
+            }
 				
 			tweenable.tweener = "input";
 
@@ -358,8 +364,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
     //                this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color);
                 }
 
-
-
 				// TODO: set up color chip here.
 			} else if (tweenable.tweener === "input"){
 				this.editorInputContainer.classList.remove("hidden");
-- 
cgit v1.2.3


From 8986b9f78174b10790ad00e5a28122cb0879e5e3 Mon Sep 17 00:00:00 2001
From: Kruti Shah
Date: Thu, 7 Jun 2012 21:22:41 -0700
Subject: Sub property

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
---
 js/panels/Timeline/Style.reel/Style.js | 54 +++++++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 17 deletions(-)

(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 efc004e9..ed7a281a 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -175,6 +175,23 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
     addedColorChips:
         { value: false },
 
+    _abcelement: {
+        writable:true
+    },
+
+    abcelement: {
+        enumerable: true,
+        get: function () {
+            return this._abcelement;
+        },
+        set: function (value) {
+            if (value !== this._abcelement) {
+                this._abcelement = value;
+            }
+            console.log(this._abcelement)
+        }
+    },
+
     _fill: {
         enumerable: false,
         value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] }
@@ -333,7 +350,10 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 				this.valueEditorHottext.units = tweenable.units;
 				this.valueEditorHottext.minValue = tweenable.min;
 				this.valueEditorHottext.maxValue = tweenable.max;
-                this.valueEditorHottext.identifier="hottext"
+                this.valueEditorHottext.identifier="hottext";
+                el = this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement;
+                this.editorValue = parseFloat(ElementsMediator.getProperty(el, this.editorProperty));
+                this.valueEditorHottext.value = this.editorValue
                 this.valueEditorHottext.addEventListener("change",this,false);
                 this.valueEditorHottext.addEventListener("changing",this,false);
 				this.valueEditorHottext.needsDraw = true;
@@ -355,12 +375,14 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                     // setup fill color
                     this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
                     this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
+                    this.abcelement = this._fillColorCtrl;
+                    var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,true)
                     this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
                     this.addedColorChips = true;
                 }
 
                 if (this.addedColorChips) {
-                    this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
+                    this._fillColorCtrl.color(currentValue.colorMode, currentValue.color);
     //                this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color);
                 }
 
@@ -629,7 +651,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
             {
                 "property" : "opacity",
                 "tweener" : "hottext",
-                "units" : "%",
+                "units" : "",
                 "min" : 0,
                 "max" : 100,
                 "default" : 100
@@ -688,37 +710,35 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 
     handleFillColorChange: {
         value: function (event) {
+                var fillColorObject={};
+                fillColorObject.color=event._event.color;
+                fillColorObject.mode=event._event.colorMode;
+                ElementsMediator.setColor([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
 
-            var fillColorObject={};
-            fillColorObject.color=event._event.color;
-            fillColorObject.mode=event._event.colorMode;
-            ElementsMediator.setColor([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
         }
     },
 
     handleHottextChange:{
         value:function(event){
-
-            if(this.editorValue===""){
-                this.editorValue = 0;
+            if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
+                this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units]  , "Change", "pi");
             }
-            this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline");
         }
     },
 
     handleHottextChanging:{
         value:function(event){
-
-            if(this.editorValue===""){
-                this.editorValue = 0;
-            }
-            this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units ] , "Changing", "timeline");
+            if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
+               this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units]  , "Changing", "pi");
+             }
         }
     },
 
     handleBlur:{
         value:function(event){
-            this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline");
+            if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
+                this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline");
+            }
         }
     },
 
-- 
cgit v1.2.3


From c1cd060be878d30fda71140dc850b8d1ac68c6ad Mon Sep 17 00:00:00 2001
From: Kruti Shah
Date: Fri, 8 Jun 2012 11:27:40 -0700
Subject: Color chip in TP

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
---
 js/panels/Timeline/Style.reel/Style.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

(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 ed7a281a..a0dc7c6b 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -376,14 +376,10 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                     this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
                     this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
                     this.abcelement = this._fillColorCtrl;
-                    var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,true)
+                    var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,this._isFill,this._borderSide)
                     this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
-                    this.addedColorChips = true;
-                }
-
-                if (this.addedColorChips) {
                     this._fillColorCtrl.color(currentValue.colorMode, currentValue.color);
-    //                this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color);
+                    this.addedColorChips = true;
                 }
 
 				// TODO: set up color chip here.
-- 
cgit v1.2.3


From bedb38e14887b29eae3cdf1c8d435259c920257c Mon Sep 17 00:00:00 2001
From: Kruti Shah
Date: Tue, 12 Jun 2012 13:05:12 -0700
Subject: Sub Props

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
---
 js/panels/Timeline/Style.reel/Style.js | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

(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 a0dc7c6b..37f970c0 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -175,20 +175,19 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
     addedColorChips:
         { value: false },
 
-    _abcelement: {
+    _colorelement: {
         writable:true
     },
 
-    abcelement: {
+    colorelement: {
         enumerable: true,
         get: function () {
-            return this._abcelement;
+            return this._colorelement;
         },
         set: function (value) {
-            if (value !== this._abcelement) {
-                this._abcelement = value;
+            if (value !== this._colorelement) {
+                this._colorelement = value;
             }
-            console.log(this._abcelement)
         }
     },
 
@@ -375,13 +374,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                     // setup fill color
                     this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
                     this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
-                    this.abcelement = this._fillColorCtrl;
+                    this.colorelement = this._fillColorCtrl;
                     var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,this._isFill,this._borderSide)
+                    this.application.ninja.timeline.selectedStyle = this.editorProperty;
                     this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
                     this._fillColorCtrl.color(currentValue.colorMode, currentValue.color);
                     this.addedColorChips = true;
                 }
-
 				// TODO: set up color chip here.
 			} else if (tweenable.tweener === "input"){
 				this.editorInputContainer.classList.remove("hidden");
@@ -706,26 +705,30 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 
     handleFillColorChange: {
         value: function (event) {
+
+                if(this.application.ninja.timeline.selectedStyle === "color" ||this.application.ninja.timeline.selectedStyle === this.editorProperty){
                 var fillColorObject={};
                 fillColorObject.color=event._event.color;
                 fillColorObject.mode=event._event.colorMode;
                 ElementsMediator.setColor([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
-
+                }
         }
     },
 
     handleHottextChange:{
         value:function(event){
+            console.log(this.application.ninja.timeline.selectedStyle)
             if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
-                this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units]  , "Change", "pi");
+                this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units]  , "Change", "timeline");
             }
         }
     },
 
     handleHottextChanging:{
         value:function(event){
+            console.log(this.application.ninja.timeline.selectedStyle)
             if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
-               this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units]  , "Changing", "pi");
+               this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units]  , "Changing", "timeline");
              }
         }
     },
-- 
cgit v1.2.3


From 7887aafbff794e9c5f918c667e73a8386c38cf02 Mon Sep 17 00:00:00 2001
From: Kruti Shah
Date: Tue, 12 Jun 2012 13:18:02 -0700
Subject: Clean up

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
---
 js/panels/Timeline/Style.reel/Style.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

(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 bb10f30f..03d674a5 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -705,19 +705,17 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 
     handleFillColorChange: {
         value: function (event) {
-
-                if(this.application.ninja.timeline.selectedStyle === "color" ||this.application.ninja.timeline.selectedStyle === this.editorProperty){
+            if(this.application.ninja.timeline.selectedStyle === "color" ||this.application.ninja.timeline.selectedStyle === this.editorProperty){
                 var fillColorObject={};
                 fillColorObject.color=event._event.color;
                 fillColorObject.mode=event._event.colorMode;
                 ElementsMediator.setColor([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
-                }
+            }
         }
     },
 
     handleHottextChange:{
         value:function(event){
-            console.log(this.application.ninja.timeline.selectedStyle)
             if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
                 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units]  , "Change", "timeline");
             }
@@ -726,7 +724,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 
     handleHottextChanging:{
         value:function(event){
-            console.log(this.application.ninja.timeline.selectedStyle)
             if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
                this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units]  , "Changing", "timeline");
              }
-- 
cgit v1.2.3