fix(): Styles & point length

bytelovers · Dec 16, 2016 · 2b43050 · 2b43050
1 parent e6e91db
commit 2b43050
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 33 deletions.
diff --git a/key-pad-key-styles.html b/key-pad-key-styles.html
@@ -5,17 +5,6 @@
 
             }
 
-            .key-pad-key__keyNum {
-                flex: 1 0 33.3%;
-                @apply(--layout);
-                @apply(--layout-center-justified);
-            }
-
-            .key-pad-key__keyNum:nth-of-type(10) {
-                flex-basis: 66.6%;
-                @apply(--layout-end-justified);
-            }
-
             .key-pad-key__keyNum-content {
                 border: 1px solid #CCC;
                 border-radius: 50%;
@@ -24,14 +13,12 @@
                 width: 75px;
                 @apply(--layout;
                 @apply(--layout-center-center);
+                @apply(--key-pad-key-keynum-content);
             }
-/*                .key-pad-key__keyNum:nth-of-type(10) .key-pad-key__keyNum-content {
-                    margin-right: 20px;
-                }
-*/
+
                 .key-pad-key__keyNum-content:hover {
                     cursor: pointer;
-                    background-color: #CCC;
+                    @apply(--key-pad-key-keynum-content);
                 }
         </style>
     </template>

diff --git a/key-pad-key.html b/key-pad-key.html
@@ -12,7 +12,7 @@
 <dom-module id="key-pad-key">
     <style include="key-pad-key-styles key-pad-key-animations"></style>
     <template>
-        <div class$="key-pad-key__keyNum key-pad-key__[[ label ]]"
+        <div class$="[[ _computeClassKeypadKey() ]]"
              on-tap="_onTapKey">
             <div class="key-pad-key__keyNum-content">
                 <span>[[ label ]]</span>

diff --git a/key-pad-key.js b/key-pad-key.js
@@ -19,6 +19,10 @@ Polymer({
         this.updateStyles();
     },
 
+    _computeClassKeypadKey: function() {
+        return 'key-pad-key__keyNum key-pad-key__' + this.label;
+    },
+
     _onTapKey: function(evt) {
         this.fire('key-pad-key:key', this.key);
         console.log('key-pad-key:key', this.key);

diff --git a/key-pad-styles.html b/key-pad-styles.html
@@ -32,9 +32,21 @@
             }
 
             .key-pad__keyNums {
+                font-size: 16px;
                 @apply(--layout);
                 @apply(--layout-wrap);
+                @apply(--key-pad-nums);
             }
+
+                .key-pad__keyNums > *:not(template) {
+                    flex: 1 0 33.3%;
+                    @apply(--layout);
+                    @apply(--layout-center-justified);
+                }
+
+                .key-pad__keyNums >*:nth-child(10) {
+                    flex-basis: 66.6%;
+                }
         </style>
     </template>
 </dom-module>

diff --git a/key-pad.html b/key-pad.html
@@ -20,8 +20,8 @@
 
             <header class="key-pad__containerPoints">
                 <div class="key-pad__points">
-                    <template is="dom-repeat" items="{{ _getInputLength(maxLength) }}">
-                        <div class="key-pad__point key-pad__point--[[index + 1]]"></div>
+                    <template is="dom-repeat" items="[[ _getInputLength(maxLength) ]]">
+                        <div class$="[[ _computeClassKeypadPoint(index) ]]"></div>
                     </template>
 
                     <!-- <div class="key-pad__point key-pad__point--selected key-pad__point--1"></div> -->

diff --git a/key-pad.js b/key-pad.js
@@ -66,11 +66,6 @@ Polymer({
             type: Boolean
         },
 
-        _keyLength: {
-            type: Number,
-            value: 0
-        },
-
         _keypadNums: {
             type: Array
         }
@@ -84,17 +79,10 @@ Polymer({
     attached: function() {
         var shuffle = !!this.shuffle ? false : true;
         this.set('_keypadNums', this._getRandomNumbers(shuffle));
-
-
-    },
-
-    destroy: function() {
-        this.unlisten(keys, 'key-pad-key:key');
     },
 
     reset: function() {
         this._setModel('');
-        this.set('_keyLength', 0);
     },
 
     _getInputLength: function() {
@@ -107,14 +95,19 @@ Polymer({
 
     },
 
+    // Compute clases
+    _computeClassKeypadPoint: function(index) {
+        var idx = index + 1;
+        return 'key-pad__point key-pad__point--' + idx.toString();
+    },
+
     ////// EVENTS
     _onKeypadKey: function(evt, detail) {
         //TODO: Check characters
         var keyValue = detail.toString();
 
-        if (this._keyLength < this.maxLength) {
+        if (this.model.length < this.maxLength) {
             this._setModel(this.model + keyValue);
-            this._keyLength++;
         }
     },