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

Frontend ui refactor

app/Jobs/LikePipeline/LikePipeline.php

@@ -69,19 +69,13 @@ class LikePipeline implements ShouldQueue
             $notification->profile_id = $status->profile_id;
             $notification->actor_id = $actor->id;
             $notification->action = 'like';
-            $notification->message = $like->toText();
-            $notification->rendered = $like->toHtml();
+            $notification->message = $like->toText($status->in_reply_to_id ? 'comment' : 'post');
+            $notification->rendered = $like->toHtml($status->in_reply_to_id ? 'comment' : 'post');
             $notification->item_id = $status->id;
             $notification->item_type = "App\Status";
             $notification->save();
 
-            Cache::forever('notification.'.$notification->id, $notification);
-
-            $redis = Redis::connection();
-            $key = config('cache.prefix').':user.'.$status->profile_id.'.notifications';
-            $redis->lpush($key, $notification->id);
         } catch (Exception $e) {
-            Log::error($e);
         }
     }
 }

app/Like.php

@@ -27,19 +27,20 @@ class Like extends Model
         return $this->belongsTo(Status::class);
     }
 
-    public function toText()
+    public function toText($type = 'post')
     {
         $actorName = $this->actor->username;
+        $msg = $type == 'post' ? __('notification.likedPhoto') : __('notification.likedComment');
 
-        return "{$actorName} ".__('notification.likedPhoto');
+        return "{$actorName} ".$msg;
     }
 
-    public function toHtml()
+    public function toHtml($type = 'post')
     {
         $actorName = $this->actor->username;
         $actorUrl = $this->actor->url();
+        $msg = $type == 'post' ? __('notification.likedPhoto') : __('notification.likedComment');
 
-        return "<a href='{$actorUrl}' class='profile-link'>{$actorName}</a> ".
-          __('notification.likedPhoto');
+        return "<a href='{$actorUrl}' class='profile-link'>{$actorName}</a> ".$msg;
     }
 }

resources/assets/js/components/Timeline.vue

@@ -220,10 +220,12 @@
 					<notification-card></notification-card>
 				</div>
 
-				<div v-show="suggestions.length && config.ab && config.ab.rec == true" class="mb-4">
+				<div v-show="showSuggestions == true && suggestions.length && config.ab && config.ab.rec == true" class="mb-4">
 					<div class="card">
-						<div class="card-header bg-white text-center">
+						<div class="card-header bg-white d-flex align-items-center justify-content-between">
+							<div></div>
 							<div class="small text-dark text-uppercase font-weight-bold">Suggestions</div>
+							<div class="small text-muted cursor-pointer" v-on:click="hideSuggestions"><i class="fas fa-times"></i></div>
 						</div>
 						<div class="card-body pt-0">
 							<div v-for="(rec, index) in suggestions" class="media align-items-center mt-3">
@@ -386,7 +388,8 @@
 				following: [],
 				followingCursor: 1,
 				followingMore: true,
-				lightboxMedia: false
+				lightboxMedia: false,
+				showSuggestions: false
 			}
 		},
 
@@ -406,6 +409,12 @@
 				this.modes.dark = true;
 			}
 
+			if(localStorage.getItem('pf_metro_ui.exp.rec') == 'false') {
+				this.showSuggestions = false;
+			} else {
+				this.showSuggestions = true;
+			}
+
 			this.$nextTick(function () {
 				$('[data-toggle="tooltip"]').tooltip()
 			});
@@ -1006,6 +1015,11 @@
 
 			ownerOrAdmin(status) {
 				return this.owner(status) || this.admin();
+			},
+
+			hideSuggestions() {
+				localStorage.setItem('pf_metro_ui.exp.rec', false);
+				this.showSuggestions = false;
 			}
 		}
 	}

resources/lang/en/notification.php

@@ -2,7 +2,8 @@
 
 return [
 
-  'likedPhoto'          => 'liked your photo.',
+  'likedPhoto'          => 'liked your post.',
+  'likedComment'        => 'liked your comment.',
   'startedFollowingYou' => 'started following you.',
   'commented'           => 'commented on your post.',
   'mentionedYou'        => 'mentioned you.',

resources/views/settings/labs.blade.php

@@ -38,6 +38,15 @@
 			</label>
 			<p class="text-muted small help-text">Use dark mode theme.</p>
 		</div>
+		@if(config('exp.rec') == true)
+		<div class="form-check pb-3">
+			<input class="form-check-input" type="checkbox" name="show_suggestions" id="show_suggestions">
+			<label class="form-check-label font-weight-bold" for="show_suggestions">
+				{{__('Profile Suggestions')}}
+			</label>
+			<p class="text-muted small help-text">Show Profile Suggestions</p>
+		</div>
+		@endif
 		<div class="py-3">
 			<p class="font-weight-bold text-muted text-center">Discovery</p>
 			<hr>
@@ -58,4 +67,24 @@
 			</div>
 		</div>
 	</form>
-	@endsection
+	@endsection
+
+@push('scripts')
+<script type="text/javascript">
+$(document).ready(function() {
+	let showSuggestions = localStorage.getItem('pf_metro_ui.exp.rec') == 'false' ? false : true;
+
+	if(showSuggestions == true) {
+		$('#show_suggestions').attr('checked', true);
+	}
+
+	$('#show_suggestions').on('change', function(e) {
+		if(e.target.checked) {
+			localStorage.removeItem('pf_metro_ui.exp.rec');
+		} else {
+			localStorage.setItem('pf_metro_ui.exp.rec', false);
+		}
+	})
+});
+</script>
+@endpush