OLD | NEW |
---|---|
(Empty) | |
1 <!-- | |
2 -- Copyright 2013 The Chromium Authors. All rights reserved. | |
3 -- Use of this source code is governed by a BSD-style license that can be | |
4 -- found in the LICENSE file. | |
5 --> | |
6 | |
7 <polymer-element name="kb-options-menu-item" attributes="layout label active" | |
8 on-pointerup="up" on-pointerover="over" on-pointerout="out"> | |
9 <template> | |
10 <style> | |
11 @host { | |
12 * { | |
13 -webkit-padding-end: 5px; | |
14 -webkit-padding-start: 5px; | |
15 color: #fff; | |
16 display: -webkit-box; | |
17 font-family: 'Open Sans', 'Noto Sans UI', sans-serif; | |
18 font-weight: 300; | |
19 height: 28px; | |
20 } | |
21 *.active { | |
22 background-color: #848490; | |
23 } | |
24 </style> | |
25 <span>{{label}}<span> | |
bshe
2013/10/28 15:20:20
</span> ?
kevers
2013/10/28 15:40:16
Done.
| |
26 </template> | |
27 <script> | |
28 Polymer('kb-options-menu-item', { | |
29 /** | |
30 * Layout to select on a key press. | |
31 */ | |
32 layout: null, | |
33 | |
34 up: function(event) { | |
35 if (this.layout == 'none') | |
36 hideKeyboard(); | |
37 else | |
bshe
2013/10/28 15:20:20
would it possible to dispatch an event instead of
kevers
2013/10/28 15:40:16
Done.
| |
38 keyboard.layout = this.layout; | |
39 this.hidden = true; | |
40 }, | |
41 | |
42 over: function(event) { | |
43 this.classList.add('active'); | |
44 }, | |
45 | |
46 out: function(event) { | |
47 this.classList.remove('active'); | |
48 }, | |
49 }); | |
50 </script> | |
51 </polymer> | |
52 | |
53 <polymer-element name="kb-options-menu"> | |
54 <template> | |
55 <style> | |
56 @host { | |
57 * { | |
58 -webkit-box-orient: vertical; | |
59 background-color: #3b3b3e; | |
60 border-radius: 2px; | |
61 display: -webkit-box; | |
62 left: 0; | |
63 position: absolute; | |
64 top: 0; | |
65 z-index: 1; | |
66 } | |
67 } | |
68 </style> | |
69 <!-- TODO(kevers): This is a temporary placeholder to enable testing | |
70 -- of layout switching. Deprecate once a decision is reached on | |
71 -- a more permanent solution for layout selection. --> | |
72 <kb-options-menu-item layout="system-qwerty" label="System QWERTY"> | |
73 </kb-options-menu-item> | |
74 <kb-options-menu-item layout="qwerty" label="QWERTY"> | |
75 </kb-options-menu-item> | |
76 <kb-options-menu-item layout="dvorak" label="Dvorak"> | |
77 </kb-options-menu-item> | |
78 <kb-options-menu-item layout="none" label="Hide keyboard"> | |
79 </kb-options-menu-item> | |
80 </template> | |
81 <script> | |
82 Polymer('kb-options-menu', {}); | |
83 </script> | |
84 </polymer> | |
85 | |
86 <polymer-element name="kb-keyboard-overlay" attributes="keyset" | |
87 on-pointerup="up"> | |
88 <template> | |
89 <style> | |
90 @host { | |
91 * { | |
92 background-color: rgba(0, 0, 0, 0.6); | |
93 bottom: 0; | |
94 left: 0; | |
95 position: absolute; | |
96 right: 0; | |
97 top: 0; | |
98 } | |
99 } | |
100 </style> | |
101 <!-- Insert popups here. --> | |
102 <kb-options-menu id="options" hidden></kb-options-menu> | |
103 </template> | |
104 <script> | |
105 Polymer('kb-keyboard-overlay', { | |
106 up: function() { | |
107 this.hidden = true; | |
108 } | |
109 }); | |
110 </script> | |
111 </polymer-element> | |
OLD | NEW |