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

Update Profile Bookmarks

app/Http/Controllers/InternalApiController.php

@@ -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);
+    }
 }

app/Http/Controllers/ProfileController.php

@@ -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'));
-    }
-
 }

app/Http/Controllers/SettingsController.php

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

resources/assets/js/components/Profile.vue

@@ -144,24 +144,19 @@
 			</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">
 						<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 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="nav-link font-weight-bold text-uppercase" :href="profile.url + '/saved'">Saved</a>
+						<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>
@@ -287,19 +282,40 @@
 							</div>
 						</div>
 					</div>
-		<div class="masonry-grid" v-if="mode == 'masonry'">
+					<div v-if="timeline.length && ['grid','list'].indexOf(mode) != -1">
-			<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">
 						<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>
@@ -383,9 +399,6 @@
 			</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
@@ -508,17 +521,6 @@ body-class="px-5">
 	</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') {
+				if(this.mode == 'bookmarks' && this.bookmarks.length == 0) {
-					$('.masonry').masonry({
+					axios.get('/api/local/bookmarks')
-						columnWidth: 200,
+					.then(res => {
-						itemSelector: '.masonry-item'
+						this.bookmarks = res.data
 					});
 				}
 			},

routes/web.php

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