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

Add server icon customization modal and enhance edit indicator styling

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-06 16:27:29 -05:00
parent a8615fb159
commit b5a22f2c2f
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,6 +43,11 @@
initialIcon: {{ $server->user_set_icon ? "'" . $server->user_set_icon . "'" : 'null' }},
initialColor: {{ $server->user_set_icon_color ? "'" . $server->user_set_icon_color . "'" : 'null' }},
initialPrefix: {{ $server->user_set_icon_prefix ? "'" . $server->user_set_icon_prefix . "'" : "'ri'" }}
})"
x-init="window.addEventListener('open-server-icon-modal', (event) => {
if (event.detail && String(event.detail.serverId) === String(serverId)) {
openModal();
}
})">
<button @click="openModal()" :title="icon ? 'Customize server icon' : 'Set server icon'" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<div x-show="icon" :style="color ? 'color: ' + color : ''" x-html="getIconSvg(icon, iconPrefix)" class="size-6"></div>

7
themes/lucentui/views/services/show.blade.php
View File

@@ -29,8 +29,9 @@
@php
$hasCustomIcon = optional($service->product->server)->extension === 'Proxmox' && isset($proxmoxServer) && $proxmoxServer && $proxmoxServer->user_set_icon;
$iconColor = $hasCustomIcon ? $proxmoxServer->user_set_icon_color : null;
@endphp
<div class="relative flex items-center mr-6">
@endphp
<div class="relative flex items-center mr-6 cursor-pointer group"
onclick="window.dispatchEvent(new CustomEvent('open-server-icon-modal', { detail: { serverId: '{{ optional($proxmoxServer)->id }}' } }))">
@if($hasCustomIcon)
@php
$iconPrefix = $proxmoxServer->user_set_icon_prefix ?? 'ri';
@@ -46,7 +47,7 @@
<x-ri-box-3-fill class="w-14 h-14 text-primary" />
@endif
<!-- Small edit indicator in upper-right of the icon -->
<div class="absolute -top-1 -right-1 flex items-center justify-center w-5 h-5 rounded-full bg-white shadow-md border border-primary/30">
<div class="absolute -top-1 -right-1 flex items-center justify-center w-5 h-5 rounded-full bg-white shadow-md border border-primary/30 group-hover:scale-105 transition-transform">
<x-ri-pencil-line class="w-3.5 h-3.5 text-primary" />
</div>
</div>