Upstream version 5.34.104.0

[platform/framework/web/crosswalk.git] / src / ui / keyboard / resources / elements / kb-key.html

diff --git a/src/ui/keyboard/resources/elements/kb-key.html b/src/ui/keyboard/resources/elements/kb-key.html
index 7175c95..a49b91e 100644 (file)
--- a/src/ui/keyboard/resources/elements/kb-key.html
+++ b/src/ui/keyboard/resources/elements/kb-key.html
@@ -5,7 +5,7 @@
   -->
 
 <polymer-element name="kb-key" extends="kb-key-base"
-    attributes="image imageSize keyCode keyName shiftModifier weight">
+    attributes="image keyCode keyName shiftModifier stretch weight">
   <template>
     <style>
       :host {
@@ -14,20 +14,19 @@
          * "-webkit-box-flex: {{weight}}" once the regression is fixed
          * (https://github.com/Polymer/polymer/issues/270). */
         background-color: #3b3b3e;
-        /* TODO(rsadam): remove when {{}} regression is fixed */
-        background-image: none;
-        background-position: center center;
-        background-repeat: no-repeat;
-        /* TODO(rsadam): remove when {{}} regression is fixed */
-        background-size: 50%;
-        border-top: 2px solid #4b4b4e;
         border-radius: 2px;
+        border-style: solid;
+        border-width: 1px 0px;
         color: #ffffff;
-        font-family: 'Open Sans', 'Noto Sans UI', sans-serif;
+        font-family: roboto-bold;
         font-weight: 300;
       }
 
       ::part(key) {
+        background-image: none;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
         bottom: 0;
         height: 1.2em;
         left: 0;
@@ -39,8 +38,13 @@
         top: 0;
       }
 
+      :host[image]::part(key) {
+        height: 2em;
+        width: 1em;
+      }
+
       ::part(hint) {
-        color: #7c7c7c;
+        color: #313131;
         font-size: 70%;
         position: absolute;
         right: 7%;
@@ -48,7 +52,7 @@
       }
 
       :host[invert] ::part(key) {
-        color: #7c7c7c;
+        color: #313131;
       }
 
       :host[invert] ::part(hint) {
@@ -98,6 +102,12 @@
        * @type {boolean}
        */
       shiftModifier: false,
+
+      /**
+       * Whether the key can be stretched to accomodate pixel rounding errors.
+       */
+      stretch: false,
+
       /**
        * Weighting to use for layout in order to properly size the key.
        * Keys with a high weighting are wider than normal keys.
@@ -112,18 +122,9 @@
        */
       imageChanged: function() {
         if (!this.image)
-          this.style.backgroundImage = "none";
+          this.$.key.style.backgroundImage = "none";
         else
-          this.style.backgroundImage = "url(images/" + this.image + ".svg)";
-      },
-
-      /**
-       * Called when the image attribute changes. This is used to set the
-       * background image of the key.
-       * TODO(rsadam): Remove when polymer {{}} syntax regression is fixed.
-       */
-      imageSizeChanged: function() {
-        this.style.backgroundSize = this.imageSize;
+          this.$.key.style.backgroundImage = "url(images/" + this.image + ".svg)";
       },
 
       /**
@@ -164,44 +165,17 @@
 </polymer-element>
 
 <polymer-element name="kb-hide-keyboard-key" class="hide-keyboard dark"
-    char="Invalid" extends="kb-key">
+    align="right" char="Invalid" extends="kb-key">
   <script>
     Polymer('kb-hide-keyboard-key', {
-      /**
-       * Timer for a long press event which triggers the display of a keyboard
-       * options menu.
-       * @type {?Function}
-       */
-      longPressTimer: undefined,
-
-      down: function(event) {
-         this.longPressTimer = this.async(function() {
-           if (this.longPressTimer) {
-             clearTimeout(this.longPressTimer);
-             this.longPressTimer = undefined;
-             var details = {
-               left: this.offsetLeft,
-               top: this.offsetTop,
-               width: this.clientWidth,
-             };
-             this.fire('show-options', details);
-           }
-         }, null, LONGPRESS_DELAY_MSEC);
-      },
-
-      /** @override */
-      ready: function() {
-        this.super();
-        this.image = "keyboard";
-      },
-
       up: function(event) {
-        if (this.longPressTimer) {
-          clearTimeout(this.longPressTimer);
-          hideKeyboard();
-          this.longPressTimer = undefined;
-        }
-      }
+        var details = {
+          left: this.offsetLeft,
+          top: this.offsetTop,
+          width: this.clientWidth,
+        };
+        this.fire('show-options', details);
+      },
     });
   </script>
 </polymer-element>