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

Update Profile Bookmarks
This commit is contained in:
daniel 2019-07-12 22:02:13 -06:00 committed by GitHub
commit c563beecdd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 516 additions and 512 deletions

View file

@ -306,4 +306,18 @@ class InternalApiController extends Controller
Cache::forget('profile:status_count:'.$profile->id);
return $status->url();
}
public function bookmarks(Request $request)
{
$statuses = Auth::user()->profile
->bookmarks()
->withCount(['likes','comments'])
->orderBy('created_at', 'desc')
->simplePaginate(10);
$resource = new Fractal\Resource\Collection($statuses, new StatusTransformer());
$res = $this->fractal->createData($resource)->toArray();
return response()->json($res);
}
}

View file

@ -240,23 +240,4 @@ class ProfileController extends Controller
}
return view('profile.following', compact('user', 'profile', 'following', 'owner', 'is_following', 'is_admin', 'settings'));
}
public function savedBookmarks(Request $request, $username)
{
if (Auth::check() === false || $username !== Auth::user()->username) {
abort(403);
}
$user = $profile = Auth::user()->profile;
if($profile->status != null) {
return $this->accountCheck($profile);
}
$settings = User::whereUsername($username)->firstOrFail()->settings;
$owner = true;
$following = false;
$timeline = $user->bookmarks()->withCount(['likes','comments'])->orderBy('created_at', 'desc')->simplePaginate(10);
$is_following = ($owner == false && Auth::check()) ? $user->followedBy(Auth::user()->profile) : false;
$is_admin = is_null($user->domain) ? $user->user->is_admin : false;
return view('profile.bookmarks', compact('user', 'profile', 'settings', 'owner', 'following', 'timeline', 'is_following', 'is_admin'));
}
}

View file

@ -192,8 +192,14 @@ class SettingsController extends Controller
$patreon = Str::startsWith($request->input('patreon'), 'https://') ?
substr($request->input('patreon'), 8) :
$request->input('patreon');
$liberapay = Str::startsWith($request->input('liberapay'), 'https://') ? substr($request->input('liberapay'), 8) : $request->input('liberapay');
$opencollective = Str::startsWith($request->input('opencollective'), 'https://') ? substr($request->input('opencollective'), 8) : $request->input('opencollective');
$liberapay = Str::startsWith($request->input('liberapay'), 'https://') ?
substr($request->input('liberapay'), 8) :
$request->input('liberapay');
$opencollective = Str::startsWith($request->input('opencollective'), 'https://') ?
substr($request->input('opencollective'), 8) :
$request->input('opencollective');
$patreon = Str::startsWith($patreon, 'patreon.com/') ? e($patreon) : null;
$liberapay = Str::startsWith($liberapay, 'liberapay.com/') ? e($liberapay) : null;

BIN
public/js/profile.js vendored

Binary file not shown.

Binary file not shown.

View file

@ -1,5 +1,5 @@
<template>
<div class="w-100 h-100">
<div class="w-100 h-100">
<div v-if="relationship && relationship.blocking && warning" class="bg-white pt-3 border-bottom">
<div class="container">
<p class="text-center font-weight-bold">You are blocking this account</p>
@ -144,29 +144,24 @@
</div>
<div class="bg-white">
<ul class="nav nav-topbar d-flex justify-content-center border-0">
<!-- <li class="nav-item">
<a class="nav-link active font-weight-bold text-uppercase" :href="profile.url">Posts</a>
</li>
-->
<li class="nav-item">
<a :class="this.mode == 'grid' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('grid')"><i class="fas fa-th fa-lg"></i></a>
</li>
<!-- <li class="nav-item">
<a :class="this.mode == 'masonry' ? 'nav-link font-weight-bold text-uppercase active' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('masonry')"><i class="fas fa-th-large"></i></a>
</li> -->
<li class="nav-item px-3">
<li class="nav-item px-3">
<a :class="this.mode == 'list' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('list')"><i class="fas fa-th-list fa-lg"></i></a>
</li>
</li>
<!-- <li class="nav-item pr-3">
<a :class="this.mode == 'collections' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('collections')"><i class="fas fa-images fa-lg"></i></a>
</li> -->
<li class="nav-item" v-if="owner">
<a :class="this.mode == 'bookmarks' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('bookmarks')"><i class="fas fa-bookmark fa-lg"></i></a>
</li>
</ul>
</div>
<li class="nav-item" v-if="owner">
<a class="nav-link font-weight-bold text-uppercase" :href="profile.url + '/saved'">Saved</a>
</li>
</ul>
</div>
<div class="container">
<div class="container">
<div class="profile-timeline mt-md-4">
<div class="row" v-if="mode == 'grid'">
<div class="col-4 p-0 p-sm-2 p-md-3 p-xs-1" v-for="(s, index) in timeline">
@ -287,24 +282,45 @@
</div>
</div>
</div>
<div class="masonry-grid" v-if="mode == 'masonry'">
<div class="d-inline p-0 p-sm-2 p-md-3 masonry-item" v-for="(status, index) in timeline">
<a class="" v-on:click.prevent="statusModal(status)" :href="status.url">
<img :src="previewUrl(status)" :class="'o-'+masonryOrientation(status)">
</a>
</div>
</div>
<div v-if="timeline.length">
<div v-if="timeline.length && ['grid','list'].indexOf(mode) != -1">
<infinite-loading @infinite="infiniteTimeline">
<div slot="no-more"></div>
<div slot="no-results"></div>
</infinite-loading>
</div>
<div class="row" v-if="mode == 'bookmarks'">
<div class="col-4 p-0 p-sm-2 p-md-3 p-xs-1" v-for="(s, index) in bookmarks">
<a class="card info-overlay card-md-border-0" :href="s.url">
<div class="square">
<span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
<span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
<span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
<div class="square-content" v-bind:style="previewBackground(s)">
</div>
<div class="info-overlay-text">
<h5 class="text-white m-auto font-weight-bold">
<span>
<span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
<span class="d-flex-inline">{{s.favourites_count}}</span>
</span>
<span>
<span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
<span class="d-flex-inline">{{s.reblogs_count}}</span>
</span>
</h5>
</div>
</div>
</a>
</div>
</div>
<div class="row" v-if="mode == 'collections'">
<p class="text-center">Collections here</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="profileLayout == 'moment'">
<div v-if="profileLayout == 'moment'">
<div :class="momentBackground()" style="width:100%;min-height:274px;">
</div>
<div class="bg-white border-bottom">
@ -381,18 +397,15 @@
</div>
</div>
</div>
</div>
</div>
<!-- <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>
</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">
@ -421,15 +434,15 @@ body-class="list-group-flush p-0">
<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>
</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">
@ -450,16 +463,16 @@ body-class="list-group-flush p-0">
<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>
<b-modal ref="visitorContextMenu"
id="visitor-context-menu"
hide-footer
hide-header
centered
size="sm"
body-class="list-group-flush p-0">
<div class="list-group" v-if="relationship">
</div>
</b-modal>
<b-modal ref="visitorContextMenu"
id="visitor-context-menu"
hide-footer
hide-header
centered
size="sm"
body-class="list-group-flush p-0">
<div class="list-group" v-if="relationship">
<div v-if="!owner && !relationship.following" class="list-group-item cursor-pointer text-center font-weight-bold lead rounded text-primary" @click="followProfile">
Follow
</div>
@ -484,16 +497,16 @@ body-class="list-group-flush p-0">
<div class="list-group-item cursor-pointer text-center font-weight-bold lead rounded text-muted" @click="$refs.visitorContextMenu.hide()">
Close
</div>
</div>
</b-modal>
<b-modal ref="sponsorModal"
id="sponsor-modal"
hide-footer
:title="'Sponsor ' + profileUsername"
centered
size="md"
body-class="px-5">
<div>
</div>
</b-modal>
<b-modal ref="sponsorModal"
id="sponsor-modal"
hide-footer
:title="'Sponsor ' + profileUsername"
centered
size="md"
body-class="px-5">
<div>
<p class="font-weight-bold">External Links</p>
<p v-if="sponsorList.patreon" class="pt-2">
<a :href="'https://' + sponsorList.patreon" rel="nofollow" class="font-weight-bold">{{sponsorList.patreon}}</a>
@ -504,21 +517,10 @@ body-class="px-5">
<p v-if="sponsorList.opencollective" class="pt-2">
<a :href="'https://' + sponsorList.opencollective" rel="nofollow" class="font-weight-bold">{{sponsorList.opencollective}}</a>
</p>
</div>
</b-modal>
</div>
</b-modal>
</div>
</template>
<!-- <style type="text/css" scoped="">
.modal-body {
padding: 0;
margin: 0;
}
@media (min-width: 992px) {
.modal-lg, .modal-xl {
max-width: 900px;
}
}
</style> -->
<style type="text/css" scoped>
.o-square {
max-width: 320px;
@ -558,7 +560,7 @@ max-width: 900px;
loading: true,
owner: false,
mode: 'grid',
modes: ['grid', 'list', 'masonry'],
modes: ['grid', 'list', 'masonry', 'bookmarks'],
modalStatus: false,
relationship: {},
followers: [],
@ -569,6 +571,10 @@ max-width: 900px;
followingMore: true,
warning: false,
sponsorList: [],
bookmarks: [],
bookmarksPage: 2,
collections: [],
collectionsPage: 2
}
},
beforeMount() {
@ -676,10 +682,10 @@ max-width: 900px;
switchMode(mode) {
this.mode = _.indexOf(this.modes, mode) ? mode : 'grid';
if(this.mode == 'masonry') {
$('.masonry').masonry({
columnWidth: 200,
itemSelector: '.masonry-item'
if(this.mode == 'bookmarks' && this.bookmarks.length == 0) {
axios.get('/api/local/bookmarks')
.then(res => {
this.bookmarks = res.data
});
}
},

View file

@ -90,7 +90,6 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
Route::get('notifications', 'ApiController@notifications');
Route::get('timelines/public', 'PublicApiController@publicTimelineApi');
Route::get('timelines/home', 'PublicApiController@homeTimelineApi');
// Route::get('timelines/network', 'PublicApiController@homeTimelineApi');
});
Route::group(['prefix' => 'v2'], function() {
Route::get('config', 'ApiController@siteConfiguration');
@ -115,6 +114,7 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
Route::post('discover/tag/subscribe', 'HashtagFollowController@store')->middleware('throttle:maxHashtagFollowsPerHour,60')->middleware('throttle:maxHashtagFollowsPerDay,1440');;
Route::get('discover/tag/list', 'HashtagFollowController@getTags');
Route::get('profile/sponsor/{id}', 'ProfileSponsorController@get');
Route::get('bookmarks', 'InternalApiController@bookmarks');
});
});
@ -201,7 +201,6 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
Route::get('privacy/blocked-keywords', 'SettingsController@blockedKeywords')->name('settings.privacy.blocked-keywords');
Route::post('privacy/account', 'SettingsController@privateAccountOptions')->name('settings.privacy.account');
Route::get('reports', 'SettingsController@reportsHome')->name('settings.reports');
// Todo: Release in 0.7.2
Route::group(['prefix' => 'remove', 'middleware' => 'dangerzone'], function() {
Route::get('request/temporary', 'SettingsController@removeAccountTemporary')->name('settings.remove.temporary');
Route::post('request/temporary', 'SettingsController@removeAccountTemporarySubmit');
@ -304,7 +303,6 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
Route::group(['prefix' => 'timeline'], function () {
Route::redirect('/', '/');
Route::get('public', 'TimelineController@local')->name('timeline.public');
// Route::get('network', 'TimelineController@network')->name('timeline.network');
});
Route::group(['prefix' => 'users'], function () {
@ -321,7 +319,6 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
Route::get('p/{username}/{id}/edit', 'StatusController@edit');
Route::post('p/{username}/{id}/edit', 'StatusController@editStore');
Route::get('p/{username}/{id}', 'StatusController@show');
Route::get('{username}/saved', 'ProfileController@savedBookmarks');
Route::get('{username}/followers', 'ProfileController@followers')->middleware('auth');
Route::get('{username}/following', 'ProfileController@following')->middleware('auth');
Route::get('{username}', 'ProfileController@show');