Merge pull request #157 from h3poteto/iss-116

refs #116 Show account profile in side bar

src/renderer/components/TimelineSpace/Contents.vue

@@ -1,6 +1,6 @@
 <template>
 <div id="contents">
-  <div :class="openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'">
+  <div id="scrollable" :class="openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'">
     <router-view></router-view>
   </div>
   <side-bar></side-bar>
@@ -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/Favourites.vue

@@ -42,17 +42,17 @@ export default {
       })
   },
   mounted () {
-    window.addEventListener('scroll', this.onScroll)
+    document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
   },
   destroyed () {
-    window.removeEventListener('scroll', this.onScroll)
+    document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
   },
   methods: {
     updateToot (message) {
       this.$store.commit('TimelineSpace/Contents/Favourites/updateToot', message)
     },
     onScroll (event) {
-      if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('favourites').clientHeight - 10) && !this.lazyloading) {
+      if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('favourites').clientHeight - 10) && !this.lazyloading) {
         this.$store.dispatch('TimelineSpace/Contents/Favourites/lazyFetchFavourites', this.favourites[this.favourites.length - 1])
       }
     }

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

@@ -23,7 +23,7 @@ export default {
   },
   mounted () {
     this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
-    window.addEventListener('scroll', this.onScroll)
+    document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
   },
   beforeUpdate () {
     if (this.$store.state.TimelineSpace.SideMenu.unreadHomeTimeline) {
@@ -32,11 +32,11 @@ export default {
   },
   destroyed () {
     this.$store.commit('TimelineSpace/archiveHomeTimeline')
-    window.removeEventListener('scroll', this.onScroll)
+    document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
   },
   methods: {
     onScroll (event) {
-      if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('home').clientHeight - 10) && !this.lazyloading) {
+      if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('home').clientHeight - 10) && !this.lazyloading) {
         this.$store.dispatch('TimelineSpace/Contents/Home/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
       }
     }

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

@@ -35,13 +35,13 @@ export default {
       .catch(() => {
         loading.close()
       })
-    window.addEventListener('scroll', this.onScroll)
+    document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
   },
   beforeDestroy () {
     this.$store.dispatch('TimelineSpace/Contents/Local/stopLocalStreaming')
   },
   destroyed () {
-    window.removeEventListener('scroll', this.onScroll)
+    document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
   },
   methods: {
     async initialize () {
@@ -59,7 +59,7 @@ export default {
       this.$store.commit('TimelineSpace/Contents/Local/updateToot', message)
     },
     onScroll (event) {
-      if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('local').clientHeight - 10) && !this.lazyloading) {
+      if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('local').clientHeight - 10) && !this.lazyloading) {
         this.$store.dispatch('TimelineSpace/Contents/Local/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
       }
     }

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

@@ -23,7 +23,7 @@ export default {
   },
   mounted () {
     this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
-    window.addEventListener('scroll', this.onScroll)
+    document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
   },
   beforeUpdate () {
     if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications) {
@@ -32,11 +32,11 @@ export default {
   },
   destroyed () {
     this.$store.commit('TimelineSpace/archiveNotifications')
-    window.removeEventListener('scroll', this.onScroll)
+    document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
   },
   methods: {
     onScroll (event) {
-      if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('notifications').clientHeight - 10) && !this.lazyloading) {
+      if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('notifications').clientHeight - 10) && !this.lazyloading) {
         this.$store.dispatch('TimelineSpace/Contents/Notifications/lazyFetchNotifications', this.notifications[this.notifications.length - 1])
       }
     }

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

@@ -35,13 +35,13 @@ export default {
       .catch(() => {
         loading.close()
       })
-    window.addEventListener('scroll', this.onScroll)
+    document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
   },
   beforeDestroy () {
     this.$store.dispatch('TimelineSpace/Contents/Public/stopPublicStreaming')
   },
   destroyed () {
-    window.removeEventListener('scroll', this.onScroll)
+    document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
   },
   methods: {
     async initialize () {
@@ -59,7 +59,7 @@ export default {
       this.$store.commit('TimelineSpace/Contents/Public/updateToot', message)
     },
     onScroll (event) {
-      if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('public').clientHeight - 10) && !this.lazyloading) {
+      if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('public').clientHeight - 10) && !this.lazyloading) {
         this.$store.dispatch('TimelineSpace/Contents/Public/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
       }
     }

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,21 @@ 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;
+
+    .el-icon-close {
+      cursor: pointer;
+    }
+  }
 }
 </style>

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

@@ -0,0 +1,141 @@
+<template>
+<div id="account_profile">
+  <div class="header-background" v-bind:style="{ backgroundImage: 'url(' + account.header + ')' }">
+    <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" @click.capture.prevent="noteClick"></div>
+    </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 class="timeline">
+    Comming soon...
+  </div>
+</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { shell } from 'electron'
+
+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
+      }
+    },
+    noteClick (e) {
+      const link = findLink(e.target)
+      if (link !== null) {
+        shell.openExternal(link)
+      }
+    }
+  }
+}
+
+function findLink (target) {
+  if (target.localName === 'a') {
+    return target.href
+  }
+  if (target.parentNode === undefined || target.parentNode === null) {
+    return null
+  }
+  if (target.parentNode.getAttribute('class') === 'note') {
+    return null
+  }
+  return findLink(target.parentNode)
+}
+</script>
+
+<style lang="scss" scoped>
+.header-background {
+  background-position: 50% 50%;
+  background-size: cover;
+}
+
+.header {
+  background-color: rgba(255, 255, 255, 0.7);
+  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;
+  }
+}
+
+.timeline {
+  font-size: 12px;
+  padding: 12px;
+}
+</style>

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

@@ -60,7 +60,6 @@ const Favourites = {
             access_token: rootState.TimelineSpace.account.accessToken,
             api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
           })
-        console.log(last.id)
         // Note: Now this API's explanation and implementation are reversed.
         // So if the bug has resolved, please use max_id instead of since_id.
         // https://github.com/tootsuite/documentation/blob/master/Using-the-API/API.md#favourites

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