Enhance Proxmox service icon handling with custom color and prefix support

This commit is contained in:
2025-12-06 12:23:39 -05:00
parent 8682916d5e
commit 96f48014fe
2 changed files with 25 additions and 5 deletions

View File

@@ -47,12 +47,15 @@
flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
<div class="flex items-start md:items-center gap-4 flex-grow">
<div class="bg-primary/10 p-3 rounded-full flex-shrink-0 shadow-sm">
@if(optional($service->product->server)->extension === 'Proxmox' && $service->proxmoxServer && $service->proxmoxServer->user_set_icon)
@php
$hasCustomIcon = optional($service->product->server)->extension === 'Proxmox' && $service->proxmoxServer && $service->proxmoxServer->user_set_icon;
$iconColor = $hasCustomIcon ? $service->proxmoxServer->user_set_icon_color : null;
@endphp
<div class="p-3 rounded-full flex-shrink-0 shadow-sm" style="{{ $iconColor ? 'background-color: ' . $iconColor . '20;' : 'background-color: rgb(var(--color-primary) / 0.1);' }}">
@if($hasCustomIcon)
@php
$iconPrefix = $service->proxmoxServer->user_set_icon_prefix ?? 'ri';
$iconName = $service->proxmoxServer->user_set_icon;
$iconColor = $service->proxmoxServer->user_set_icon_color;
if ($iconPrefix === 'vaadin') {
$componentName = 'vaadin-' . str_replace('_', '-', $iconName);
} else {

View File

@@ -26,11 +26,28 @@
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-center mb-12">
<div class="mb-6 lg:mb-0">
<h1 class="text-4xl lg:text-4xl font-black text-color-base leading-tight mb-2 bg-gradient-to-r from-color-base via-color-base to-primary bg-clip-text flex items-center">
<x-ri-box-3-fill class="size-10 mr-4 text-primary" />
@php
$hasCustomIcon = optional($service->product->server)->extension === 'Proxmox' && isset($proxmoxServer) && $proxmoxServer && $proxmoxServer->user_set_icon;
$iconColor = $hasCustomIcon ? $proxmoxServer->user_set_icon_color : null;
@endphp
@if($hasCustomIcon)
@php
$iconPrefix = $proxmoxServer->user_set_icon_prefix ?? 'ri';
$iconName = $proxmoxServer->user_set_icon;
if ($iconPrefix === 'vaadin') {
$componentName = 'vaadin-' . str_replace('_', '-', $iconName);
} else {
$componentName = $iconPrefix . '-' . $iconName;
}
@endphp
<x-dynamic-component :component="$componentName" class="size-10 mr-4" :style="$iconColor ? 'color: ' . $iconColor : ''" />
@else
<x-ri-box-3-fill class="size-10 mr-4 text-primary" />
@endif
{{ __('services.services') }}
</h1>
<div class="w-24 h-1 bg-gradient-to-r from-primary to-primary/60 rounded-full ml-14"></div>
<div class="w-24 h-1 rounded-full ml-14" style="{{ $iconColor ? 'background: linear-gradient(to right, ' . $iconColor . ', ' . $iconColor . '99);' : 'background: linear-gradient(to right, rgb(var(--color-primary)), rgb(var(--color-primary) / 0.6));' }}"></div>
</div>
<div class="flex items-center gap-4">
<!-- Status Badge -->