refs #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/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,54 @@
+<template>
+  <div id="side_menu">
+    <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>
+export default {
+  name: 'side-menu',
+  methods: {
+    id () {
+      return this.$route.params.id
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#side_menu {
+  .timeline-menu {
+    position: fixed;
+    top: 0;
+    left: 65px;
+    height: 100%;
+  }
+}
+</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,8 @@
+const SideMenu = {
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {}
+}
+
+export default SideMenu