mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-09 16:24:51 +00:00
Update labs settings view, add support for metro 2.0 dark mode
This commit is contained in:
Daniel Supernault
parent
a7674b7b8d
commit
aa4b011e25
1 changed files with 12 additions and 254 deletions
|
|
@ -6,14 +6,7 @@
|
||||||
<p class="lead">Experimental features</p>
|
<p class="lead">Experimental features</p>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
<div class="alert alert-warning px-3 h6">
|
<form method="post" id="form">
|
||||||
We are deprecating Labs in a future version. Some features will no longer be supported. For more information, click <a href="{{route('help.labs-deprecation')}}" class="font-weight-bold">here</a>.
|
|
||||||
</div>
|
|
||||||
<div class="py-3">
|
|
||||||
<p class="font-weight-bold text-muted text-center">UI</p>
|
|
||||||
<hr>
|
|
||||||
</div>
|
|
||||||
<form method="post">
|
|
||||||
@csrf
|
@csrf
|
||||||
<div class="form-check pb-3">
|
<div class="form-check pb-3">
|
||||||
<input class="form-check-input" type="checkbox" name="dark_mode" id="dark_mode" {{request()->hasCookie('dark-mode') ? 'checked':''}}>
|
<input class="form-check-input" type="checkbox" name="dark_mode" id="dark_mode" {{request()->hasCookie('dark-mode') ? 'checked':''}}>
|
||||||
|
|
@ -22,265 +15,30 @@
|
||||||
</label>
|
</label>
|
||||||
<p class="text-muted small help-text">Use dark mode theme.</p>
|
<p class="text-muted small help-text">Use dark mode theme.</p>
|
||||||
</div>
|
</div>
|
||||||
@if(!now()->gt(now()->parse('2021-06-14 07:22:46')))
|
|
||||||
@if($profile->profile_layout == 'moment')
|
|
||||||
<div class="form-check pb-3">
|
|
||||||
<input class="form-check-input" type="checkbox" name="profile_layout" id="profile_layout" {{$profile->profile_layout == 'moment' ? 'checked':''}} value="{{$profile->profile_layout}}">
|
|
||||||
<label class="form-check-label font-weight-bold" for="profile_layout">
|
|
||||||
{{__('Use MomentUI for posts and your profile')}}
|
|
||||||
</label>
|
|
||||||
<p class="text-muted small help-text">MomentUI offers an alternative layout for posts and your profile.</p>
|
|
||||||
</div>
|
|
||||||
<div class="form-check pb-3">
|
|
||||||
<label class="form-check-label font-weight-bold mb-3" for="profile_layout">
|
|
||||||
{{__('MomentUI Profile Header Color')}}
|
|
||||||
</label>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-6 col-sm-3 pb-5">
|
|
||||||
<div class="">
|
|
||||||
<p class="form-check-label">
|
|
||||||
<div class="bg-pixelfed rounded-circle box-shadow" style="width:60px; height:60px"></div>
|
|
||||||
</p>
|
|
||||||
<p class="mb-0 small text-muted">Default</p>
|
|
||||||
<input class="form-check-input mx-0 pl-0" type="radio" name="moment_bg" value="default" {{$profile->header_bg == 'default' || !$profile->header_bg ? 'checked':''}}>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-sm-3 pb-5">
|
|
||||||
<div class="">
|
|
||||||
<p class="form-check-label">
|
|
||||||
<div class="bg-moment-azure rounded-circle box-shadow" style="width:60px; height:60px"></div>
|
|
||||||
</p>
|
|
||||||
<p class="mb-0 small text-muted">Azure</p>
|
|
||||||
<input class="form-check-input mx-0" type="radio" name="moment_bg" value="azure" {{$profile->header_bg == 'azure' ? 'checked':''}}>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-sm-3 pb-5">
|
|
||||||
<div class="">
|
|
||||||
<p class="form-check-label">
|
|
||||||
<div class="bg-moment-passion rounded-circle box-shadow" style="width:60px; height:60px"></div>
|
|
||||||
</p>
|
|
||||||
<p class="mb-0 small text-muted">Passion</p>
|
|
||||||
<input class="form-check-input mx-0" type="radio" name="moment_bg" value="passion" {{$profile->header_bg == 'passion' ? 'checked':''}}>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-sm-3 pb-5">
|
|
||||||
<div class="">
|
|
||||||
<p class="form-check-label">
|
|
||||||
<div class="bg-moment-reef rounded-circle box-shadow" style="width:60px; height:60px"></div>
|
|
||||||
</p>
|
|
||||||
<p class="mb-0 small text-muted">Reef</p>
|
|
||||||
<input class="form-check-input mx-0" type="radio" name="moment_bg" value="reef" {{$profile->header_bg == 'reef' ? 'checked':''}}>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-sm-3 pb-5">
|
|
||||||
<div class="">
|
|
||||||
<p class="form-check-label">
|
|
||||||
<div class="bg-moment-lush rounded-circle box-shadow" style="width:60px; height:60px"></div>
|
|
||||||
</p>
|
|
||||||
<p class="mb-0 small text-muted">Lush</p>
|
|
||||||
<input class="form-check-input mx-0" type="radio" name="moment_bg" value="lush" {{$profile->header_bg == 'lush' ? 'checked':''}}>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-sm-3 pb-5">
|
|
||||||
<div class="">
|
|
||||||
<p class="form-check-label">
|
|
||||||
<div class="bg-moment-neon rounded-circle box-shadow" style="width:60px; height:60px"></div>
|
|
||||||
</p>
|
|
||||||
<p class="mb-0 small text-muted">Neon</p>
|
|
||||||
<input class="form-check-input mx-0" type="radio" name="moment_bg" value="neon" {{$profile->header_bg == 'neon' ? 'checked':''}}>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-sm-3 pb-5">
|
|
||||||
<div class="">
|
|
||||||
<p class="form-check-label">
|
|
||||||
<div class="bg-moment-flare rounded-circle box-shadow" style="width:60px; height:60px"></div>
|
|
||||||
</p>
|
|
||||||
<p class="mb-0 small text-muted">Flare</p>
|
|
||||||
<input class="form-check-input mx-0" type="radio" name="moment_bg" value="flare" {{$profile->header_bg == 'flare' ? 'checked':''}}>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-sm-3 pb-5">
|
|
||||||
<div class="">
|
|
||||||
<p class="form-check-label">
|
|
||||||
<div class="bg-moment-morning rounded-circle box-shadow" style="width:60px; height:60px"></div>
|
|
||||||
</p>
|
|
||||||
<p class="mb-0 small text-muted">Morning</p>
|
|
||||||
<input class="form-check-input mx-0" type="radio" name="moment_bg" value="morning" {{$profile->header_bg == 'morning' ? 'checked':''}}>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-sm-3 pb-5">
|
|
||||||
<div class="">
|
|
||||||
<p class="form-check-label">
|
|
||||||
<div class="bg-moment-tranquil rounded-circle box-shadow" style="width:60px; height:60px"></div>
|
|
||||||
</p>
|
|
||||||
<p class="mb-0 small text-muted">Tranquil</p>
|
|
||||||
<input class="form-check-input mx-0" type="radio" name="moment_bg" value="tranquil" {{$profile->header_bg == 'tranquil' ? 'checked':''}}>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-sm-3 pb-5">
|
|
||||||
<div class="">
|
|
||||||
<p class="form-check-label">
|
|
||||||
<div class="bg-moment-mauve rounded-circle box-shadow" style="width:60px; height:60px"></div>
|
|
||||||
</p>
|
|
||||||
<p class="mb-0 small text-muted">Mauve</p>
|
|
||||||
<input class="form-check-input mx-0" type="radio" name="moment_bg" value="mauve" {{$profile->header_bg == 'mauve' ? 'checked':''}}>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-sm-3 pb-5">
|
|
||||||
<div class="">
|
|
||||||
<p class="form-check-label">
|
|
||||||
<div class="bg-moment-argon rounded-circle box-shadow" style="width:60px; height:60px"></div>
|
|
||||||
</p>
|
|
||||||
<p class="mb-0 small text-muted">Argon</p>
|
|
||||||
<input class="form-check-input mx-0" type="radio" name="moment_bg" value="argon" {{$profile->header_bg == 'argon' ? 'checked':''}}>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-sm-3 pb-5">
|
|
||||||
<div class="">
|
|
||||||
<p class="form-check-label">
|
|
||||||
<div class="bg-moment-royal rounded-circle box-shadow" style="width:60px; height:60px"></div>
|
|
||||||
</p>
|
|
||||||
<p class="mb-0 small text-muted">Royal</p>
|
|
||||||
<input class="form-check-input mx-0" type="radio" name="moment_bg" value="royal" {{$profile->header_bg == 'royal' ? 'checked':''}}>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-muted small help-text">Set your MomentUI profile background color. Adding a custom header image will be supported in a future version.</p>
|
|
||||||
</div>
|
|
||||||
@else
|
|
||||||
<div class="form-check pb-3">
|
|
||||||
<input class="form-check-input" type="checkbox" name="profile_layout" id="profile_layout" {{$profile->profile_layout == 'moment' ? 'checked':''}} value="{{$profile->profile_layout}}" disabled>
|
|
||||||
<label class="form-check-label font-weight-bold" for="profile_layout">
|
|
||||||
{{__('Use MomentUI for posts and your profile')}}
|
|
||||||
</label>
|
|
||||||
<p class="text-muted small help-text"><span class="badge badge-secondary">DEPRECATED</span> MomentUI offers an alternative layout for posts and your profile.</p>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
@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="form-check pb-3">
|
|
||||||
<input class="form-check-input" type="checkbox" name="show_readmore" id="show_readmore">
|
|
||||||
<label class="form-check-label font-weight-bold" for="show_readmore">
|
|
||||||
{{__('Use Read More')}}
|
|
||||||
</label>
|
|
||||||
<p class="text-muted small help-text">Collapses captions/comments more than 3 lines.</p>
|
|
||||||
</div>
|
|
||||||
<div class="form-check pb-3">
|
|
||||||
<input class="form-check-input" type="checkbox" id="distraction_free" disabled>
|
|
||||||
<label class="form-check-label font-weight-bold">Simple Mode (Timelines only)</label>
|
|
||||||
<p class="text-muted small help-text"><span class="badge badge-secondary">REMOVED</span> An experimental content-first timeline layout</p>
|
|
||||||
</div>
|
|
||||||
<div class="form-check pb-3">
|
|
||||||
<input class="form-check-input" type="checkbox" id="show_tips">
|
|
||||||
<label class="form-check-label font-weight-bold">Show Announcements</label>
|
|
||||||
<p class="text-muted small help-text">Show Announcements 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>
|
|
||||||
@if(config('exp.rec') == true)
|
|
||||||
<div class="py-3">
|
|
||||||
<p class="font-weight-bold text-muted text-center">Discovery</p>
|
|
||||||
<hr>
|
|
||||||
</div>
|
|
||||||
<div class="form-check pb-3">
|
|
||||||
<input class="form-check-input" type="checkbox" name="profile_suggestions" id="profile_suggestions" {{$profile->is_suggestable ? 'checked' : ''}}>
|
|
||||||
<label class="form-check-label font-weight-bold" for="profile_suggestions">
|
|
||||||
{{__('Visible on Profile Suggestions')}}
|
|
||||||
</label>
|
|
||||||
<p class="text-muted small help-text">Allow your profile to be listed in Profile Suggestions.</p>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
@endif
|
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<hr>
|
<hr>
|
||||||
<button type="submit" class="btn btn-primary font-weight-bold py-1 btn-block">Save Changes</button>
|
<button type="button" class="btn btn-primary font-weight-bold py-1 btn-block" id="save-btn">Save Changes</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@push('scripts')
|
@push('scripts')
|
||||||
|
|
||||||
@if(!now()->gt(now()->parse('2021-06-14 07:22:46')))
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
let showSuggestions = localStorage.getItem('pf_metro_ui.exp.rec') == 'false' ? false : true;
|
let darkMode = localStorage.getItem('pf_m2s.color-scheme') == 'dark' ? true : false;
|
||||||
let showReadMore = localStorage.getItem('pf_metro_ui.exp.rm') == 'false' ? false : true;
|
if(darkMode == true) {
|
||||||
let distractionFree = localStorage.getItem('pf_metro_ui.exp.df') == 'true' ? true : false;
|
$('#dark_mode').attr('checked', true);
|
||||||
let forceMetro = localStorage.getItem('pf_metro_ui.exp.forceMetro') == 'true' ? true : false;
|
|
||||||
|
|
||||||
if(showSuggestions == true) {
|
|
||||||
$('#show_suggestions').attr('checked', true);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(showReadMore == true) {
|
$('#save-btn').click(function() {
|
||||||
$('#show_readmore').attr('checked', true);
|
let darkMode = document.querySelector('#dark_mode').checked;
|
||||||
}
|
let colorScheme = darkMode ? 'dark' : 'light';
|
||||||
|
localStorage.setItem('pf_m2s.color-scheme', colorScheme);
|
||||||
if(distractionFree == true) {
|
$('#form').submit();
|
||||||
localStorage.removeItem('pf_metro_ui.exp.df');
|
|
||||||
}
|
|
||||||
|
|
||||||
if(localStorage.getItem('metro-tips') !== 'false') {
|
|
||||||
$('#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');
|
|
||||||
} else {
|
|
||||||
localStorage.setItem('pf_metro_ui.exp.rec', false);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#show_readmore').on('change', function(e) {
|
|
||||||
if(e.target.checked) {
|
|
||||||
localStorage.removeItem('pf_metro_ui.exp.rm');
|
|
||||||
} else {
|
|
||||||
localStorage.setItem('pf_metro_ui.exp.rm', false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#distraction_free').on('change', function(e) {
|
|
||||||
if(e.target.checked) {
|
|
||||||
localStorage.setItem('pf_metro_ui.exp.df', true);
|
|
||||||
} else {
|
|
||||||
localStorage.removeItem('pf_metro_ui.exp.df');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#show_tips').on('change', function(e) {
|
|
||||||
if(e.target.checked) {
|
|
||||||
localStorage.setItem('metro-tips', true);
|
|
||||||
} else {
|
|
||||||
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>
|
</script>
|
||||||
@endif
|
@endpush
|
||||||
@endpush
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue