diff options
Diffstat (limited to 'js/panels/Materials/materials-popup.reel')
3 files changed, 163 insertions, 232 deletions
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css index 943d9bcb..2de03e91 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.css +++ b/js/panels/Materials/materials-popup.reel/materials-popup.css | |||
@@ -6,7 +6,8 @@ | |||
6 | </copyright> */ | 6 | </copyright> */ |
7 | 7 | ||
8 | .materials_popup { | 8 | .materials_popup { |
9 | width:400px; | 9 | width:auto; |
10 | min-width: 300px; | ||
10 | font-size: 12px; | 11 | font-size: 12px; |
11 | overflow: hidden; | 12 | overflow: hidden; |
12 | background: #494949; | 13 | background: #494949; |
@@ -32,6 +33,7 @@ | |||
32 | .mp_preview { | 33 | .mp_preview { |
33 | height: 100px; | 34 | height: 100px; |
34 | text-align: center; | 35 | text-align: center; |
36 | margin: 20px 0 10px 0; | ||
35 | } | 37 | } |
36 | 38 | ||
37 | .mp_property | 39 | .mp_property |
@@ -59,7 +61,19 @@ | |||
59 | .mp_property .hottext, | 61 | .mp_property .hottext, |
60 | .mp_property .hottextInput | 62 | .mp_property .hottextInput |
61 | { | 63 | { |
62 | width: 30px; | 64 | width: 23px; |
65 | } | ||
66 | |||
67 | .mp_property .hottext | ||
68 | { | ||
69 | color: white; | ||
70 | background: none; | ||
71 | } | ||
72 | |||
73 | .mp_property .hottextInput | ||
74 | { | ||
75 | color: black; | ||
76 | background: white; | ||
63 | } | 77 | } |
64 | 78 | ||
65 | .mp_property .button | 79 | .mp_property .button |
@@ -76,7 +90,8 @@ | |||
76 | 90 | ||
77 | .mp_properties_list | 91 | .mp_properties_list |
78 | { | 92 | { |
79 | padding-bottom: 8px; | 93 | padding-bottom: 8px; |
94 | padding-right: 20px; | ||
80 | } | 95 | } |
81 | 96 | ||
82 | .mp_properties_list > .mp_property > .colortoolbar | 97 | .mp_properties_list > .mp_property > .colortoolbar |
@@ -104,13 +119,28 @@ | |||
104 | display: block; | 119 | display: block; |
105 | cursor: pointer; | 120 | cursor: pointer; |
106 | } | 121 | } |
122 | .mp_buttons button:hover, | ||
123 | .mp_buttons button:active { | ||
124 | color: white; | ||
125 | } | ||
107 | 126 | ||
108 | .mp_buttons .mp_cancel_btn { | 127 | .mp_buttons .mp_cancel_btn { |
109 | float: left; | 128 | float: left; |
110 | width: 60px; | 129 | width: 60px; |
111 | } | 130 | } |
112 | 131 | ||
132 | .mp_buttons .mp_saveAs_btn { | ||
133 | float: right; | ||
134 | width: 60px; | ||
135 | } | ||
136 | |||
113 | .mp_buttons .mp_ok_btn { | 137 | .mp_buttons .mp_ok_btn { |
114 | float: right; | 138 | float: right; |
115 | width: 30px; | 139 | width: 30px; |
140 | margin-left:4px; | ||
141 | } | ||
142 | |||
143 | .materials_popup .mp_reset_btn { | ||
144 | float: right; | ||
145 | margin-right: 8px; | ||
116 | } \ No newline at end of file | 146 | } \ No newline at end of file |
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html index bac722cd..c2f3af4e 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.html +++ b/js/panels/Materials/materials-popup.reel/materials-popup.html | |||
@@ -27,6 +27,21 @@ | |||
27 | "label": "Cancel" | 27 | "label": "Cancel" |
28 | } | 28 | } |
29 | }, | 29 | }, |
30 | "saveAsButton": { | ||
31 | "prototype": "montage/ui/button.reel", | ||
32 | "properties": { | ||
33 | "element": {"#": "mp_saveAs_btn"}, | ||
34 | "label": "Save As..." | ||
35 | } | ||
36 | }, | ||
37 | "resetButton": { | ||
38 | "prototype": "montage/ui/button.reel", | ||
39 | "properties": { | ||
40 | "element": {"#": "mp_reset_btn"}, | ||
41 | "label": "Reset", | ||
42 | "enabled": false | ||
43 | } | ||
44 | }, | ||
30 | "eventDelegator": { | 45 | "eventDelegator": { |
31 | "prototype": "montage/core/event/action-event-listener", | 46 | "prototype": "montage/core/event/action-event-listener", |
32 | "properties": { | 47 | "properties": { |
@@ -79,7 +94,10 @@ | |||
79 | "element": {"#": "materials_popup"}, | 94 | "element": {"#": "materials_popup"}, |
80 | "okButton": {"@": "okButton"}, | 95 | "okButton": {"@": "okButton"}, |
81 | "cancelButton": {"@": "cancelButton"}, | 96 | "cancelButton": {"@": "cancelButton"}, |
82 | "materialTitle": {"#": "mp_title"} | 97 | "saveAsButton": {"@": "saveAsButton"}, |
98 | "resetButton": {"@": "resetButton"}, | ||
99 | "materialTitle": {"#": "mp_title"}, | ||
100 | "previewCanvas": {"#": "mp_preview_canvas"} | ||
83 | } | 101 | } |
84 | } | 102 | } |
85 | } | 103 | } |
@@ -91,15 +109,19 @@ | |||
91 | <div data-montage-id="materials_popup" class="materials_popup"> | 109 | <div data-montage-id="materials_popup" class="materials_popup"> |
92 | <div data-montage-id="mp_title" class="mp_title">Material Name</div> | 110 | <div data-montage-id="mp_title" class="mp_title">Material Name</div> |
93 | <hr /> | 111 | <hr /> |
94 | <div data-montage-id="mp_preview" class="mp_preview">Preview Pane</div> | 112 | <div data-montage-id="mp_preview" class="mp_preview"> |
113 | <canvas data-montage-id="mp_preview_canvas" width="200" height="100"/> | ||
114 | </div> | ||
95 | <hr /> | 115 | <hr /> |
96 | <div data-montage-id="mp_properties_list" class="mp_properties_list"> | 116 | <div data-montage-id="mp_properties_list" class="mp_properties_list"> |
97 | <div data-montage-id="mp_property" class="mp_property"></div> | 117 | <div data-montage-id="mp_property" class="mp_property"></div> |
98 | </div> | 118 | </div> |
119 | <button data-montage-id="mp_reset_btn" class="mp_reset_btn nj-skinned"></button> | ||
99 | <hr /> | 120 | <hr /> |
100 | <div data-montage-id="mp_buttons" class="mp_buttons"> | 121 | <div data-montage-id="mp_buttons" class="mp_buttons"> |
101 | <button data-montage-id="mp_cancel_btn" class="mp_cancel_btn nj-skinned"></button> | 122 | <button data-montage-id="mp_cancel_btn" class="mp_cancel_btn nj-skinned"></button> |
102 | <button data-montage-id="mp_ok_btn" class="mp_ok_btn nj-skinned"></button> | 123 | <button data-montage-id="mp_ok_btn" class="mp_ok_btn nj-skinned"></button> |
124 | <button data-montage-id="mp_saveAs_btn" class="mp_saveAs_btn nj-skinned"></button> | ||
103 | </div> | 125 | </div> |
104 | </div> | 126 | </div> |
105 | </body> | 127 | </body> |
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index 40f07509..3f702459 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js | |||
@@ -6,7 +6,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var Montage = require("montage/core/core").Montage, |
8 | Component = require("montage/ui/component").Component, | 8 | Component = require("montage/ui/component").Component, |
9 | MaterialsModel = require("js/models/materials-model").MaterialsModel; | 9 | MaterialsModel = require("js/models/materials-model").MaterialsModel, |
10 | NJUtils = require("js/lib/NJUtils").NJUtils, | ||
11 | World = require("js/lib/drawing/world").World, | ||
12 | Rectangle = require("js/lib/geom/rectangle").Rectangle; | ||
10 | 13 | ||
11 | //////////////////////////////////////////////////////////////////////// | 14 | //////////////////////////////////////////////////////////////////////// |
12 | //Exporting as MaterialsPopup | 15 | //Exporting as MaterialsPopup |
@@ -22,11 +25,35 @@ exports.MaterialsPopup = Montage.create(Component, { | |||
22 | serializable: true | 25 | serializable: true |
23 | }, | 26 | }, |
24 | 27 | ||
28 | saveAsButton: { | ||
29 | value: null, | ||
30 | serializable: true | ||
31 | }, | ||
32 | |||
33 | resetButton: { | ||
34 | value: null, | ||
35 | serializable: true | ||
36 | }, | ||
37 | |||
38 | materialsLibraryRef: { | ||
39 | value: null | ||
40 | }, | ||
41 | |||
25 | materialTitle: { | 42 | materialTitle: { |
26 | value: null, | 43 | value: null, |
27 | serializable: true | 44 | serializable: true |
28 | }, | 45 | }, |
29 | 46 | ||
47 | previewCanvas: { | ||
48 | value: null, | ||