13 files changed, 230 insertions, 104 deletions
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
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.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..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
@@ -10,10 +10,75 @@
        <link rel="stylesheet" type="text/css" href="materials-library-panel.css">
         <script type="text/montage-serialization">
        {
-             "materialInfo": {
+            "addButton": {
-                 "module": "js/panels/Materials/materials-popup.reel",
+                "prototype": "montage/ui/button.reel",
-                 "name": "MaterialsPopup"
+                "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"
+            },
+            "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",
@@ -29,14 +94,14 @@
        <body>
        <div id="materials_library_panel" class="materials_library_panel">
-            <div id="ml_tree_holder">
+            <section id="ml_tree_holder" class="animationsLibrary"

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 @@
1	<?xml version="1.0" encoding="ISO-8859-1"?>
2	<tree id="Materials">
3	<folder id="ninjaMaterials" label="Ninja Materials">
4	<leaf id="UberMaterial" label="Uber" />
5	<leaf id="BumpMetalMaterial" label="Bump Metal" />
6	<leaf id="LinearGradientMaterial" label="Linear Gradient" />
7	<leaf id="RadialGradientMaterial" label="Radial Gradient" />
8	<leaf id="FlatMaterial" label="Flat" />
9	</folder>
10	<folder id="customMaterials" label="Custom Materials">
11	<leaf id="CheckerBoard" label="CheckerBoard" />
12	<leaf id="ShinyMetal" label="Shiny Metal" />
13	</folder>
14	</tree> \ No newline at end of file


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 @@
		1	{
		2	"label": "materials",
		3	"children": [
		4	{
		5	"label": "Ninja Materials",
		6	"children": [
		7	{
		8	"label": "Uber",
		9	"id" : "UberMaterial"
		10	},
		11	{
		12	"label": "Bump Metal",
		13	"id" : "BumpMetalMaterial"
		14	},
		15	{
		16	"label": "Linear Gradient",
		17	"id" : "LinearGradientMaterial"
		18	},
		19	{
		20	"label": "Radial Gradient",
		21	"id" : "RadialGradientMaterial"
		22	},
		23	{
		24	"label": "Flat",
		25	"id" : "FlatMaterial"
		26	}
		27	]
		28	},
		29	{
		30	"label": "Custom Materials",
		31	"children": [
		32	{
		33	"label": "Checker Board",
		34	"id" : "CheckerBoard"
		35	},
		36	{
		37	"label": "Shiny Metal",
		38	"id" : "ShinyMetal"
		39	}
		40	]
		41	}
		42	]
		43	} \ No newline at end of file


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 @@
23	width: 97%;	23	width: 97%;
24	}	24	}
25		25
26	#ml_buttons button {	26	#ml_buttons .nj-skinned{
27	height: 22px;	27	height: 22px;
28	overflow: hidden;	28	overflow: hidden;
29	display: block;	29	display: block;
@@ -31,17 +31,17 @@
31	margin: 0px 1px;	31	margin: 0px 1px;
32	}	32	}
33		33
34	#materialsLibraryPanel-ml_add_btn {	34	#ml_add_btn {
35	float: left;	35	float: left;
36	width: 60px;	36	width: 60px;
37	}	37	}
38		38
39	#materialsLibraryPanel-ml_copy_btn {	39	#ml_copy_btn {
40	float: left;	40	float: left;
41	width: 60px;	41	width: 60px;
42	}	42	}
43		43
44	#materialsLibraryPanel-ml_delete_btn {	44	#ml_delete_btn {
45	float: right;	45	float: right;
46	width: 60px;	46	width: 60px;
47	} \ No newline at end of file	47	} \ 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..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
@@ -10,10 +10,75 @@
10	<link rel="stylesheet" type="text/css" href="materials-library-panel.css">	10	<link rel="stylesheet" type="text/css" href="materials-library-panel.css">
11	<script type="text/montage-serialization">	11	<script type="text/montage-serialization">
12	{	12	{
13	"materialInfo": {	13	"addButton": {
14	"module": "js/panels/Materials/materials-popup.reel",	14	"prototype": "montage/ui/button.reel",
15	"name": "MaterialsPopup"	15	"properties": {
		16	"element": {"#": "ml_add_btn"}
		17	},
		18	"listeners": [
		19	{
		20	"type": "action",
		21	"listener": {"@": "owner"}
		22	}
		23	]
		24	},
		25	"copyButton": {
		26	"prototype": "montage/ui/button.reel",
		27	"properties": {
		28	"element": {"#": "ml_copy_btn"}
		29	},
		30	"listeners": [
		31	{
		32	"type": "action",
		33	"listener": {"@": "owner"}
		34	}
		35	]
		36	},
		37	"deleteButton": {
		38	"prototype": "montage/ui/button.reel",
		39	"properties": {
		40	"element": {"#": "ml_delete_btn"}
		41	},
		42	"listeners": [
		43	{
		44	"type": "action",
		45	"listener": {"@": "owner"}
		46	}
		47	]
16	},	48	},
		49	"materialInfo": {
		50	"module": "js/panels/Materials/materials-popup.reel",
		51	"name": "MaterialsPopup"
		52	},
		53	"materialsController" : {
		54	"module": "js/controllers/tree-controller",
		55	"name": "TreeController",
		56	"properties" : {
		57	"branchKey" : "children",
		58	"labelKey" : "label",
		59	"delegate": {"@": "owner" }
		60	},
		61	"bindings": {
		62	"content": {
		63	"boundObject": {"@": "owner"},
		64	"boundObjectPropertyPath": "materialsData"
		65	}
		66	}
		67	},
		68	"materialsContainer" : {
		69	"module" : "js/components/treeview/treeview.reel",
		70	"name" : "Treeview",
		71	"properties" : {
		72	"element" : {"#": "materials_library_tree"},
		73	"branchComponent" : {"@": "branch" },
		74	"contentController": {"@": "materialsController"},
		75	"showRoot": false
		76	}
		77	},
		78	"branch" : {
		79	"module" : "js/components/treeview/ninja-branch.reel",
		80	"name" : "Branch"
		81	},
17	"owner": {	82	"owner": {
18	"module": "js/panels/Materials/materials-library-panel.reel",	83	"module": "js/panels/Materials/materials-library-panel.reel",
19	"name": "MaterialsLibraryPanels",	84	"name": "MaterialsLibraryPanels",
@@ -29,14 +94,14 @@
29	<body>	94	<body>
30		95
31	<div id="materials_library_panel" class="materials_library_panel">	96	<div id="materials_library_panel" class="materials_library_panel">
32	<div id="ml_tree_holder">	97	<section id="ml_tree_holder" class="animationsLibrary"