diff options
Diffstat (limited to 'js/panels/Materials/materials-library-panel.reel')
3 files changed, 130 insertions, 22 deletions
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 a07e93f5..307f2c5a 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,11 +34,11 @@ 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 | { |
@@ -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 98a87b07..873184dc 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 | this.duplicateMaterial(); |
65 | break; | 87 | break; |
66 | case "Copy": | 88 | case "Edit": |
67 | console.log("Copy selected material"); | 89 | // console.log("Edit selected material"); |
90 | this._showMaterialPopup({ materialId: this.materialId }); | ||
68 | break; | 91 | break; |
69 | case "Delete": | 92 | case "Delete": |
70 | console.log("Delete selected material"); | 93 | this.deleteMaterial(); |
71 | break; | 94 | break; |
72 | } | 95 | } |
73 | } | 96 | } |
74 | }, | 97 | }, |
75 | 98 | ||
76 | handleNodeActivation: { | 99 | handleNodeActiva |