therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor follower/friends out of statuses/timeline into user_profile where it

Browse source 
belongs. Changed display of profile to single panel with tabs.
This commit is contained in:
Henry Jameson 2018-12-17 19:14:38 +03:00
parent eaf065c751
commit 8f255fbad4
6 changed files with 110 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/user_profile/user_profile.js
View file

@ -1,4 +1,5 @@
import UserCardContent from '../user_card_content/user_card_content.vue'
import UserCard from '../user_card/user_card.vue'
import Timeline from '../timeline/timeline.vue'
const UserProfile = {
@ -14,6 +15,12 @@ const UserProfile = {
},
computed: {
timeline () { return this.$store.state.statuses.timelines.user },
friends () {
return this.user.friends
},
followers () {
return this.user.followers
},
userId () {
return this.$route.params.id
},
@ -25,15 +32,32 @@ const UserProfile = {
}
}
},
methods: {
fetchFollowers () {
const id = this.userId
this.$store.dispatch('addFollowers', { id })
},
fetchFriends () {
const id = this.userId
this.$store.dispatch('addFriends', { id })
}
},
watch: {
userId () {
this.$store.dispatch('stopFetching', 'user')
this.$store.commit('clearTimeline', { timeline: 'user' })
this.$store.dispatch('startFetching', ['user', this.userId])
},
user () {
if (!this.user.followers) {
this.fetchFollowers()
this.fetchFriends()
}
}
},
components: {
UserCardContent,
UserCard,
Timeline
}
}

66
src/components/user_profile/user_profile.vue
View file

@ -1,20 +1,38 @@
<template>
<div>
<div v-if="user" class="user-profile panel panel-default">
<user-card-content :user="user" :switcher="true" :selected="timeline.viewing"></user-card-content>
</div>
<div v-else class="panel user-profile-placeholder">
<div class="panel-heading">
<div class="title">
{{ $t('settings.profile_tab') }}
<div>
<div v-if="user" class="user-profile panel panel-default">
<user-card-content :user="user" :switcher="true" :selected="timeline.viewing"></user-card-content>
<tab-switcher>
<Timeline label="Posts" :embedded="true" :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="userId"/>
<div :label="$t('user_card.followers')">
<div v-if="followers">
<user-card v-for="follower in followers" :key="follower.id" :user="follower" :showFollows="false"></user-card>
</div>
<div class="userlist-placeholder" v-else>
<i class="icon-spin3 animate-spin"></i>
</div>
</div>
<div class="panel-body">
<i class="icon-spin3 animate-spin"></i>
<div :label="$t('user_card.followees')">
<div v-if="friends">
<user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card>
</div>
<div class="userlist-placeholder" v-else>
<i class="icon-spin3 animate-spin"></i>
</div>
</div>
</tab-switcher>
</div>
<div v-else class="panel user-profile-placeholder">
<div class="panel-heading">
<div class="title">
{{ $t('settings.profile_tab') }}
</div>
</div>
<Timeline :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="userId"/>
<div class="panel-body">
<i class="icon-spin3 animate-spin"></i>
</div>
</div>
</div>
</template>
<script src="./user_profile.js"></script>
@ -24,12 +42,36 @@
.user-profile {
flex: 2;
flex-basis: 500px;
padding-bottom: 10px;
.panel-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
}
.userlist-placeholder {
display: flex;
justify-content: center;
align-items: middle;
padding: 2em;
}
.timeline-heading {
display: flex;
justify-content: center;
.loadmore-button, .alert {
flex: 1;
}
.loadmore-button {
height: 28px;
margin: 10px .6em;
}
.title, .loadmore-text {
display: none
}
}
}
.user-profile-placeholder {
.panel-body {