mirror
/
pixelfed
mirror of https://github.com/pixelfed/pixelfed.git
1
0
Fork 1
Code Issues Releases Wiki Activity

Merge pull request #900 from pixelfed/frontend-ui-refactor 

Frontend ui refactor
This commit is contained in:
daniel 2019-02-27 21:03:45 -07:00 committed by GitHub
parent 04aaf96aa5 16336bf5bc
commit 811146730b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 138 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/js/components.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/js/timeline.js vendored
View File

File diff suppressed because one or more lines are too long

4
public/mix-manifest.json
View File

@ -3,10 +3,10 @@
"/js/app.js": "/js/app.js?id=a51da95c2b9df7cf8de2",
"/css/app.css": "/css/app.css?id=04eb4b8faed92dddf9b8",
"/css/appdark.css": "/css/appdark.css?id=30395a38e7b5e41dfc52",
"/js/components.js": "/js/components.js?id=42433de4ebbff72c4293",
"/js/components.js": "/js/components.js?id=57c50c50a350244acfec",
"/js/discover.js": "/js/discover.js?id=95091dda6723ab05dbb5",
"/js/micro.js": "/js/micro.js?id=178479fb6990f8806257",
"/js/profile.js": "/js/profile.js?id=488dcd99d616ca9ef8de",
"/js/status.js": "/js/status.js?id=096927f9312b1d7bb1b0",
"/js/timeline.js": "/js/timeline.js?id=7a82d4fdc9c5d88394c3"
"/js/timeline.js": "/js/timeline.js?id=340af840d0b13e175282"
}

137
resources/assets/js/components/Timeline.vue
View File

@ -183,11 +183,11 @@
<p class="mb-0 font-weight-bold">{{profile.statuses_count}}</p>
<p class="mb-0 small text-muted">Posts</p>
</span>
<span class="cursor-pointer" v-on:click="redirect(profile.url + '/followers')">
<span class="cursor-pointer" v-on:click="followersModal()">
<p class="mb-0 font-weight-bold">{{profile.followers_count}}</p>
<p class="mb-0 small text-muted">Followers</p>
</span>
<span class="pr-3 cursor-pointer" v-on:click="redirect(profile.url + '/following')">
<span class="pr-3 cursor-pointer" v-on:click="followingModal()">
<p class="mb-0 font-weight-bold">{{profile.following_count}}</p>
<p class="mb-0 small text-muted">Following</p>
</span>
@ -297,6 +297,64 @@
</footer>
</div>
</div>
<b-modal ref="followingModal"
id="following-modal"
hide-footer
centered
title="Following"
body-class="list-group-flush p-0">
<div class="list-group">
<div class="list-group-item border-0" v-for="(user, index) in following" :key="'following_'+index">
<div class="media">
<a :href="user.url">
<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '\'s avatar'" width="30px">
</a>
<div class="media-body">
<p class="mb-0" style="font-size: 14px">
<a :href="user.url" class="font-weight-bold text-dark">
{{user.username}}
</a>
</p>
<p class="text-muted mb-0" style="font-size: 14px">
{{user.display_name}}
</p>
</div>
</div>
</div>
<div v-if="followingMore" class="list-group-item text-center" v-on:click="followingLoadMore()">
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
</div>
</div>
</b-modal>
<b-modal ref="followerModal"
id="follower-modal"
hide-footer
centered
title="Followers"
body-class="list-group-flush p-0">
<div class="list-group">
<div class="list-group-item border-0" v-for="(user, index) in followers" :key="'follower_'+index">
<div class="media">
<a :href="user.url">
<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '\'s avatar'" width="30px">
</a>
<div class="media-body">
<p class="mb-0" style="font-size: 14px">
<a :href="user.url" class="font-weight-bold text-dark">
{{user.username}}
</a>
</p>
<p class="text-muted mb-0" style="font-size: 14px">
{{user.display_name}}
</p>
</div>
</div>
</div>
<div v-if="followerMore" class="list-group-item text-center" v-on:click="followersLoadMore()">
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
</div>
</div>
</b-modal>
</div>
</template>
@ -337,7 +395,13 @@
'dark': false,
'notify': true,
'infinite': true
}
},
followers: [],
followerCursor: 1,
followerMore: true,
following: [],
followingCursor: 1,
followingMore: true
}
},
@ -812,6 +876,73 @@
modeInfiniteToggle() {
this.modes.infinite = !this.modes.infinite
window.ls.set('pixelfed-classicui-settings', this.modes);
},
followingModal() {
if(this.following.length > 0) {
this.$refs.followingModal.show();
return;
}
axios.get('/api/v1/accounts/'+this.profile.id+'/following', {
params: {
page: this.followingCursor
}
})
.then(res => {
this.following = res.data;
this.followingCursor++;
});
this.$refs.followingModal.show();
},
followersModal() {
if(this.followers.length > 0) {
this.$refs.followerModal.show();
return;
}
axios.get('/api/v1/accounts/'+this.profile.id+'/followers', {
params: {
page: this.followerCursor
}
})
.then(res => {
this.followers = res.data;
this.followerCursor++;
})
this.$refs.followerModal.show();
},
followingLoadMore() {
axios.get('/api/v1/accounts/'+this.profile.id+'/following', {
params: {
page: this.followingCursor
}
})
.then(res => {
if(res.data.length > 0) {
this.following.push(...res.data);
this.followingCursor++;
} else {
this.followingMore = false;
}
});
},
followersLoadMore() {
axios.get('/api/v1/accounts/'+this.profile.id+'/followers', {
params: {
page: this.followerCursor
}
})
.then(res => {
if(res.data.length > 0) {
this.followers.push(...res.data);
this.followerCursor++;
} else {
this.followerMore = false;
}
});
}
}
}