diff options
Diffstat (limited to 'js/panels/properties.reel')
10 files changed, 283 insertions, 129 deletions
diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css index f8d37984..0928da3a 100755 --- a/js/panels/properties.reel/properties.css +++ b/js/panels/properties.reel/properties.css | |||
@@ -47,6 +47,11 @@ padding-right:6px; | |||
47 | 47 | ||
48 | } | 48 | } |
49 | 49 | ||
50 | .propertiesPanel button.nj-skinned { | ||
51 | margin-left: -12px; | ||
52 | margin-top: -3px; | ||
53 | } | ||
54 | |||
50 | .propertiesPanel hr { | 55 | .propertiesPanel hr { |
51 | border: 0; | 56 | border: 0; |
52 | border-top: 1px solid #3c3c3c; | 57 | border-top: 1px solid #3c3c3c; |
@@ -230,23 +235,10 @@ padding-right:6px; | |||
230 | clear:none; | 235 | clear:none; |
231 | } | 236 | } |
232 | 237 | ||
233 | .propertiesPanel .LockToolUp, .propertiesPanel .UnLockToolUp { | ||
234 | position: absolute; | ||
235 | left: 105px; | ||
236 | border: none; | ||
237 | background-color: transparent; | ||
238 | top: 2px; | ||
239 | opacity: 0.7; | ||
240 | } | ||
241 | |||
242 | .propertiesPanel .button:active { | 238 | .propertiesPanel .button:active { |
243 | outline: none; | 239 | outline: none; |
244 | } | 240 | } |
245 | 241 | ||
246 | .propertiesPanel .LockToolUp:hover, .propertiesPanel .UnLockToolUp:hover { | ||
247 | opacity: 1; | ||
248 | } | ||
249 | |||
250 | .propertiesPanel input[type="checkbox"].nj-skinned, .propertiesPanel input[type="radio"].nj-skinned { | 242 | .propertiesPanel input[type="checkbox"].nj-skinned, .propertiesPanel input[type="radio"].nj-skinned { |
251 | position: relative; | 243 | position: relative; |
252 | overflow: visible; | 244 | overflow: visible; |
diff --git a/js/panels/properties.reel/properties.html b/js/panels/properties.reel/properties.html index 72a6def6..d212ae80 100755 --- a/js/panels/properties.reel/properties.html +++ b/js/panels/properties.reel/properties.html | |||
@@ -10,35 +10,19 @@ | |||
10 | <link rel="stylesheet" href="properties.css" type="text/css"> | 10 | <link rel="stylesheet" href="properties.css" type="text/css"> |
11 | <script type="text/montage-serialization"> | 11 | <script type="text/montage-serialization"> |
12 | { | 12 | { |
13 | "elementNameInput1": { | 13 | "elementName": { |
14 | "module": "montage/ui/textfield.reel", | 14 | "prototype": "montage/ui/textfield.reel", |
15 | "name": "Textfield", | ||
16 | "properties": { | 15 | "properties": { |
17 | "element": {"#": "elementName"}, | 16 | "element": {"#": "elementName"}, |
18 | "readOnly": true | 17 | "readOnly": true |
19 | }, | ||
20 | "bindings": { | ||
21 | "value": { | ||
22 | "boundObject": {"@": "owner"}, | ||
23 | "boundObjectPropertyPath": "elementName", | ||
24 | "oneway": true | ||
25 | } | ||
26 | } | 18 | } |
27 | }, | 19 | }, |
28 | 20 | ||
29 | "elementID": { | 21 | "elementId": { |
30 | "module": "montage/ui/textfield.reel", | 22 | "prototype": "montage/ui/textfield.reel", |
31 | "name": "Textfield", | ||
32 | "properties": { | 23 | "properties": { |
33 | "element": {"#": "elementID"}, | 24 | "element": {"#": "elementId"}, |
34 | "readOnly": false | 25 | "readOnly": false |
35 | }, | ||
36 | "bindings": { | ||
37 | "value": { | ||
38 | "boundObject": {"@": "owner"}, | ||
39 | "boundObjectPropertyPath": "elementID", | ||
40 | "oneway": true | ||
41 | } | ||
42 | } | 26 | } |
43 | }, | 27 | }, |
44 | 28 | ||
@@ -46,35 +30,11 @@ | |||
46 | "module": "montage/ui/textfield.reel", | 30 | "module": "montage/ui/textfield.reel", |
47 | "name": "Textfield", | 31 | "name": "Textfield", |
48 | "properties": { | 32 | "properties": { |
49 | "element": {"#": "elementClassName"}, | 33 | "element": {"#": "elementClass"}, |
50 | "readOnly": false | 34 | "readOnly": false |
51 | }, | ||
52 | "bindings": { | ||
53 | "value": { | ||
54 | "boundObject": {"@": "owner"}, | ||
55 | "boundObjectPropertyPath": "elementClassName", | ||
56 | "oneway": true | ||
57 | } | ||
58 | } | ||
59 | }, | ||
60 | |||
61 | "elementNameAttribute": { | ||
62 | "module": "montage/ui/textfield.reel", | ||
63 | "name": "Textfield", | ||
64 | "properties": { | ||
65 | "element": {"#": "elementNameAttribute"}, | ||
66 | "readOnly": false | ||
67 | }, | ||
68 | "bindings": { | ||
69 | "value": { | ||
70 | "boundObject": {"@": "owner"}, | ||
71 | "boundObjectPropertyPath": "nameAttribute", | ||
72 | "oneway": false | ||
73 | } | ||
74 | } | 35 | } |
75 | }, | 36 | }, |
76 | 37 | ||
77 | |||
78 | "PosSizeSection": { | 38 | "PosSizeSection": { |
79 | "module": "js/panels/properties.reel/section.reel", | 39 | "module": "js/panels/properties.reel/section.reel", |
80 | "name": "Section", | 40 | "name": "Section", |
@@ -142,9 +102,9 @@ | |||
142 | "name": "Properties", | 102 | "name": "Properties", |
143 | "properties": { | 103 | "properties": { |
144 | "element": {"#": "propertiesPanel"}, | 104 | "element": {"#": "propertiesPanel"}, |
145 | "elementNameInput": {"@": "elementNameInput1"}, | 105 | "elementName": {"@": "elementName"}, |
146 | "elementId": {"@": "elementID"}, | 106 | "elementClass": {"@": "elementClass"}, |
147 | "elementNameAttribute": {"@": "elementNameAttribute"}, | 107 | "elementId": {"@": "elementId"}, |
148 | "positionSize": {"@": "PosSize"}, | 108 | "positionSize": {"@": "PosSize"}, |
149 | "threeD": {"@": "threeDProperties"} | 109 | "threeD": {"@": "threeDProperties"} |
150 | } | 110 | } |
@@ -156,20 +116,16 @@ | |||
156 | <section id="propertiesPanel" class="propertiesPanel"> | 116 | <section id="propertiesPanel" class="propertiesPanel"> |
157 | <section class="sectional"> | 117 | <section class="sectional"> |
158 | <section class="fieldCol"> | 118 | <section class="fieldCol"> |
159 | <label id="lblElement">Element:</label> | 119 | <label>Element:</label> |
160 | <article class="fieldRow"><input type="text" id="elementName" class="nj-skinned" readonly="readonly"></article> | 120 | <article class="fieldRow"><input type="text" id="elementName" class="nj-skinned" readonly="readonly"></article> |
161 | </section> | 121 | </section> |
162 | <section class="fieldCol"> | 122 | <section class="fieldCol"> |
163 | <label id="lblID">ID:</label> | 123 | <label>ID:</label> |
164 | <article class="fieldRow"><input type="text" id="elementID" class="nj-skinned" /></article> | 124 | <article class="fieldRow"><input type="text" id="elementId" class="nj-skinned" /></article> |
165 | </section> | ||
166 | <section class="fieldCol"> | ||
167 | <label id="lblClass">Class:</label> | ||
168 | <article class="fieldRow"><input type="text" id="elementClassName" class="nj-skinned" /></article> | ||
169 | </section> | 125 | </section> |
170 | <section class="fieldCol"> | 126 | <section class="fieldCol"> |
171 | <label id="lblName">Name:</label> | 127 | <label>Class:</label> |
172 | <article class="fieldRow"><input type="text" id="elementNameAttribute" class="nj-skinned" /></article> | 128 | <article class="fieldRow"><input type="text" id="elementClass" class="nj-skinned" /></article> |
173 | </section> | 129 | </section> |
174 | </section> | 130 | </section> |
175 | <section id="PosSize"></section> | 131 | <section id="PosSize"></section> |
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 947d7937..625e3eb6 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js | |||
@@ -17,15 +17,11 @@ exports.Properties = Montage.create(Component, { | |||
17 | value: null | 17 | value: null |
18 | }, | 18 | }, |
19 | 19 | ||
20 | elementID: { | 20 | elementId: { |
21 | value: null | 21 | value: null |
22 | }, | 22 | }, |
23 | 23 | ||
24 | elementClassName: { | 24 | elementClass: { |
25 | value: null | ||
26 | }, | ||
27 | |||
28 | nameAttribute: { | ||
29 | value: null | 25 | value: null |
30 | }, | 26 | }, |
31 | 27 | ||
@@ -60,6 +56,14 @@ exports.Properties = Montage.create(Component, { | |||
60 | 56 | ||
61 | this.eventManager.addEventListener("openDocument", this, false); | 57 | this.eventManager.addEventListener("openDocument", this, false); |
62 | this.eventManager.addEventListener("switchDocument", this, false); | 58 | this.eventManager.addEventListener("switchDocument", this, false); |
59 | |||
60 | this.elementId.element.addEventListener("blur", this, false); | ||
61 | this.elementId.element.addEventListener("focus", this, false); |