diff options
Diffstat (limited to 'js/panels')
16 files changed, 735 insertions, 4 deletions
diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css index 27d19e58..1b3c9184 100755 --- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css +++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css | |||
@@ -10,6 +10,11 @@ | |||
10 | -webkit-box-orient: vertical; | 10 | -webkit-box-orient: vertical; |
11 | height:100%; | 11 | height:100%; |
12 | } | 12 | } |
13 | .css_panel .resizer { | ||
14 | background-color: #333; | ||
15 | cursor: row-resize; | ||
16 | height: 1px; | ||
17 | } | ||
13 | .nj-section-header { | 18 | .nj-section-header { |
14 | background-color: #333; | 19 | background-color: #333; |
15 | border-top: 1px solid #3D3D3D; | 20 | border-top: 1px solid #3D3D3D; |
@@ -37,7 +42,6 @@ | |||
37 | -webkit-box-flex: 0; | 42 | -webkit-box-flex: 0; |
38 | background-color: #474747; | 43 | background-color: #474747; |
39 | color: #FFF; | 44 | color: #FFF; |
40 | max-height: 68px; | ||
41 | overflow-y: scroll; | 45 | overflow-y: scroll; |
42 | } | 46 | } |
43 | #nj-section-styles { | 47 | #nj-section-styles { |
diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html index 5d6273b6..db630934 100755 --- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html +++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html | |||
@@ -10,6 +10,16 @@ | |||
10 | <link rel="stylesheet" href="CSSPanelBase.css" type="text/css"> | 10 | <link rel="stylesheet" href="CSSPanelBase.css" type="text/css"> |
11 | <script type="text/montage-serialization"> | 11 | <script type="text/montage-serialization"> |
12 | { | 12 | { |
13 | "resizer1": { | ||
14 | "module": "js/panels/Resizer", | ||
15 | "name": "Resizer", | ||
16 | "properties": { | ||
17 | "element": {"#": "subPanelResizer"}, | ||
18 | "panel": {"#": "nj-section-stylesheets"}, | ||
19 | "isVertical": true | ||
20 | } | ||
21 | }, | ||
22 | |||
13 | "ComputedStyleSubPanel1": { | 23 | "ComputedStyleSubPanel1": { |
14 | "module": "js/panels/CSSPanel/ComputedStyleSubPanel.reel", | 24 | "module": "js/panels/CSSPanel/ComputedStyleSubPanel.reel", |
15 | "name": "ComputedStyleSubPanel", | 25 | "name": "ComputedStyleSubPanel", |
@@ -43,6 +53,7 @@ | |||
43 | <div id="nj-css-stylesheet-toolbar" class="nj-css-toolbar"> | 53 | <div id="nj-css-stylesheet-toolbar" class="nj-css-toolbar"> |
44 | <a href="#" id="nj-css-add-stylesheet" title="Add Stylesheet">Add Rule</a> | 54 | <a href="#" id="nj-css-add-stylesheet" title="Add Stylesheet">Add Rule</a> |
45 | </div> | 55 | </div> |
56 | <div id="subPanelResizer" class="resizer"></div> | ||
46 | <!-- Style Rule list subsection --> | 57 | <!-- Style Rule list subsection --> |
47 | <h2 id="nj-css-styles-header" class="nj-section-header"> | 58 | <h2 id="nj-css-styles-header" class="nj-section-header"> |
48 | <div id="nj-css-styles-arrow" class="panelDisclosureIcon"></div> | 59 | <div id="nj-css-styles-arrow" class="panelDisclosureIcon"></div> |
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 7e5a76ee..b4eec771 100755 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | |||
@@ -26,14 +26,59 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
26 | "text": "Montage Components", | 26 | "text": "Montage Components", |
27 | "children": [ | 27 | "children": [ |
28 | { | 28 | { |
29 | "text": "Anchor", | ||
30 | "dataFile" : "node_modules/components-data/anchor.json", | ||
31 | "component": "anchor" | ||
32 | }, | ||
33 | { | ||
29 | "text": "Button", | 34 | "text": "Button", |
30 | "dataFile" : "node_modules/components-data/button.json", | 35 | "dataFile" : "node_modules/components-data/button.json", |
31 | "component": "button" | 36 | "component": "button" |
32 | }, | 37 | }, |
33 | { | 38 | { |
39 | "text": "Checkbox", | ||
40 | "dataFile" : "node_modules/components-data/checkbox.json", | ||
41 | "component": "checkbox" | ||
42 | }, | ||
43 | { | ||
44 | "text": "Image Component", | ||
45 | "dataFile" : "node_modules/components-data/image.json", | ||
46 | "component": "imageComponent" | ||
47 | }, | ||
48 | { | ||
49 | "text": "NumberInput", | ||
50 | "dataFile" : "node_modules/components-data/number-input.json", | ||
51 | "component": "numberInput" | ||
52 | }, | ||
53 | { | ||
54 | "text": "Select Input", | ||
55 | "dataFile" : "node_modules/components-data/select.json", | ||
56 | "component": "select" | ||
57 | }, | ||
58 | { | ||
59 | "text": "Radio Button", | ||
60 | "dataFile" : "node_modules/components-data/radio-button.json", | ||
61 | "component": "radioButton" | ||
62 | }, | ||
63 | { | ||
64 | "text": "Range Input", | ||
65 | "dataFile" : "node_modules/components-data/range-input.json", | ||
66 | "component": "rangeInput" | ||
67 | }, | ||
68 | { | ||
69 | "text": "TextArea", | ||
70 | "dataFile" : "node_modules/components-data/textarea.json", | ||
71 | "component": "textarea" | ||
72 | }, | ||
73 | { | ||
34 | "text": "Textfield", | 74 | "text": "Textfield", |
35 | "dataFile" : "node_modules/components-data/textfield.json", | 75 | "dataFile" : "node_modules/components-data/textfield.json", |
36 | "component": "textfield" | 76 | "component": "textfield" |
77 | }, | ||
78 | { | ||
79 | "text": "Toogle Button", | ||
80 | "dataFile" : "node_modules/components-data/toggle-button.json", | ||
81 | "component": "toggleButton" | ||
37 | } | 82 | } |
38 | ] | 83 | ] |
39 | } | 84 | } |
@@ -119,6 +164,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
119 | row.prop = props.name; | 164 | row.prop = props.name; |
120 | row.defaultValue = props["default"]; | 165 | row.defaultValue = props["default"]; |
121 | row.label = props.name; | 166 | row.label = props.name; |
167 | row.items = props.possibleValues; | ||
122 | 168 | ||
123 | section.Section.push([row]); | 169 | section.Section.push([row]); |
124 | } | 170 | } |
@@ -147,6 +193,10 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
147 | return "textbox"; | 193 | return "textbox"; |
148 | case "boolean": | 194 | case "boolean": |
149 | return "checkbox"; | 195 | return "checkbox"; |
196 | case "select": | ||
197 | return "dropdown"; | ||
198 | case "number": | ||
199 | return "hottext"; | ||
150 | default: | 200 | default: |
151 | alert("Conversion not implemented for ", type); | 201 | alert("Conversion not implemented for ", type); |
152 | } | 202 | } |
@@ -211,6 +261,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
211 | 261 | ||
212 | NJevent("elementAdding", {"el": element, "data":styles}); | 262 | NJevent("elementAdding", {"el": element, "data":styles}); |
213 | }); | 263 | }); |
264 | |||
214 | } | 265 | } |
215 | }, | 266 | }, |
216 | 267 | ||
@@ -219,18 +270,62 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
219 | var el; | 270 | var el; |
220 | 271 | ||
221 | switch(name) { | 272 | switch(name) { |
273 | case "anchor": | ||
274 | el = NJUtils.makeNJElement("a", "Anchor", "component"); | ||
275 | el.elementModel.pi = "AnchorPi"; | ||
276 | el.setAttribute("href", "http://www.motorola.com"); | ||
277 | el.innerHTML = "link"; | ||
278 | break; | ||
222 | case "button": | 279 | case "button": |
223 | el = NJUtils.makeNJElement(name, "Button", "component"); | 280 | el = NJUtils.makeNJElement(name, "Button", "component"); |
224 | el.elementModel.pi = "ButtonPi"; | 281 | el.elementModel.pi = "ButtonPi"; |
225 | el.setAttribute("type", "button"); | 282 | el.setAttribute("type", "button"); |
226 | el.innerHTML = "Button"; |