From 578c4aa7a0bed3dc60f24b48586d29bbe3168169 Mon Sep 17 00:00:00 2001
From: John Ryan Camatog <john.ryan.camatog@gmail.com>
Date: Thu, 22 Jun 2017 00:10:25 +0800
Subject: [PATCH] Small fixes

- Fix md-icon-button not white on md-card-media-cover
- Allow custom md-ratio
- Fix cursor being a pointer when md-checkbox/md-radio is disabled
- Allow md-radio to be toggled even if id/name is not set
- Fix select all checkbox not updating when all md-table-row's are selected
---
 src/components/mdCard/mdCard.theme        |  9 +++++++++
 src/components/mdCard/mdCardMedia.vue     | 20 +++++++++++++++-----
 src/components/mdCheckbox/mdCheckbox.scss | 10 ++++++++--
 src/components/mdRadio/mdRadio.scss       | 10 ++++++++--
 src/components/mdRadio/mdRadio.vue        |  6 +++---
 src/components/mdTable/mdTableRow.vue     |  2 +-
 6 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/src/components/mdCard/mdCard.theme b/src/components/mdCard/mdCard.theme
index 862b024..e740090 100644
--- a/src/components/mdCard/mdCard.theme
+++ b/src/components/mdCard/mdCard.theme
@@ -89,6 +89,15 @@
           background-color: #{'BACKGROUND-CONTRAST-0.4'};
         }
       }
+
+      .md-card-header,
+      .md-card-actions {
+        .md-icon-button:not(.md-primary):not(.md-warn):not(.md-accent) {
+          .md-icon {
+            color: #fff;
+          }
+        }
+      }
     }
 
     .md-card-expand {
diff --git a/src/components/mdCard/mdCardMedia.vue b/src/components/mdCard/mdCardMedia.vue
index c5600ec..4d82321 100644
--- a/src/components/mdCard/mdCardMedia.vue
+++ b/src/components/mdCard/mdCardMedia.vue
@@ -14,11 +14,21 @@
     },
     computed: {
       classes() {
-        let classes = {
-          'md-16-9': this.mdRatio === '16:9' || this.mdRatio === '16/9',
-          'md-4-3': this.mdRatio === '4:3' || this.mdRatio === '4/3',
-          'md-1-1': this.mdRatio === '1:1' || this.mdRatio === '1/1'
-        };
+        let classes = {};
+
+        if (this.mdRatio) {
+          let ratio = [];
+
+          if (this.mdRatio.indexOf(':') !== -1) {
+            ratio = this.mdRatio.split(':');
+          } else if (this.mdRatio.indexOf('/') !== -1) {
+            ratio = this.mdRatio.split('/');
+          }
+
+          if (ratio.length === 2) {
+            classes['md-' + ratio[0] + '-' + ratio[1]] = true;
+          }
+        }
 
         if (this.mdMedium || this.mdBig) {
           classes = {
diff --git a/src/components/mdCheckbox/mdCheckbox.scss b/src/components/mdCheckbox/mdCheckbox.scss
index d9a0331..5918b24 100644
--- a/src/components/mdCheckbox/mdCheckbox.scss
+++ b/src/components/mdCheckbox/mdCheckbox.scss
@@ -8,7 +8,14 @@ $checkbox-touch-size: 48px;
   margin: 16px 8px 16px 0;
   display: inline-flex;
   position: relative;
-  cursor: pointer;
+
+  &:not(.md-disabled) {
+    cursor: pointer;
+
+    .md-checkbox-label {
+      cursor: pointer;
+    }
+  }
 
   .md-checkbox-container {
     width: $checkbox-size;
@@ -78,7 +85,6 @@ $checkbox-touch-size: 48px;
     height: $checkbox-size;
     padding-left: 8px;
     line-height: $checkbox-size;
-    cursor: pointer;
   }
 }
 
diff --git a/src/components/mdRadio/mdRadio.scss b/src/components/mdRadio/mdRadio.scss
index 81a369d..a1ed94b 100644
--- a/src/components/mdRadio/mdRadio.scss
+++ b/src/components/mdRadio/mdRadio.scss
@@ -8,7 +8,14 @@ $radio-touch-size: 48px;
   margin: 16px 8px 16px 0;
   display: inline-flex;
   position: relative;
-  cursor: pointer;
+  
+  &:not(.md-disabled) {
+    cursor: pointer;
+
+    .md-radio-label {
+      cursor: pointer;
+    }
+  }
 
   .md-radio-container {
     width: $radio-size;
@@ -71,7 +78,6 @@ $radio-touch-size: 48px;
     height: $radio-size;
     padding-left: 8px;
     line-height: $radio-size;
-    cursor: pointer;
   }
 }
 
diff --git a/src/components/mdRadio/mdRadio.vue b/src/components/mdRadio/mdRadio.vue
index abb9b68..4d6e083 100644
--- a/src/components/mdRadio/mdRadio.vue
+++ b/src/components/mdRadio/mdRadio.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="md-radio" :class="[themeClass, classes]">
-    <div class="md-radio-container" @click="toggleCheck">
-      <input type="radio" :name="name" :id="id" :disabled="disabled" :value="value" @click="toggleCheck">
+    <div class="md-radio-container" @click.stop="toggleCheck">
+      <input type="radio" :name="name" :id="id" :disabled="disabled" :value="value">
       <md-ink-ripple :md-disabled="disabled" />
     </div>
 
-    <label :for="id || name" class="md-radio-label" v-if="$slots.default">
+    <label :for="id || name" class="md-radio-label" v-if="$slots.default" @click="toggleCheck">
       <slot></slot>
     </label>
   </div>
diff --git a/src/components/mdTable/mdTableRow.vue b/src/components/mdTable/mdTableRow.vue
index 346b98e..f5effce 100644
--- a/src/components/mdTable/mdTableRow.vue
+++ b/src/components/mdTable/mdTableRow.vue
@@ -65,7 +65,7 @@
       },
       handleSingleSelection(value) {
         this.parentTable.setRowSelection(value, this.mdItem);
-        this.parentTable.$children[0].checkbox = this.parentTable.numberOfSelected === this.parentTable.rowsCounter;
+        this.parentTable.$children[0].checkbox = this.parentTable.numberOfSelected === this.parentTable.numberOfRows;
       },
       handleMultipleSelection(value) {
         if (this.parentTable.numberOfRows > 25) {