5 files changed, 59 insertions, 81 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index c7e7b575..44022211 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -17,6 +17,7 @@
                                                 "styleRepetition" : {"@":"repetition1"},
                                                 "dynamicLayerName" : {"@":"dtext1"},
                                                 "dynamicLayerTag" : {"@": "dtext2"},
+                                                "layer_label_text" : {"#": "layer-label-text"},
                                                 "mainCollapser" : {"@" : "mainCollapser"},
                                                 "positionCollapser" : {"@" : "positionCollapser"},
                                                 "styleCollapser" : {"@" : "styleCollapser"},
@@ -33,7 +34,7 @@
                                 "value" : {
                                         "boundObject" : {"@": "owner"},
                                         "boundObjectPropertyPath" : "layerName",
-                                        "oneway" : false
+                                        "oneway" : true
                                 }
                         }
                     },
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 8df0e9ae..45d6f0a3 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -74,7 +74,7 @@ var Layer = exports.Layer = Montage.create(Component, {
 
     /* Layer models: the name, ID, and selected and animation booleans for the layer */
     _layerName:{
-        value: "Default Layer Name"
+        value: ""
     },
     
     layerName:{
@@ -83,13 +83,22 @@ var Layer = exports.Layer = Montage.create(Component, {
             return this._layerName;
         },
         set:function(newVal){
-                        this._layerEditable.value = newVal;
-                this._layerName = newVal;
-                this.layerData.layerName = newVal;
+                        if (this._layerEditable.value !== newVal) {
+                                this._layerEditable.value = newVal;
+                        }
+                        if (this._layerName !== newVal) {
+                                this._layerName = newVal;
+                        }
+                        if (this.layerData.layerName !== newVal) {
+                                this.layerData.layerName = newVal;
+                        }
+
                 if (typeof(this.dynamicLayerName) !== "undefined") {
-                        this.dynamicLayerName.value = newVal;
+                        if (this.dynamicLayerName.value !== newVal) {
+                                this.dynamicLayerName.value = newVal;
+                        }
                 }
-
+                this.needsDraw = true;
         }
     },
     _layerID:{
@@ -513,6 +522,11 @@ var Layer = exports.Layer = Montage.create(Component, {
                 //console.log('Layer.draw, removing selection for layer ', this.layerName)
                 this.element.classList.remove("layerSelected");
             }
+            
+            // Update layer name?
+            if (this.layerName !== this.layer_label_text.innerText) {
+                this.layer_label_text.innerText = this.layerName;
+            }
         }
     },
     didDraw: {
@@ -565,10 +579,11 @@ var Layer = exports.Layer = Montage.create(Component, {
                                 // newStyle = LayerStyle.create(),
                                 newStyle = {},
                                 newEvent = document.createEvent("CustomEvent");
-                        
+                        /*
                         this.isStyleCollapsed = false;
                         this.layerData.isStyleCollapsed = false;
                         this.triggerOutgoingBinding();
+                        */
                         
                         newEvent.initCustomEvent("layerEvent", false, true);
                         newEvent.layerEventLocale = "styles";
@@ -678,14 +693,21 @@ var Layer = exports.Layer = Montage.create(Component, {
         /* Begin: Event handlers */
         handleLayerNameChange: {
                 value: function(event) {
-                        this.dynamicLayerName.value = this._layerEditable.value;
-                        this.needsDraw = true;
-                        this.application.ninja.documentController.activeDocument.needsSave = true;
-            this.layerData.stageElement.setAttribute("id",this.dynamicLayerName.value);
+                        
+                        if (this._layerEditable.value !== this.layerName) {
+                                this.layerName = this._layerEditable.value;
+                                this.application.ninja.documentController.activeDocument.needsSave = true;
+                                this.layerData.stageElement.setAttribute("id",this._layerEditable.value);
+                        }
                 }
         },
         handleAddStyleClick: {
                 value: function(event) {
+
+                        this.isStyleCollapsed = false;
+                        this.layerData.isStyleCollapsed = false;
+                        this.triggerOutgoingBinding();
+
                         this.addStyle();
                 }
         },
@@ -706,10 +728,12 @@ var Layer = exports.Layer = Montage.create(Component, {
                         if (this._layerEditable.enteredValue.length === 0) {
                                 newVal = this._layerEditable._preEditValue;
                         }
-                        this.dynamicLayerName.value = newVal;
                         this.layerName = newVal;
-                        this.application.ninja.documentController.activeDocument.needsSave = true;
-                        this.needsDraw = true;
+                        if (newVal !== this.layerName) {
+                                this.layerName = newVal;
+                                this.application.ninja.documentController.activeDocument.needsSave = true;
+                                this.layerData.stageElement.setAttribute("id", newVal);
+                        }
                 }
         },
         handleMousedown: {
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
+/* Layer.scss
+ * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.