feat(settings): new tags

Author: Guillaume Chau

src/devtools/App.vue

@@ -130,8 +130,10 @@
           <VueGroupButton
             v-tooltip="$t('App.settings.tooltip')"
             :class="{
-              'icon-button': !$responsive.wide
+              'icon-button': !$responsive.wide,
+              info: hasNewSettings
             }"
+            :tag="hasNewSettings ? 'new' : null"
             value="settings"
             icon-left="settings_applications"
             class="settings-tab flat"
@@ -164,8 +166,8 @@
 import { SPECIAL_TOKENS } from '../util'
 import Keyboard from './mixins/keyboard'
 import GroupDropdown from 'components/GroupDropdown.vue'
-
 import { mapState } from 'vuex'
+import { SETTINGS_VERSION_ID, SETTINGS_VERSION } from './views/settings/SettingsTab.vue'
 
 export default {
   name: 'App',
@@ -222,7 +224,8 @@ export default {
       routingTabs: [
         { name: 'router', label: 'History', icon: 'directions' },
         { name: 'routes', label: 'Routes', icon: 'book' }
-      ]
+      ],
+      settingsVersion: parseInt(localStorage.getItem(SETTINGS_VERSION_ID))
     }
   },
 
@@ -241,7 +244,18 @@ export default {
       get () { return this.$route.matched[0].name },
       set (value) {
         this.$router.push({ name: value })
+
+        this.$nextTick(() => {
+          if (value === 'settings') {
+            this.settingsVersion = SETTINGS_VERSION
+            localStorage.setItem(SETTINGS_VERSION_ID, SETTINGS_VERSION)
+          }
+        })
       }
+    },
+
+    hasNewSettings () {
+      return this.settingsVersion !== SETTINGS_VERSION
     }
   },
 

src/devtools/views/settings/GlobalPreferences.vue

@@ -77,9 +77,11 @@
       </VueSwitch>
     </VueFormField>
 
-    <VueFormField
-      title="New Vuex backend"
-    >
+    <VueFormField>
+      <template #title>
+        New Vuex backend
+        <NewTag :version="1" />
+      </template>
       <VueSwitch v-model="$shared.vuexNewBackend">
         Enable
       </VueSwitch>
@@ -104,3 +106,13 @@
     </VueFormField>
   </div>
 </template>
+
+<script>
+import NewTag from './NewTag.vue'
+
+export default {
+  components: {
+    NewTag
+  }
+}
+</script>

src/devtools/views/settings/NewTag.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    v-if="version > currentSettingsVersion"
+    class="new-tag"
+  >
+    New
+  </div>
+</template>
+
+<script>
+export default {
+  inject: [
+    'currentSettingsVersion'
+  ],
+
+  props: {
+    version: {
+      type: Number,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.new-tag
+  display inline-block
+  background $vue-ui-color-info
+  color $vue-ui-color-light
+  font-size 9px
+  font-weight bold
+  text-transform uppercase
+  padding 1px 3px
+  border-radius $br
+</style>

src/devtools/views/settings/SettingsTab.vue

@@ -8,9 +8,19 @@
 import GlobalPreferences from './GlobalPreferences.vue'
 import { mapState } from 'vuex'
 
+export const SETTINGS_VERSION = 1
+export const SETTINGS_VERSION_ID = 'vue-devtools-settings-version'
+
 export default {
   components: { GlobalPreferences },
 
+  provide () {
+    return {
+      settingsVersion: SETTINGS_VERSION,
+      currentSettingsVersion: parseInt(localStorage.getItem(SETTINGS_VERSION_ID)) || 0
+    }
+  },
+
   computed: mapState('events', [
     'enabled'
   ])