Add Force MetroUI labs experiment

resources/assets/js/components/PostComponent.vue

@@ -10,7 +10,7 @@
     </div>
   </div>
   <div v-if="loaded && warning == false" class="postComponent">
-    <div v-if="profileLayout == 'metro'" class="container px-0">
+    <div v-if="layout == 'metro'" class="container px-0">
       <div class="card card-md-rounded-0 status-container orientation-unknown shadow-none border">
         <div class="row px-0 mx-0">
         <div class="d-flex d-md-none align-items-center justify-content-between card-header bg-white w-100">
@@ -245,7 +245,7 @@
       </div>
     </div>
 
-    <div v-if="profileLayout == 'moment'" class="momentui">
+    <div v-if="layout == 'moment'" class="momentui">
       <div class="bg-dark mt-md-n4">
         <div class="container" v-on:dblclick="likeStatus">
               <div class="postPresenterContainer d-none d-flex justify-content-center align-items-center bg-dark">
@@ -619,16 +619,18 @@ export default {
             showCaption: true,
             ctxEmbedPayload: false,
             copiedEmbed: false,
+            layout: this.profileLayout
           }
     },
 
     beforeMount() {
       let u = new URLSearchParams(window.location.search);
-      if(u.has('ui') && u.get('ui') == 'moment' && this.profileLayout != 'moment') {
-        this.profileLayout = 'moment';
+      let forceMetro = localStorage.getItem('pf_metro_ui.exp.forceMetro') == 'true';
+      if(forceMetro == true || u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
+        this.layout = 'metro';
       }
-      if(u.has('ui') && u.get('ui') == 'metro' && this.profileLayout != 'metro') {
-        this.profileLayout = 'metro';
+      if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') {
+        this.layout = 'moment';
       }
     },
 
@@ -914,7 +916,7 @@ export default {
         .then(function(res) {
           let entity = res.data.entity;
           if(entity.in_reply_to_id == self.status.id) {
-            if(self.profileLayout == 'metro') {
+            if(self.layout == 'metro') {
               self.results.push(entity);
             } else {
               self.results.unshift(entity);
@@ -973,7 +975,7 @@ export default {
           axios.get(url)
             .then(response => {
                 let self = this;
-                this.results = this.profileLayout == 'metro' ? 
+                this.results = this.layout == 'metro' ? 
                   _.reverse(response.data.data) :
                   response.data.data;
                 this.pagination = response.data.meta.pagination;

resources/assets/js/components/Profile.vue

@@ -569,20 +569,17 @@
 			}
 		},
 		beforeMount() {
-			if(window.outerWidth < 576) {
-				$('nav.navbar').hide();
-				this.isMobile = true;
-			}
 			this.fetchRelationships();
 			this.fetchProfile();
 			let u = new URLSearchParams(window.location.search);
+			let forceMetro = localStorage.getItem('pf_metro_ui.exp.forceMetro') == 'true';
+			if(forceMetro == true || u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
+				this.layout = 'metro';
+			}
 			if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') {
 				Vue.use(VueMasonry);
 				this.layout = 'moment';
 			}
-			if(u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
-				this.layout = 'metro';
-			}
 			if(this.layout == 'metro' && u.has('t')) {
 				if(this.modes.indexOf(u.get('t')) != -1) {
 					if(u.get('t') == 'bookmarks') {
@@ -607,6 +604,10 @@
 					this.user = res.data;
 				});
 			}
+			if(window.outerWidth < 576) {
+				$('nav.navbar').hide();
+				this.isMobile = true;
+			}
 		},
 
 		updated() {

resources/views/settings/labs.blade.php

@@ -182,6 +182,11 @@
 			<label class="form-check-label font-weight-bold">Show Tips</label>
 			<p class="text-muted small help-text">Show Tips on Timelines (Desktop Only)</p>
 		</div>
+		<div class="form-check pb-3">
+			<input class="form-check-input" type="checkbox" id="force_metro">
+			<label class="form-check-label font-weight-bold">Force Metro Layout</label>
+			<p class="text-muted small help-text">Force MetroUI layout for profiles and posts.</p>
+		</div>
 		<div class="py-3">
 			<p class="font-weight-bold text-muted text-center">Discovery</p>
 			<hr>
@@ -210,6 +215,7 @@ $(document).ready(function() {
 	let showSuggestions = localStorage.getItem('pf_metro_ui.exp.rec') == 'false' ? false : true;
 	let showReadMore = localStorage.getItem('pf_metro_ui.exp.rm') == 'false' ? false : true;
 	let distractionFree = localStorage.getItem('pf_metro_ui.exp.df') == 'true' ? true : false;
+	let forceMetro = localStorage.getItem('pf_metro_ui.exp.forceMetro') == 'true' ? true : false;
 
 	if(showSuggestions == true) {
 		$('#show_suggestions').attr('checked', true);
@@ -227,6 +233,10 @@ $(document).ready(function() {
 		$('#show_tips').attr('checked', true);
 	}
 
+	if(forceMetro == true) {
+		$('#force_metro').attr('checked', true);
+	}
+
 	$('#show_suggestions').on('change', function(e) {
 		if(e.target.checked) {
 			localStorage.removeItem('pf_metro_ui.exp.rec');
@@ -258,6 +268,14 @@ $(document).ready(function() {
 			localStorage.removeItem('metro-tips');
 		}
 	});
+
+	$('#force_metro').on('change', function(e) {
+		if(e.target.checked) {
+			localStorage.setItem('pf_metro_ui.exp.forceMetro', true);
+		} else {
+			localStorage.removeItem('pf_metro_ui.exp.forceMetro');
+		}
+	})
 });
 </script>
 @endpush