added support for legacy tickets, fixed switching of modes
This commit is contained in:
@@ -3,36 +3,48 @@
|
||||
|
||||
<flux:heading class="sr-only">{{ __('Appearance settings') }}</flux:heading>
|
||||
|
||||
<x-settings.layout :heading="__('Appearance')" :subheading=" __('Update the appearance settings for your account')">
|
||||
<div class="hd-appearance-switch" role="group" aria-label="{{ __('Appearance') }}">
|
||||
<button type="button" data-hd-appearance-value="light" onclick="if(window.hdSetAppearance){window.hdSetAppearance('light')}" class="hd-appearance-choice">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i><span>{{ __('Light') }}</span>
|
||||
<x-settings.layout
|
||||
:heading="__('Appearance')"
|
||||
:subheading="__('Update the appearance settings for your account')"
|
||||
>
|
||||
<div
|
||||
class="hd-appearance-switch"
|
||||
role="group"
|
||||
aria-label="{{ __('Appearance') }}"
|
||||
x-data
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="hd-appearance-choice"
|
||||
:class="{ 'is-active': $flux.appearance === 'light' }"
|
||||
:aria-pressed="$flux.appearance === 'light'"
|
||||
@click="$flux.appearance = 'light'"
|
||||
>
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
<span>{{ __('Light') }}</span>
|
||||
</button>
|
||||
<button type="button" data-hd-appearance-value="dark" onclick="if(window.hdSetAppearance){window.hdSetAppearance('dark')}" class="hd-appearance-choice">
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i><span>{{ __('Dark') }}</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="hd-appearance-choice"
|
||||
:class="{ 'is-active': $flux.appearance === 'dark' }"
|
||||
:aria-pressed="$flux.appearance === 'dark'"
|
||||
@click="$flux.appearance = 'dark'"
|
||||
>
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
<span>{{ __('Dark') }}</span>
|
||||
</button>
|
||||
<button type="button" data-hd-appearance-value="system" onclick="if(window.hdSetAppearance){window.hdSetAppearance('system')}" class="hd-appearance-choice">
|
||||
<i class="fa-solid fa-desktop" aria-hidden="true"></i><span>{{ __('System') }}</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="hd-appearance-choice"
|
||||
:class="{ 'is-active': $flux.appearance === 'system' }"
|
||||
:aria-pressed="$flux.appearance === 'system'"
|
||||
@click="$flux.appearance = 'system'"
|
||||
>
|
||||
<i class="fa-solid fa-desktop" aria-hidden="true"></i>
|
||||
<span>{{ __('System') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
function sync() {
|
||||
var value = document.documentElement.getAttribute('data-hd-appearance') || 'system';
|
||||
var buttons = document.querySelectorAll('[data-hd-appearance-value]');
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
if (buttons[i].getAttribute('data-hd-appearance-value') === value) buttons[i].classList.add('is-active');
|
||||
else buttons[i].classList.remove('is-active');
|
||||
}
|
||||
}
|
||||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', sync, false); else sync();
|
||||
document.addEventListener('click', function (event) {
|
||||
var target = event.target;
|
||||
while (target && target !== document && !target.getAttribute('data-hd-appearance-value')) target = target.parentNode;
|
||||
if (target && target.getAttribute) setTimeout(sync, 0);
|
||||
}, false);
|
||||
document.addEventListener('livewire:navigated', sync, false);
|
||||
}());
|
||||
</script>
|
||||
</x-settings.layout>
|
||||
</section>
|
||||
|
||||
@@ -15,30 +15,11 @@
|
||||
(function () {
|
||||
var ua = navigator.userAgent || '';
|
||||
var isIOS12 = /(iPad|iPhone|iPod).*OS 12[_\.]/.test(ua);
|
||||
|
||||
if (isIOS12) {
|
||||
document.documentElement.className += (document.documentElement.className ? ' ' : '') + 'hd-ios12';
|
||||
document.documentElement.className +=
|
||||
(document.documentElement.className ? ' ' : '') + 'hd-ios12';
|
||||
}
|
||||
|
||||
if (!isIOS12) return;
|
||||
|
||||
function applyAppearance(value) {
|
||||
var dark = value === 'dark' || (value === 'system' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
if (dark) document.documentElement.classList.add('dark');
|
||||
else document.documentElement.classList.remove('dark');
|
||||
document.documentElement.setAttribute('data-hd-appearance', value);
|
||||
}
|
||||
|
||||
var stored = 'system';
|
||||
try { stored = localStorage.getItem('flux.appearance') || localStorage.getItem('appearance') || 'system'; } catch (e) {}
|
||||
applyAppearance(stored);
|
||||
|
||||
window.hdSetAppearance = function (value) {
|
||||
try {
|
||||
localStorage.setItem('flux.appearance', value);
|
||||
localStorage.setItem('appearance', value);
|
||||
} catch (e) {}
|
||||
applyAppearance(value);
|
||||
};
|
||||
}());
|
||||
</script>
|
||||
<title>{{ filled($title ?? null) ? $title.' - '.config('app.name', 'Laravel') : config('app.name', 'Laravel') }}</title>
|
||||
|
||||
Reference in New Issue
Block a user