Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: enhance Proxmox layout with toggle switch for view modes, improving user interaction and accessibility

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-01 12:18:59 -05:00
parent 0c4a8f764d
commit ea1ca273c2
1 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
extensions/Servers/Proxmox/views/components/layout.blade.php
View File

@@ -192,13 +192,17 @@
</div>
@endforeach
<div class="ml-auto">
<button type="button"
@click.prevent="!isAdvancedOnlyView && toggleView()"
<label class="inline-flex items-center cursor-pointer" :class="isAdvancedOnlyView ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''">
<span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Standard</span>
<input
type="checkbox"
:checked="isAdvancedView"
@change="!isAdvancedOnlyView && toggleView()"
:disabled="isAdvancedOnlyView"
class="px-4 py-2 text-sm font-semibold rounded-md transition-all duration-200 focus:outline-none focus:ring-0 focus:ring-transparent disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
:class="isAdvancedView ? 'bg-blue-600 text-white' : 'bg-white text-base'">
<span x-text="isAdvancedView ? 'Standard View' : 'Advanced View'"></span>
</button>
class="sr-only peer">
<div class="relative mx-3 w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
<span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Advanced</span>
</label>
</div>
</div>
@@ -236,13 +240,17 @@
<span>{{ $tabs[array_search($view, array_column($tabs, 'view'))]['label'] ?? __('Menu') }}</span>
<x-ri-menu-line class="size-5" />
</button>
<button type="button"
@click.prevent="!isAdvancedOnlyView && toggleView()"
<label class="inline-flex items-center cursor-pointer flex-shrink-0" :class="isAdvancedOnlyView ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''">
<span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Standard</span>
<input
type="checkbox"
:checked="isAdvancedView"
@change="!isAdvancedOnlyView && toggleView()"
:disabled="isAdvancedOnlyView"
class="px-4 py-2 text-sm font-semibold rounded-md transition-all duration-200 focus:outline-none focus:ring-0 focus:ring-transparent disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap bg-background-secondary border border-neutral"
:class="isAdvancedView ? 'bg-blue-600 text-white border-blue-600' : 'bg-background-secondary text-base'">
<span x-text="isAdvancedView ? 'Standard' : 'Advanced'"></span>
</button>
class="sr-only peer">
<div class="relative mx-3 w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
<span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Advanced</span>
</label>
</div>
<div x-show="open" x-transition @click.outside="open = false"
class="mt-2 bg-background-secondary border border-neutral rounded-lg shadow-lg overflow-hidden">