From 56a34f0976087cc19409717b478a0812dbc702c4 Mon Sep 17 00:00:00 2001
From: Rahul Kadyan <hi@znck.me>
Date: Mon, 30 Jul 2018 16:54:08 +0200
Subject: [PATCH 1/3] feat: Add settings tab

---
 src/devtools/App.vue                          | 14 +++++++++
 src/devtools/index.js                         | 13 ++++----
 src/devtools/locales/en.js                    |  3 ++
 src/devtools/router.js                        |  6 ++++
 .../views/settings/GlobalPreferences.vue      | 30 +++++++++++++++++++
 src/devtools/views/settings/SettingsTab.vue   | 18 +++++++++++
 src/shared-data.js                            |  3 +-
 7 files changed, 81 insertions(+), 6 deletions(-)
 create mode 100644 src/devtools/views/settings/GlobalPreferences.vue
 create mode 100644 src/devtools/views/settings/SettingsTab.vue

diff --git a/src/devtools/App.vue b/src/devtools/App.vue
index cbda24706..3eaab3370 100644
--- a/src/devtools/App.vue
+++ b/src/devtools/App.vue
@@ -79,6 +79,17 @@
           >
             Events
           </VueGroupButton>
+          <VueGroupButton
+            v-tooltip="$t('App.settings.tooltip')"
+            :class="{
+              'icon-button': !$responsive.wide
+            }"
+            value="settings"
+            icon-left="settings"
+            class="settings-tab flat big-tag"
+          >
+            Settings
+          </VueGroupButton>
         </VueGroup>
 
         <VueButton
@@ -138,6 +149,9 @@ export default {
             } else if (code === 'Digit3') {
               this.$router.push({ name: 'events' })
               return false
+            } else if (code === 'Digit4') {
+              this.$router.push({ name: 'settings' })
+              return false
             } else if (key === 'p' || code === 'KeyP') {
               // Prevent chrome devtools from opening the print modal
               return false
diff --git a/src/devtools/index.js b/src/devtools/index.js
index a064f0b71..97b0fb693 100644
--- a/src/devtools/index.js
+++ b/src/devtools/index.js
@@ -13,8 +13,8 @@ import storage from './storage'
 let panelShown = !isChrome
 let pendingAction = null
 
-const isDark = isChrome ? chrome.devtools.panels.themeName === 'dark' : false
 const isBeta = process.env.CHANNEL === 'beta'
+const chromeTheme = isChrome ? chrome.devtools.panels.themeName : undefined
 
 // Capture and log devtool errors when running as actual extension
 // so that we can debug it by inspecting the background page.
@@ -159,16 +159,19 @@ function initApp (shell) {
       extends: App,
       router,
       store,
-
       data: {
-        isDark,
         isBeta
       },
+      computed: {
+        theme () {
+          return this.$shared.theme
+        }
+      },
 
       watch: {
-        isDark: {
+        theme: {
           handler (value) {
-            if (value) {
+            if (value === 'dark' || (value === 'auto' && chromeTheme === 'dark')) {
               document.body.classList.add('vue-ui-dark-mode')
             } else {
               document.body.classList.remove('vue-ui-dark-mode')
diff --git a/src/devtools/locales/en.js b/src/devtools/locales/en.js
index 988ae1937..98319b1c9 100644
--- a/src/devtools/locales/en.js
+++ b/src/devtools/locales/en.js
@@ -9,6 +9,9 @@ export default {
     refresh: {
       tooltip: '[[{{keys.ctrl}}]] + [[{{keys.alt}}]] + [[R]] Force Refresh'
     },
+    settings: {
+      tooltip: '[[{{keys.ctrl}}]] + [[4]] Switch to Events'
+    },
     vuex: {
       tooltip: '[[{{keys.ctrl}}]] + [[2]] Switch to Vuex'
     }
diff --git a/src/devtools/router.js b/src/devtools/router.js
index ac3977e17..ded2ee661 100644
--- a/src/devtools/router.js
+++ b/src/devtools/router.js
@@ -4,6 +4,7 @@ import VueRouter from 'vue-router'
 import ComponentsTab from './views/components/ComponentsTab.vue'
 import VuexTab from './views/vuex/VuexTab.vue'
 import EventsTab from './views/events/EventsTab.vue'
+import SettingsTab from './views/settings/SettingsTab.vue'
 
 Vue.use(VueRouter)
 
@@ -27,6 +28,11 @@ const routes = [
     name: 'events',
     component: EventsTab
   },
+  {
+    path: '/settings',
+    name: 'settings',
+    component: SettingsTab
+  },
   {
     path: '*',
     redirect: '/'
diff --git a/src/devtools/views/settings/GlobalPreferences.vue b/src/devtools/views/settings/GlobalPreferences.vue
new file mode 100644
index 000000000..a53f980c2
--- /dev/null
+++ b/src/devtools/views/settings/GlobalPreferences.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="global-preferences">
+    <VueFormField title="Component Name Format">
+      <VueGroup :value="$shared.classifyComponents" @input="$shared.classifyComponents = $event" class="extend">
+        <VueGroupButton :value="false" label="kebab-case"/>
+        <VueGroupButton :value="true" label="PascalCase"/>
+      </VueGroup>
+    </VueFormField>
+
+    <VueFormField title="Theme">
+      <VueGroup :value="$shared.theme" @input="$shared.theme = $event" class="extend">
+        <VueGroupButton value="auto" label="Auto"/>
+        <VueGroupButton value="dark" label="Dark"/>
+        <VueGroupButton value="light" label="Light"/>
+      </VueGroup>
+    </VueFormField>
+  </div>
+</template>
+
+
+<style lang="stylus" scoped>
+.global-preferences
+  display flex
+  flex-wrap wrap
+  padding 1rem 1.5rem
+
+  > *
+    flex-basis 300px
+    margin 0 .5rem 1rem .5rem
+</style>-->
diff --git a/src/devtools/views/settings/SettingsTab.vue b/src/devtools/views/settings/SettingsTab.vue
new file mode 100644
index 000000000..3225ae98d
--- /dev/null
+++ b/src/devtools/views/settings/SettingsTab.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="grid">
+    <GlobalPreferences />
+  </div>
+</template>
+
+<script>
+import GlobalPreferences from './GlobalPreferences.vue'
+import { mapState } from 'vuex'
+
+export default {
+  components: { GlobalPreferences },
+
+  computed: mapState('events', [
+    'enabled'
+  ])
+}
+</script>
diff --git a/src/shared-data.js b/src/shared-data.js
index b0c4c0662..aab01f16b 100644
--- a/src/shared-data.js
+++ b/src/shared-data.js
@@ -1,7 +1,8 @@
 // Initial state
 const internalSharedData = {
   openInEditorHost: '/',
-  classifyComponents: true
+  classifyComponents: true,
+  theme: 'light'
 }
 
 // ---- INTERNALS ---- //

From 2675aa02de4dfd16d1ed2e31c986fa5559273f08 Mon Sep 17 00:00:00 2001
From: Rahul Kadyan <hi@znck.me>
Date: Mon, 30 Jul 2018 17:09:29 +0200
Subject: [PATCH 2/3] fix: Persist theme

---
 src/devtools/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/devtools/index.js b/src/devtools/index.js
index 97b0fb693..39e3a1d0c 100644
--- a/src/devtools/index.js
+++ b/src/devtools/index.js
@@ -96,7 +96,8 @@ function initApp (shell) {
       Vue,
       storage,
       persist: [
-        'classifyComponents'
+        'classifyComponents',
+        'theme'
       ]
     })
 

From 2fe07da5aa79dfcb162e331f7835c4f3661ac28f Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Mon, 30 Jul 2018 20:06:14 +0200
Subject: [PATCH 3/3] fix: fixes

---
 src/devtools/App.vue                          |  4 +-
 src/devtools/index.js                         |  8 +---
 src/devtools/locales/en.js                    |  2 +-
 .../views/settings/GlobalPreferences.vue      | 38 +++++++++++++++----
 src/shared-data.js                            |  2 +-
 5 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/devtools/App.vue b/src/devtools/App.vue
index 3eaab3370..e091599d7 100644
--- a/src/devtools/App.vue
+++ b/src/devtools/App.vue
@@ -85,8 +85,8 @@
               'icon-button': !$responsive.wide
             }"
             value="settings"
-            icon-left="settings"
-            class="settings-tab flat big-tag"
+            icon-left="settings_applications"
+            class="settings-tab flat"
           >
             Settings
           </VueGroupButton>
diff --git a/src/devtools/index.js b/src/devtools/index.js
index d23995c8b..735546f50 100644
--- a/src/devtools/index.js
+++ b/src/devtools/index.js
@@ -160,17 +160,13 @@ function initApp (shell) {
       extends: App,
       router,
       store,
+
       data: {
         isBeta
       },
-      computed: {
-        theme () {
-          return this.$shared.theme
-        }
-      },
 
       watch: {
-        theme: {
+        '$shared.theme': {
           handler (value) {
             if (value === 'dark' || (value === 'auto' && chromeTheme === 'dark')) {
               document.body.classList.add('vue-ui-dark-mode')
diff --git a/src/devtools/locales/en.js b/src/devtools/locales/en.js
index 98319b1c9..fa0983a55 100644
--- a/src/devtools/locales/en.js
+++ b/src/devtools/locales/en.js
@@ -10,7 +10,7 @@ export default {
       tooltip: '[[{{keys.ctrl}}]] + [[{{keys.alt}}]] + [[R]] Force Refresh'
     },
     settings: {
-      tooltip: '[[{{keys.ctrl}}]] + [[4]] Switch to Events'
+      tooltip: '[[{{keys.ctrl}}]] + [[4]] Switch to Settings'
     },
     vuex: {
       tooltip: '[[{{keys.ctrl}}]] + [[2]] Switch to Vuex'
diff --git a/src/devtools/views/settings/GlobalPreferences.vue b/src/devtools/views/settings/GlobalPreferences.vue
index a53f980c2..9483a6d28 100644
--- a/src/devtools/views/settings/GlobalPreferences.vue
+++ b/src/devtools/views/settings/GlobalPreferences.vue
@@ -1,23 +1,45 @@
 <template>
   <div class="global-preferences">
     <VueFormField title="Component Name Format">
-      <VueGroup :value="$shared.classifyComponents" @input="$shared.classifyComponents = $event" class="extend">
-        <VueGroupButton :value="false" label="kebab-case"/>
-        <VueGroupButton :value="true" label="PascalCase"/>
+      <VueGroup
+        :value="$shared.classifyComponents"
+        class="extend"
+        @input="$shared.classifyComponents = $event"
+      >
+        <VueGroupButton
+          :value="false"
+          label="kebab-case"
+        />
+        <VueGroupButton
+          :value="true"
+          label="PascalCase"
+        />
       </VueGroup>
     </VueFormField>
 
     <VueFormField title="Theme">
-      <VueGroup :value="$shared.theme" @input="$shared.theme = $event" class="extend">
-        <VueGroupButton value="auto" label="Auto"/>
-        <VueGroupButton value="dark" label="Dark"/>
-        <VueGroupButton value="light" label="Light"/>
+      <VueGroup
+        :value="$shared.theme"
+        class="extend"
+        @input="$shared.theme = $event"
+      >
+        <VueGroupButton
+          value="auto"
+          label="Auto"
+        />
+        <VueGroupButton
+          value="dark"
+          label="Dark"
+        />
+        <VueGroupButton
+          value="light"
+          label="Light"
+        />
       </VueGroup>
     </VueFormField>
   </div>
 </template>
 
-
 <style lang="stylus" scoped>
 .global-preferences
   display flex
diff --git a/src/shared-data.js b/src/shared-data.js
index aab01f16b..5783af448 100644
--- a/src/shared-data.js
+++ b/src/shared-data.js
@@ -2,7 +2,7 @@
 const internalSharedData = {
   openInEditorHost: '/',
   classifyComponents: true,
-  theme: 'light'
+  theme: 'auto'
 }
 
 // ---- INTERNALS ---- //