move theme setting to preference component

kkosuge · Nov 8, 2018 · 7919ec1 · 7919ec1
1 parent 2b9bc86
commit 7919ec1
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 27 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -17,13 +17,6 @@
         </div>
       </div>
       <div class='nav-bar-right'>
-        <div class='nav-bar-item nav-bar-item-select'>
-          <select v-model='theme' @change='changeTheme'>
-            <option v-for='theme in themes' :value='theme.value' :key='theme.value'>
-              {{ theme.text }}
-            </option>
-          </select>
-        </div>
         <div class='nav-bar-item nav-bar-item-select'>
           <select v-model='language' @change='changeLanguage'>
             <option v-for='lang in languages' :value='lang.value' :key='lang.value'>
@@ -60,7 +53,7 @@ import languages from './lib/languages'
 import './assets/style.scss'
 import { initVimMode } from 'monaco-vim'
 import Preferences from './components/Preferences.vue'
-import store from './store'
+import store, { SharedState } from './store'
 
 @Component({
   components: {
@@ -74,7 +67,6 @@ export default class App extends Vue {
   languages = languages
   language = 'markdown'
   textLength = 0
-  theme = 'dark-grad'
   themes = themes
   lineCount = 1
   alwaysOnTop = false
@@ -112,12 +104,11 @@ export default class App extends Vue {
     })
   }
 
-  loadLocalOptions() {
-    const localTheme = localStorage.getItem('theme')
-    if (localTheme) {
-      this.theme = localTheme
-    }
+  get theme(): SharedState['theme'] {
+    return this.sharedState.theme
+  }
 
+  loadLocalOptions() {
     const localLanguage = localStorage.getItem('language')
     if (localLanguage) {
       this.language = localLanguage
@@ -156,11 +147,6 @@ export default class App extends Vue {
     }
   }
 
-  changeTheme() {
-    monaco.editor.setTheme(this.theme)
-    localStorage.setItem('theme', this.theme)
-  }
-
   changeAlwaysOnTop() {
     ipcRenderer.send('alwaysOnTop', this.alwaysOnTop)
   }
@@ -193,5 +179,10 @@ export default class App extends Vue {
       this.disableVimMode()
     }
   }
+
+  @Watch('sharedState.theme')
+  updateTheme(value: string) {
+    monaco.editor.setTheme(this.theme)
+  }
 }
 </script>
diff --git a/src/assets/style.scss b/src/assets/style.scss
@@ -117,7 +117,7 @@ body {
   top: $title-bar-height;
   left: 0;
   right: 0;
-  bottom: 0;
+  bottom: 22px;
   z-index: 1001;
   font-size: 12px;
   padding: 12px 24px;
@@ -180,4 +180,4 @@ body {
     outline: 0;
     border-style: none;
   }
-}
+}
diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue
@@ -4,21 +4,39 @@
       <h1>Preferences</h1>
       <a href="#" class="close" @click.prevent="close"></a>
     </div>
-    <div class='pretty p-default p-curve'>
-      <input type='checkbox' id='vim-mode-checkbox' v-model='vimModeEnabled'>
-      <div class='state'>
-        <label for='vim-mode-checkbox'>Vim mode</label>
+    <div class="form-group">
+      <div class='pretty p-default p-curve'>
+        <input type='checkbox' id='vim-mode-checkbox' v-model='vimModeEnabled'>
+        <div class='state'>
+          <label for='vim-mode-checkbox'>Vim mode</label>
+        </div>
       </div>
     </div>
+    <div class="form-group select-group">
+      <label>Theme:</label>
+      <select v-model='theme'>
+        <option v-for='theme in themes' :value='theme.value' :key='theme.value'>
+          {{ theme.text }}
+        </option>
+      </select>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import store, { SharedState } from '../store'
+import '../lib/theme/dark'
+import '../lib/theme/light'
+import '../lib/theme/vscode'
+import '../lib/theme/dark-grad'
+import '../lib/theme/light-grad'
+import themes from '../lib/theme/themes'
 
 @Component
 export default class extends Vue {
+  themes = themes
+
   get vimModeEnabled(): SharedState['vimModeEnabled'] {
     return this.sharedState.vimModeEnabled
   }
@@ -27,8 +45,27 @@ export default class extends Vue {
     store.commit('vimModeEnabled', value, true)
   }
 
+  get theme(): SharedState['theme'] {
+    return this.sharedState.theme
+  }
+
+  set theme(value: SharedState['theme']) {
+    store.commit('theme', value, true)
+  }
+
   close() {
     store.commit('showPreferences', false)
   }
 }
 </script>
+
+<style lang='scss'>
+.form-group {
+  margin-bottom: 10px;
+}
+.select-group {
+  label {
+    margin-right: 10px;
+  }
+}
+</style>
diff --git a/src/store.ts b/src/store.ts
@@ -1,7 +1,12 @@
 function get<T extends any>(key: string, defaultValue: T): T
 function get<T extends any>(key: string, defaultValue?: T): T | undefined {
   try {
-    return JSON.parse(localStorage.getItem(key)!)
+    const item = localStorage.getItem(key)
+    if (item) {
+      return JSON.parse(item)
+    } else {
+      return defaultValue
+    }
   } catch (err) {
     return defaultValue
   }
@@ -12,11 +17,13 @@ function set(key: string, value: any) {
 }
 
 export interface SharedState {
+  theme: string
   vimModeEnabled: boolean
   showPreferences: boolean
 }
 
 const state: SharedState = {
+  theme: 'dark-grad',
   vimModeEnabled: false,
   showPreferences: false,
 }
@@ -25,7 +32,8 @@ export default {
   state,
 
   load() {
-    state.vimModeEnabled = get<boolean>('vimModeEnabled', false)
+    state.theme = get<string>('theme', state.theme)
+    state.vimModeEnabled = get<boolean>('vimModeEnabled', state.vimModeEnabled)
   },
 
   commit<K extends keyof SharedState>(