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

Frontend ui refactor
This commit is contained in:
daniel 2019-02-24 22:05:09 -07:00 committed by GitHub
commit bc84d8a994
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 151 additions and 9 deletions

View file

@ -395,8 +395,12 @@ class PublicApiController extends Controller
public function accountFollowers(Request $request, $id)
{
$profile = Profile::findOrFail($id);
$followers = $profile->followers;
abort_unless(Auth::check(), 403);
$profile = Profile::with('user')->whereNull('status')->whereNull('domain')->findOrFail($id);
if($profile->is_private || !$profile->user->settings->show_profile_followers) {
return [];
}
$followers = $profile->followers()->orderByDesc('followers.created_at')->paginate(10);
$resource = new Fractal\Resource\Collection($followers, new AccountTransformer());
$res = $this->fractal->createData($resource)->toArray();
@ -405,8 +409,12 @@ class PublicApiController extends Controller
public function accountFollowing(Request $request, $id)
{
$profile = Profile::findOrFail($id);
$following = $profile->following;
abort_unless(Auth::check(), 403);
$profile = Profile::with('user')->whereNull('status')->whereNull('domain')->findOrFail($id);
if($profile->is_private || !$profile->user->settings->show_profile_following) {
return [];
}
$following = $profile->following()->orderByDesc('followers.created_at')->paginate(10);
$resource = new Fractal\Resource\Collection($following, new AccountTransformer());
$res = $this->fractal->createData($resource)->toArray();
@ -468,4 +476,5 @@ class PublicApiController extends Controller
return response()->json($res);
}
}

File diff suppressed because one or more lines are too long

View file

@ -6,7 +6,7 @@
"/js/components.js": "/js/components.js?id=42433de4ebbff72c4293",
"/js/discover.js": "/js/discover.js?id=95091dda6723ab05dbb5",
"/js/micro.js": "/js/micro.js?id=178479fb6990f8806257",
"/js/profile.js": "/js/profile.js?id=dd006b565cac9962d5ad",
"/js/profile.js": "/js/profile.js?id=6ec75334f334309063e0",
"/js/status.js": "/js/status.js?id=096927f9312b1d7bb1b0",
"/js/timeline.js": "/js/timeline.js?id=4101fb6ac1673f3e0abd"
}

View file

@ -39,13 +39,13 @@
</a>
</div>
<div class="font-weight-light pr-5">
<a class="text-dark" :href="profile.url + '/followers'">
<a class="text-dark cursor-pointer" v-on:click="followersModal()">
<span class="font-weight-bold">{{profile.followers_count}}</span>
Followers
</a>
</div>
<div class="font-weight-light pr-5">
<a class="text-dark" :href="profile.url + '/following'">
<a class="text-dark cursor-pointer" v-on:click="followingModal()">
<span class="font-weight-bold">{{profile.following_count}}</span>
Following
</a>
@ -223,6 +223,64 @@
<!-- <b-modal id="statusModal" ref="statusModalRef" hide-footer hide-header v-if="modalStatus" size="lg" v-on:hide.native="closeModal()" lazy class="border-0">
<post-component v-bind:status-template="modalStatus.pf_type" v-bind:status-id="modalStatus.id" v-bind:status-username="modalStatus.account.username" v-bind:status-url="modalStatus.url" v-bind:status-profile-url="modalStatus.account.url" v-bind:status-avatar="modalStatus.account.avatar"></post-component>
</b-modal> -->
<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>
<!-- <style type="text/css" scoped="">
@ -271,7 +329,13 @@ export default {
mode: 'grid',
modes: ['grid', 'list', 'masonry'],
modalStatus: false,
relationship: {}
relationship: {},
followers: [],
followerCursor: 1,
followerMore: true,
following: [],
followingCursor: 1,
followingMore: true
}
},
beforeMount() {
@ -592,6 +656,73 @@ export default {
}
this.relationship.following = !this.relationship.following;
});
},
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;
}
});
}
}
}

View file

@ -70,6 +70,8 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
Route::get('accounts/verify_credentials', 'ApiController@verifyCredentials');
Route::get('accounts/relationships', 'PublicApiController@relationships');
Route::get('accounts/{id}/statuses', 'PublicApiController@accountStatuses');
Route::get('accounts/{id}/following', 'PublicApiController@accountFollowing');
Route::get('accounts/{id}/followers', 'PublicApiController@accountFollowers');
Route::get('accounts/{id}', 'PublicApiController@account');
Route::post('avatar/update', 'ApiController@avatarUpdate');
Route::get('likes', 'ApiController@hydrateLikes');