Switch to SVG icons (vuejs#538)

* Initial implementation + test on App tabs

* More SVG icons

* Tweak

* Add/Remove quick edit icons tweaks

* Moved to icons plugin

* Tooltip icons style tweaks

* Fix open-in-editor tooltip

Author: Guillaume Chau

package.json

@@ -45,6 +45,7 @@
     "launch-editor-middleware": "^2.1.0",
     "nightwatch": "^0.9.19",
     "nightwatch-helpers": "^1.2.0",
+    "raw-loader": "^0.5.1",
     "selenium-server": "2.52.0",
     "semver": "^5.4.1",
     "stylus": "^0.54.5",
@@ -59,6 +60,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",

src/devtools/App.vue

@@ -16,7 +16,7 @@
       v-tooltip="$t('App.components.tooltip')"
       @click="switchTab('components')"
     >
-      <i class="material-icons">device_hub</i>
+      <BaseIcon icon="device_hub"/>
       <span class="pane-name">Components</span>
     </a>
     <a
@@ -25,7 +25,7 @@
       v-tooltip="$t('App.vuex.tooltip')"
       @click="switchTab('vuex')"
     >
-      <i class="material-icons">restore</i>
+      <BaseIcon icon="restore"/>
       <span class="pane-name">Vuex</span>
     </a>
     <a
@@ -34,7 +34,7 @@
       v-tooltip="$t('App.events.tooltip')"
       @click="switchTab('events')"
     >
-      <i class="material-icons">grain</i>
+      <BaseIcon 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"
     >
-      <i class="material-icons" ref="refresh">refresh</i>
+      <BaseIcon ref="refresh" icon="refresh"/>
       <span class="pane-name">Refresh</span>
     </a>
     <span class="active-bar"></span>
@@ -113,7 +113,7 @@ export default {
       }
     },
     refresh () {
-      const refreshIcon = this.$refs.refresh
+      const refreshIcon = this.$refs.refresh.$el
       refreshIcon.style.animation = 'none'
 
       bridge.send('refresh')
@@ -211,20 +211,27 @@ export default {
   .dark &
     background-color $dark-background-color
 
+  .svg-icon
+    width 20px
+    height @width
+    margin-right 5px
+    >>> svg
+      fill @color
+      transition fill .35s ease
+
   &:hover
     color #555
+    .svg-icon >>> svg
+      fill @color
 
   &.active
     color $active-color
+    .svg-icon >>> svg
+      fill @color
 
   &:first-of-type
     margin-left auto
 
-  .material-icons
-    font-size 20px
-    margin-right 5px
-    color inherit
-
   .pane-name
     display none
 

src/devtools/components/ActionHeader.vue

@@ -32,17 +32,27 @@
   &-bracket
     color #ccc
 
+.svg-icon
+  width 16px
+  height @width
+  margin-right 0
+  @media (min-width: $wide)
+    margin-right 5px
+
 .button
   cursor pointer
   display flex
   align-items center
   justify-content center
   padding 0 10px
-  transition opacity 0.25s
+  transition opacity .25s, color .25s
   white-space nowrap
-  opacity 0.8
+  opacity .8
   overflow hidden
 
+  .svg-icon >>> svg
+    transition fill .25s
+
   &:first-of-type
     margin-left auto
 
@@ -51,6 +61,9 @@
     opacity 1
     color $active-color
 
+    .svg-icon >>> svg
+      fill @color
+
   &.disabled
     opacity 0.45
     cursor not-allowed
@@ -60,13 +73,6 @@
     @media (min-width: $wide)
       display inline
 
-.material-icons
-  font-size 16px
-  margin-right 0
-  color inherit
-  @media (min-width: $wide)
-    margin-right 5px
-
 .search
   display flex
   align-items center

src/devtools/components/DataField.vue

@@ -48,22 +48,25 @@
           @keydown.enter="submitEdit()"
         >
         <span class="actions">
-          <i
+          <BaseIcon
             v-if="!editValid"
-            class="icon-button material-icons warning"
+            class="icon-button warning"
             v-tooltip="editErrorMessage"
-          >warning</i>
+            icon="warning"
+          />
           <template v-else>
-            <i
-              class="icon-button material-icons"
+            <BaseIcon
+              class="icon-button medium"
+              icon="cancel"
               v-tooltip="$t('DataField.edit.cancel.tooltip')"
               @click="cancelEdit()"
-            >close</i>
-            <i
-              class="icon-button material-icons"
+            />
+            <BaseIcon
+              class="icon-button"
+              icon="save"
               v-tooltip="$t('DataField.edit.submit.tooltip')"
               @click="submitEdit()"
-            >done</i>
+            />
           </template>
         </span>
       </span>
@@ -76,33 +79,38 @@
           v-html="formattedValue"
         />
         <span class="actions">
-          <i
+          <BaseIcon
             v-if="isValueEditable"
-            class="edit-value icon-button material-icons"
+            class="edit-value icon-button"
+            icon="edit"
             v-tooltip="'Edit value'"
             @click="openEdit()"
-          >edit</i>
+          />
           <template v-if="quickEdits">
-            <i
+            <BaseIcon
               v-for="(info, index) of quickEdits"
               :key="index"
-              class="quick-edit icon-button material-icons"
+              class="quick-edit icon-button"
+              :class="info.class"
+              :icon="info.icon"
               v-tooltip="info.title || 'Quick edit'"
               @click="quickEdit(info, $event)"
-            >{{ info.icon }}</i>
+            />
           </template>
-          <i
+          <BaseIcon
             v-if="isSubfieldsEditable && !addingValue"
-            class="add-value icon-button material-icons"
+            class="add-value icon-button"
+            icon="add_circle"
             v-tooltip="'Add new value'"
             @click="addNewValue()"
-          >add_circle</i>
-          <i
+          />
+          <BaseIcon
             v-if="removable"
-            class="remove-field icon-button material-icons"
+            class="remove-field icon-button"
+            icon="delete"
             v-tooltip="'Remove value'"
             @click="removeField()"
-          >delete</i>
+          />
         </span>
       </template>
 
@@ -431,13 +439,14 @@ export default {
     top -1px
     .icon-button
       user-select none
-      font-size 14px
+      width 16px
+      height @width
       &:first-child
         margin-left 6px
       &:not(:last-child)
         margin-right 6px
-    .warning
-      color $orange
+    .warning >>> svg
+      fill $orange
   &:hover,
   &.editing
     .actions

src/devtools/global.styl

@@ -1,50 +1,36 @@
 @import "./variables"
 @import "./transitions"
 
-@font-face
-  font-family 'Material Icons'
-  font-style normal
-  font-weight 400
-  src url(./assets/MaterialIcons-Regular.woff2) format('woff2')
-
 @font-face
   font-family 'Roboto'
   font-style normal
   font-weight 400
   src local('Roboto'), local('Roboto-Regular'), url(./assets/Roboto-Regular.woff2) format('woff2')
 
-.material-icons
-  font-family 'Material Icons'
-  font-weight normal
-  font-style normal
-  font-size 22px
+.toggle-recording .svg-icon
+  svg
+    fill #999 !important
+  &.enabled
+    border-radius 50%
+    filter: drop-shadow(0 0 3px rgba(255, 0, 0, .4))
+    svg
+      fill red !important
+
+.svg-icon
   display inline-block
-  width 1em
-  height 1em
-  color #999
-  line-height 1
-  text-transform none
-  letter-spacing normal
-  word-wrap normal
-  white-space nowrap
-  direction ltr
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing antialiased
-  /* Support for Safari and Chrome. */
-  text-rendering optimizeLegibility
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing grayscale
+  width 22px
+  height @width
+  svg
+    width 100%
+    height 100%
+    fill #999
+  &.big
+    transform scale(1.3)
   &.medium
     transform scale(0.9)
   &.small
     transform scale(0.8)
 
-.toggle-recording .material-icons
-  color #999 !important
-  &.enabled
-    color red !important
-    text-shadow 0 0 3px rgba(255, 0, 0, .4)
-
 html, body
   margin 0
   padding 0
@@ -121,8 +107,8 @@ $arrow-color = #444
 
 .icon-button
   cursor pointer
-  &:hover
-    color $green
+  &:hover svg
+    fill $green
 
 .scroll
   position relative
@@ -142,9 +128,9 @@ $arrow-color = #444
     color $white
     border-radius 3px
     padding 5px 10px
-    .material-icons
-      font-size 16px
-      line-height @font-size
+    .svg-icon
+      width 16px
+      height @width
       position relative
       top 3px
   .tooltip-arrow
@@ -314,9 +300,9 @@ $arrow-color = #444
   font-family Menlo, Consolas, monospace
 
 .green
-  &,
-  .material-icons
-    color $green
+  color $green
+  .svg-icon svg
+    fill @color
 
 .grey
   &,
@@ -332,18 +318,19 @@ $arrow-color = #444
   background $white
   color $green
   font-size 12px
-  padding 4px 8px
+  padding 0px 8px 6px
   margin 0 2px
   border-radius 2px
   display inline-block
+  vertical-align baseline
   .dark &
     background $dark-background-color
   &,
   .tooltip .tooltip-inner &
-    .material-icons
-      color #444
-      vertical-align middle
-      position relative
-      top 0
-      .dark &
-        color #666
+    .svg-icon
+      top 4px
+      margin-right 4px
+      svg
+        fill #444
+        .dark &
+          fill #666

src/devtools/locales/en.js

@@ -44,6 +44,11 @@ export default {
       tooltip: '[[{{keys.ctrl}}]] + [[F]] Filter components by name'
     }
   },
+  ComponentInspector: {
+    openInEditor: {
+      tooltip: 'Open <mono><<insert_drive_file>>{{file}}</mono> in editor'
+    }
+  },
   EventsHistory: {
     filter: {
       tooltip: '[[{{keys.ctrl}}]] + [[F]] To filter on components, type <input><<search>> &lt;MyComponent&gt;</input> or just <input><<search>> &lt;mycomp</input>.'