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

feat: add small toggle switch for network adapters with improved styling

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-18 07:23:08 -05:00
parent 7bfb987fec
commit 18bc0f89f1
1 changed files with 62 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
extensions/Servers/Proxmox/views/firewall.blade.php
View File

@@ -133,6 +133,54 @@
.fw-toggle input:checked + .fw-toggle-slider {
animation: fw-toggle-pulse 2s infinite ease-in-out;
}
/* Small Toggle for Network Adapters */
.fw-toggle-sm {
position: relative;
width: 44px;
height: 24px;
cursor: pointer;
flex-shrink: 0;
}
.fw-toggle-sm input {
opacity: 0;
width: 0;
height: 0;
}
.fw-toggle-slider-sm {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
border-radius: 24px;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 1px 6px rgba(220, 38, 38, 0.3);
}
.fw-toggle-slider-sm::before {
content: '';
position: absolute;
width: 18px;
height: 18px;
left: 3px;
bottom: 3px;
background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
border-radius: 50%;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow: 0 1px 6px rgba(0,0,0,0.2);
}
.fw-toggle-sm input:checked + .fw-toggle-slider-sm {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 1px 6px rgba(34, 197, 94, 0.3);
}
.fw-toggle-sm input:checked + .fw-toggle-slider-sm::before {
transform: translateX(20px);
}
.fw-toggle-sm:hover .fw-toggle-slider-sm {
filter: brightness(1.1);
}
.fw-toggle-sm input:disabled + .fw-toggle-slider-sm {
opacity: 0.6;
cursor: not-allowed;
}
</style>
<div class="space-y-6" x-data="{ pageLoaded: false, activeTab: 'rules' }" x-init="setTimeout(() => pageLoaded = true, 50)">
@@ -312,30 +360,23 @@
@endif
</div>
</div>
<div class="flex items-center gap-2">
@if($adapterFirewallStates[$adapter['name']] ?? false)
<x-proxmox::ui.button
<div class="flex items-center gap-3">
<span class="fw-toggle-label {{ ($adapterFirewallStates[$adapter['name']] ?? false) ? 'fw-toggle-label-enabled' : 'fw-toggle-label-disabled' }}">
{{ ($adapterFirewallStates[$adapter['name']] ?? false) ? 'On' : 'Off' }}
</span>
<label class="fw-toggle-sm" wire:loading.class="pointer-events-none">
<input
type="checkbox"
wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')"
wire:loading.attr="disabled"
wire:key="adapter-{{ $adapter['name'] }}"
variant="danger"
size="sm"
icon="ri-close-line">
<span wire:loading.remove wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">Disable</span>
<span wire:loading wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">...</span>
</x-proxmox::ui.button>
@else
<x-proxmox::ui.button
wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')"
wire:loading.attr="disabled"
wire:key="adapter-{{ $adapter['name'] }}"
variant="success"
size="sm"
icon="ri-shield-line">
<span wire:loading.remove wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">Enable</span>
<span wire:loading wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">...</span>
</x-proxmox::ui.button>
@endif
{{ ($adapterFirewallStates[$adapter['name']] ?? false) ? 'checked' : '' }}
>
<span class="fw-toggle-slider-sm"></span>
</label>
<span wire:loading wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')" class="text-xs text-base/50">
<span class="fw-loader-sm text-primary"></span>
</span>
</div>
</div>
@endforeach