refs #132 Create blank preferences page

src/main/index.js

@@ -78,6 +78,16 @@ function createWindow () {
             {
               type: 'separator'
             },
+            {
+              label: 'Preferences...',
+              accelerator: 'CmdOrCtrl+,',
+              click: () => {
+                mainWindow.webContents.send('open-preferences')
+              }
+            },
+            {
+              type: 'separator'
+            },
             {
               label: 'Quit',
               accelerator: 'CmdOrCtrl+Q',

src/renderer/App.vue

@@ -6,7 +6,13 @@
 
 <script>
   export default {
-    name: 'Whalebird'
+    name: 'Whalebird',
+    created () {
+      this.$store.dispatch('App/watchShortcutsEvents')
+    },
+    destroyed () {
+      this.$store.dispatch('App/removeShortcutsEvents')
+    }
   }
 </script>
 

src/renderer/components/Preferences.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-container id="preferences">
+    <el-header class="header">
+      <el-row>
+        <el-col :span="23">
+          <h3>Preferences</h3>
+        </el-col>
+        <el-col :span="1">
+          <el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
+        </el-col>
+      </el-row>
+    </el-header>
+    <el-container>
+      <el-aside width="240px" class="menu">
+        <el-menu
+          :default-active="defaultActive"
+          class="setting-menu"
+          :route="true">
+          <el-menu-item index="1" :route="{path: '/preferences/general'}" @click="general">
+            <icon name="cog" class="icon" scale="1.3"></icon>
+            <span>General</span>
+          </el-menu-item>
+          <el-menu-item index="2" :route="{path: '/preferences/account'}" @click="account">
+            <icon name="user" class="icon" scale="1.3"></icon>
+            <span>Account</span>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+      <el-main>
+        <router-view></router-view>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'preferences',
+  computed: {
+    ...mapState({
+      defaultActive: state => state.Preferences.defaultActive
+    })
+  },
+  methods: {
+    close () {
+      this.$router.push('/')
+    },
+    general () {
+      this.$router.push('/preferences/general')
+    },
+    account () {
+      this.$router.push('/preferences/account')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#preferences {
+  height: 100%;
+}
+
+.header {
+  text-align: center;
+  border-bottom: 1px solid #dcdfe6;
+
+  .close-button {
+    font-size: 24px;
+  }
+}
+
+.menu {
+  text-align: right;
+  padding-left: 24px;
+
+  .setting-menu /deep/ {
+    height: 100%;
+
+    .icon {
+      margin-right: 9px;
+    }
+
+    .el-menu-item {
+      .icon {
+        color: #909399;
+      }
+    }
+
+    .is-active {
+      .icon {
+        color: #409eff;
+      }
+    }
+  }
+
+}
+</style>

src/renderer/components/Preferences/Account.vue

@@ -0,0 +1,17 @@
+<template>
+<div id="account">
+  account
+</div>
+</template>
+
+<script>
+export default {
+  name: 'account',
+  created () {
+    this.$store.commit('Preferences/changeActive', '2')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/renderer/components/Preferences/General.vue

@@ -0,0 +1,14 @@
+<template>
+<div id="general">
+  general
+</div>
+</template>
+
+<script>
+export default {
+  name: 'general'
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/renderer/router/index.js

@@ -15,6 +15,23 @@ export default new Router({
       name: 'authorize',
       component: require('@/components/Authorize').default
     },
+    {
+      path: '/preferences/',
+      name: 'preferences',
+      component: require('@/components/Preferences').default,
+      children: [
+        {
+          path: 'general',
+          name: 'general',
+          component: require('@/components/Preferences/General').default
+        },
+        {
+          path: 'account',
+          name: 'account',
+          component: require('@/components/Preferences/Account').default
+        }
+      ]
+    },
     {
       path: '/',
       name: 'global-header',

src/renderer/store/App.js

@@ -0,0 +1,20 @@
+import { ipcRenderer } from 'electron'
+import router from '../router'
+
+const App = {
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {
+    watchShortcutsEvents () {
+      ipcRenderer.on('open-preferences', (event) => {
+        router.push('/preferences/account')
+      })
+    },
+    removeShortcutsEvents () {
+      ipcRenderer.removeAllListeners('open-preferences')
+    }
+  }
+}
+
+export default App

src/renderer/store/Preferences.js

@@ -0,0 +1,20 @@
+import General from './Preferences/General'
+import Account from './Preferences/Account'
+
+const Preferences = {
+  namespaced: true,
+  modules: {
+    General,
+    Account
+  },
+  state: {
+    defaultActive: '1'
+  },
+  mutations: {
+    changeActive (state, value) {
+      state.defaultActive = value
+    }
+  }
+}
+
+export default Preferences

src/renderer/store/Preferences/Account.js

@@ -0,0 +1,8 @@
+const Account = {
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {}
+}
+
+export default Account

src/renderer/store/Preferences/General.js

@@ -0,0 +1,8 @@
+const General = {
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {}
+}
+
+export default General

src/renderer/store/index.js

@@ -2,10 +2,12 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import createLogger from 'vuex/dist/logger'
 
+import App from './App'
 import GlobalHeader from './GlobalHeader'
 import Login from './Login'
 import Authorize from './Authorize'
 import TimelineSpace from './TimelineSpace'
+import Preferences from './Preferences'
 
 Vue.use(Vuex)
 
@@ -15,9 +17,11 @@ export default new Vuex.Store({
     ? [createLogger()]
     : [],
   modules: {
+    App,
     GlobalHeader,
     Login,
     Authorize,
-    TimelineSpace
+    TimelineSpace,
+    Preferences
   }
 })