Timeline: New Features: Tag name now present in each layer. Configuration

dropdown in Master Layer; Show Only Animated Layers toggle.

8 files changed, 625 insertions, 316 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index eb9ff3a9..9a9623b8 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -17,6 +17,7 @@
                         "element": {"#": "layer"},
                                                 "styleRepetition" : {"@":"repetition1"},
                                                 "dynamicLayerName" : {"@":"dtext1"},
+                                                "dynamicLayerTag" : {"@": "dtext2"},
                                                 "slotStyle" : {"@":"slot1"},
                                                 "mainCollapser" : {"@" : "mainCollapser"},
                                                 "positionCollapser" : {"@" : "positionCollapser"},
@@ -41,6 +42,20 @@
                                 }
                         }
                     },
+                    "dtext2" : {
+                        "module" : "montage/ui/dynamic-text.reel",
+                        "name" : "DynamicText",
+                        "properties" : {
+                                "element" : {"#" : "layer-tag"}
+                        },
+                        "bindings" : {
+                                "value" : {
+                                        "boundObject" : {"@": "owner"},
+                                        "boundObjectPropertyPath" : "layerTag",
+                                        "oneway" : false
+                                }
+                        }
+                    },
                     "repetition1": {
                         "module": "montage/ui/repetition.reel",
                         "name": "Repetition",
@@ -326,6 +341,7 @@
     
                 <div data-montage-id="layer" class="container-layer">
                         <div class="label-layer" data-montage-id="myLabel">
+                                <span data-montage-id="layer-tag" class="layer-tag"></span>
                                 <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span>
                                 <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span>
                                 <div class="cssbutton button-lock"></div>
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index f9edfca6..f62d43a4 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -99,6 +99,20 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.layerData.layerID = value;
         }
     },
+    _layerTag:{
+        value: "tag"
+    },
+    
+    layerTag:{
+        serializable: true,
+        get:function(){
+            return this._layerTag;
+        },
+        set:function(newVal){
+                this._layerTag = newVal;
+                this.layerData.layerTag = newVal;
+        }
+    },
     
     /* Position and Transform hottext values */
     _dtextPositionX : {
@@ -290,9 +304,30 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         set:function(value){
             this._isAnimated = value;
-            this.layerData.isAnimated = newVal;
+            this.layerData.isAnimated = value;
+        }
+    },
+    _isVisible:{
+        value: true
+    },
+
+    isVisible:{
+        get:function(){
+            return this._isVisible;
+        },
+        set:function(value){
+                if (this._isVisible !== value) {
+                        this._isVisible = value;
+                        if (value === true) {
+                                this.element.classList.remove("layer-hidden");
+                        } else {
+                                this.element.classList.add("layer-hidden");
+                        }
+                }
+                this.layerData.isVisible = value;
         }
     },
+    
     _justAdded: {
         value: false
     },
@@ -433,6 +468,9 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.dtextScaleY = this.layerData.dtextScaleY;
             this.dtextRotate = this.layerData.dtextRotate;
             this._isFirstDraw = this.layerData._isFirstDraw;
+            this.layerTag = this.layerData.layerTag;
+            this.isVisible = this.layerData.isVisible;
+            this.isAnimated = this.layerData.isAnimated;
             this.needsDraw = boolNeedsDraw;
         }
     },
@@ -504,6 +542,8 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
                         this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
                         this.element.addEventListener("drop", this.handleDrop.bind(this), false);
+                        
+                        // Bind this.layerTag to the tag 
 
         }
     },
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
index 50e664c4..179571af 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -93,36 +93,42 @@
 /* line 91, ../scss/Layer.scss */
 .userlayers .collapsible-label {
   display: block;
-  width: 100px;
   height: 21px;
   line-height: 20px;
   color: white;
-  margin-left: 30px;
-  margin-right: 20px;
+  margin-left: 80px;
+  margin-right: 40px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 /* line 103, ../scss/Layer.scss */
+.userlayers .layer-tag {
+  position: absolute;
+  top: 3px;
+  left: 20px;
+}
+
+/* line 110, ../scss/Layer.scss */
 .layerSelected .label-layer {
   background-color: #b2b2b2;
   color: #242424;
 }
 
-/* line 107, ../scss/Layer.scss */
+/* line 114, ../scss/Layer.scss */
 .content-layer {
   background-color: #474747;
   color: white;
 }
 
-/* line 111, ../scss/Layer.scss */
+/* line 118, ../scss/Layer.scss */
 .content-layer .collapsible-label {
   background-position: 14px 5px;
   border-width: 0px;
 }
 
-/* line 119, ../scss/Layer.scss */
+/* line 126, ../scss/Layer.scss */
 .label-layer,
 .label-position,
 .label-transform,
@@ -133,19 +139,20 @@
   cursor: pointer;
 }
 
-/* line 126, ../scss/Layer.scss */
+/* line 134, ../scss/Layer.scss */
 .content-layer .collapsible-label,
-.content-layer .collapsible-content {
+.content-layer .collapsible-content,
+.content-layer .layer-tag {
   font-size: 11px;
 }