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

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

Browse source 
Feature/follow lists

See merge request !106
This commit is contained in:
Shpuld Shpuldson 2017-08-23 12:40:39 -04:00
commit 2bc261afba
11 changed files with 226 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/status/status.vue
View file

@ -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">

31
src/components/timeline/timeline.js
View file

@ -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)) {

33
src/components/timeline/timeline.vue
View file

@ -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;

23
src/components/user_card/user_card.js Normal file
View file

@ -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

61
src/components/user_card/user_card.vue Normal file
View file

@ -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>

29
src/components/user_card_content/user_card_content.vue
View file

@ -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 {

2
src/components/user_panel/user_panel.vue
View file

@ -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>

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

@ -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>