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

feat: update server icon customization modal with dynamic SVG rendering and improved icon filtering

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-06 10:53:51 -05:00
parent 8433a4804f
commit a7daa27097
1 changed files with 26 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -44,7 +44,7 @@
initialColor: {{ $server->user_set_icon_color ? "'" . $server->user_set_icon_color . "'" : 'null' }}
})">
<button @click="openModal()" :title="icon ? 'Customize server icon' : 'Set server icon'" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<i x-show="icon" :class="'ri-' + icon" class="text-2xl" :style="color ? 'color: ' + color : ''"></i>
<div x-show="icon" :style="color ? 'color: ' + color : ''" x-html="getIconSvg(icon)" class="size-6"></div>
<x-ri-server-line x-show="!icon" class="size-6 text-secondary" />
<span class="text-2xl font-bold">
{{ $server->hostname }}
@@ -63,7 +63,7 @@
<div x-show="icon" :style="color ? 'color: ' + color : ''" x-html="getIconSvg(icon)"></div>
<x-ri-server-line x-show="!icon" class="size-8 text-base/40" />
</div>
<input x-model="search" type="text" placeholder="Search icons..." class="border rounded px-2 py-1 text-sm w-40 dark:bg-background dark:border-base/20" />
<input x-model="search" x-on:input="filterIcons()" type="text" placeholder="Search icons..." class="border rounded px-2 py-1 text-sm w-40 dark:bg-background dark:border-base/20" />
</div>
<div class="grid grid-cols-6 gap-2 mb-4 max-h-32 overflow-y-auto">
@php
@@ -120,45 +120,41 @@
color: initialColor || '',
search: '',
message: '',
icons: [
'server-line', 'database-2-line', 'computer-line', 'cpu-line', 'hard-drive-2-line',
'cloud-line', 'terminal-box-line', 'code-s-slash-line', 'braces-line',
'global-line', 'earth-line', 'wifi-line', 'signal-tower-line',
'shield-check-line', 'shield-keyhole-line', 'lock-line', 'lock-unlock-line', 'key-2-line',
'rocket-line', 'rocket-2-line', 'send-plane-line', 'flashlight-line', 'fire-line',
'sparkling-line', 'star-line', 'heart-line', 'home-line', 'home-2-line',
'building-line', 'building-2-line', 'store-line', 'box-3-line', 'archive-line',
'inbox-line', 'inbox-2-line', 'folder-line', 'folder-open-line',
'settings-3-line', 'settings-4-line', 'tools-line', 'hammer-line',
'flask-line', 'bug-line', 'puzzle-line', 'bar-chart-box-line', 'pie-chart-line',
'line-chart-line', 'money-dollar-circle-line', 'money-euro-circle-line',
'bank-card-line', 'wallet-line', 'user-line', 'user-3-line', 'group-line', 'team-line',
'mail-line', 'mail-open-line', 'chat-3-line', 'discuss-line',
'camera-line', 'vidicon-line', 'film-line', 'music-line',
'book-open-line', 'file-text-line', 'sun-line', 'moon-line',
'palette-line', 'brush-line', 'trophy-line', 'graduation-cap-line',
'lightbulb-line', 'fingerprint-line', 'eye-line', 'map-2-line', 'map-pin-line',
'time-line', 'calendar-line', 'gift-line', 'cake-2-line',
'gamepad-line', 'ghost-line', 'aliens-line', 'space-ship-line',
'android-line', 'apple-line', 'windows-line', 'ubuntu-line',
'github-line', 'gitlab-line', 'discord-line', 'slack-line'
],
colors: [
'', '#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16', '#22c55e', '#10b981',
'#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7',
'#d946ef', '#ec4899', '#f43f5e', '#78716c', '#64748b'
],
get filteredIcons() {
if (!this.search) return this.icons;
const q = this.search.toLowerCase();
return this.icons.filter(i => i.toLowerCase().includes(q));
openModal() {
this.show = true;
this.message = '';
this.$nextTick(() => this.filterIcons());
},
openModal() { this.show = true; this.message = ''; },
closeModal() { this.show = false; },
resetIcon() {
this.icon = '';
this.color = '';
},
filterIcons() {
const query = this.search.toLowerCase();
document.querySelectorAll('.icon-btn').forEach(btn => {
const iconName = btn.dataset.icon;
btn.style.display = !query || iconName.includes(query) ? 'flex' : 'none';
});
},
getIconSvg(iconName) {
const btn = document.querySelector(`.icon-btn[data-icon="${iconName}"]`);
if (btn) {
const svg = btn.querySelector('svg');
if (svg) {
const cloned = svg.cloneNode(true);
cloned.classList.remove('size-5');
cloned.classList.add('size-8');
return cloned.outerHTML;
}
}
return '';
},
saveIcon() {
fetch(`/proxmox/server/${serverId}/icon`, {
method: 'POST',