Enhance server icon customization button with improved layout and edit indicator
This commit is contained in:
@@ -38,15 +38,21 @@
|
|||||||
@endphp
|
@endphp
|
||||||
|
|
||||||
<div class="flex flex-col gap-4 pb-6 pt-6 lg:flex-row lg:items-center lg:justify-between">
|
<div class="flex flex-col gap-4 pb-6 pt-6 lg:flex-row lg:items-center lg:justify-between">
|
||||||
<div class="flex items-center gap-3" x-data="serverIconModal({
|
<div class="flex items-center gap-5" x-data="serverIconModal({
|
||||||
serverId: '{{ $server->id }}',
|
serverId: '{{ $server->id }}',
|
||||||
initialIcon: {{ $server->user_set_icon ? "'" . $server->user_set_icon . "'" : 'null' }},
|
initialIcon: {{ $server->user_set_icon ? "'" . $server->user_set_icon . "'" : 'null' }},
|
||||||
initialColor: {{ $server->user_set_icon_color ? "'" . $server->user_set_icon_color . "'" : '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'" }}
|
initialPrefix: {{ $server->user_set_icon_prefix ? "'" . $server->user_set_icon_prefix . "'" : "'ri'" }}
|
||||||
})">
|
})">
|
||||||
<button @click="openModal()" :title="icon ? 'Customize server icon' : 'Set server icon'" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
<button @click="openModal()" :title="icon ? 'Customize server icon' : 'Set server icon'" class="group flex items-center gap-5 hover:opacity-80 transition-opacity">
|
||||||
<div x-show="icon" :style="color ? 'color: ' + color : ''" x-html="getIconSvg(icon, iconPrefix)" class="size-6"></div>
|
<div class="relative">
|
||||||
<x-ri-server-line x-show="!icon" class="size-6 text-secondary" />
|
<div x-show="icon" :style="color ? 'color: ' + color : ''" x-html="getIconSvg(icon, iconPrefix)" class="size-10"></div>
|
||||||
|
<x-ri-server-line x-show="!icon" class="size-10 text-secondary" />
|
||||||
|
<!-- Edit indicator badge -->
|
||||||
|
<div class="absolute -top-1 -right-1 size-4 bg-primary/90 rounded-full flex items-center justify-center shadow-sm opacity-60 group-hover:opacity-100 transition-opacity">
|
||||||
|
<x-ri-pencil-fill class="size-2.5 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<span class="text-2xl font-bold">
|
<span class="text-2xl font-bold">
|
||||||
{{ $server->hostname }}
|
{{ $server->hostname }}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user