1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
<!DOCTYPE html>
<!-- <copyright>
This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
</copyright> -->
<html lang="en">
<head>
<link rel="stylesheet" href="position-and-size.css" type="text/css">
<script type="text/montage-serialization">
{
"owner": {
"prototype" : "js/panels/properties.reel/sections/position-and-size.reel[PosSize]",
"properties" : {
"element" : {"#": "section"},
"position": {"#": "position"},
"leftLabel": {"#": "labelX"},
"leftControl": {"@": "PosX"},
"topLabel": {"#": "labelY"},
"topControl": {"@": "PosY"},
"heightControl": {"@": "PosH"},
"widthControl": {"@": "PosW"},
"bindButton": {"@": "bindButton"}
}
},
"PosX": {
"prototype": "js/components/hottextunit.reel[HotTextUnit]",
"properties": {
"element": {"#": "PosX"},
"maxValue": 10000,
"minValue": -10000
},
"bindings": {
"value": {"<<->": "@owner.leftPosition"}
}
},
"PosY": {
"prototype": "js/components/hottextunit.reel[HotTextUnit]",
"properties": {
"element": {"#": "PosY"},
"maxValue": 10000,
"minValue": -10000
},
"bindings": {
"value": {"<<->": "@owner.topPosition"}
}
},
"PosH": {
"prototype": "js/components/hottextunit.reel[HotTextUnit]",
"properties": {
"element": {"#": "PosH"}
},
"bindings": {
"value": {"<<->": "@owner.heightSize"}
}
},
"PosW": {
"prototype": "js/components/hottextunit.reel[HotTextUnit]",
"properties": {
"element": {"#": "PosW"},
"acceptableUnits" : ["px", "%"],
"units": "px"
},
"bindings": {
"value": {"<<->": "@owner.widthSize"}
}
},
"bindButton": {
"prototype": "montage/ui/toggle-button.reel",
"properties": {
"element": {"#": "posBound"},
"pressedClass": "lockUp",
"preventFocus": true,
"identifier": "ratio"
}
}
}
</script>
</head>
<body>
<div data-montage-id="section" class="sectional">
<section data-montage-id="position" class="fieldCol">
<label data-montage-id="labelX">Left:</label>
<article class="fieldRow twoCol">
<div>
<div class="inputField">
<div data-montage-id="PosX"></div>
</div>
</div>
<div>
<div>
<label data-montage-id="labelY">Top:</label>
</div>
<div class="inputField">
<div data-montage-id="PosY"></div>
</div>
</div>
</article>
</section>
<hr />
<section class="fieldCol">
<button data-montage-id="posBound" id="posBound" class="unlock"></button>
<label>Width:</label>
<article class="fieldRow twoCol">
<div>
<div class="inputField">
<div data-montage-id="PosW"></div>
</div>
</div>
<div>
<div>
<label>Height:</label>
</div>
<div class="inputField">
<div data-montage-id="PosH"></div>
</div>
</div>
</article>
</section>
</div>
</body>
</html>
|