mag/Helpddesk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

re-add theme as ptrs broken fixed ipad theme

Browse Source
This commit is contained in:
Mark Gregory
2026-09-08 09:34:10 +01:00
parent 81e64a1c9a
commit aa23914353
8 changed files with 405 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/themes/backend/views/components/settings/layout.blade.php
+8 -9
View File
@@ -1,17 +1,16 @@
<div class="hd-account-settings">
<aside class="hd-settings-nav" aria-label="{{ __('Settings') }}">
<nav class="hd-account-settings-nav" aria-label="{{ __('Settings') }}">
<a class="{{ request()->routeIs('profile.edit') ? 'is-active' : '' }}" href="{{ route('profile.edit') }}" wire:navigate>{{ __('Profile') }}</a>
<a class="{{ request()->routeIs('security.edit') ? 'is-active' : '' }}" href="{{ route('security.edit') }}" wire:navigate>{{ __('Security') }}</a>
<a class="{{ request()->routeIs('appearance.edit') ? 'is-active' : '' }}" href="{{ route('appearance.edit') }}" wire:navigate>{{ __('Appearance') }}</a>
</aside>
</nav>
<section class="hd-settings-panel">
<header class="hd-settings-panel-header">
<h2>{{ $heading ?? '' }}</h2>
<p>{{ $subheading ?? '' }}</p>
</header>
<div class="hd-settings-content">
<div class="hd-account-settings-content">
<flux:heading>{{ $heading ?? '' }}</flux:heading>
<flux:subheading>{{ $subheading ?? '' }}</flux:subheading>
<div class="hd-account-settings-form">
{{ $slot }}
</div>
</section>
</div>
</div>
resources/themes/backend/views/livewire/settings/appearance.blade.php
+29 -11
View File
@@ -1,20 +1,38 @@
<section class="w-full">
@include('partials.settings-heading')
<x-settings.layout :heading="__('Appearance')" :subheading="__('Update the appearance settings for your account')">
<div class="hd-native-appearance" data-hd-appearance>
<button type="button" data-hd-appearance-value="light" onclick="window.HDTheme && window.HDTheme.set('light')" aria-pressed="false">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0-5h1v3h-2V2h1zm0 17h1v3h-2v-3h1zM2 11h3v2H2v-2zm17 0h3v2h-3v-2zM4.2 5.6l1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1zm12.1 12.1 1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1zM4.2 18.4l2.1-2.1 1.4 1.4-2.1 2.1-1.4-1.4zM16.3 6.3l2.1-2.1 1.4 1.4-2.1 2.1-1.4-1.4z"/></svg>
<span>{{ __('Light') }}</span>
<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>
</button>
<button type="button" data-hd-appearance-value="dark" onclick="window.HDTheme && window.HDTheme.set('dark')" aria-pressed="false">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.2 15.2A8 8 0 0 1 8.8 3.8 9 9 0 1 0 20.2 15.2z"/></svg>
<span>{{ __('Dark') }}</span>
<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>
<button type="button" data-hd-appearance-value="system" onclick="window.HDTheme && window.HDTheme.set('system')" aria-pressed="false">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 4h18v13H3V4zm2 2v9h14V6H5zm4 13h6v2H9v-2z"/></svg>
<span>{{ __('System') }}</span>
<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>
</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>
resources/themes/backend/views/livewire/settings/delete-user-form.blade.php
+29 -18
View File
@@ -1,23 +1,34 @@
<section class="hd-delete-account">
<div>
<h3>{{ __('Delete account') }}</h3>
<p>{{ __('Delete your account and all of its resources') }}</p>
<section class="mt-10 space-y-6">
<div class="relative mb-5">
<flux:heading>{{ __('Delete account') }}</flux:heading>
<flux:subheading>{{ __('Delete your account and all of its resources') }}</flux:subheading>
</div>
<details class="hd-delete-details" {{ $errors->isNotEmpty() ? 'open' : '' }}>
<summary class="hd-settings-button hd-settings-button-danger">{{ __('Delete account') }}</summary>
<form method="POST" wire:submit="deleteUser" class="hd-delete-confirm">
<h4>{{ __('Are you sure you want to delete your account?') }}</h4>
<p>{{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm.') }}</p>
<label class="hd-settings-field">
<span>{{ __('Password') }}</span>
<input wire:model="password" type="password" autocomplete="current-password">
@error('password') <small class="hd-settings-error">{{ $message }}</small> @enderror
</label>
<div class="hd-settings-actions">
<button type="button" class="hd-settings-button" onclick="this.closest('details').removeAttribute('open')">{{ __('Cancel') }}</button>
<button class="hd-settings-button hd-settings-button-danger" type="submit">{{ __('Delete account') }}</button>
<flux:modal.trigger name="confirm-user-deletion">
<flux:button variant="danger" x-data="" x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')">
{{ __('Delete account') }}
</flux:button>
</flux:modal.trigger>
<flux:modal name="confirm-user-deletion" :show="$errors->isNotEmpty()" focusable class="max-w-lg">
<form method="POST" wire:submit="deleteUser" class="space-y-6">
<div>
<flux:heading size="lg">{{ __('Are you sure you want to delete your account?') }}</flux:heading>
<flux:subheading>
{{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.') }}
</flux:subheading>
</div>
<flux:input wire:model="password" :label="__('Password')" type="password" viewable />
<div class="flex justify-end space-x-2 rtl:space-x-reverse">
<flux:modal.close>
<flux:button variant="filled">{{ __('Cancel') }}</flux:button>
</flux:modal.close>
<flux:button variant="danger" type="submit">{{ __('Delete account') }}</flux:button>
</div>
</form>
</details>
</flux:modal>
</section>
resources/themes/backend/views/modules/helpdesk/livewire/settings-manager.blade.php
+4 -4
View File
@@ -21,8 +21,8 @@
<div class="hd-helpdesk-surface hd-mobile-ready hd-core-settings space-y-4" dusk="helpdesk-settings-manager">
<div
class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-5 py-5 text-white">
class="hd-settings-hero overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="hd-settings-hero-inner bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-5 py-5 text-white">
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
<div>
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-blue-200">Helpdesk administration
@@ -41,7 +41,7 @@
</div>
</div>
</div>
<div class="grid gap-2 md:grid-cols-4 xl:grid-cols-7">
<div class="hd-settings-section-grid grid gap-2 md:grid-cols-4 xl:grid-cols-7">
@foreach ([
'statuses' => ['label' => 'Statuses', 'count' => method_exists($statuses, 'total') ? $statuses->total() : $statuses->count()],
'priorities' => ['label' => 'Priorities', 'count' => method_exists($priorities, 'total') ? $priorities->total() : $priorities->count()],
@@ -92,7 +92,7 @@
@endphp
<a href="{{ route('helpdesk.settings', ['section' => $key]) }}"
dusk="helpdesk-settings-section-{{ $key }}"
class="rounded-xl border px-3 py-2 text-left shadow-sm transition hover:-translate-y-0.5"
class="hd-settings-section-card rounded-xl border px-3 py-2 text-left shadow-sm transition hover:-translate-y-0.5"
style="{{ $sectionStyle }}">
<div class="text-xs font-semibold uppercase tracking-wide opacity-70">{{ $item['label'] }}</div>
<div class="mt-0.5 text-xl font-semibold">{{ $item['count'] }}</div>
resources/themes/backend/views/partials/head.blade.php
+25 -54
View File
@@ -14,9 +14,31 @@
<script>
(function () {
var ua = navigator.userAgent || '';
if (/(iPad|iPhone|iPod)/.test(ua) && /OS 12[_\d]*/.test(ua)) {
document.documentElement.className += (document.documentElement.className ? ' ' : '') + 'ios12';
var isIOS12 = /(iPad|iPhone|iPod).*OS 12[_\.]/.test(ua);
if (isIOS12) {
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>
@@ -66,55 +88,4 @@
$viteAssets = array_values(array_unique($viteAssets));
@endphp
@vite($viteAssets)
@fluxAppearance
<script>
(function () {
var root = document.documentElement;
var key = 'hd.appearance';
var media = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
function stored() {
try { return localStorage.getItem(key) || 'system'; } catch (e) { return 'system'; }
}
function isDark(mode) {
return mode === 'dark' || (mode === 'system' && media && media.matches);
}
function syncButtons(mode) {
var buttons = document.querySelectorAll('[data-hd-appearance-value]');
for (var i = 0; i < buttons.length; i++) {
var active = buttons[i].getAttribute('data-hd-appearance-value') === mode;
buttons[i].setAttribute('aria-pressed', active ? 'true' : 'false');
if (active) buttons[i].classList.add('is-active');
else buttons[i].classList.remove('is-active');
}
}
function apply(mode) {
if (isDark(mode)) root.classList.add('dark');
else root.classList.remove('dark');
root.setAttribute('data-hd-appearance', mode);
syncButtons(mode);
}
window.HDTheme = {
get: stored,
set: function (mode) {
if (mode !== 'light' && mode !== 'dark' && mode !== 'system') return;
try { localStorage.setItem(key, mode); } catch (e) {}
apply(mode);
},
apply: function () { apply(stored()); }
};
apply(stored());
if (media) {
var onChange = function () { if (stored() === 'system') apply('system'); };
if (media.addListener) media.addListener(onChange);
else if (media.addEventListener) media.addEventListener('change', onChange);
}
document.addEventListener('DOMContentLoaded', function () { apply(stored()); });
document.addEventListener('livewire:navigated', function () { apply(stored()); });
}());
</script>
@fluxAppearance
resources/themes/backend/views/partials/settings-heading.blade.php
+5 -4
View File
@@ -1,4 +1,5 @@
<header class="hd-settings-heading">
<h1>{{ __('Settings') }}</h1>
<p>{{ __('Manage your profile and account settings') }}</p>
</header>
<div class="relative mb-6 w-full">
<flux:heading size="xl" level="1">{{ __('Settings') }}</flux:heading>
<flux:subheading size="lg" class="mb-6">{{ __('Manage your profile and account settings') }}</flux:subheading>
<flux:separator variant="subtle" />
</div>