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> 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 38 this.fire('set-layout', {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> 112