refs #116 Show account profile in side bar

src/renderer/components/TimelineSpace/Contents.vue

@@ -38,7 +38,7 @@ export default {
 
   .timeline-wrapper-with-side-bar {
     height: 100%;
-    width: -webkit-calc(100% - 180px);
+    width: -webkit-calc(100% - 320px);
     overflow: auto;
   }
 }

src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue

@@ -132,7 +132,9 @@ export default {
       this.$store.dispatch('TimelineSpace/Modals/ImageViewer/openModal', url)
     },
     openUser (account) {
-      console.log(account)
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
+      this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
     }
   }
 }
@@ -169,6 +171,7 @@ function findLink (target) {
       width: 36px;
       height: 36px;
       border-radius: 4px;
+      cursor: pointer;
     }
   }
 
@@ -181,6 +184,7 @@ function findLink (target) {
         font-weight: 800;
         color: #303133;
         font-size: 14px;
+        cursor: pointer;
       }
 
       .timestamp {

src/renderer/components/TimelineSpace/Contents/SideBar.vue

@@ -3,18 +3,23 @@
   <div class="header">
     <i class="el-icon-close" @click="close"></i>
   </div>
-  side
+  <account-profile v-if="component === 1"></account-profile>
 </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import AccountProfile from './SideBar/AccountProfile'
 
 export default {
   name: 'side-bar',
+  components: {
+    AccountProfile
+  },
   computed: {
     ...mapState({
-      openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar
+      openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
+      component: state => state.TimelineSpace.Contents.SideBar.component
     })
   },
   methods: {
@@ -30,6 +35,17 @@ export default {
   position: fixed;
   top: 48px;
   right: 0;
-  width: 180px;
+  width: 320px;
+  height: calc(100% - 48px);
+  overflow: auto;
+  border-left: solid 1px #dcdfe6;
+
+  .header {
+    background-color: #f3f6fc;
+    padding: 4px 8px;
+    border-top: solid 1px #dcdfe6;
+    border-bottom: solid 1px #dcdfe6;
+    text-align: right;
+  }
 }
 </style>

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue

@@ -0,0 +1,106 @@
+<template>
+  <div id="account_profile">
+    <div class="header">
+      <div class="icon">
+        <img :src="account.avatar" />
+      </div>
+      <div class="username">
+        {{ username(account) }}
+      </div>
+      <div class="account">
+        @{{ account.acct }}
+      </div>
+      <div class="note" v-html="account.note"></div>
+    </div>
+    <el-row class="basic-info">
+      <el-col :span="8"class="info">
+        <div class="title">Posts</div>
+        <div class="count">{{ account.statuses_count }}</div>
+      </el-col>
+      <el-col :span="8"class="info">
+        <div class="title">Following</div>
+        <div class="count">{{ account.following_count }}</div>
+      </el-col>
+      <el-col :span="8"class="info">
+        <div class="title">Followers</div>
+        <div class="count">{{ account.followers_count }}</div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'account-profile',
+  computed: {
+    ...mapState({
+      account: state => state.TimelineSpace.Contents.SideBar.AccountProfile.account
+    })
+  },
+  methods: {
+    username (account) {
+      if (account.display_name !== '') {
+        return account.display_name
+      } else {
+        return account.username
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  background-color: rgba(255, 255, 255, 0.5);
+  text-align: center;
+  padding: 12px;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  font-size: 14px;
+
+  .icon {
+    padding: 12px;
+
+    img {
+      width: 72px;
+      border-radius: 8px;
+    }
+  }
+
+  .username {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 24px;
+    margin: 0 auto 12px auto;
+  }
+
+  .account {
+    color: #409eff;
+  }
+}
+
+.basic-info {
+  border-top: solid 1px #dcdfe6;
+  border-bottom: solid 1px #dcdfe6;
+
+  .info {
+    border-left: solid 1px #dcdfe6;
+    padding: 8px 4px;
+
+    .title {
+      font-size: 10px;
+      color: #909399;
+    }
+
+    .count {
+      font-weight: 800;
+    }
+  }
+
+  .info:first-of-type {
+    border: none;
+  }
+}
+</style>

src/renderer/store/TimelineSpace/Contents/SideBar.js

@@ -1,17 +1,31 @@
+import AccountProfile from './SideBar/AccountProfile'
 
 const SideBar = {
   namespaced: true,
+  modules: {
+    AccountProfile
+  },
   state: {
-    openSideBar: false
+    openSideBar: false,
+    // 0: blank
+    // 1: account-profile
+    component: 0
   },
   mutations: {
     changeOpenSideBar (state, value) {
       state.openSideBar = value
+    },
+    changeComponent (state, value) {
+      state.component = value
     }
   },
   actions: {
     close ({ commit }) {
       commit('changeOpenSideBar', false)
+      commit('changeComponent', 0)
+    },
+    openAccountComponent ({ commit }) {
+      commit('changeComponent', 1)
     }
   }
 }

src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.js

@@ -0,0 +1,18 @@
+const AccountProfile = {
+  namespaced: true,
+  state: {
+    account: null
+  },
+  mutations: {
+    changeAccount (state, account) {
+      state.account = account
+    }
+  },
+  actions: {
+    changeAccount ({ commit }, account) {
+      commit('changeAccount', account)
+    }
+  }
+}
+
+export default AccountProfile