chore: install @vue/ui and migrate icons

Author: Guillaume Chau

package.json

@@ -56,12 +56,11 @@
     "webpack-merge": "^4.1.2"
   },
   "dependencies": {
+    "@vue/ui": "^0.4.7",
     "circular-json-es6": "^2.0.1",
     "lodash.debounce": "^4.0.8",
     "lodash.groupby": "^4.6.0",
-    "material-design-icons": "^3.0.1",
     "uglifyjs-webpack-plugin": "^1.1.4",
-    "v-tooltip": "^2.0.0-rc.25",
     "vue": "^2.5.13",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"

src/devtools/App.vue

@@ -16,7 +16,7 @@
       v-tooltip="$t('App.components.tooltip')"
       @click="switchTab('components')"
     >
-      <BaseIcon icon="device_hub"/>
+      <VueIcon icon="device_hub"/>
       <span class="pane-name">Components</span>
     </a>
     <a
@@ -25,7 +25,7 @@
       v-tooltip="$t('App.vuex.tooltip')"
       @click="switchTab('vuex')"
     >
-      <BaseIcon icon="restore"/>
+      <VueIcon icon="restore"/>
       <span class="pane-name">Vuex</span>
     </a>
     <a
@@ -34,7 +34,7 @@
       v-tooltip="$t('App.events.tooltip')"
       @click="switchTab('events')"
     >
-      <BaseIcon icon="grain"/>
+      <VueIcon icon="grain"/>
       <span class="pane-name">Events</span>
       <span class="event-count" v-if="newEventCount > 0">{{ newEventCount }}</span>
     </a>
@@ -43,7 +43,7 @@
       v-tooltip="$t('App.refresh.tooltip')"
       @click="refresh"
     >
-      <BaseIcon ref="refresh" icon="refresh"/>
+      <VueIcon ref="refresh" icon="refresh"/>
       <span class="pane-name">Refresh</span>
     </a>
     <span class="active-bar"></span>
@@ -211,7 +211,7 @@ export default {
   .dark &
     background-color $dark-background-color
 
-  .svg-icon
+  .vue-ui-icon
     width 20px
     height @width
     margin-right 5px
@@ -221,12 +221,12 @@ export default {
 
   &:hover
     color #555
-    .svg-icon >>> svg
+    .vue-ui-icon >>> svg
       fill @color
 
   &.active
     color $active-color
-    .svg-icon >>> svg
+    .vue-ui-icon >>> svg
       fill @color
 
   &:first-of-type

src/devtools/components/ActionHeader.vue

@@ -32,7 +32,7 @@
   &-bracket
     color #ccc
 
-.svg-icon
+.vue-ui-icon
   width 16px
   height @width
   margin-right 0
@@ -50,7 +50,7 @@
   opacity .8
   overflow hidden
 
-  .svg-icon >>> svg
+  .vue-ui-icon >>> svg
     transition fill .25s
 
   &:first-of-type
@@ -61,7 +61,7 @@
     opacity 1
     color $active-color
 
-    .svg-icon >>> svg
+    .vue-ui-icon >>> svg
       fill @color
 
   &.disabled

src/devtools/components/DataField.vue

@@ -48,20 +48,20 @@
           @keydown.enter="submitEdit()"
         >
         <span class="actions">
-          <BaseIcon
+          <VueIcon
             v-if="!editValid"
             class="icon-button warning"
             v-tooltip="editErrorMessage"
             icon="warning"
           />
           <template v-else>
-            <BaseIcon
+            <VueIcon
               class="icon-button medium"
               icon="cancel"
               v-tooltip="$t('DataField.edit.cancel.tooltip')"
               @click="cancelEdit()"
             />
-            <BaseIcon
+            <VueIcon
               class="icon-button"
               icon="save"
               v-tooltip="$t('DataField.edit.submit.tooltip')"
@@ -79,15 +79,15 @@
           v-html="formattedValue"
         />
         <span class="actions">
-          <BaseIcon
+          <VueIcon
             v-if="isValueEditable"
             class="edit-value icon-button"
             icon="edit"
             v-tooltip="'Edit value'"
             @click="openEdit()"
           />
           <template v-if="quickEdits">
-            <BaseIcon
+            <VueIcon
               v-for="(info, index) of quickEdits"
               :key="index"
               class="quick-edit icon-button"
@@ -97,14 +97,14 @@
               @click="quickEdit(info, $event)"
             />
           </template>
-          <BaseIcon
+          <VueIcon
             v-if="isSubfieldsEditable && !addingValue"
             class="add-value icon-button"
             icon="add_circle"
             v-tooltip="'Add new value'"
             @click="addNewValue()"
           />
-          <BaseIcon
+          <VueIcon
             v-if="removable"
             class="remove-field icon-button"
             icon="delete"

src/devtools/global.styl

@@ -7,7 +7,7 @@
   font-weight 400
   src local('Roboto'), local('Roboto-Regular'), url(./assets/Roboto-Regular.woff2) format('woff2')
 
-.toggle-recording .svg-icon
+.toggle-recording .vue-ui-icon
   svg
     fill #999 !important
   &.enabled
@@ -16,7 +16,7 @@
     svg
       fill red !important
 
-.svg-icon
+.vue-ui-icon
   display inline-block
   width 22px
   height @width
@@ -129,7 +129,7 @@ $arrow-color = #444
     color $white
     border-radius 3px
     padding 5px 10px
-    .svg-icon
+    .vue-ui-icon
       width 16px
       height @width
       position relative
@@ -302,7 +302,7 @@ $arrow-color = #444
 
 .green
   color $green
-  .svg-icon svg
+  .vue-ui-icon svg
     fill @color
 
 .grey
@@ -328,7 +328,7 @@ $arrow-color = #444
     background $dark-background-color
   &,
   .tooltip .tooltip-inner &
-    .svg-icon
+    .vue-ui-icon
       top 4px
       margin-right 4px
       svg

src/devtools/plugins.js

@@ -1,21 +1,10 @@
 import Vue from 'vue'
+import VueUi, { generateHtmlIcon } from '@vue/ui'
 import { keys } from './env'
-import VTooltip from 'v-tooltip'
 import VI18n from './plugins/i18n'
 import GlobalRefs from './plugins/global-refs'
-import Icons, { generateHtmlIcon } from './plugins/icons'
 
-Vue.use(VTooltip, {
-  defaultDelay: {
-    show: 600,
-    hide: 0
-  },
-  defaultOffset: 2,
-  defaultBoundariesElement: document.body,
-  popover: {
-    defaultHandleResize: false
-  }
-})
+Vue.use(VueUi)
 
 const currentLocale = 'en'
 const locales = require.context('./locales')
@@ -45,5 +34,3 @@ Vue.use(GlobalRefs, {
     rightScroll: () => document.querySelector('.right .scroll')
   }
 })
-
-Vue.use(Icons)

src/devtools/plugins/icons.js

@@ -7,7 +7,7 @@
         <span class="title-bracket">&gt;</span>
       </span>
       <div class="search">
-        <BaseIcon icon="search"/>
+        <VueIcon icon="search"/>
         <input placeholder="Filter inspected data" v-model.trim="filter">
       </div>
       <a
@@ -16,7 +16,7 @@
         v-tooltip="'Inspect DOM'"
         @click="inspectDOM"
       >
-        <BaseIcon icon="code"/>
+        <VueIcon icon="code"/>
         <span>Inspect DOM</span>
       </a>
       <a
@@ -25,7 +25,7 @@
         v-tooltip="target.file && $t('ComponentInspector.openInEditor.tooltip', { file: target.file })"
         @click="openInEditor"
       >
-        <BaseIcon icon="launch"/>
+        <VueIcon icon="launch"/>
         <span>Open in editor</span>
       </a>
     </action-header>

src/devtools/views/components/ComponentInspector.vue

@@ -49,7 +49,7 @@
         inactive
       </span>
       <span class="spacer"></span>
-      <BaseIcon
+      <VueIcon
         class="icon-button"
         icon="visibility"
         v-tooltip="'Scroll into view'"

src/devtools/views/components/ComponentInstance.vue

@@ -5,7 +5,7 @@
         class="search"
         v-tooltip="$t('ComponentTree.filter.tooltip')"
       >
-        <BaseIcon icon="search"/>
+        <VueIcon icon="search"/>
         <input
           ref="filterInstances"
           placeholder="Filter components"
@@ -18,15 +18,15 @@
         v-tooltip="$t('ComponentTree.select.tooltip')"
         @click="setSelecting(!selecting)"
       >
-        <BaseIcon :icon="selecting ? 'gps_fixed' : 'gps_not_fixed'"/>
+        <VueIcon :icon="selecting ? 'gps_fixed' : 'gps_not_fixed'"/>
         <span>Select</span>
       </a>
       <a class="button classify-names"
          :class="{ active: classifyComponents }"
          v-tooltip="'Format component names'"
          @click="toggleClassifyComponents"
       >
-        <BaseIcon icon="text_fields"/>
+        <VueIcon icon="text_fields"/>
         <span>Format</span>
       </a>
     </action-header>
@@ -209,6 +209,6 @@ function findByIndex (all, index) {
 .select-component
   &.active
     color $active-color
-    .svg-icon
+    .vue-ui-icon
       animation pulse 2s infinite linear
 </style>