From e07ec7dd1a4b8df747f6af0d54fe95e3a237f0c8 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Wed, 14 Mar 2012 11:47:06 -0700
Subject: Removing the name attribute from the PI. Fixing the ID and Class
 attribute from the PI

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/properties.reel/properties.html | 70 ++++++-------------------------
 js/panels/properties.reel/properties.js   | 64 +++++++++++++++-------------
 2 files changed, 47 insertions(+), 87 deletions(-)

(limited to 'js/panels')

diff --git a/js/panels/properties.reel/properties.html b/js/panels/properties.reel/properties.html
index 72a6def6..bcf54b95 100755
--- a/js/panels/properties.reel/properties.html
+++ b/js/panels/properties.reel/properties.html
@@ -10,35 +10,19 @@
         <link rel="stylesheet" href="properties.css" type="text/css">
         <script type="text/montage-serialization">
         {
-            "elementNameInput1": {
-                "module": "montage/ui/textfield.reel",
-                "name": "Textfield",
+            "elementName": {
+                "prototype": "montage/ui/textfield.reel",
                 "properties": {
                     "element": {"#": "elementName"},
                     "readOnly": true
-                },
-                "bindings": {
-                    "value": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "elementName",
-                        "oneway": true
-                    }
                 }
             },
 
-            "elementID": {
-                "module": "montage/ui/textfield.reel",
-                "name": "Textfield",
+            "elementId": {
+                "prototype": "montage/ui/textfield.reel",
                 "properties": {
-                    "element": {"#": "elementID"},
+                    "element": {"#": "elementId"},
                     "readOnly": false
-                },
-                "bindings": {
-                    "value": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "elementID",
-                        "oneway": true
-                    }
                 }
             },
 
@@ -46,35 +30,11 @@
                 "module": "montage/ui/textfield.reel",
                 "name": "Textfield",
                 "properties": {
-                    "element": {"#": "elementClassName"},
+                    "element": {"#": "elementClass"},
                     "readOnly": false
-                },
-                "bindings": {
-                    "value": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "elementClassName",
-                        "oneway": true
-                    }
-                }
-            },
-
-            "elementNameAttribute": {
-                "module": "montage/ui/textfield.reel",
-                "name": "Textfield",
-                "properties": {
-                    "element": {"#": "elementNameAttribute"},
-                    "readOnly": false
-                },
-                "bindings": {
-                    "value": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "nameAttribute",
-                        "oneway": false
-                    }
                 }
             },
 
-
             "PosSizeSection": {
                 "module": "js/panels/properties.reel/section.reel",
                 "name": "Section",
@@ -142,9 +102,9 @@
                 "name": "Properties",
                 "properties": {
                     "element":              {"#": "propertiesPanel"},
-                    "elementNameInput":     {"@": "elementNameInput1"},
-                    "elementId":            {"@": "elementID"},
-                    "elementNameAttribute": {"@": "elementNameAttribute"},
+                    "elementName":          {"@": "elementName"},
+                    "elementClass":         {"@": "elementClass"},
+                    "elementId":            {"@": "elementId"},
                     "positionSize":         {"@": "PosSize"},
                     "threeD":               {"@": "threeDProperties"}
                 }
@@ -156,21 +116,17 @@
     <section id="propertiesPanel" class="propertiesPanel">
         <section class="sectional">
             <section class="fieldCol">
-                <label id="lblElement">Element:</label>
+                <label>Element:</label>
                 <article class="fieldRow"><input type="text" id="elementName" class="nj-skinned" readonly="readonly"></article>
             </section>
             <section class="fieldCol">
-                <label id="lblID">ID:</label>
-                <article class="fieldRow"><input type="text" id="elementID" class="nj-skinned" /></article>
+                <label>ID:</label>
+                <article class="fieldRow"><input type="text" id="elementId" class="nj-skinned" /></article>
             </section>
             <section class="fieldCol">
-                <label id="lblClass">Class:</label>
+                <label>Class:</label>
                 <article class="fieldRow"><input type="text" id="elementClassName" class="nj-skinned" /></article>
             </section>
-            <section class="fieldCol">
-                <label id="lblName">Name:</label>
-                <article class="fieldRow"><input type="text" id="elementNameAttribute" class="nj-skinned" /></article>
-            </section>
         </section>
         <section id="PosSize"></section>
         <section id="customSections">
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 947d7937..f35bf2e0 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -17,15 +17,11 @@ exports.Properties = Montage.create(Component, {
         value: null
     },
 
-    elementID: {
+    elementId: {
         value: null
     },
 
-    elementClassName: {
-        value: null
-    },
-
-    nameAttribute: {
+    elementClass: {
         value: null
     },
 
@@ -60,6 +56,14 @@ exports.Properties = Montage.create(Component, {
 
             this.eventManager.addEventListener("openDocument", this, false);
             this.eventManager.addEventListener("switchDocument", this, false);
+
+            this.elementId.element.addEventListener("blur", this, false);
+            this.elementId.element.addEventListener("focus", this, false);
+            this.elementId.element.addEventListener("keyup", this, false);
+
+            this.elementClass.element.addEventListener("blur", this, false);
+            this.elementClass.element.addEventListener("focus", this, false);
+            this.elementClass.element.addEventListener("keyup", this, false);
         }
     },
 
@@ -73,12 +77,6 @@ exports.Properties = Montage.create(Component, {
             if(this.application.ninja.selectedElements.length === 0) {
                 this.displayStageProperties();
             }
-
-            this.elementId.element.addEventListener("blur", this, false);
-            this.elementId.element.addEventListener("keyup", this, false);
-
-            this.elementNameAttribute.element.addEventListener("blur", this, false);
-            this.elementNameAttribute.element.addEventListener("keyup", this, false);
         }
     },
 
@@ -87,7 +85,7 @@ exports.Properties = Montage.create(Component, {
             // For now always assume that the stage is selected by default
             if(this.application.ninja.selectedElements.length === 0) {
                 this.displayStageProperties();
-            }else {
+            } else {
                 if(this.application.ninja.selectedElements.length === 1) {
                     this.displayElementProperties(this.application.ninja.selectedElements[0]._element);
                 } else {
@@ -102,17 +100,29 @@ exports.Properties = Montage.create(Component, {
      */
     handleBlur: {
         value: function(event) {
-            console.log(event.target);
-            if(event.target.id === "elementID") {
+
+            if(event.target.id === "elementId") {
+
+                // Remove all white spaces from the id
+                this.elementId.value = this.elementId.value.replace(/\s/g, '');
+
+                // Check if that id is in use
+                if(this.application.ninja.currentDocument._document.getElementById(this.elementId.value) !== null) {
+                    // TODO: Replace with Ninja Alert
+                    alert("The following ID: " + this.elementId.value + " is already in use");
+                }
+
                 if(this.application.ninja.selectedElements.length) {
                     ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi");
                 } else {
                     ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id);
                 }
-            } else if(event.target.id === "elementNameAttribute") {
+            } else if(event.target.id === "elementClass") {
                 if(this.application.ninja.selectedElements.length) {
-                    //ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "name", this.elementNameAttribute.value, "Change", "pi");
-                    this.application.ninja.selectedElements[0]._element.setAttribute("name", this.elementNameAttribute.value);
+                    ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, "Change", "pi");
+                    console.log(this.application.ninja.selectedElements[0]._element.className);
+                } else {
+                    ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.elementClass);
                 }
             }
         }
@@ -121,11 +131,7 @@ exports.Properties = Montage.create(Component, {
     handleKeyup: {
         value: function(event) {
             if(event.keyCode === 13) {
-                if(event.target === "elementID") {
-                    this.elementId.element.blur();
-                } else if(event.target === "elementNameAttribute") {
-                    this.elementNameAttribute.element.blur();
-                }
+                event.target.blur();
             }      
         }
     },
@@ -180,10 +186,9 @@ exports.Properties = Montage.create(Component, {
         value: function() {
             var stage = this.application.ninja.currentDocument.documentRoot;
             //this is test code please remove
-            this.elementName = "Stage";
+            this.elementName.value = "Stage";
             this.elementId.value = stage.elementModel.id;
-            this.elementClassName = "";
-            this.nameAttribute = "";
+            this.elementClass.value = "";
 
             this.positionSize.disablePosition = true;
             this.threeD.disableTranslation = true;
@@ -243,10 +248,9 @@ exports.Properties = Montage.create(Component, {
             var customPI,
                 currentValue;
 
-            this.elementName = el.elementModel.selection;
+            this.elementName.value = el.elementModel.selection;
             this.elementId.value = el.getAttribute("id") || "";
-            this.elementClassName = el.getAttribute("class");
-            this.nameAttribute = el.getAttribute("name") || "";
+            this.elementClass.value = el.getAttribute("class");
 
             this.positionSize.disablePosition = false;
             this.threeD.disableTranslation = false;
@@ -358,7 +362,7 @@ exports.Properties = Montage.create(Component, {
 
     displayGroupProperties: {
         value: function (els) {
-            this.elementName = "Multiple Elements";
+            this.elementName.value = "Multiple Elements";
         }
     },
 
-- 
cgit v1.2.3


From a7cb2c0b22f03b79f19d4a9a2eb691d1ccc392f9 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Wed, 14 Mar 2012 18:04:11 -0700
Subject: adding a focus manager to handle panel bugs where blur was not
 getting called when clicking on the canvas.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/properties.reel/properties.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/panels')

diff --git a/js/panels/properties.reel/properties.html b/js/panels/properties.reel/properties.html
index bcf54b95..d212ae80 100755
--- a/js/panels/properties.reel/properties.html
+++ b/js/panels/properties.reel/properties.html
@@ -125,7 +125,7 @@
             </section>
             <section class="fieldCol">
                 <label>Class:</label>
-                <article class="fieldRow"><input type="text" id="elementClassName" class="nj-skinned" /></article>
+                <article class="fieldRow"><input type="text" id="elementClass" class="nj-skinned" /></article>
             </section>
         </section>
         <section id="PosSize"></section>
-- 
cgit v1.2.3


From da5dfc8863ad47c48414ff1fdacbacdb91abd30c Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Wed, 14 Mar 2012 23:25:34 -0700
Subject: Fixing the splitter resize canvas bug by getting the size when a
 document is opened.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/Splitter.js | 6 ------
 1 file changed, 6 deletions(-)

(limited to 'js/panels')

diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js
index a396ea28..e92cb2dd 100755
--- a/js/panels/Splitter.js
+++ b/js/panels/Splitter.js
@@ -91,12 +91,6 @@ exports.Splitter = Montage.create(Component, {
         }
     },
 
-    didDraw: {
-        value: function() {
-            this.application.ninja.stage.resizeCanvases = true;
-        }
-    },
-
     handleClick : {
         value: function() {
             if (!this.disabled) {
-- 
cgit v1.2.3


From 57ad8ea9c96005a4199cd75c82f4c7db0361e7b9 Mon Sep 17 00:00:00 2001
From: Armen Kesablyan
Date: Thu, 15 Mar 2012 15:20:00 -0700
Subject: Presets Panel: Added Scale Up and Down to transitions list. According
 to eric G.

Signed-off-by: Armen Kesablyan <armen@motorola.com>
---
 js/panels/presets/default-transition-presets.js | 30 +++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

(limited to 'js/panels')

diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js
index 00873231..271ad821 100644
--- a/js/panels/presets/default-transition-presets.js
+++ b/js/panels/presets/default-transition-presets.js
@@ -88,6 +88,36 @@ exports.transitionPresets = {
                         "-webkit-transform": "rotate(180deg)"
                     }
                 }]
+            },
+            {
+                "text": "Scale Up",
+                "selectorBase" : "scale-up",
+                "rules" : [{
+                    "selectorSuffix" : "",
+                    "styles" : {
+                        "-webkit-transition": "-webkit-transform 0.4s ease-in"
+                    }
+                }, {
+                    "selectorSuffix" : ":hover",
+                    "styles" : {
+                        "-webkit-transform": "scale(1.4)"
+                    }
+                }]
+            },
+            {
+                "text": "Scale Down",
+                "selectorBase" : "scale-down",
+                "rules" : [{
+                    "selectorSuffix" : "",
+                    "styles" : {
+                        "-webkit-transition": "-webkit-transform 0.4s ease-in"
+                    }
+                }, {
+                    "selectorSuffix" : ":hover",
+                    "styles" : {
+                        "-webkit-transform": "scale(.5)"
+                    }
+                }]
             }]
     }]
 };
\ No newline at end of file
-- 
cgit v1.2.3


From d1243d98d2f517055437cc67e963528771aa4c4b Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Fri, 16 Mar 2012 15:41:26 -0700
Subject: fixing the components drag and drop.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/panels')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index b6bee37d..b4eec771 100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -118,7 +118,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
     didCreate: {
         value: function() {
             // Setup the drop delegate
-//            this.application.ninja.dragDropMediator.dropDelegate = this;
+            this.application.ninja.dragDropMediator.dropDelegate = this;
             // Loop through the component and load the JSON data for them
             this._loadComponents();
         }
-- 
cgit v1.2.3


From 163ffbf531872a81c4d4be4321b065c22cf0715b Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Fri, 16 Mar 2012 17:09:08 -0700
Subject: Presets Panel - Adding Animations Tab

---
 .../animations-presets.reel/animations-presets.css |  5 ++
 .../animations-presets.html                        | 59 ++++++++++++++
 .../animations-presets.reel/animations-presets.js  | 73 +++++++++++++++++
 js/panels/presets/content.reel/content.html        | 12 ++-
 js/panels/presets/default-animation-presets.js     | 94 ++++++++++++++++++++++
 5 files changed, 240 insertions(+), 3 deletions(-)
 create mode 100644 js/panels/presets/animations-presets.reel/animations-presets.css
 create mode 100644 js/panels/presets/animations-presets.reel/animations-presets.html
 create mode 100644 js/panels/presets/animations-presets.reel/animations-presets.js
 create mode 100644 js/panels/presets/default-animation-presets.js

(limited to 'js/panels')

diff --git a/js/panels/presets/animations-presets.reel/animations-presets.css b/js/panels/presets/animations-presets.reel/animations-presets.css
new file mode 100644
index 00000000..0441c1cf
--- /dev/null
+++ b/js/panels/presets/animations-presets.reel/animations-presets.css
@@ -0,0 +1,5 @@
+/* <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> */
\ No newline at end of file
diff --git a/js/panels/presets/animations-presets.reel/animations-presets.html b/js/panels/presets/animations-presets.reel/animations-presets.html
new file mode 100644
index 00000000..c9d752af
--- /dev/null
+++ b/js/panels/presets/animations-presets.reel/animations-presets.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!-- <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> -->
+<html lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link rel="stylesheet" href="animations-presets.css" type="text/css">
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/panels/presets/animations-presets.reel",
+                "name" : "AnimationsLibrary",
+                "properties" : {
+                    "element" : {"#" : "animationsLibrary"},
+                    "treeList" : {"@" : "treeList"}
+                }
+            },
+            "presetsController" : {
+                "module": "js/controllers/tree-controller",
+                "name": "TreeController",
+                "properties" : {
+                    "branchKey" : "children",
+                    "labelKey" : "text",
+                    "delegate": {"@": "owner" }
+                },
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "presetData"
+                    }
+                }
+            },
+            "presetsContainer" : {
+                "module" : "js/components/treeview/treeview.reel",
+                "name" : "Treeview",
+                "properties" : {
+                    "element" : {"#": "libraryContainer"},
+                    "branchComponent" : {"@": "branch" },
+                    "contentController": {"@": "presetsController"},
+                    "activationEvent" : "dblclick",
+                    "showRoot": false
+                }
+            },
+            "branch" : {
+                "module" : "js/components/treeview/ninja-branch.reel",
+                "name" : "Branch"
+            }
+        }
+    </script>
+</head>
+<body>
+<section id="animationsLibrary" class="animationsLibrary">
+    <div id="libraryContainer"></div>
+</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/panels/presets/animations-presets.reel/animations-presets.js b/js/panels/presets/animations-presets.reel/animations-presets.js
new file mode 100644
index 00000000..ab200212
--- /dev/null
+++ b/js/panels/presets/animations-presets.reel/animations-presets.js
@@ -0,0 +1,73 @@
+/* <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> */
+
+var Montage = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component,
+    DefaultPresets = require("js/panels/presets/default-animation-presets").animationPresets;
+
+exports.AnimationsLibrary = Montage.create(Component, {
+    hasTemplate: {
+        value: true
+    },
+    presetData : {
+        value: null
+    },
+    deserializedFromTemplate : {
+        value: function() {
+            this.presetData = DefaultPresets;
+        }
+    },
+    handleNodeActivation: {
+        value: function(presetData) {
+            //debugger;
+            var selection = this.application.ninja.selectedElements,
+                stylesController = this.application.ninja.stylesController,
+                selectorBase = presetData.selectorBase,
+                self = this;
+
+            if(!selection || !selection.length || selection.length === 0) {
+                return false;
+            }
+
+            selectorBase = stylesController.generateClassName(selectorBase);
+
+            presetData.rules.forEach(function(rule) {
+                if(rule.isKeyFrameRule) {
+                    this.application.ninja.stylesController.addRule(
+                        '@-webkit-keyframes ' + presetData.selectorBase,
+                        this.stringifyKeys(rule.keys)
+                    );
+                } else {
+                    this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles);
+                }
+
+            }, this);
+
+            selection.forEach(function(el) {
+                el._element.classList.add(selectorBase);
+            }, this);
+
+        }
+    },
+
+    stringifyKeys : {
+        value: function(keysArray) {
+            var keysString = '';
+
+            keysArray.forEach(function(key) {
+                var styles = '', style;
+
+                for(style in key.styles) {
+                    styles += style + ':' + key.styles[style] + '; ';
+                }
+
+                keysString += key.keyText + ' {' + styles + ' }';
+            });
+
+            return keysString;
+        }
+    }
+});
diff --git a/js/panels/presets/content.reel/content.html b/js/panels/presets/content.reel/content.html
index 38de2a6d..f01e6435 100644
--- a/js/panels/presets/content.reel/content.html
+++ b/js/panels/presets/content.reel/content.html
@@ -19,7 +19,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "tabBar" : {"#": "tab-bar" },
                     "tabs" : [
                         {"key":"styles", "tab": {"#": "styles" }},
-                        {"key":"transitions", "tab": {"#": "transitions" }}
+                        {"key":"transitions", "tab": {"#": "transitions" }},
+                        {"key":"animations", "tab": {"#": "animations" }}
                     ]
                 }
             },
@@ -30,8 +31,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "element": {"#": "librarySlot"},
                     "switchComponents": {
                         "styles": {"@": "stylesLibrary"},
-                        "transitions": {"@": "transitionsLibrary"}
-
+                        "transitions": {"@": "transitionsLibrary"},
+                        "animations": {"@": "animationsLibrary"}
                     }
                 },
                 "bindings": {
@@ -49,6 +50,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             "transitionsLibrary": {
                 "module": "js/panels/presets/transitions-presets.reel",
                 "name": "TransitionsLibrary"
+            },
+            "animationsLibrary": {
+                "module": "js/panels/presets/animations-presets.reel",
+                "name": "AnimationsLibrary"
             }
 
     	}
@@ -59,6 +64,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
         <nav id="tab-bar" class="tab-bar">
             <div id="styles">Style Library</div>
             <div id="transitions">Transitions Library</div>
+            <div id="animations">Animations Library</div>
         </nav>
         <div id="librarySlot" class="librarySlot"></div>
     </section>
diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js
new file mode 100644
index 00000000..10a3e906
--- /dev/null
+++ b/js/panels/presets/default-animation-presets.js
@@ -0,0 +1,94 @@
+/* <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> */
+
+exports.animationPresets = {
+    "text": "Animation Presets Library",
+    "children": [{
+        "text": "Border Animations",
+        "children": [
+            {
+                "text": "Border Morph",
+                "selectorBase" : "border-morph",
+                "rules" : [{
+                    "selectorSuffix" : "",
+                    "styles" : {
+                        "-webkit-animation": "border-morph 2s infinite"
+                    }
+                },
+                {
+                    "isKeyFrameRule": true,
+                    "keys" : [{
+                        "keyText": "0%",
+                        "styles": { "border-radius": "0" }
+                    }, {
+                        "keyText": "50%",
+                        "styles": {
+                            "border-radius": "100%"
+                        }
+                    }, {
+                        "keyText": "100%",
+                        "styles": {
+                            "border-radius": "0%"
+                        }
+                    }]
+                }]
+            }]
+    }, {
+        "text": "3D Animations",
+        "children": [
+            {
+                "text": "Rotater",
+                "selectorBase" : "rotate-with-alpha-keyframes",
+                "rules" : [{
+                    "selectorSuffix" : "",
+                    "styles" : {
+                        "-webkit-animation-name": "rotate-with-alpha-keyframes",
+                        "-webkit-animation-duration": "5s",
+                        "-webkit-animation-iteration-count": "infinite",
+                        "-webkit-animation-direction": "normal",
+                        "-webkit-animation-timing-function": "ease-out",
+                        "-webkit-transform-origin": "200% 50%",
+                        "-webkit-transform-style": "preserve-3d",
+                        "-webkit-transform": "perspective(1000)",
+                        "-webkit-animation-delay": "0s"
+                    }
+                },{
+                    "isKeyFrameRule": true,
+                    "keys" : [{
+                        "keyText": "0%",
+                        "styles": {
+                            "opacity": "1",
+                            "-webkit-transform": "perspective(1000) rotateY(0deg)"
+                        }
+                    }, {
+                        "keyText": "70%",
+                        "styles": {
+                            "opacity": "1",
+                            "-webkit-transform": "perspective(1000) rotateY(0deg)"
+                        }
+                    }, {
+                        "keyText": "85%",
+                        "styles": {
+                            "opacity": "0",
+                            "-webkit-transform": "perspective(1000) rotateY(95deg)"
+                        }
+                    }, {
+                        "keyText": "86%",
+                        "styles": {
+                            "opacity": "0",
+                            "-webkit-transform": "perspective(1000) rotateY(-90deg)"
+                        }
+                    }, {
+                        "keyText": "100%",
+                        "styles": {
+                            "opacity": "1",
+                            "-webkit-transform": "perspective(1000) rotateY(0deg)"
+                        }
+                    }]
+                }]
+            }]
+    }]
+};
\ No newline at end of file
-- 
cgit v1.2.3


From a6a6f9bcc5ff92f5bb5e9275336dfaec2d8e8f4c Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Fri, 16 Mar 2012 17:56:25 -0700
Subject: Presets Panel - Change Tab labels, Add Un-3d preset

---
 js/panels/presets/content.reel/content.html     |  6 +++---
 js/panels/presets/default-transition-presets.js | 16 ++++++++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

(limited to 'js/panels')

diff --git a/js/panels/presets/content.reel/content.html b/js/panels/presets/content.reel/content.html
index f01e6435..afbdd559 100644
--- a/js/panels/presets/content.reel/content.html
+++ b/js/panels/presets/content.reel/content.html
@@ -62,9 +62,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 <body>
     <section id="presetsPanel" class="presetsPanel">
         <nav id="tab-bar" class="tab-bar">
-            <div id="styles">Style Library</div>
-            <div id="transitions">Transitions Library</div>
-            <div id="animations">Animations Library</div>
+            <div id="styles">Styles</div>
+            <div id="transitions">Transitions</div>
+            <div id="animations">Animations</div>
         </nav>
         <div id="librarySlot" class="librarySlot"></div>
     </section>
diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js
index 00873231..48f7c2b7 100644
--- a/js/panels/presets/default-transition-presets.js
+++ b/js/panels/presets/default-transition-presets.js
@@ -88,6 +88,22 @@ exports.transitionPresets = {
                         "-webkit-transform": "rotate(180deg)"
                     }
                 }]
+            },{
+                "text": "Remove 3D",
+                "selectorBase" : "remove-3d",
+                "rules" : [{
+                    "selectorSuffix": "",
+                    "styles" : {
+                        "-webkit-transition": "all 0.4s ease-in"
+                    }
+                },
+                    {
+                    "selectorSuffix" : ":hover",
+                    "styles" : {
+                        "-webkit-transform": "rotateX(0deg)",
+                        "opacity": "1"
+                    }
+                }]
             }]
     }]
 };
\ No newline at end of file
-- 
cgit v1.2.3


From 41740c12e03ca1380eb80dc557faedae05e4ce1c Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Sat, 17 Mar 2012 00:06:03 -0700
Subject: Presets Panel - Fix conflict with default transition presets

---
 js/panels/presets/default-transition-presets.js | 30 +++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

(limited to 'js/panels')

diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js
index 48f7c2b7..15f4882f 100644
--- a/js/panels/presets/default-transition-presets.js
+++ b/js/panels/presets/default-transition-presets.js
@@ -89,6 +89,36 @@ exports.transitionPresets = {
                     }
                 }]
             },{
+                "text": "Scale Up",
+                "selectorBase" : "scale-up",
+                "rules" : [{
+                    "selectorSuffix" : "",
+                    "styles" : {
+                        "-webkit-transition": "-webkit-transform 0.4s ease-in"
+                    }
+                }, {
+                    "selectorSuffix" : ":hover",
+                    "styles" : {
+                        "-webkit-transform": "scale(1.4)"
+                    }
+                }]
+            },
+            {
+                "text": "Scale Down",
+                "selectorBase" : "scale-down",
+                "rules" : [{
+                    "selectorSuffix" : "",
+                    "styles" : {
+                        "-webkit-transition": "-webkit-transform 0.4s ease-in"
+                    }
+                }, {
+                    "selectorSuffix" : ":hover",
+                    "styles" : {
+                        "-webkit-transform": "scale(.5)"
+                    }
+                }]
+            },
+            {
                 "text": "Remove 3D",
                 "selectorBase" : "remove-3d",
                 "rules" : [{
-- 
cgit v1.2.3


From 50ee8428d398d2a5f21f4d642642ba85d7df3e5e Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Mon, 19 Mar 2012 13:51:31 -0700
Subject: Replacing old button component with montage button component in our
 UI.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 .../materials-library-panel.css                    |  8 ++---
 .../materials-library-panel.html                   | 42 ++++++++++++++++++++--
 .../materials-library-panel.js                     | 21 +----------
 .../materials-popup.reel/materials-popup.html      |  8 ++---
 .../materials-popup.reel/materials-popup.js        |  5 ++-
 .../color/colorchippopup.reel/colorchippopup.js    |  1 -
 .../color/colorpanelpopup.reel/colorpanelpopup.js  |  1 -
 7 files changed, 50 insertions(+), 36 deletions(-)

(limited to 'js/panels')

diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css
index 07488da1..fe88ebf6 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css
@@ -23,7 +23,7 @@
     width: 97%;
 }
 
-#ml_buttons button {
+#ml_buttons .nj-skinned{
   height: 22px;
   overflow: hidden;
   display: block;
@@ -31,17 +31,17 @@
   margin: 0px 1px;
 }
 
-#materialsLibraryPanel-ml_add_btn {
+#ml_add_btn {
     float: left;
     width: 60px;
 }
 
-#materialsLibraryPanel-ml_copy_btn {
+#ml_copy_btn {
     float: left;
     width: 60px;
 }
 
-#materialsLibraryPanel-ml_delete_btn {
+#ml_delete_btn {
     float: right;
     width: 60px;
 }
\ No newline at end of file
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
index 6ba4ac75..fe17d0f8 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
@@ -10,6 +10,42 @@
     	<link rel="stylesheet" type="text/css" href="materials-library-panel.css">
          <script type="text/montage-serialization">
         {
+            "addButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "ml_add_btn"}
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+             },
+            "copyButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "ml_copy_btn"}
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+             },
+            "deleteButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "ml_delete_btn"}
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+             },
              "materialInfo": {
                  "module": "js/panels/Materials/materials-popup.reel",
                  "name": "MaterialsPopup"
@@ -34,9 +70,9 @@
             </div>
             <hr />
             <div id="ml_buttons">
-                <button id="ml_add_btn">Add</button>
-                <button id="ml_copy_btn">Copy</button>
-                <button id="ml_delete_btn">Delete</button>
+                <button id="ml_add_btn" class="nj-skinned">Add</button>
+                <button id="ml_copy_btn" class="nj-skinned">Copy</button>
+                <button id="ml_delete_btn" class="nj-skinned">Delete</button>
             </div>
     	</div>
 
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
index b16c4376..bb550598 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
@@ -5,7 +5,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 
 var Tree = require("js/components/tree.reel").Tree,
-    Button = require("js/components/button.reel").Button,
     MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup,
     PopupMananger =		require("js/components/popup-manager.reel").PopupMananger,
     Popup = require("montage/ui/popup/popup.reel").Popup;
@@ -27,24 +26,6 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
             materialsTree.needsDraw = true;
 
             materialsTree.addEventListener("change", this, true);
-
-            var addButton = Button.create();
-            addButton.element = document.getElementById("ml_add_btn");
-            addButton.label = "Add";
-            addButton.needsDraw = true;
-            addButton.addEventListener("action", this, true);
-
-            var copyButton = Button.create();
-            copyButton.element = document.getElementById("ml_copy_btn");
-            copyButton.label = "Copy";
-            copyButton.needsDraw = true;
-            copyButton.addEventListener("action", this, true);
-
-            var deleteButton = Button.create();
-            deleteButton.element = document.getElementById("ml_delete_btn");
-            deleteButton.label = "Delete";
-            deleteButton.needsDraw = true;
-            deleteButton.addEventListener("action", this, true);
     	}
     },
 
@@ -73,7 +54,7 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
         }
     },
 
-    captureAction: {
+    handleAction: {
         value:function(event) {
             switch(event._currentTarget.label)
             {
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html
index de4f98c1..34f68554 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.html
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.html
@@ -14,7 +14,7 @@
    		<script type="text/montage-serialization">
         {
             "okButton": {
-                "module": "js/components/button.reel",
+                "module": "montage/ui/button.reel",
                 "name": "Button",
                 "properties": {
                     "element": {"#": "mp_ok_btn"},
@@ -22,7 +22,7 @@
                 }
             },
             "cancelButton": {
-                "module": "js/components/button.reel",
+                "module": "montage/ui/button.reel",
                 "name": "Button",
                 "properties": {
                     "element": {"#": "mp_cancel_btn"},
@@ -111,8 +111,8 @@
             <hr />
             
             <div id="mp_buttons" class="mp_buttons">
-                <button id="mp_cancel_btn" class="mp_cancel_btn"></button>
-                <button id="mp_ok_btn" class="mp_ok_btn"></button>
+                <button id="mp_cancel_btn" class="mp_cancel_btn nj-skinned"></button>
+                <button id="mp_ok_btn" class="mp_ok_btn nj-skinned"></button>
             </div>
 
     	</div>
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index c57bb2d7..193e72b7 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -5,9 +5,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 
 var Montage = require("montage/core/core").Montage,
-    Component   = require("montage/ui/component").Component;
-var Button = 			require("js/components/button.reel").Button;
-var MaterialsModel = require("js/models/materials-model").MaterialsModel;
+    Component   = require("montage/ui/component").Component,
+    MaterialsModel = require("js/models/materials-model").MaterialsModel;
 
 ////////////////////////////////////////////////////////////////////////
 //Exporting as MaterialsPopup
diff --git a/js/panels/color/colorchippopup.reel/colorchippopup.js b/js/panels/color/colorchippopup.reel/colorchippopup.js
index 05bcb447..414be8b7 100755
--- a/js/panels/color/colorchippopup.reel/colorchippopup.js
+++ b/js/panels/color/colorchippopup.reel/colorchippopup.js
@@ -9,7 +9,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage = 			require("montage/core/core").Montage,
 	Component = 		require("montage/ui/component").Component,
 	Slider = 			require("js/components/slider.reel").Slider,
-	Button = 			require("js/components/button.reel").Button,
 	HotText = 			require("js/components/hottext.reel").HotText,
 	ColorWheel = 		require("js/components/colorwheel.reel").ColorWheel,
 	GradientPicker = 	require("js/components/gradientpicker.reel").GradientPicker;
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index b957d495..dd7e6192 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -9,7 +9,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage = 			require("montage/core/core").Montage,
 	Component = 		require("montage/ui/component").Component,
 	Slider = 			require("js/components/slider.reel").Slider,
-	Button = 			require("js/components/button.reel").Button,
 	HotText = 			require("js/components/hottext.reel").HotText,
 	ColorWheel = 		require("js/components/colorwheel.reel").ColorWheel,
 	GradientPicker = 	require("js/components/gradientpicker.reel").GradientPicker;
-- 
cgit v1.2.3


From e4159f8cea57077c755030a421c091b28c7a8ecc Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Mon, 19 Mar 2012 17:06:20 -0700
Subject: Use new tree control in Materials panel.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/panels/Materials/materials-data.json            | 43 ++++++++++++++++++++++
 .../materials-library-panel.html                   | 43 ++++++++++++++++++----
 .../materials-library-panel.js                     | 34 ++++++++---------
 .../materials-popup.reel/materials-popup.js        |  6 ++-
 4 files changed, 99 insertions(+), 27 deletions(-)
 create mode 100644 js/panels/Materials/materials-data.json

(limited to 'js/panels')

diff --git a/js/panels/Materials/materials-data.json b/js/panels/Materials/materials-data.json
new file mode 100644
index 00000000..f06ab6c8
--- /dev/null
+++ b/js/panels/Materials/materials-data.json
@@ -0,0 +1,43 @@
+{
+    "label": "materials",
+    "children": [
+        {
+            "label": "Ninja Materials",
+            "children": [
+                {
+                    "label": "Uber",
+                    "id" : "UberMaterial"
+                },
+                {
+                    "label": "Bump Metal",
+                    "id" : "BumpMetalMaterial"
+                },
+                {
+                    "label": "Linear Gradient",
+                    "id" : "LinearGradientMaterial"
+                },
+                {
+                    "label": "Radial Gradient",
+                    "id" : "RadialGradientMaterial"
+                },
+                {
+                    "label": "Flat",
+                    "id" : "FlatMaterial"
+                }
+            ]
+        },
+        {
+            "label": "Custom Materials",
+            "children": [
+                {
+                    "label": "Checker Board",
+                    "id" : "CheckerBoard"
+                },
+                {
+                    "label": "Shiny Metal",
+                    "id" : "ShinyMetal"
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
index fe17d0f8..4e41512f 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
@@ -46,10 +46,39 @@
                     }
                 ]
              },
-             "materialInfo": {
-                 "module": "js/panels/Materials/materials-popup.reel",
-                 "name": "MaterialsPopup"
-             },
+            "materialInfo": {
+                "module": "js/panels/Materials/materials-popup.reel",
+                "name": "MaterialsPopup"
+            },
+            "materialsController" : {
+                "module": "js/controllers/tree-controller",
+                "name": "TreeController",
+                "properties" : {
+                    "branchKey" : "children",
+                    "labelKey" : "label",
+                    "delegate": {"@": "owner" }
+                },
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "materialsData"
+                    }
+                }
+            },
+            "materialsContainer" : {
+                "module" : "js/components/treeview/treeview.reel",
+                "name" : "Treeview",
+                "properties" : {
+                    "element" : {"#": "materials_library_tree"},
+                    "branchComponent" : {"@": "branch" },
+                    "contentController": {"@": "materialsController"},
+                    "showRoot": false
+                }
+            },
+            "branch" : {
+                "module" : "js/components/treeview/ninja-branch.reel",
+                "name" : "Branch"
+            },
             "owner": {
                 "module": "js/panels/Materials/materials-library-panel.reel",
                 "name": "MaterialsLibraryPanels",
@@ -65,9 +94,9 @@
 	<body>
 
     	<div id="materials_library_panel" class="materials_library_panel">
-            <div id="ml_tree_holder">
-                <ul id="materials_library_tree"></ul>
-            </div>
+            <section id="ml_tree_holder" class="animationsLibrary">
+                <div id="materials_library_tree"></div>
+            </section>
             <hr />
             <div id="ml_buttons">
                 <button id="ml_add_btn" class="nj-skinned">Add</button>
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
index bb550598..5fd86d00 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
@@ -4,29 +4,26 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
-var Tree = require("js/components/tree.reel").Tree,
-    MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup,
-    PopupMananger =		require("js/components/popup-manager.reel").PopupMananger,
+var Montage = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component,
+    MaterialsData = require("js/panels/Materials/materials-data.json"),
     Popup = require("montage/ui/popup/popup.reel").Popup;
 
-exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, {
+exports.MaterialsLibraryPanel = Montage.create(Component, {
+
+    materialsData: {
+        value: null
+    },
 
     _hasFocus: {
     	enumerable: false,
     	value: false
     },
-    
-    prepareForDraw: {
-    	enumerable: false,
-    	value: function() {
-            var treeHolderDiv = document.getElementById("materials_library_tree");
-            var materialsTree = Tree.create();
-            materialsTree.element = treeHolderDiv;
-            materialsTree.dataProvider = this._loadXMLDoc("js/panels/Materials/Materials.xml");
-            materialsTree.needsDraw = true;
 
-            materialsTree.addEventListener("change", this, true);
-    	}
+    didCreate: {
+        value: function() {
+            this.materialsData = MaterialsData;
+        }
     },
 
     willDraw: {
@@ -71,10 +68,9 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
         }
     },
 
-    captureChange: {
-        value:function(e) {
-            var tNode = e._event.treeNode;
-            this._showMaterialPopup(tNode.id);
+    handleNodeActivation: {
+        value:function(obj) {
+            this._showMaterialPopup(obj.id);
         }
     },
 
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index 193e72b7..b44761bc 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -214,7 +214,11 @@ exports.MaterialsPopup = Montage.create(Component, {
 		enumerable: true,
 		value: function(materialID)
 		{
-           this._materialName = materialID;
+            // Note that setting Array.length = 0 will empty arrays,
+            // which is fine if you use getMaterialData to get a new array, but not for the
+            // dummyData arrays.
+            this._materialsData.length = 0;
+            this._materialName = materialID;
             if(
 					(materialID ===  "UberMaterial")				||
 					(materialID ===  "FlatMaterial")				||
-- 
cgit v1.2.3


From e1c4f30a4c13d747fa69d78598e0961286bbe571 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Tue, 20 Mar 2012 10:59:05 -0700
Subject: Support button control in Properties Panel and use them for edit fill
 and stroke material.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 .../materials-library-panel.js                     | 32 +++++-----------
 .../sections/custom-rows/dual-row.reel/dual-row.js |  8 +++-
 .../properties.reel/sections/custom.reel/custom.js | 44 ++++++++++++++++++++++
 3 files changed, 61 insertions(+), 23 deletions(-)

(limited to 'js/panels')

diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
index 5fd86d00..2176c6d5 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
@@ -26,28 +26,9 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
         }
     },
 
-    willDraw: {
-    	enumerable: false,
-    	value: function() {
-
-    	}
-    },
-    
-    draw: {
-    	enumerable: false,
-    	value: function() {
-
-    	}
-    },
-
-    _loadXMLDoc: {
-        value:function(dname) {
-            if (window.XMLHttpRequest) {
-                xhttp = new XMLHttpRequest();
-            }
-            xhttp.open("GET", dname, false);
-            xhttp.send();
-            return xhttp.responseXML;
+    prepareForDraw: {
+        value : function() {
+            this.eventManager.addEventListener("showMaterialPopup", this, false);
         }
     },
 
@@ -74,6 +55,13 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
         }
     },
 
+    handleShowMaterialPopup: {
+        enumerable: false,
+        value: function (event) {
+            this._showMaterialPopup(event.detail.materialId);
+        }
+    },
+
     _materialPopup: {
         enumerable:true,
         value:null
diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
index 72d216ca..4c5c80d7 100755
--- a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
+++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
@@ -43,7 +43,13 @@ exports.DualRow = Montage.create(Component, {
                 this.element.getElementsByClassName("lbl")[0].innerHTML = this.label + ":";
             }
             if(this.label2 !== null) {
-                this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":";
+                if(this.content2.type === "button") {
+                    this.content2.element = document.createElement("button");
+                    this.content2.element.classList.add("nj-skinned");
+                    this.element.getElementsByClassName("lbl")[1].style.display = "none";
+                } else {
+                    this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":";
+                }
             } else {
                 this.element.getElementsByClassName("lbl")[1].style.display = "none";
             }
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 3c595980..d7334afe 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -20,6 +20,7 @@ var TextField = require("js/components/textfield.reel").TextField;
 var FileInput = require("js/components/ui/file-input.reel").FileInput;
 var Checkbox = require("js/components/checkbox.reel").Checkbox;
 var ColorChip = require("js/components/ui/color-chip.reel").ColorChip;
+var Button = require("montage/ui/button.reel").Button;
 
 exports.CustomSection = Montage.create(Component, {
 
@@ -128,6 +129,15 @@ exports.CustomSection = Montage.create(Component, {
         }
     },
 
+    handleAction: {
+        value:function(event) {
+            if(event._event.wasSetByCode) return;
+
+            var obj = event.currentTarget;
+            this._dispatchPropEvent({"type": "change", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj});
+        }
+    },
+
     _dispatchPropEvent: {
         value: function(event) {
 //            console.log(event);
@@ -163,6 +173,7 @@ exports.CustomSection = Montage.create(Component, {
                 case "file"     : return this.createFileInput(fields);
                 case "checkbox" : return this.createCheckbox(fields);
                 case "chip"     : return this.createColorChip(fields);
+                case "button"     : return this.createButton(fields);
             }
         }
     },
@@ -349,6 +360,39 @@ exports.CustomSection = Montage.create(Component, {
             // TODO - Hack for now to reference the color select object to unregister color chips
             this.controls["stageBackground"] = obj;
 
+            return obj;
+        }
+    },
+
+    createButton: {
+        value: function(aField) {
+            var obj = Button.create();
+
+            // Set Values for Button
+            if (aField.id)                  obj.id = aField.id;
+            if (aField.label)               obj.label = aField.label;
+            if (aField.prop)                obj.prop = aField.prop;
+
+            // Special casing button so slot uses "button" tag instead of "div"
+            obj.type = "button";
+
+            if (aField.enabled) {
+                if(aField.enabled.boundObject) {
+                    // TODO - For now, always bind to this.controls[someProperty]
+                    Object.defineBinding(obj, "enabled", {
+                                    boundObject: this.controls,
+                                    boundObjectPropertyPath: aField.enabled.boundProperty,
+                                    oneway: false
+                                });
+                } else {
+                    obj.enabled = aField.enabled;
+                }
+            }
+
+            obj.addEventListener("action", this, false);
+
+            this.controls[aField.id] = obj;
+
             return obj;
         }
     }
-- 
cgit v1.2.3


From 17cf4470b54cc6014f23f982d1a644a045cccb04 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Tue, 20 Mar 2012 11:17:46 -0700
Subject: Deleting unused Materials.xml file since we converted to JSON.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/panels/Materials/Materials.xml | 14 --------------
 1 file changed, 14 deletions(-)
 delete mode 100755 js/panels/Materials/Materials.xml

(limited to 'js/panels')

diff --git a/js/panels/Materials/Materials.xml b/js/panels/Materials/Materials.xml
deleted file mode 100755
index a958575e..00000000
--- a/js/panels/Materials/Materials.xml
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="ISO-8859-1"?>
-<tree id="Materials">
-    <folder id="ninjaMaterials" label="Ninja Materials">
-	      <leaf id="UberMaterial" label="Uber" />
-        <leaf id="BumpMetalMaterial" label="Bump Metal" />
-        <leaf id="LinearGradientMaterial" label="Linear Gradient" />
-        <leaf id="RadialGradientMaterial" label="Radial Gradient" />
-        <leaf id="FlatMaterial" label="Flat" />
-    </folder>
-    <folder id="customMaterials" label="Custom Materials">
-        <leaf id="CheckerBoard" label="CheckerBoard" />
-        <leaf id="ShinyMetal" label="Shiny Metal" />
-    </folder>
-</tree>
\ No newline at end of file
-- 
cgit v1.2.3


From 634358d2697d9668bb9406ac7a029aafae542285 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Tue, 20 Mar 2012 11:18:07 -0700
Subject: Button's enabled property binding should be oneway only.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/panels/properties.reel/sections/custom.reel/custom.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/panels')

diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index d7334afe..703ef950 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -382,7 +382,7 @@ exports.CustomSection = Montage.create(Component, {
                     Object.defineBinding(obj, "enabled", {
                                     boundObject: this.controls,
                                     boundObjectPropertyPath: aField.enabled.boundProperty,
-                                    oneway: false
+                                    oneway: true
                                 });
                 } else {
                     obj.enabled = aField.enabled;
-- 
cgit v1.2.3