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

refactor: enhance toggle switch implementation in Proxmox layout for improved user experience and visual consistency

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-01 12:24:32 -05:00
parent ba93884f22
commit c5d6388808
1 changed files with 71 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -192,15 +192,69 @@
</div>
@endforeach
<div class="ml-auto">
<label class="inline-flex items-center cursor-pointer" :class="isAdvancedOnlyView ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''">
<style>
.view-toggle-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
margin: 0 12px;
}
.view-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.view-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e5e7eb;
transition: 0.3s;
border-radius: 20px;
}
.view-toggle-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.view-toggle-switch input:checked + .view-toggle-slider {
background-color: #2563eb;
}
.view-toggle-switch input:checked + .view-toggle-slider:before {
transform: translateX(16px);
}
.view-toggle-switch input:disabled + .view-toggle-slider {
opacity: 0.5;
cursor: not-allowed;
}
.dark .view-toggle-slider {
background-color: #374151;
}
.dark .view-toggle-switch input:checked + .view-toggle-slider {
background-color: #2563eb;
}
</style>
<label class="inline-flex items-center" :class="isAdvancedOnlyView ? 'opacity-50 cursor-not-allowed pointer-events-none' : 'cursor-pointer'">
<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="sr-only peer">
<div class="relative mx-3 w-9 h-5 bg-gray-200 dark:bg-gray-700 rounded-full peer peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
<label class="view-toggle-switch">
<input
type="checkbox"
:checked="isAdvancedView"
@change="!isAdvancedOnlyView && toggleView()"
:disabled="isAdvancedOnlyView">
<span class="view-toggle-slider"></span>
</label>
<span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Advanced</span>
</label>
</div>
@@ -240,15 +294,16 @@
<span>{{ $tabs[array_search($view, array_column($tabs, 'view'))]['label'] ?? __('Menu') }}</span>
<x-ri-menu-line class="size-5" />
</button>
<label class="inline-flex items-center cursor-pointer flex-shrink-0" :class="isAdvancedOnlyView ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''">
<label class="inline-flex items-center flex-shrink-0" :class="isAdvancedOnlyView ? 'opacity-50 cursor-not-allowed pointer-events-none' : 'cursor-pointer'">
<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="sr-only peer">
<div class="relative mx-3 w-9 h-5 bg-gray-200 dark:bg-gray-700 rounded-full peer peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
<label class="view-toggle-switch">
<input
type="checkbox"
:checked="isAdvancedView"
@change="!isAdvancedOnlyView && toggleView()"
:disabled="isAdvancedOnlyView">
<span class="view-toggle-slider"></span>
</label>
<span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Advanced</span>
</label>
</div>