Merge pull request #9 from h3poteto/iss-1

closes #1 Create base window for timeline

package-lock.json

@@ -14658,6 +14658,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.13.tgz",
       "integrity": "sha512-3D+lY7HTkKbtswDM4BBHgqyq+qo8IAEE8lz8va1dz3LLmttjgo0FxairO4r1iN2OBqk8o1FyL4hvzzTFEdQSEw=="
     },
+    "vue-awesome": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/vue-awesome/-/vue-awesome-2.3.5.tgz",
+      "integrity": "sha512-+Yjsax0+Z8mbFkBtW+bV8qhWwDU774/sjnC5Ch/2GL/mhjlcLNXyhwmO0zpgm4BCSLWsSgU+cBqmtJZd/3KK2g=="
+    },
     "vue-electron": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/vue-electron/-/vue-electron-1.0.6.tgz",

package.json

@@ -63,6 +63,7 @@
     "mastodon-api": "^1.3.0",
     "nedb": "^1.8.0",
     "vue": "^2.3.3",
+    "vue-awesome": "^2.3.5",
     "vue-electron": "^1.0.6",
     "vue-router": "^2.5.3",
     "vuex": "^2.3.1"

src/main/auth.js

@@ -58,6 +58,7 @@ export default class Authentication {
     })
   }
 
+  // TODO: このクラスにいる必要性がない，外に出したい
   listInstances () {
     return new Promise((resolve, reject) => {
       this.db.find({accessToken: { $ne: '' }}, (err, doc) => {

src/main/index.js

@@ -106,6 +106,7 @@ ipcMain.on('list-instances', (event, _) => {
     })
 })
 
+// storage access
 ipcMain.on('get-instance-token', (event, _) => {
   storage.get('config', (err, data) => {
     if (err || empty(data)) {
@@ -117,6 +118,23 @@ ipcMain.on('get-instance-token', (event, _) => {
   })
 })
 
+// db
+ipcMain.on('get-instance', (event, id) => {
+  db.findOne(
+    {
+      _id: id
+    },
+    (err, doc) => {
+      if (err || empty(doc)) return event.sender.send('empty-instance', err)
+      const instance = {
+        baseURL: doc.baseURL,
+        id: doc.id
+      }
+      event.sender.send('instance', instance)
+    }
+  )
+})
+
 /**
  * Auto Updater
  *

src/renderer/components/Authorize.vue

@@ -25,7 +25,7 @@ export default {
     authorizeSubmit () {
       this.$store.dispatch('Authorize/submit', this.authorizeForm.code)
         .then((id) => {
-          this.$router.push({ path: `/${id}` })
+          this.$router.push({ path: `/${id}/home` })
         })
     }
   }

src/renderer/components/GlobalHeader.vue

@@ -2,11 +2,11 @@
   <div id="global_header">
     <el-menu
       :default-active="defaultActive"
-      class="el-menu-vertical"
+      class="el-menu-vertical instance-menu"
       @open="instanceSelected"
       @close="instanceClosed"
       :collapse="isCollapse"
-      background-color="#545c64"
+      background-color="#4a5664"
       text-color="#909399"
       active-text-color="#ffffff">
       <el-menu-item :index="index.toString()" v-for="(instance, index) in instances" v-bind:key="instance.id">
@@ -14,7 +14,7 @@
         <span slot="title">{{ instance.baseURL }}</span>
       </el-menu-item>
     </el-menu>
-    <div class="content">
+    <div class="space">
       <router-view></router-view>
     </div>
   </div>
@@ -39,7 +39,7 @@ export default {
   created () {
     this.$store.dispatch('GlobalHeader/listInstances')
       .then((instances) => {
-        return this.$router.push({ path: `/${instances[0].id}` })
+        return this.$router.push({ path: `/${instances[0].id}/home` })
       })
       .catch(() => {
         return this.$router.push({ path: '/login' })
@@ -63,7 +63,7 @@ html, body, #app, #global_header {
 }
 
 #global_header {
-  .el-menu {
+  .instance-menu {
     height: 100%;
     position: fixed;
     top: 0;
@@ -71,7 +71,7 @@ html, body, #app, #global_header {
     width: 65px;
   }
 
-  .content {
+  .space {
     margin-left: 65px;
   }
 }

src/renderer/components/TimelineSpace.vue

@@ -1,12 +1,18 @@
 <template>
 <div id="timeline_space">
-  timeline
+  <side-menu></side-menu>
+  <div class="content">
+    <router-view></router-view>
+  </div>
 </div>
 </template>
 
 <script>
+import SideMenu from './TimelineSpace/SideMenu'
+
 export default {
   name: 'timeline-space',
+  components: { SideMenu },
   created () {
     console.log(this.$route.params.id)
   }
@@ -14,4 +20,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.content {
+  margin-left: 145px;
+}
 </style>

src/renderer/components/TimelineSpace/Fav.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="fav">
+    fav
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'fav'
+}
+</script>

src/renderer/components/TimelineSpace/Global.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="global">
+    global
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'global'
+}
+</script>

src/renderer/components/TimelineSpace/Home.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="home">
+    home
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'home'
+}
+</script>

src/renderer/components/TimelineSpace/Local.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="local">
+    local
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'local'
+}
+</script>

src/renderer/components/TimelineSpace/Notification.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="notification">
+    notification
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'notification'
+}
+</script>

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -0,0 +1,85 @@
+<template>
+  <div id="side_menu">
+    <div class="profile-wrapper">
+      <div class="profile">
+        {{ instance.baseURL }}
+      </div>
+    </div>
+    <el-menu
+      default-active="1"
+      background-color="#373d48"
+      text-color="#909399"
+      active-text-color="#ffffff"
+      :router="true"
+      class="el-menu-vertical timeline-menu">
+      <el-menu-item index="1" :route="{path: `/${id()}/home`}">
+        <icon name="home"></icon>
+        <span>Home</span>
+      </el-menu-item>
+      <el-menu-item index="2" :route="{path: `/${id()}/notification`}">
+        <icon name="bell"></icon>
+        <span>Notification</span>
+      </el-menu-item>
+      <el-menu-item index="3" :route="{path: `/${id()}/fav`}">
+        <icon name="star"></icon>
+        <span>Fav</span>
+      </el-menu-item>
+      <el-menu-item index="4" :route="{path: `/${id()}/local`}">
+        <icon name="users"></icon>
+        <span>LocalTimeline</span>
+      </el-menu-item>
+      <el-menu-item index="5" :route="{path: `/${id()}/global`}">
+        <icon name="globe"></icon>
+        <span>PublicTimeline</span>
+      </el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'side-menu',
+  computed: {
+    ...mapState({
+      instance: state => state.TimelineSpace.SideMenu.instance
+    })
+  },
+  created () {
+    this.$store.dispatch('TimelineSpace/SideMenu/fetchInstance', this.$route.params.id)
+  },
+  methods: {
+    id () {
+      return this.$route.params.id
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#side_menu {
+  .profile-wrapper {
+    background-color: #373d48;
+    position: fixed;
+    top: 0;
+    left: 65px;
+    width: 144px;
+    height: 40px;
+
+    .profile {
+      color: #ffffff;
+      font-weight: bold;
+      padding: 10px 20px;
+    }
+  }
+
+  .timeline-menu {
+    position: fixed;
+    top: 40px;
+    left: 65px;
+    height: 100%;
+    width: 144px;
+  }
+}
+</style>

src/renderer/main.js

@@ -2,12 +2,15 @@ import Vue from 'vue'
 import axios from 'axios'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
+import 'vue-awesome/icons'
+import Icon from 'vue-awesome/components/Icon'
 
 import App from './App'
 import router from './router'
 import store from './store'
 
 Vue.use(ElementUI)
+Vue.component('icon', Icon)
 
 if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 Vue.http = Vue.prototype.$http = axios

src/renderer/router/index.js

@@ -21,9 +21,36 @@ export default new Router({
       component: require('@/components/GlobalHeader').default,
       children: [
         {
-          path: ':id',
+          path: ':id/',
           name: 'timeline-space/',
-          component: require('@/components/TimelineSpace').default
+          component: require('@/components/TimelineSpace').default,
+          children: [
+            {
+              path: 'home',
+              name: 'home',
+              component: require('@/components/TimelineSpace/Home').default
+            },
+            {
+              path: 'notification',
+              name: 'notification',
+              component: require('@/components/TimelineSpace/Notification').default
+            },
+            {
+              path: 'fav',
+              name: 'fav',
+              component: require('@/components/TimelineSpace/Fav').default
+            },
+            {
+              path: 'local',
+              name: 'local',
+              component: require('@/components/TimelineSpace/Local').default
+            },
+            {
+              path: 'global',
+              name: 'global',
+              component: require('@/components/TimelineSpace/Global').default
+            }
+          ]
         }
       ]
     },

src/renderer/store/TimelineSpace.js

@@ -1,8 +1,10 @@
+import SideMenu from './TimelineSpace/SideMenu'
+
 const TimelineSpace = {
   namespaced: true,
-  state: {},
-  mutations: {},
-  actions: {}
+  modules: {
+    SideMenu
+  }
 }
 
 export default TimelineSpace

src/renderer/store/TimelineSpace/SideMenu.js

@@ -0,0 +1,30 @@
+import { ipcRenderer } from 'electron'
+
+const SideMenu = {
+  namespaced: true,
+  state: {
+    instance: {
+      baseURL: '',
+      id: ''
+    }
+  },
+  mutations: {
+    updateInstance (state, instance) {
+      state.instance = instance
+    }
+  },
+  actions: {
+    fetchInstance ({ commit }, id) {
+      ipcRenderer.send('get-instance', id)
+      ipcRenderer.on('empty-instance', (event, err) => {
+        // TODO: handle error
+        console.log(err)
+      })
+      ipcRenderer.on('instance', (event, instance) => {
+        commit('updateInstance', instance)
+      })
+    }
+  }
+}
+
+export default SideMenu