From c1853ca8c2d129fcc9877323950ce29c028ab70b Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Sun, 21 Jun 2020 00:56:06 -0600
Subject: [PATCH] Update Timeline component, add grid mode

---
 resources/assets/js/components/Timeline.vue | 35 +++++++++++++++++++--
 resources/views/timeline/local.blade.php    |  4 +++
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/resources/assets/js/components/Timeline.vue b/resources/assets/js/components/Timeline.vue
index f4c2cb5a6..6f7e5f274 100644
--- a/resources/assets/js/components/Timeline.vue
+++ b/resources/assets/js/components/Timeline.vue
@@ -6,8 +6,19 @@
 				<button class="btn btn-dark px-4 rounded-pill font-weight-bold shadow" @click="syncNewPosts">Load New Posts</button>
 			</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">
+				<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>
+				</p>
+			</div>
+			<hr>
+		</div>
 		<div :class="[modes.distractionFree ? 'col-md-8 col-lg-8 offset-md-2 px-0 mb-sm-3 timeline order-2 order-md-1':'col-md-8 col-lg-8 px-0 mb-sm-3 timeline order-2 order-md-1']">
-			<div style="margin-top:32px;">
+			<div style="margin-top:-8px;">
 				<story-component v-if="config.features.stories"></story-component>
 			</div>
 			<div>
@@ -330,6 +341,17 @@
 				</div>
 			</div>
 			<div v-else class="row">
+				<div class="col-12 pt-3">
+					<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>
+						</p>
+					</div>
+					<hr>
+				</div>
 				<div class="col-12 col-md-4 p-1 p-md-3 mb-3" v-for="(s, index) in feed" :key="`${index}-${s.id}`">
 					<div class="card info-overlay card-md-border-0 shadow-sm border border-light" :href="statusUrl(s)">
 						<div :class="[s.sensitive ? 'square' : 'square ' + s.media_attachments[0].filter_class]">
@@ -1557,7 +1579,16 @@
 				this.feed.unshift(...data);
 				this.morePostsAvailable = false;
 				this.mpData = null;
-			}
+			},
+
+			switchFeedLayout(toggle) {
+				this.loading = true;
+				this.layout = toggle;
+				let self = this;
+				setTimeout(function() {
+					self.loading = false;
+				}, 500);
+			},
 		},
 		beforeDestroy () {
 			clearInterval(this.mpInterval);
diff --git a/resources/views/timeline/local.blade.php b/resources/views/timeline/local.blade.php
index 47d8572e9..ddc4ef8b5 100644
--- a/resources/views/timeline/local.blade.php
+++ b/resources/views/timeline/local.blade.php
@@ -8,7 +8,11 @@
 	</div>
 </noscript>
 
+@if(request()->has('l') && request()->input('l') == 'grid')
+<timeline scope="local" layout="grid"></timeline>
+@else
 <timeline scope="local" layout="feed"></timeline>
+@endif
 
 <div class="modal pr-0" tabindex="-1" role="dialog" id="composeModal">
 	<div class="modal-dialog" role="document">