diff options
Diffstat (limited to 'js/panels/Materials/materials-popup.reel')
3 files changed, 252 insertions, 258 deletions
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css index a5362615..d53cb795 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.css +++ b/js/panels/Materials/materials-popup.reel/materials-popup.css | |||
@@ -30,7 +30,8 @@ POSSIBILITY OF SUCH DAMAGE. | |||
30 | </copyright> */ | 30 | </copyright> */ |
31 | 31 | ||
32 | .materials_popup { | 32 | .materials_popup { |
33 | width:400px; | 33 | width:auto; |
34 | min-width: 300px; | ||
34 | font-size: 12px; | 35 | font-size: 12px; |
35 | overflow: hidden; | 36 | overflow: hidden; |
36 | background: #494949; | 37 | background: #494949; |
@@ -56,6 +57,7 @@ POSSIBILITY OF SUCH DAMAGE. | |||
56 | .mp_preview { | 57 | .mp_preview { |
57 | height: 100px; | 58 | height: 100px; |
58 | text-align: center; | 59 | text-align: center; |
60 | margin: 20px 0 10px 0; | ||
59 | } | 61 | } |
60 | 62 | ||
61 | .mp_property | 63 | .mp_property |
@@ -83,7 +85,19 @@ POSSIBILITY OF SUCH DAMAGE. | |||
83 | .mp_property .hottext, | 85 | .mp_property .hottext, |
84 | .mp_property .hottextInput | 86 | .mp_property .hottextInput |
85 | { | 87 | { |
86 | width: 30px; | 88 | width: 23px; |
89 | } | ||
90 | |||
91 | .mp_property .hottext | ||
92 | { | ||
93 | color: white; | ||
94 | background: none; | ||
95 | } | ||
96 | |||
97 | .mp_property .hottextInput | ||
98 | { | ||
99 | color: black; | ||
100 | background: white; | ||
87 | } | 101 | } |
88 | 102 | ||
89 | .mp_property .button | 103 | .mp_property .button |
@@ -98,9 +112,20 @@ POSSIBILITY OF SUCH DAMAGE. | |||
98 | position: relative; | 112 | position: relative; |
99 | } | 113 | } |
100 | 114 | ||
115 | .mp_property .gradientpicker | ||
116 | { | ||
117 | top: 0; | ||
118 | } | ||
119 | |||
120 | .mp_property .gradientpicker .type | ||
121 | { | ||
122 | display: none; | ||
123 | } | ||
124 | |||
101 | .mp_properties_list | 125 | .mp_properties_list |
102 | { | 126 | { |
103 | padding-bottom: 8px; | 127 | padding-bottom: 8px; |
128 | padding-right: 20px; | ||
104 | } | 129 | } |
105 | 130 | ||
106 | .mp_properties_list > .mp_property > .colortoolbar | 131 | .mp_properties_list > .mp_property > .colortoolbar |
@@ -128,13 +153,28 @@ POSSIBILITY OF SUCH DAMAGE. | |||
128 | display: block; | 153 | display: block; |
129 | cursor: pointer; | 154 | cursor: pointer; |
130 | } | 155 | } |
156 | .mp_buttons button:hover, | ||
157 | .mp_buttons button:active { | ||
158 | color: white; | ||
159 | } | ||
131 | 160 | ||
132 | .mp_buttons .mp_cancel_btn { | 161 | .mp_buttons .mp_cancel_btn { |
133 | float: left; | 162 | float: left; |
134 | width: 60px; | 163 | width: 60px; |
135 | } | 164 | } |
136 | 165 | ||
166 | .mp_buttons .mp_saveAs_btn { | ||
167 | float: right; | ||
168 | width: 60px; | ||
169 | } | ||
170 | |||
137 | .mp_buttons .mp_ok_btn { | 171 | .mp_buttons .mp_ok_btn { |
138 | float: right; | 172 | float: right; |
139 | width: 30px; | 173 | width: 30px; |
174 | margin-left:4px; | ||
140 | } | 175 | } |
176 | |||
177 | .materials_popup .mp_reset_btn { | ||
178 | float: right; | ||
179 | margin-right: 8px; | ||
180 | } \ 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 b377fa2d..db53e0e9 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.html +++ b/js/panels/Materials/materials-popup.reel/materials-popup.html | |||
@@ -51,6 +51,21 @@ POSSIBILITY OF SUCH DAMAGE. | |||
51 | "label": "Cancel" | 51 | "label": "Cancel" |
52 | } | 52 | } |
53 | }, | 53 | }, |
54 | "saveAsButton": { | ||
55 | "prototype": "montage/ui/button.reel", | ||
56 | "properties": { | ||
57 | "element": {"#": "mp_saveAs_btn"}, | ||
58 | "label": "Save As..." | ||
59 | } | ||
60 | }, | ||
61 | "resetButton": { | ||
62 | "prototype": "montage/ui/button.reel", | ||
63 | "properties": { | ||
64 | "element": {"#": "mp_reset_btn"}, | ||
65 | "label": "Reset", | ||
66 | "enabled": false | ||
67 | } | ||
68 | }, | ||
54 | "eventDelegator": { | 69 | "eventDelegator": { |
55 | "prototype": "montage/core/event/action-event-listener", | 70 | "prototype": "montage/core/event/action-event-listener", |
56 | "properties": { | 71 | "properties": { |
@@ -103,7 +118,10 @@ POSSIBILITY OF SUCH DAMAGE. | |||
103 | "element": {"#": "materials_popup"}, | 118 | "element": {"#": "materials_popup"}, |
104 | "okButton": {"@": "okButton"}, | 119 | "okButton": {"@": "okButton"}, |
105 | "cancelButton": {"@": "cancelButton"}, | 120 | "cancelButton": {"@": "cancelButton"}, |
106 | "materialTitle": {"#": "mp_title"} | 121 | "saveAsButton": {"@": "saveAsButton"}, |
122 | "resetButton": {"@": "resetButton"}, | ||
123 | "materialTitle": {"#": "mp_title"}, | ||
124 | "previewCanvas": {"#": "mp_preview_canvas"} | ||
107 | } | 125 | } |
108 | } | 126 | } |
109 | } | 127 | } |
@@ -115,15 +133,19 @@ POSSIBILITY OF SUCH DAMAGE. | |||
115 | <div data-montage-id="materials_popup" class="materials_popup"> | 133 | <div data-montage-id="materials_popup" class="materials_popup"> |
116 | <div data-montage-id="mp_title" class="mp_title">Material Name</div> | 134 | <div data-montage-id="mp_title" class="mp_title">Material Name</div> |
117 | <hr /> | 135 | <hr /> |
118 | <div data-montage-id="mp_preview" class="mp_preview">Preview Pane</div> | 136 | <div data-montage-id="mp_preview" class="mp_preview"> |
137 | <canvas data-montage-id="mp_preview_canvas" width="200" height="100"/> | ||
138 | </div> | ||
119 | <hr /> | 139 | <hr /> |
120 | <div data-montage-id="mp_properties_list" class="mp_properties_list"> | 140 | <div data-montage-id="mp_properties_list" class="mp_properties_list"> |
121 | <div data-montage-id="mp_property" class="mp_property"></div> | 141 | <div data-montage-id="mp_property" class="mp_property"></div> |
122 | </div> | 142 | </div> |
143 | <button data-montage-id="mp_reset_btn" class="mp_reset_btn nj-skinned"></button> | ||
123 | <hr /> | 144 | <hr /> |
124 | <div data-montage-id="mp_buttons" class="mp_buttons"> | 145 | <div data-montage-id="mp_buttons" class="mp_buttons"> |
125 | <button data-montage-id="mp_cancel_btn" class="mp_cancel_btn nj-skinned"></button> | 146 | <button data-montage-id="mp_cancel_btn" class="mp_cancel_btn nj-skinned"></button> |
126 | <button data-montage-id="mp_ok_btn" class="mp_ok_btn nj-skinned"></button> | 147 | <button data-montage-id="mp_ok_btn" class="mp_ok_btn nj-skinned"></button> |
148 | <button data-montage-id="mp_saveAs_btn" class="mp_saveAs_btn nj-skinned"></button> | ||
127 | </div> | 149 | </div> |
128 | </div> | 150 | </div> |
129 | </body> | 151 | </body> |
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index 7c5493c6..0d0435a4 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js | |||
@@ -30,7 +30,11 @@ POSSIBILITY OF SUCH DAMAGE. | |||
30 | 30 | ||
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 | MaterialsModel = require("js/models/materials-model").MaterialsModel; | 33 | MaterialsModel = require("js/models/materials-model").MaterialsModel, |
34 | NJUtils = require("js/lib/NJUtils").NJUtils, | ||
35 | World = require("js/lib/drawing/world").World, | ||
36 | Rectangle = require("js/lib/geom/rectangle").Rectangle, | ||
37 | ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; | ||
34 | 38 | ||
35 | //////////////////////////////////////////////////////////////////////// | 39 | //////////////////////////////////////////////////////////////////////// |
36 | //Exporting as MaterialsPopup | 40 | //Exporting as MaterialsPopup |
@@ -46,11 +50,35 @@ exports.MaterialsPopup = Montage.create(Component, { | |||
46 | serializable: true | 50 | serializable: true |
47 | }, | 51 | }, |
48 | 52 | ||
53 | saveAsButton: { | ||
54 | value: null, | ||
55 | serializable: true | ||
56 | }, | ||
57 | |||
58 | resetButton: { | ||
59 | value: null, | ||
60 | serializable: true | ||
6 |