7 files changed, 388 insertions, 281 deletions
diff --git a/js/panels/Materials/materials-data.json b/js/panels/Materials/materials-data.json
index a5d8997b..fde82d3d 100644
--- a/js/panels/Materials/materials-data.json
+++ b/js/panels/Materials/materials-data.json
@@ -101,6 +101,11 @@
                    "id" : "Z-Invert"
                }
            ]
+        },
+        {
+            "label": "Custom Materials",
+            "children": [
+            ]
        }
    ]
 }
 \ 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 d73134ae..39294779 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
@@ -39,6 +39,12 @@ POSSIBILITY OF SUCH DAMAGE.
    margin: 4px 0 4px 0;
 }
+.materials_library_panel .ml_tree_holder {
+    height: 200px;
+    min-height: 200px;
+    max-height: 200px;
+    overflow-y: scroll;
+}
 .ml_buttons {
    clear:both;
@@ -54,9 +60,19 @@ POSSIBILITY OF SUCH DAMAGE.
    cursor: pointer;
    margin: 0 1px;
    float: left;
+    width: 40px;
+}
+.ml_buttons .ml_duplicate_btn {
    width: 60px;
 }
-.ml_buttons .nj-skinned:last-child {
+.ml_buttons .ml_delete_btn {
+    width: 50px;
    float: right;
 }
+.ml_buttons .nj-skinned:hover,
+.ml_buttons .nj-skinned:active {
+    color: white;
+}
+\ 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 f77d3186..e9a2d20d 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
@@ -34,12 +34,12 @@ POSSIBILITY OF SUCH DAMAGE.
        <link rel="stylesheet" type="text/css" href="materials-library-panel.css">
         <script type="text/montage-serialization">
        {
-            "addButton": {
+            "duplicateButton": {
                "prototype": "montage/ui/button.reel",
                "properties": {
-                    "element": {"#": "ml_add_btn"},
+                    "element": {"#": "ml_duplicate_btn"},
-                                        "enabled": false
+                                        "enabled": true
-                },
+               },
                "listeners": [
                    {
                        "type": "action",
@@ -47,11 +47,10 @@ POSSIBILITY OF SUCH DAMAGE.
                    }
                ]
             },
-            "copyButton": {
+            "editButton": {
                "prototype": "montage/ui/button.reel",
                "properties": {
-                    "element": {"#": "ml_copy_btn"},
+                    "element": {"#": "ml_edit_btn"}
-                                        "enabled": false
               },
                "listeners": [
                    {
@@ -106,7 +105,9 @@ POSSIBILITY OF SUCH DAMAGE.
                "prototype": "js/panels/Materials/materials-library-panel.reel[MaterialsLibraryPanels]",
                "properties": {
                    "element": {"#": "materials_library_panel"},
-                    "_materialInfo": {"@": "materialInfo"}
+                    "_materialInfo": {"@": "materialInfo"},
+                    "materialsController": {"@": "materialsController"},
+                    "deleteButton": {"@": "deleteButton"}
                }
            }
        }
@@ -116,14 +117,14 @@ POSSIBILITY OF SUCH DAMAGE.
        <body>
        <div data-montage-id="materials_library_panel" class="materials_library_panel">
-            <section data-montage-id="ml_tree_holder" class="animationsLibrary">
+            <section data-montage-id="ml_tree_holder" class="ml_tree_holder">
                <div data-montage-id="materials_library_tree"></div>
            </section>
            <hr />
            <div data-montage-id="ml_buttons" class="ml_buttons">
-                <button data-montage-id="ml_add_btn" class="nj-skinned">Add</button>
+                <button data-montage-id="ml_duplicate_btn" class="nj-skinned ml_duplicate_btn">Duplicate</button>
-                <button data-montage-id="ml_copy_btn" class="nj-skinned">Copy</button>
+                <button data-montage-id="ml_edit_btn" class="nj-skinned ml_edit_btn">Edit</button>
-                <button data-montage-id="ml_delete_btn" class="nj-skinned">Delete</button>
+                <button data-montage-id="ml_delete_btn" class="nj-skinned ml_delete_btn">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 b5d6bb96..d6df8229 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
@@ -31,14 +31,36 @@ POSSIBILITY OF SUCH DAMAGE.
 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;
+    Popup = require("montage/ui/popup/popup.reel").Popup,
+    MaterialsModel = require("js/models/materials-model").MaterialsModel,
+    LeafNode = require("js/components/treeview/ninja-leaf.reel").Leaf;
 exports.MaterialsLibraryPanel = Montage.create(Component, {
+    deleteButton: {
+        value: null
+    },
    materialsData: {
        value: null
    },
+    materialId: {
+        value: null
+    },
+    selectedMaterialNode: {
+        value: null
+    },
+    customMaterialsBranch: {
+        value: null
+    },
+    customMaterialsCounter: {
+        value: 2
+    },
    _hasFocus: {
        enumerable: false,
        value: false
@@ -60,21 +82,32 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
        value:function(event) {
            switch(event._currentTarget.label)
            {
-                case "Add":
+                case "Duplicate":
-                    console.log("Add new material");
+

diff --git a/js/panels/Materials/materials-data.json b/js/panels/Materials/materials-data.json index a5d8997b..fde82d3d 100644 --- a/js/panels/Materials/materials-data.json +++ b/js/panels/Materials/materials-data.json
@@ -101,6 +101,11 @@
101	"id" : "Z-Invert"	101	"id" : "Z-Invert"
102	}	102	}
103	]	103	]
		104	},
		105	{
		106	"label": "Custom Materials",
		107	"children": [
		108	]
104	}	109	}
105	]	110	]
106	} \ No newline at end of file	111	} \ 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 d73134ae..39294779 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
@@ -39,6 +39,12 @@ POSSIBILITY OF SUCH DAMAGE.
39	margin: 4px 0 4px 0;	39	margin: 4px 0 4px 0;
40	}	40	}
41		41
		42	.materials_library_panel .ml_tree_holder {
		43	height: 200px;
		44	min-height: 200px;
		45	max-height: 200px;
		46	overflow-y: scroll;
		47	}
42		48
43	.ml_buttons {	49	.ml_buttons {
44	clear:both;	50	clear:both;
@@ -54,9 +60,19 @@ POSSIBILITY OF SUCH DAMAGE.
54	cursor: pointer;	60	cursor: pointer;
55	margin: 0 1px;	61	margin: 0 1px;
56	float: left;	62	float: left;
		63	width: 40px;
		64	}
		65
		66	.ml_buttons .ml_duplicate_btn {
57	width: 60px;	67	width: 60px;
58	}	68	}
59		69
60	.ml_buttons .nj-skinned:last-child {	70	.ml_buttons .ml_delete_btn {
		71	width: 50px;
61	float: right;	72	float: right;
62	}	73	}
		74
		75	.ml_buttons .nj-skinned:hover,
		76	.ml_buttons .nj-skinned:active {
		77	color: white;
		78	} \ 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 f77d3186..e9a2d20d 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
@@ -34,12 +34,12 @@ POSSIBILITY OF SUCH DAMAGE.
34	<link rel="stylesheet" type="text/css" href="materials-library-panel.css">	34	<link rel="stylesheet" type="text/css" href="materials-library-panel.css">
35	<script type="text/montage-serialization">	35	<script type="text/montage-serialization">
36	{	36	{
37	"addButton": {	37	"duplicateButton": {
38	"prototype": "montage/ui/button.reel",	38	"prototype": "montage/ui/button.reel",
39	"properties": {	39	"properties": {
40	"element": {"#": "ml_add_btn"},	40	"element": {"#": "ml_duplicate_btn"},
41	"enabled": false	41	"enabled": true
42	},	42	},
43	"listeners": [	43	"listeners": [
44	{	44	{
45	"type": "action",	45	"type": "action",
@@ -47,11 +47,10 @@ POSSIBILITY OF SUCH DAMAGE.
47	}	47	}
48	]	48	]
49	},	49	},
50	"copyButton": {	50	"editButton": {
51	"prototype": "montage/ui/button.reel",	51	"prototype": "montage/ui/button.reel",
52	"properties": {	52	"properties": {
53	"element": {"#": "ml_copy_btn"},	53	"element": {"#": "ml_edit_btn"}
54	"enabled": false
55	},	54	},
56	"listeners": [	55	"listeners": [
57	{	56	{
@@ -106,7 +105,9 @@ POSSIBILITY OF SUCH DAMAGE.
106	"prototype": "js/panels/Materials/materials-library-panel.reel[MaterialsLibraryPanels]",	105	"prototype": "js/panels/Materials/materials-library-panel.reel[MaterialsLibraryPanels]",
107	"properties": {	106	"properties": {
108	"element": {"#": "materials_library_panel"},	107	"element": {"#": "materials_library_panel"},
109	"_materialInfo": {"@": "materialInfo"}	108	"_materialInfo": {"@": "materialInfo"},
		109	"materialsController": {"@": "materialsController"},
		110	"deleteButton": {"@": "deleteButton"}
110	}	111	}
111	}	112	}
112	}	113	}
@@ -116,14 +117,14 @@ POSSIBILITY OF SUCH DAMAGE.
116	<body>	117	<body>
117		118
118	<div data-montage-id="materials_library_panel" class="materials_library_panel">	119	<div data-montage-id="materials_library_panel" class="materials_library_panel">
119	<section data-montage-id="ml_tree_holder" class="animationsLibrary">	120	<section data-montage-id="ml_tree_holder" class="ml_tree_holder">
120	<div data-montage-id="materials_library_tree"></div>	121	<div data-montage-id="materials_library_tree"></div>
121	</section>	122	</section>
122	<hr />	123	<hr />
123	<div data-montage-id="ml_buttons" class="ml_buttons">	124	<div data-montage-id="ml_buttons" class="ml_buttons">
124	<button data-montage-id="ml_add_btn" class="nj-skinned">Add</button>	125	<button data-montage-id="ml_duplicate_btn" class="nj-skinned ml_duplicate_btn">Duplicate</button>
125	<button data-montage-id="ml_copy_btn" class="nj-skinned">Copy</button>	126	<button data-montage-id="ml_edit_btn" class="nj-skinned ml_edit_btn">Edit</button>
126	<button data-montage-id="ml_delete_btn" class="nj-skinned">Delete</button>	127	<button data-montage-id="ml_delete_btn" class="nj-skinned ml_delete_btn">Delete</button>
127	</div>	128	</div>
128	</div>	129	</div>
129		130


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 b5d6bb96..d6df8229 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
@@ -31,14 +31,36 @@ POSSIBILITY OF SUCH DAMAGE.
31	var Montage = require("montage/core/core").Montage,	31	var Montage = require("montage/core/core").Montage,
32	Component = require("montage/ui/component").Component,	32	Component = require("montage/ui/component").Component,
33	MaterialsData = require("js/panels/Materials/materials-data.json"),	33	MaterialsData = require("js/panels/Materials/materials-data.json"),
34	Popup = require("montage/ui/popup/popup.reel").Popup;	34	Popup = require("montage/ui/popup/popup.reel").Popup,
		35	MaterialsModel = require("js/models/materials-model").MaterialsModel,
		36	LeafNode = require("js/components/treeview/ninja-leaf.reel").Leaf;
35		37
36	exports.MaterialsLibraryPanel = Montage.create(Component, {	38	exports.MaterialsLibraryPanel = Montage.create(Component, {
37		39
		40	deleteButton: {
		41	value: null
		42	},
		43
38	materialsData: {	44	materialsData: {
39	value: null	45	value: null
40	},	46	},
41		47
		48	materialId: {
		49	value: null
		50	},
		51
		52	selectedMaterialNode: {
		53	value: null
		54	},
		55
		56	customMaterialsBranch: {
		57	value: null
		58	},
		59
		60	customMaterialsCounter: {
		61	value: 2
		62	},
		63
42	_hasFocus: {	64	_hasFocus: {
43	enumerable: false,	65	enumerable: false,
44	value: false	66	value: false
@@ -60,21 +82,32 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
60	value:function(event) {	82	value:function(event) {
61	switch(event._currentTarget.label)	83	switch(event._currentTarget.label)
62	{	84	{
63	case "Add":	85	case "Duplicate":
64	console.log("Add new material");	86