Merge branch 'feature/follow-lists' into 'develop'

Feature/follow lists

See merge request !106

8 files changed, 168 insertions, 15 deletions

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index f8be00f5..b8f71dd4 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -40,7 +40,7 @@
         </div>
         <div class="media-body">
           <div class="base05 base05=border usercard" v-if="userExpanded">
-            <user-card-content :user="status.user"></user-card-content>
+            <user-card-content :user="status.user" :switcher="false"></user-card-content>
           </div>
           <div class="user-content">
             <div class="media-heading">
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 3dc07f9e..06435745 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -1,6 +1,7 @@
 import Status from '../status/status.vue'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 import StatusOrConversation from '../status_or_conversation/status_or_conversation.vue'
+import UserCard from '../user_card/user_card.vue'
 
 const Timeline = {
   props: [
@@ -10,11 +11,21 @@ const Timeline = {
     'userId'
   ],
   computed: {
-    timelineError () { return this.$store.state.statuses.error }
+    timelineError () { return this.$store.state.statuses.error },
+    followers () {
+      return this.timeline.followers
+    },
+    friends () {
+      return this.timeline.friends
+    },
+    viewing () {
+      return this.timeline.viewing
+    }
   },
   components: {
     Status,
-    StatusOrConversation
+    StatusOrConversation,
+    UserCard
   },
   created () {
     const store = this.$store
@@ -30,6 +41,12 @@ const Timeline = {
       showImmediately,
       userId: this.userId
     })
+
+    // don't fetch followers for public, friend, twkn
+    if (this.timelineName === 'user') {
+      this.fetchFriends()
+      this.fetchFollowers()
+    }
   },
   methods: {
     showNewStatuses () {
@@ -48,6 +65,16 @@ const Timeline = {
         userId: this.userId
       }).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
     },
+    fetchFollowers () {
+      const id = this.userId
+      this.$store.state.api.backendInteractor.fetchFollowers({ id })
+        .then((followers) => this.$store.dispatch('addFollowers', { followers }))
+    },
+    fetchFriends () {
+      const id = this.userId
+      this.$store.state.api.backendInteractor.fetchFriends({ id })
+        .then((friends) => this.$store.dispatch('addFriends', { friends }))
+    },
     scrollLoad (e) {
       let height = Math.max(document.body.offsetHeight, document.body.scrollHeight)
       if (this.timeline.loading === false && this.$store.state.config.autoLoad && (window.innerHeight + window.pageYOffset) >= (height - 750)) {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index a9162120..bf64b935 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="timeline panel panel-default">
+  <div class="timeline panel panel-default" v-if="viewing == 'statuses'">
     <div class="panel-heading timeline-heading base01-background base04">
       <div class="title">
         {{title}}
@@ -24,6 +24,30 @@
       </div>
     </div>
   </div>
+  <div class="timeline panel panel-default" v-else-if="viewing == 'followers'">
+    <div class="panel-heading timeline-heading base01-background base04">
+      <div class="title">
+        Followers
+      </div>
+    </div>
+    <div class="panel-body">
+      <div class="timeline">
+        <user-card v-for="follower in followers" :user="follower" :showFollows="false"></user-card>
+      </div>
+    </div>
+  </div>
+  <div class="timeline panel panel-default" v-else-if="viewing == 'friends'">
+    <div class="panel-heading timeline-heading base01-background base04">
+      <div class="title">
+        Following
+      </div>
+    </div>
+    <div class="panel-body">
+      <div class="timeline">
+        <user-card v-for="friend in friends" :user="friend" :showFollows="true"></user-card>
+      </div>
+    </div>
+  </div>
 </template>
 <script src="./timeline.js"></script>
 
@@ -65,6 +89,13 @@
     }
   }
 
+  .avatar {
+  padding-top: 0.3em;
+  width:32px;
+  height: 32px;
+  border-radius: 50%;
+  }
+
 
   .new-status-notification {
     position:relative;
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
new file mode 100644
index 00000000..a7a871c3
--- /dev/null
+++ b/src/components/user_card/user_card.js
@@ -0,0 +1,23 @@
+import UserCardContent from '../user_card_content/user_card_content.vue'
+
+const UserCard = {
+  props: [
+    'user',
+    'showFollows'
+  ],
+  data () {
+    return {
+      userExpanded: false
+    }
+  },
+  components: {
+    UserCardContent
+  },
+  methods: {
+    toggleUserExpanded () {
+      this.userExpanded = !this.userExpanded
+    }
+  }
+}
+
+export default UserCard
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
new file mode 100644
index 00000000..5e886eb8
--- /dev/null
+++ b/src/components/user_card/user_card.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="card base00-background base03-border">
+    <a href="#">
+      <img @click.prevent="toggleUserExpanded" class="avatar" :src="user.profile_image_url">
+    </a>
+    <div class="base05 base05=border usercard" v-if="userExpanded">
+      <user-card-content :user="user" :switcher="false"></user-card-content>
+    </div>
+    <div class="name-and-screen-name" v-else>
+      <div class="user-name">{{ user.name }}</div>
+      <a href="user.statusnet_profile_url"><div class="user-screen-name">@{{ user.screen_name }}</div></a>
+    </div>
+    <span class="follows-you" v-if="!userExpanded && showFollows">
+      <div class="follows" v-if="user.follows_you">
+        Follows you!
+      </div>
+    </span>
+  </div>
+</template>
+
+<script src="./user_card.js"></script>
+
+<style lang="scss">
+  .name-and-screen-name {
+    margin-left: 0.7em;
+    min-width: 16em;
+    display:block;
+    margin-top:0.0em;
+    margin-right: 2em;
+    text-align: left;
+  }
+
+  .follows-you {
+    margin-left: 2em;
+    width:-webkit-fill-available;
+    width: -moz-webkit-fill-available;
+  }
+
+  .follows {
+    float: right;
+  }
+
+  .card {
+    display: flex;
+    flex: 1 0;
+    padding-top: 0.6em;
+    padding-right: 1em;
+    padding-bottom: 0.6em;
+    padding-left: 1em;
+    border-bottom: 1px solid;
+    margin: 0;
+    border-bottom-color: inherit;
+  }
+
+  .usercard {
+    width: -webkit-fill-available;
+    width: -moz-webkit-fill-available;
+    stretch: fill;
+    margin-left: 0.7em;
+  }
+</style>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 236a0139..e4e3394e 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -47,17 +47,20 @@
     </div>
     <div class="panel-body profile-panel-body" :style="bodyStyle">
       <div class="user-counts">
-        <div class="user-count">
-          <h5>Statuses</h5>
-          <span>{{user.statuses_count}} <br><span class="dailyAvg">{{dailyAvg}} per day</span></span>
+        <div class="user-count base04">
+          <a href="#" v-on:click.prevent="setProfileView('statuses')" v-if="switcher"><h5 class="base05">Statuses</h5></a>
+          <h5 v-else>Statuses</h5>
+          <span class="base05">{{user.statuses_count}} <br><span class="dailyAvg">{{dailyAvg}} per day</span></span>
         </div>
         <div class="user-count">
-          <h5>Following</h5>
-          <span>{{user.friends_count}}</span>
+          <a href="#" v-on:click.prevent="setProfileView('friends')" v-if="switcher"><h5 class="base05">Following</h5></a>
+          <h5 v-else>Following</h5>
+          <span class="base05">{{user.friends_count}}</span>
         </div>
         <div class="user-count">
-          <h5>Followers</h5>
-          <span>{{user.followers_count}}</span>
+          <a href="#" v-on:click.prevent="setProfileView('followers')" v-if="switcher"><h5 class="base05">Followers</h5></a>
+          <h5 v-else>Followers</h5>
+          <span class="base05">{{user.followers_count}}</span>
         </div>
       </div>
       <p>{{user.description}}</p>
@@ -67,7 +70,7 @@
 
 <script>
   export default {
-    props: [ 'user' ],
+    props: [ 'user', 'switcher' ],
     computed: {
       headingStyle () {
         let color = this.$store.state.config.colors['base00']
@@ -110,13 +113,18 @@
         const store = this.$store
         store.commit('setMuted', {user: this.user, muted: !this.user.muted})
         store.state.api.backendInteractor.setUserMute(this.user)
+      },
+      setProfileView (v) {
+        const store = this.$store
+        store.commit('setProfileView', { v })
       }
     }
   }
 </script>
 
 <style lang="scss">
-
+@import '../../_variables.scss';
+  
 .profile-panel-background {
   background-size: cover;
   border-radius: 10px;
@@ -242,6 +250,9 @@
         font-weight: bolder;
         margin: 0 0 0.25em;
     }
+    a {
+        text-decoration: none;
+    }
 }
 
 .dailyAvg {
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 69da422c..07c0c90f 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -2,7 +2,7 @@
   <div class="user-panel">
     <div v-if='user' class="panel panel-default">
 
-      <user-card-content :user="user"></user-card-content>
+      <user-card-content :user="user" :switcher="false"></user-card-content>
 
       <div class="panel-footer base00-background">
         <post-status-form v-if='user'></post-status-form>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 9241c469..9a357efc 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="user" class="user-profile panel panel-default base00-background">
-      <user-card-content :user="user"></user-card-content>
+      <user-card-content :user="user" :switcher="true"></user-card-content>
     </div>
     <Timeline :title="'User Timeline'" v-bind:timeline="timeline" v-bind:timeline-name="'user'" :user-id="userId"/>
   </div>