Add Force MetroUI labs experiment

This commit is contained in:
Daniel Supernault 2019-12-14 01:41:37 -07:00
parent b94af397c9
commit 295e80eb72
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
3 changed files with 36 additions and 15 deletions

View file

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

View file

@ -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() {

View file

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