Merge pull request #2394 from pixelfed/staging

Update Profile + Timeline components, simplify UI

CHANGELOG.md

@@ -91,6 +91,7 @@
 - Updated SearchController, update version. ([8d923d77](https://github.com/pixelfed/pixelfed/commit/8d923d77))
 - Updated email confirmation middleware, add 2FA to allow list. Fixes ([#2385](https://github.com/pixelfed/pixelfed/issues/2385)). ([27f3b29c](https://github.com/pixelfed/pixelfed/commit/27f3b29c))
 - Updated NotificationTransformer, fixes ([#2389](https://github.com/pixelfed/pixelfed/issues/2389)). ([c4506ebd](https://github.com/pixelfed/pixelfed/commit/c4506ebd))
+- Updated Profile + Timeline components, simplify UI. ([38d28ab4](https://github.com/pixelfed/pixelfed/commit/38d28ab4))
 
 ## [v0.10.9 (2020-04-17)](https://github.com/pixelfed/pixelfed/compare/v0.10.8...v0.10.9)
 ### Added

resources/assets/js/components/Profile.vue

@@ -165,7 +165,7 @@
 						<a :class="this.mode == 'collections' ? 'nav-link text-dark' : 'nav-link'" href="#" v-on:click.prevent="switchMode('collections')"><i class="fas fa-images"></i> <span class="d-none d-md-inline-block small pl-1">COLLECTIONS</span></a>
 					</li>
 					<li v-if="owner" class="nav-item border-top">
-						<a :class="this.mode == 'bookmarks' ? 'nav-link text-dark' : 'nav-link'" href="#" v-on:click.prevent="switchMode('bookmarks')"><i class="fas fa-bookmark"></i></a>
+						<a :class="this.mode == 'bookmarks' ? 'nav-link text-dark' : 'nav-link'" href="#" v-on:click.prevent="switchMode('bookmarks')"><i class="fas fa-bookmark"></i> <span class="d-none d-md-inline-block small pl-1">SAVED</span></a>
 					</li>
 				</ul>
 			</div>

resources/assets/js/components/Timeline.vue

@@ -7,16 +7,17 @@
 			</p>
 		</div>
 		<div class="col-12 pl-3 pl-md-0 pt-3 pl-0">
-			<div class="d-flex justify-content-between align-items-center">
+			<div class="d-none d-md-flex justify-content-between align-items-center">
 				<p class="lead text-muted mb-0"><i :class="[scope == 'home' ? 'fas fa-home':'fas fa-stream']"></i> &nbsp; {{scope == 'local' ? 'Public' : 'Home'}} Timeline</p>
 				<p class="mb-0">
-					<a href="#" :class="[layout=='feed'?'font-weight-bold text-dark text-decoration-none':'font-weight-light text-muted text-decoration-none']" @click.prevent="switchFeedLayout('feed')"><i class="fas fa-list"></i> &nbsp; Feed</a>
-					&nbsp; | &nbsp; 
-					<a href="#" :class="[layout!=='feed'?'font-weight-bold text-dark text-decoration-none':'font-weight-light text-muted text-decoration-none']" @click.prevent="switchFeedLayout('grid')"><i class="fas fa-th"></i> &nbsp; Grid</a>
+					<span class="btn-group">
+						<a href="#" :class="[layout=='feed'?'btn btn-sm btn-outline-primary font-weight-bold text-decoration-none':'btn btn-sm btn-outline-lighter font-weight-light text-decoration-none']" @click.prevent="switchFeedLayout('feed')"><i class="fas fa-list"></i></a>
+						<a href="#" :class="[layout!=='feed'?'btn btn-sm btn-outline-primary font-weight-bold text-decoration-none':'btn btn-sm btn-outline-lighter font-weight-light text-decoration-none']" @click.prevent="switchFeedLayout('grid')"><i class="fas fa-th"></i></a>
+					</span>
 				</p>
 				<p class="mb-0 d-none d-md-block">
 					<a class="btn btn-block btn-primary btn-sm font-weight-bold border" href="/i/compose" data-toggle="modal" data-target="#composeModal">
-						<i class="fas fa-camera pr-3 fa-lg pt-1"></i> New Post
+						<i class="fas fa-camera fa-lg pt-1"></i>
 					</a>
 				</p>
 			</div>
@@ -266,8 +267,8 @@
 				</div> -->
 
 				<div class="mb-4">
-					<div v-show="!loading" class="card shadow-none border">
-						<div class="card-body pb-2">
+					<div v-show="!loading" class="">
+						<div class="pb-2">
 							<div class="media d-flex align-items-center">
 								<a :href="!userStory ? profile.url : '/stories/' + profile.acct" class="mr-3">
 									<!-- <img class="mr-3 rounded-circle box-shadow" :src="profile.avatar || '/storage/avatars/default.png'" alt="avatar" width="64px" height="64px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"> -->
@@ -292,7 +293,7 @@
 								</div>
 							</div>
 						</div>
-						<div class="card-footer bg-transparent border-top mt-2 py-1">
+						<!-- <div class="card-footer bg-transparent border-top mt-2 py-1">
 							<div class="d-flex justify-content-between text-center">
 								<span class="cursor-pointer" @click="redirect(profile.url)">
 									<p class="mb-0 font-weight-bold">{{formatCount(profile.statuses_count)}}</p>
@@ -307,7 +308,7 @@
 									<p class="mb-0 small text-muted">Following</p>
 								</span>
 							</div>
-						</div>
+						</div> -->
 					</div>
 				</div>
 
@@ -372,13 +373,14 @@
 					<div class="d-flex justify-content-between align-items-center">
 						<p class="lead text-muted mb-0"><i :class="[scope == 'home' ? 'fas fa-home':'fas fa-stream']"></i> &nbsp; {{scope == 'local' ? 'Public' : 'Home'}} Timeline</p>
 						<p class="mb-0">
-							<a href="#" :class="[layout=='feed'?'font-weight-bold text-dark text-decoration-none':'font-weight-light text-muted text-decoration-none']" @click.prevent="switchFeedLayout('feed')"><i class="fas fa-list"></i> &nbsp; Feed</a>
-							&nbsp; | &nbsp; 
-							<a href="#" :class="[layout!=='feed'?'font-weight-bold text-dark text-decoration-none':'font-weight-light text-muted text-decoration-none']" @click.prevent="switchFeedLayout('grid')"><i class="fas fa-th"></i> &nbsp; Grid</a>
+							<span class="btn-group">
+								<a href="#" :class="[layout=='feed'?'btn btn-sm btn-outline-primary font-weight-bold text-decoration-none':'btn btn-sm btn-outline-lighter font-weight-light text-decoration-none']" @click.prevent="switchFeedLayout('feed')"><i class="fas fa-list"></i></a>
+								<a href="#" :class="[layout!=='feed'?'btn btn-sm btn-outline-primary font-weight-bold text-decoration-none':'btn btn-sm btn-outline-lighter font-weight-light text-decoration-none']" @click.prevent="switchFeedLayout('grid')"><i class="fas fa-th"></i></a>
+							</span>
 						</p>
 						<p class="mb-0 d-none d-md-block">
 							<a class="btn btn-block btn-primary btn-sm font-weight-bold border" href="/i/compose" data-toggle="modal" data-target="#composeModal">
-								<i class="fas fa-camera pr-3 fa-lg pt-1"></i> New Post
+								<i class="fas fa-camera fa-lg pt-1"></i>
 							</a>
 						</p>
 					</div>

resources/views/status/compose.blade.php

@@ -2,37 +2,12 @@
 
 @section('content')
 
-<div class="compose-container container mt-5 d-none">
-	<div class="row">
-		<div class="col-12 col-md-6 offset-md-3">
-			<div class="alert alert-info text-center">
-				<span class="font-weight-bold">ComposeUI v3 is deprecated</span>
-				<br>
-				It will be removed after June 1st, 2020
-			</div>
-			<p class="lead text-center">
-				<a href="javascript:void(0)" class="btn btn-primary font-weight-bold" data-toggle="modal" data-target="#composeModal">Compose New Post</a>
-			</p>
-		</div>
-	</div>
+<div class="alert alert-info text-center rounded-0">
+<div class="container">
+<span class="font-weight-bold">ComposeUI v3 is deprecated</span>
+<br>
+Please use the <a href="#" onclick="event.preventDefault();window.App.util.compose.post()" class="font-weight-bold">new UI</a> to compose a post.
 </div>
-
-<div class="modal pr-0" tabindex="-1" role="dialog" id="composeModal">
-	<div class="modal-dialog" role="document">
-		<div class="modal-content">
-			<compose-classic></compose-classic>
-		</div>
-	</div>
 </div>
 
-@endsection
-
-@push('scripts')
-<script type="text/javascript" src="{{ mix('js/compose-classic.js') }}"></script>
-	<script type="text/javascript">
-		App.boot();
-		$('#composeModal').modal('show');
-		$('.compose-container').removeClass('d-none');
-	</script>
-
-@endpush
+@endsection