Icon updates

Author: rstoenescu

dev/components/form/checkbox.vue

@@ -11,7 +11,10 @@
       <q-checkbox v-model="checked" checked-icon="sentiment very satisfied" unchecked-icon="sentiment very dissatisfied" :dark="dark" :keep-color="keepColor" />
       <q-checkbox v-model="checked" checked-icon="visibility" unchecked-icon="visibility_off" style="margin-left: 50px" :dark="dark" :keep-color="keepColor" />
 
-      <br><br>
+      <p class="caption">Indeterminate</p>
+      <q-checkbox v-model="indModel" :indeterminate="indeterminate" :dark="dark" :keep-color="keepColor" />
+
+      <p class="caption">Tests</p>
       <q-checkbox @change="onChange" @input="onInput" v-model="checked" :dark="dark" :keep-color="keepColor" />
       <br><br>
       <q-checkbox v-model="checked" label="Label" :dark="dark" :keep-color="keepColor" />
@@ -129,7 +132,9 @@ export default {
       group: ['op2'],
       selection: ['one', 'two', 'three'],
       dark: false,
-      keepColor: false
+      keepColor: false,
+      indModel: false,
+      indeterminate: true
     }
   },
   watch: {

icons/fontawesome.js

@@ -33,15 +33,15 @@ export default {
   },
   checkbox: { // TODO
     checked: {
-      ios: 'fa-check-circle',
+      ios: 'fas fa-check-circle',
       mat: 'fas fa-check-square'
     },
     unchecked: {
-      ios: 'fa-circle far',
+      ios: 'far fa-circle',
       mat: 'far fa-square'
     },
     indeterminate: {
-      ios: '',
+      ios: 'fas fa-minus-circle',
       mat: 'fas fa-minus-square'
     }
   },
@@ -105,12 +105,12 @@ export default {
     last: 'fas fa-step-forward'
   },
   radio: {
-    checked: { // TODO
-      ios: 'fa-check',
+    checked: {
+      ios: 'fas fa-check',
       mat: 'fas fa-check-circle'
     },
     unchecked: {
-      ios: 'fa-circle-o',
+      ios: '',
       mat: 'far fa-circle'
     }
   },

icons/ionicons.js

@@ -41,7 +41,7 @@ export default {
       mat: 'ion-android-checkbox-outline-blank'
     },
     indeterminate: {
-      ios: '',
+      ios: 'ion-ios-minus-outline',
       mat: 'ion-android-checkbox-blank'
     }
   },
@@ -106,11 +106,11 @@ export default {
   },
   radio: {
     checked: {
-      ios: 'ion-ios-checkmark-empty',
+      ios: 'ion-android-done',
       mat: 'ion-android-radio-button-on'
     },
     unchecked: {
-      ios: 'ion-ios-circle-outline',
+      ios: '',
       mat: 'ion-android-radio-button-off'
     }
   },

icons/material.js

@@ -41,7 +41,7 @@ export default {
       mat: 'check_box_outline_blank'
     },
     indeterminate: {
-      ios: '',
+      ios: 'remove_circle_outline',
       mat: 'indeterminate_check_box'
     }
   },
@@ -110,7 +110,7 @@ export default {
       mat: 'radio_button_checked'
     },
     unchecked: {
-      ios: 'radio_button_unchecked',
+      ios: '',
       mat: 'radio_button_unchecked'
     }
   },

icons/mdi.js

@@ -41,7 +41,7 @@ export default {
       mat: 'mdi-checkbox-blank-outline'
     },
     indeterminate: {
-      ios: '',
+      ios: 'mdi-minus-circle-outline',
       mat: 'mdi-minus-box'
     }
   },
@@ -110,7 +110,7 @@ export default {
       mat: 'mdi-radiobox-marked'
     },
     unchecked: {
-      ios: 'mdi-radio-button-unchecked',
+      ios: '',
       mat: 'mdi-radiobox-blank'
     }
   },

package.json

@@ -104,7 +104,7 @@
     "webpack-merge": "^4.1.0"
   },
   "peerDependencies": {
-    "quasar-extras": "^1.0.0",
+    "quasar-extras": "^1.0.1",
     "vue": "^2.5.0"
   }
 }

src/components/icon/QIcon.js

@@ -21,7 +21,12 @@ export default {
     if (!icon) {
       name = ''
     }
+    else if (icon.startsWith('fa-')) {
+      // Fontawesome 4
+      name = `fa ${icon}`
+    }
     else if (/^fa[s|r|l|b]{0,1} /.test(icon)) {
+      // Fontawesome 5
       name = icon
     }
     else if (icon.startsWith('bt-')) {