aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/panels/objects/object.reel/object.css9
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.css11
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.html25
-rw-r--r--js/stage/objects-tray.reel/objects-tray.css33
-rw-r--r--js/stage/objects-tray.reel/objects-tray.html58
-rw-r--r--js/stage/objects-tray.reel/objects-tray.js53
6 files changed, 165 insertions, 24 deletions
diff --git a/js/panels/objects/object.reel/object.css b/js/panels/objects/object.reel/object.css
index 64b2dbcc..f090ade6 100644
--- a/js/panels/objects/object.reel/object.css
+++ b/js/panels/objects/object.reel/object.css
@@ -22,7 +22,7 @@
22.objects-list .list-item { 22.objects-list .list-item {
23 list-style-type: none; 23 list-style-type: none;
24 float: left; 24 float: left;
25 width: 80px; 25 width: 70px;
26 overflow: hidden; 26 overflow: hidden;
27 text-overflow: ellipsis; 27 text-overflow: ellipsis;
28} 28}
@@ -32,7 +32,7 @@
32 ------------------- */ 32 ------------------- */
33 33
34.object-icon { 34.object-icon {
35 background-color: rgba(0, 0, 0, 0.4); 35 background-color: rgba(0, 0, 0, 0.6);
36 /* red owner/crate */ 36 /* red owner/crate */
37 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACoZJREFUeNqsV2lsHOUZfufYmZ09vF6vE3t9YSc%2ByEWC7YAhbuM0B04TBDVQEGrVVmqpKrUS%2FVOhohQKglYtUlWEkJBKKaWiqG4EciHFMU5iJ8RJnDhOiG878b3rY9d7H7Nz9PkWEgVIaaj4pLFmx%2FN97%2FM%2B7%2FMew9FNrkuXLlE6nSZJkigWi0mZTKbcNM0duC7g2UWn05nYtGkTfdnF%2Fa8Xzp07R3V1ddTf3y8lEonNePSwxWLZL8tyhdVqlTRN0wFoBoBadV3%2FW15e3qWNGzca%2FzeAy5cv05o1a7L3MGpVVfUujuO%2BI4riHhgstNlsImMBnmffYfdsJZNJikQiKkAOAczreP8tvOsDmJsDMDw8zKgleMenUqmd8Oandru9EUZzFUXhBUEgHEzxeJxC4XBSDIf1glTKEXe7TaWsTIUxGXsJewmg2VlJAOozDOP53Nzc9xGeG7LCHT58mHlRAEP7YORR3N%2BNS7HZ7MSMJpOJbOwjoXAyfapnpOTI0c7yo0eXp3fs%2BKGluHhtLJXWi%2Fv7nvU9%2BaQ1Vln17TxPXrliVXjT%2FNgeQBBYiYKh9xGuV8BcD2wlGhoaPgbQ1tbGA%2FGRqqqq7UBKPC9kvUilUxSPxZPxySsD7rffuVDd%2Fn7cHovp49%2FY%2FU3B41kdzWRExNsZzagkx2ILVkkSuODKIbO%2B7uTSAy37wMYOl8vl4MAxC5eqZigcDhlgZh5MvgdAr0Sj0fNcZ2cnzczMHKqurt6LDQQ1E5DS4uJiALH%2FSf22bbmLW2ofUSurbxNCQd%2BUy7VxtdPBZXSDVn19Oy0d7yYLQHNkUGA5EL5FtkYRxxCvZV4MPPUrN5x5TFGsFQgnj7Bmw7iyskJ9fX2DS0tLt4ulpaVMeCN4cS%2BjHHQRXqbCwkIPmHlz%2BN13jyy8%2FkZ9gVXO8WlOj1e0aKmMZklnNCPe8yEfRXhyRIsuioKQES22iMPuWlGUEj43b6tDsAnpdLgP4SiDKJm2siFhWsN9pqioyBCnp6cJQulDnE23O4%2Bbnp7S2ctut5vDJdpqavYUPPEL8rcfpmXfouENBS3Mk0gqZVolC%2BmgN20agoUTab6ySpAb7jZTeW5TlqXvWfiM5HbnZjNkdnY2G1oRQmW%2FccZlOKnxu3btYlq4AlSGqqaJF8Tx%2Bfn556empqKTk5O0sLBAHDaVP9BCVQ%2FezwVQbGYQIqdNEQqbmsglS5QsLSP%2FvfeRUVurO26touKi1Xyuyy5FIuGs4YmJCRobG8sg5umC1QXZMCDMH%2B3bt49EZh0pdAXoVN0wFF3Tch959dXfR5aX50489uP70zXVu7GRczgc5HK7%2Bdz77iVb4zZSURnHBwYovWcv5axfR4pVpjxds5CpUSAQycaZpezy8rKWCgaPb%2BnoeDPz4IMHjJqaMjw3AWCQ2c4C8Hq9S%2FA2oqZVxSTTGTOMcp345pqk2mjOLdAEGelEsVdmscvJySGEhiw7mihaX0cK5GdT5Kxwg8EArmBWRwgjrV7tpbWDw2Mbnv11v2gY69%2FascOZixoBADr0NnkNwJYtW9TR0VF%2FKLRSwPO8FCouKU4sB23Dp3tsLJtzdVNN798vRku8POLHMe8QPyopKSGwQwgX8zRLrSiCBE5UeY0TV1pb%2Bd6Z2TLUQj4tSaJZ6FUikSgTYQaOTDPbPPuTn5%2FPhDjCxKXrhhAW%2BMrKRf%2BEMxSat6fSEbsrx6l8eELQRyfMSDSBcptkqctSic6ePZu9Z16vhCJGntNNeZcnJfON19NXpqdTOYnYsa5%2FH35cVRRJk2WIfopCoVAYGRC4BuCTNchUCg1waat1rT2RTGzcUnt%2B%2FSOPZgxDNxfgtXzqJL92elZyGTxpqAPhcDibUqJFpvUVt1LRrI%2B7%2BPJLNNN1hKotltj3N2%2Be%2Fa5v%2FqOdO5so4PEgAUSBZQDqy0JFRYX6KQCgvh85aoIJ0vM8xUmrbD05NnLPePshD4yrbjKTFp6n%2BPmzFD7dky3PLO6Mdub9RO9pWj7XyxmCoOfo%2BpxfFPN7BgYq2woKW1pbWynmzHGrqsbFYnEGYHTz5s30KQCoz5dwkM4Oncz3eCpstheDydRyGgbKa26Vqx5%2BVDEguBV4EPL5yAADrOmwwsLSdWpxkeIQXpluCqvgwChK%2BclY1LwiCOcfeughcdZbqDCRQmdMoINX7YpXb%2BDREoynNC3jiLpc1a82NPyzdP0Gt%2FOOu2ju3Ta6cLCVgjjULVnJHoubYaSmmklnvQd7ZiwW5mLQUBKAI2qS1tgUKk0l47%2F0%2BU7h%2BI0Sz5d58j2oK36TOXuN%2Bas3Tz%2F9NGtKUUYp1F204cCBDTOjY7IPvSKCWIdjUV1CVyn2esmCJqZHY9dmArvdyW3w5FOpmjbjgmCkdI08NgfnyvM4nikrfeGVXbvenCwpWeVELUGIdQwzw58DgIrnhjqjLBNYTzgxNETnJMnsHxmijKaZu3%2F2OF9ZUMj5%2FD4aDiwhl2PssCyIRDJOgbkZdpjRqNi5Wxw5NIp60IZ4W2RZaNi7d51j%2B%2FZ8NB%2B2J4PxbuVzALA0xPICVGqyHG9sbCRhw7rEMxf7h94jbvHiX1%2FjfOEQiZFo2GmaGcEiZht%2BFoShp6LRSDIpCumgmuTOoK%2F8bm62fywVD6Lgm0PFxVnBsqzB%2BYmDBw%2FarxoVrgeAYjQL79fg0DJUR66pqUnCJCMf6u66ELcqq6RQWF93Z4OjsLhUiOD%2FKqhmqWtz5Ijr9%2By3aF3H9AlsXrgysbJ7ZGj479Fo7%2B27d1fV19fLLP3QY8jn802hdvwD9oK4zOsBZEBnAI1jENVNxsE1EIuIdJExlJZ%2BcPr0wFG%2F74PKeHxLJBzkUjVVpq5rHDuYrcnuY7Tin59XPuwe9AcCI1eam7WnnnvuW5h8HMxwT0%2BPOTIyMn%2FixInfsFENW%2BKfZYAtFSCW0cFG%2FX5%2FDL9vgybk6qoqfs%2BePV6wJ%2Fy598zCuKzEy0pLFEHgLaweQD%2FxaEd7omBiorfTZuu67YknmnY2N38NPUO6ePEiHTt2TIPho7h%2BGwgEDuNcVgXNGwHIMoFrGU1lDJvHMSHVZTKak80HtXW1hZVrK6V%2Ftb3TWVVVWYFh1cYYQBsfSHZ2dkw038P%2F4MCBH23dutWbQM%2FoOXmSuru7%2Fe3t7S%2BPj4%2B%2FDB30XKX%2BRhq4fjGBRbBhFhsvY75bCyYKPJ58DmO2cscdd1bDawEFRWIaAAvxoua9Jfe3tGxHk7FMXJ6g3jNnDMT6o46OjucR0rdx3giuxGcNCV8wsjOUcdSGeYhzEKEpQMzLoQu%2BoqIcmCQJdGanm9raWvf2pqZVmIK4k%2FD63LmziePHj7eeOnXqBThxDOf4mMhvZES4iY%2BXBITtx9w4AAXrALAJ1tF1RQp%2BAqC4uIRjxaqrq4vOnz8%2FjUH3DxDzawDdj%2F3h6yn%2F7BJv8gsqxubGoaGhIEqvP5NRf15Y6HVlaUIhunChn%2FUEDe2ZCe2PeMxUvvTfvP6yDFxdOvMGaxIZMocZYhMEmsM0MDc3F4D3f8Kn3Et4p%2FcToRlfycfpDRarnquQFdtaWloex3SkHzly5C8o4914PsdS%2BSv9Ov6C5YAeCljzQoawvI7crNfXr%2F8IMADlMDTD%2BOWcSAAAAABJRU5ErkJggg%3D%3D); 37 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACoZJREFUeNqsV2lsHOUZfufYmZ09vF6vE3t9YSc%2ByEWC7YAhbuM0B04TBDVQEGrVVmqpKrUS%2FVOhohQKglYtUlWEkJBKKaWiqG4EciHFMU5iJ8RJnDhOiG878b3rY9d7H7Nz9PkWEgVIaaj4pLFmx%2FN97%2FM%2B7%2FMew9FNrkuXLlE6nSZJkigWi0mZTKbcNM0duC7g2UWn05nYtGkTfdnF%2Fa8Xzp07R3V1ddTf3y8lEonNePSwxWLZL8tyhdVqlTRN0wFoBoBadV3%2FW15e3qWNGzca%2FzeAy5cv05o1a7L3MGpVVfUujuO%2BI4riHhgstNlsImMBnmffYfdsJZNJikQiKkAOAczreP8tvOsDmJsDMDw8zKgleMenUqmd8Oandru9EUZzFUXhBUEgHEzxeJxC4XBSDIf1glTKEXe7TaWsTIUxGXsJewmg2VlJAOozDOP53Nzc9xGeG7LCHT58mHlRAEP7YORR3N%2BNS7HZ7MSMJpOJbOwjoXAyfapnpOTI0c7yo0eXp3fs%2BKGluHhtLJXWi%2Fv7nvU9%2BaQ1Vln17TxPXrliVXjT%2FNgeQBBYiYKh9xGuV8BcD2wlGhoaPgbQ1tbGA%2FGRqqqq7UBKPC9kvUilUxSPxZPxySsD7rffuVDd%2Fn7cHovp49%2FY%2FU3B41kdzWRExNsZzagkx2ILVkkSuODKIbO%2B7uTSAy37wMYOl8vl4MAxC5eqZigcDhlgZh5MvgdAr0Sj0fNcZ2cnzczMHKqurt6LDQQ1E5DS4uJiALH%2FSf22bbmLW2ofUSurbxNCQd%2BUy7VxtdPBZXSDVn19Oy0d7yYLQHNkUGA5EL5FtkYRxxCvZV4MPPUrN5x5TFGsFQgnj7Bmw7iyskJ9fX2DS0tLt4ulpaVMeCN4cS%2BjHHQRXqbCwkIPmHlz%2BN13jyy8%2FkZ9gVXO8WlOj1e0aKmMZklnNCPe8yEfRXhyRIsuioKQES22iMPuWlGUEj43b6tDsAnpdLgP4SiDKJm2siFhWsN9pqioyBCnp6cJQulDnE23O4%2Bbnp7S2ctut5vDJdpqavYUPPEL8rcfpmXfouENBS3Mk0gqZVolC%2BmgN20agoUTab6ySpAb7jZTeW5TlqXvWfiM5HbnZjNkdnY2G1oRQmW%2FccZlOKnxu3btYlq4AlSGqqaJF8Tx%2Bfn556empqKTk5O0sLBAHDaVP9BCVQ%2FezwVQbGYQIqdNEQqbmsglS5QsLSP%2FvfeRUVurO26touKi1Xyuyy5FIuGs4YmJCRobG8sg5umC1QXZMCDMH%2B3bt49EZh0pdAXoVN0wFF3Tch959dXfR5aX50489uP70zXVu7GRczgc5HK7%2Bdz77iVb4zZSURnHBwYovWcv5axfR4pVpjxds5CpUSAQycaZpezy8rKWCgaPb%2BnoeDPz4IMHjJqaMjw3AWCQ2c4C8Hq9S%2FA2oqZVxSTTGTOMcp345pqk2mjOLdAEGelEsVdmscvJySGEhiw7mihaX0cK5GdT5Kxwg8EArmBWRwgjrV7tpbWDw2Mbnv11v2gY69%2FascOZixoBADr0NnkNwJYtW9TR0VF%2FKLRSwPO8FCouKU4sB23Dp3tsLJtzdVNN798vRku8POLHMe8QPyopKSGwQwgX8zRLrSiCBE5UeY0TV1pb%2Bd6Z2TLUQj4tSaJZ6FUikSgTYQaOTDPbPPuTn5%2FPhDjCxKXrhhAW%2BMrKRf%2BEMxSat6fSEbsrx6l8eELQRyfMSDSBcptkqctSic6ePZu9Z16vhCJGntNNeZcnJfON19NXpqdTOYnYsa5%2FH35cVRRJk2WIfopCoVAYGRC4BuCTNchUCg1waat1rT2RTGzcUnt%2B%2FSOPZgxDNxfgtXzqJL92elZyGTxpqAPhcDibUqJFpvUVt1LRrI%2B7%2BPJLNNN1hKotltj3N2%2Be%2Fa5v%2FqOdO5so4PEgAUSBZQDqy0JFRYX6KQCgvh85aoIJ0vM8xUmrbD05NnLPePshD4yrbjKTFp6n%2BPmzFD7dky3PLO6Mdub9RO9pWj7XyxmCoOfo%2BpxfFPN7BgYq2woKW1pbWynmzHGrqsbFYnEGYHTz5s30KQCoz5dwkM4Oncz3eCpstheDydRyGgbKa26Vqx5%2BVDEguBV4EPL5yAADrOmwwsLSdWpxkeIQXpluCqvgwChK%2BclY1LwiCOcfeughcdZbqDCRQmdMoINX7YpXb%2BDREoynNC3jiLpc1a82NPyzdP0Gt%2FOOu2ju3Ta6cLCVgjjULVnJHoubYaSmmklnvQd7ZiwW5mLQUBKAI2qS1tgUKk0l47%2F0%2BU7h%2BI0Sz5d58j2oK36TOXuN%2Bas3Tz%2F9NGtKUUYp1F204cCBDTOjY7IPvSKCWIdjUV1CVyn2esmCJqZHY9dmArvdyW3w5FOpmjbjgmCkdI08NgfnyvM4nikrfeGVXbvenCwpWeVELUGIdQwzw58DgIrnhjqjLBNYTzgxNETnJMnsHxmijKaZu3%2F2OF9ZUMj5%2FD4aDiwhl2PssCyIRDJOgbkZdpjRqNi5Wxw5NIp60IZ4W2RZaNi7d51j%2B%2FZ8NB%2B2J4PxbuVzALA0xPICVGqyHG9sbCRhw7rEMxf7h94jbvHiX1%2FjfOEQiZFo2GmaGcEiZht%2BFoShp6LRSDIpCumgmuTOoK%2F8bm62fywVD6Lgm0PFxVnBsqzB%2BYmDBw%2FarxoVrgeAYjQL79fg0DJUR66pqUnCJCMf6u66ELcqq6RQWF93Z4OjsLhUiOD%2FKqhmqWtz5Ijr9%2By3aF3H9AlsXrgysbJ7ZGj479Fo7%2B27d1fV19fLLP3QY8jn802hdvwD9oK4zOsBZEBnAI1jENVNxsE1EIuIdJExlJZ%2BcPr0wFG%2F74PKeHxLJBzkUjVVpq5rHDuYrcnuY7Tin59XPuwe9AcCI1eam7WnnnvuW5h8HMxwT0%2BPOTIyMn%2FixInfsFENW%2BKfZYAtFSCW0cFG%2FX5%2FDL9vgybk6qoqfs%2BePV6wJ%2Fy598zCuKzEy0pLFEHgLaweQD%2FxaEd7omBiorfTZuu67YknmnY2N38NPUO6ePEiHTt2TIPho7h%2BGwgEDuNcVgXNGwHIMoFrGU1lDJvHMSHVZTKak80HtXW1hZVrK6V%2Ftb3TWVVVWYFh1cYYQBsfSHZ2dkw038P%2F4MCBH23dutWbQM%2FoOXmSuru7%2Fe3t7S%2BPj4%2B%2FDB30XKX%2BRhq4fjGBRbBhFhsvY75bCyYKPJ58DmO2cscdd1bDawEFRWIaAAvxoua9Jfe3tGxHk7FMXJ6g3jNnDMT6o46OjucR0rdx3giuxGcNCV8wsjOUcdSGeYhzEKEpQMzLoQu%2BoqIcmCQJdGanm9raWvf2pqZVmIK4k%2FD63LmziePHj7eeOnXqBThxDOf4mMhvZES4iY%2BXBITtx9w4AAXrALAJ1tF1RQp%2BAqC4uIRjxaqrq4vOnz8%2FjUH3DxDzawDdj%2F3h6yn%2F7BJv8gsqxubGoaGhIEqvP5NRf15Y6HVlaUIhunChn%2FUEDe2ZCe2PeMxUvvTfvP6yDFxdOvMGaxIZMocZYhMEmsM0MDc3F4D3f8Kn3Et4p%2FcToRlfycfpDRarnquQFdtaWloex3SkHzly5C8o4914PsdS%2BSv9Ov6C5YAeCljzQoawvI7crNfXr%2F8IMADlMDTD%2BOWcSAAAAABJRU5ErkJggg%3D%3D);
38 background-position: center center; 38 background-position: center center;
@@ -40,7 +40,7 @@
40 border: 1px solid rgba(0, 0, 0, 0); 40 border: 1px solid rgba(0, 0, 0, 0);
41 border-radius: 5px; 41 border-radius: 5px;
42 height: 50px; 42 height: 50px;
43 margin: 0 15px 5px; 43 margin: 0 auto 5px;
44 width: 50px; 44 width: 50px;
45} 45}
46.object-label { 46.object-label {
@@ -50,8 +50,7 @@
50} 50}
51 51
52.object-icon:hover { 52.object-icon:hover {
53 border: 1px solid rgba(0, 0, 0, 0.4); 53 background-color: rgba(0, 0, 0, 0.4);
54 box-shadow: 0 0 1px 1px #474747;
55} 54}
56 55
57.object-icon-component.object-icon { 56.object-icon-component.object-icon {
diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css
index 7f5de0b8..7ec31edf 100755
--- a/js/stage/binding-view.reel/binding-view.css
+++ b/js/stage/binding-view.reel/binding-view.css
@@ -5,6 +5,7 @@
5 </copyright> */ 5 </copyright> */
6 6
7.bindingView { 7.bindingView {
8 height: 100%;
8 position: absolute; 9 position: absolute;
9 width:100%; 10 width:100%;
10 z-index: 12; 11 z-index: 12;
@@ -22,4 +23,14 @@
22 height:100%; 23 height:100%;
23 position:absolute; 24 position:absolute;
24 z-index: 1; 25 z-index: 1;
26}
27
28.objects-tray-container {
29 bottom: 11px;
30 position: absolute;
31 width: 100%;
32 display: -webkit-box;
33 -webkit-box-orient: horizontal;
34 -webkit-box-pack: center;
35 -webkit-box-align: center;
25} \ No newline at end of file 36} \ No newline at end of file
diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html
index c7520132..5fb7affd 100755
--- a/js/stage/binding-view.reel/binding-view.html
+++ b/js/stage/binding-view.reel/binding-view.html
@@ -43,23 +43,10 @@
43 } 43 }
44 ] 44 ]
45 }, 45 },
46 "nonVisualRepeater": { 46 "objectsTray" : {
47 "prototype": "montage/ui/repetition.reel", 47 "prototype": "js/stage/objects-tray.reel",
48 "properties": {
49 "element": {"#": "nonVisualRepeater"}
50 },
51 "bindings": {
52 "objects": {"<-": "@owner.nonVisualComponents"}
53 }
54 },
55 "objectIcon": {
56 "prototype": "js/panels/objects/object.reel",
57 "properties": { 48 "properties": {
58 "element": {"#": "nonVisualComponent"} 49 "element": {"#": "objects-tray" }
59 },
60 "bindings": {
61 "sourceObject": {"<-": "@nonVisualRepeater.objectAtCurrentIteration"},
62 "identifier": {"<-": "@nonVisualRepeater.objectAtCurrentIteration.identifier"}
63 } 50 }
64 } 51 }
65 } 52 }
@@ -75,11 +62,11 @@
75 62
76 </div> 63 </div>
77 </div> 64 </div>
78 <div data-montage-id="nonVisualRepeater">
79 <div data-montage-id="nonVisualComponent">
80 65
81 </div> 66 <div class="objects-tray-container">
67 <div data-montage-id="objects-tray" ></div>
82 </div> 68 </div>
69
83 <canvas data-montage-id="bindingViewCanvas" class="bindingViewCanvas"></canvas> 70 <canvas data-montage-id="bindingViewCanvas" class="bindingViewCanvas"></canvas>
84 </section> 71 </section>
85 72
diff --git a/js/stage/objects-tray.reel/objects-tray.css b/js/stage/objects-tray.reel/objects-tray.css
new file mode 100644
index 00000000..422d6a8f
--- /dev/null
+++ b/js/stage/objects-tray.reel/objects-tray.css
@@ -0,0 +1,33 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
7/*
8
9<section data-montage-id="objects-panel" class="objects-panel">
10 <ul data-montage-id="list" class="objects-list">
11 <li data-montage-id="list-item" class="list-item"></li>
12 </ul>
13</section>
14
15*/
16
17.objects-list {
18 font-size: 11px;
19 margin: 10px 0 0 0;
20 padding: 0;
21 text-shadow: -1px -1px 0 #4D4D4D;
22}
23
24.objects-tray {
25 background-color: rgba(0,0,0,.6);
26 border-top-right-radius: 8px;
27 border-top-left-radius: 8px;
28 box-shadow: inset 0 0 3px #333;
29 padding: 0 10px 5px;
30 margin: 0 auto;
31 overflow: hidden;
32 -webkit-box-flex: 0;
33} \ No newline at end of file
diff --git a/js/stage/objects-tray.reel/objects-tray.html b/js/stage/objects-tray.reel/objects-tray.html
new file mode 100644
index 00000000..0fece3fe
--- /dev/null
+++ b/js/stage/objects-tray.reel/objects-tray.html
@@ -0,0 +1,58 @@
1<!DOCTYPE html>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html>
8<head>
9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 <link rel="stylesheet" type="text/css" href="objects-tray.css">
11
12 <script type="text/montage-serialization">
13 {
14 "owner": {
15 "prototype": "js/stage/objects-tray.reel",
16 "properties": {
17 "element": {"#": "objects-tray"}
18 }
19 },
20 "repetition" : {
21 "prototype": "montage/ui/repetition.reel",
22 "properties": {
23 "element": {"#": "list"},
24 "contentController": {"@": "arrayController"}
25 }
26 },
27 "arrayController": {
28 "prototype": "montage/ui/controller/array-controller",
29 "bindings": {
30 "content": {"<-": "@owner.objects"}