Home | History | Annotate | Download | only in elements 
      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