Joseph.Rawlings
760cf84451
- Introduced AdminLTE CSS variables for color palette, body colors, card styles, and button styles. - Implemented card components with variants for primary, success, warning, danger, and info. - Added button styles including sizes and outline variants. - Created form controls, select inputs, and input groups with consistent styling. - Included utility classes for text and background colors, gradients, and shadows. - Developed components for badges, alerts, callouts, progress bars, tables, small boxes, and info boxes. - Integrated modal, dropdown, spinner, tooltip, and direct chat styles. - Established timeline and close button styles, with dark mode support for specific components.
271 lines
9.6 KiB
PHP
271 lines
9.6 KiB
PHP
{{--
|
|
Proxmox UI Component Library Index
|
|
===================================
|
|
|
|
This file documents all available UI components for the Proxmox server views.
|
|
All components styled using AdminLTE CSS Framework patterns from:
|
|
https://github.com/ColorlibHQ/AdminLTE/releases (v4 - Bootstrap 5)
|
|
|
|
AdminLTE Design Patterns:
|
|
- Card: card-lte with box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2)
|
|
- Typography: font-size .875rem (14px), font-family "Source Sans Pro"
|
|
- Text Colors: #212529 (headings), #6c757d (muted), #495057 (body)
|
|
- Layout: Bootstrap grid with gap utilities
|
|
- Transitions: .3s for all interactions (--lte-transition-speed)
|
|
- Shadows: 0 .5rem 1rem rgba(0,0,0,.15) for modals
|
|
- Borders: border-radius .375rem (--lte-border-radius)
|
|
|
|
AdminLTE Color System (Bootstrap 5):
|
|
- Primary: #0d6efd (blue)
|
|
- Secondary: #6c757d (gray)
|
|
- Success: #198754 (green)
|
|
- Danger: #dc3545 (red)
|
|
- Warning: #ffc107 (yellow)
|
|
- Info: #0dcaf0 (cyan)
|
|
|
|
CSS Classes:
|
|
- .card-lte: Card container
|
|
- .btn-lte-primary, .btn-lte-secondary, etc.: Buttons
|
|
- .alert-lte-info, .alert-lte-success, etc.: Alerts
|
|
- .badge-lte-primary, .badge-lte-success, etc.: Badges
|
|
- .form-control-lte: Form inputs
|
|
- .form-select-lte: Select dropdowns
|
|
- .toggle-lte: Toggle switches
|
|
- .table-lte: Tables
|
|
- .tabs-lte: Tab navigation
|
|
- .dropdown-lte: Dropdowns
|
|
- .modal-lte: Modals
|
|
|
|
=== LAYOUT COMPONENTS ===
|
|
|
|
1. Card (ui.card)
|
|
@props(['title', 'subtitle', 'icon', 'collapsible', 'collapsed', 'padding', 'noPadding'])
|
|
Container component for grouping related content.
|
|
|
|
2. Section Header (ui.section-header)
|
|
@props(['title', 'subtitle', 'icon', 'help', 'helpTitle', 'helpContent'])
|
|
Page/section titles with optional help modal.
|
|
|
|
3. Modal (ui.modal)
|
|
@props(['name', 'title', 'maxWidth', 'closeable'])
|
|
Overlay dialog with Alpine.js transitions.
|
|
|
|
4. Tabs (ui.tabs)
|
|
@props(['tabs', 'active', 'variant'])
|
|
Tab navigation (default, pills, buttons variants).
|
|
|
|
5. Tab Panel (ui.tab-panel)
|
|
@props(['name', 'active'])
|
|
Tab content panel with transitions.
|
|
|
|
6. Help Modal (ui.help-modal)
|
|
@props(['title', 'icon'])
|
|
Question mark trigger that opens info modal with description and details slots.
|
|
|
|
=== DATA DISPLAY COMPONENTS ===
|
|
|
|
7. Stat Card (ui.stat-card)
|
|
@props(['label', 'value', 'icon', 'trend', 'progress', 'variant'])
|
|
Statistics display with progress bar support.
|
|
|
|
8. Badge (ui.badge)
|
|
@props(['variant', 'dot', 'icon', 'size', 'rounded'])
|
|
Status/label badges with icons.
|
|
|
|
9. Progress (ui.progress)
|
|
@props(['value', 'max', 'showLabel', 'size', 'variant', 'animated'])
|
|
Progress bars with auto-coloring thresholds.
|
|
|
|
10. Server Status (ui.server-status)
|
|
@props(['status', 'size', 'showLabel'])
|
|
VM status indicator (running, stopped, paused, etc).
|
|
|
|
11. Resource Gauge (ui.resource-gauge)
|
|
@props(['label', 'value', 'max', 'unit', 'icon', 'showPercentage', 'size'])
|
|
Resource usage display with progress bar.
|
|
|
|
12. Info Row (ui.info-row)
|
|
@props(['label', 'value', 'copyable', 'icon', 'muted'])
|
|
Key-value pair display with copy functionality.
|
|
|
|
13. Empty State (ui.empty-state)
|
|
@props(['title', 'description', 'icon'])
|
|
Placeholder for empty content areas.
|
|
|
|
14. Allocation Card (ui.allocation-card)
|
|
@props(['label', 'percent', 'usageSummary', 'entitlementLabel', 'description', 'gradient', 'badge'])
|
|
Resource allocation vs entitlement display with gradient progress bar.
|
|
|
|
15. Network Address Card (ui.network-address-card)
|
|
@props(['type', 'ip', 'gateway', 'netmask', 'cidr', 'isPublic', 'isIpv6', 'guestInterface', 'fromGuestAgent'])
|
|
IP address card with gateway, netmask, network tools, and guest agent details.
|
|
|
|
=== TABLE COMPONENTS ===
|
|
|
|
16. Table (ui.table)
|
|
@props(['striped', 'hoverable', 'compact', 'bordered'])
|
|
Table wrapper with styling options.
|
|
|
|
17. Table Row (ui.table-row)
|
|
@props(['hoverable', 'clickable', 'selected'])
|
|
Table row with interaction states.
|
|
|
|
18. Table Header Cell (ui.table-th)
|
|
@props(['sortable', 'sorted', 'direction', 'align'])
|
|
Table header with sorting support.
|
|
|
|
19. Table Data Cell (ui.table-td)
|
|
@props(['align', 'nowrap'])
|
|
Table cell with alignment options.
|
|
|
|
=== FORM COMPONENTS ===
|
|
|
|
20. Button (ui.button)
|
|
@props(['variant', 'size', 'icon', 'iconPosition', 'loading', 'disabled', 'full'])
|
|
Multi-variant buttons with loading states.
|
|
|
|
21. Input (ui.input)
|
|
@props(['label', 'error', 'icon', 'iconPosition', 'hint'])
|
|
Form text input with icon support.
|
|
|
|
22. Select (ui.select)
|
|
@props(['label', 'error', 'options', 'placeholder', 'icon', 'hint'])
|
|
Form select dropdown.
|
|
|
|
23. Toggle (ui.toggle)
|
|
@props(['label', 'description', 'disabled'])
|
|
Toggle/switch input.
|
|
|
|
24. Editable Field (ui.editable-field)
|
|
@props(['label', 'value', 'editing', 'editClick', 'cancelClick', 'saveClick', 'applyClick', 'error'])
|
|
Display field with edit button that opens a modal editor.
|
|
|
|
=== INTERACTIVE COMPONENTS ===
|
|
|
|
25. Dropdown (ui.dropdown)
|
|
@props(['align', 'width', 'contentClasses'])
|
|
Dropdown menu container.
|
|
|
|
26. Dropdown Item (ui.dropdown-item)
|
|
@props(['icon', 'danger', 'disabled'])
|
|
Dropdown menu item.
|
|
|
|
27. Dropdown Divider (ui.dropdown-divider)
|
|
Dropdown menu separator.
|
|
|
|
28. Action Toolbar (ui.action-toolbar)
|
|
@props(['centered'])
|
|
Container for VM action buttons.
|
|
|
|
29. Action Button (ui.action-button)
|
|
@props(['action', 'icon', 'label', 'variant', 'disabled', 'loading', 'confirm', 'size'])
|
|
VM control action button.
|
|
|
|
30. Icon Picker (ui.icon-picker)
|
|
@props(['icons', 'categories', 'selected'])
|
|
Modal-based icon selection.
|
|
|
|
31. Tooltip (ui.tooltip)
|
|
@props(['text', 'position'])
|
|
Hover tooltip.
|
|
|
|
32. Confirm Dialog (ui.confirm-dialog)
|
|
@props(['title', 'message', 'confirmLabel', 'cancelLabel', 'variant', 'open'])
|
|
Confirmation modal for dangerous actions.
|
|
|
|
33. Copy Button (ui.copy-button)
|
|
@props(['value'])
|
|
Small inline button to copy text to clipboard.
|
|
|
|
34. Copyable (ui.copyable)
|
|
@props(['label', 'value', 'masked'])
|
|
Text field with copy to clipboard and optional masking.
|
|
|
|
=== FEEDBACK COMPONENTS ===
|
|
|
|
35. Alert (ui.alert)
|
|
@props(['variant', 'title', 'dismissible', 'icon'])
|
|
Alert/notification messages.
|
|
|
|
36. Spinner (ui.spinner)
|
|
@props(['size', 'color'])
|
|
Loading spinner animation.
|
|
|
|
37. Notice Banner (ui.notice-banner)
|
|
@props(['title', 'variant', 'collapsible', 'storageKey', 'icon', 'showCondition'])
|
|
Collapsible notice/alert banner with localStorage persistence.
|
|
|
|
=== USAGE EXAMPLES ===
|
|
|
|
-- Server Status Badge --
|
|
<x-proxmox::ui.server-status status="running" showLabel />
|
|
|
|
-- Resource Usage --
|
|
<x-proxmox::ui.resource-gauge
|
|
label="Memory"
|
|
:value="2048"
|
|
:max="4096"
|
|
unit="MB"
|
|
icon="ri-ram-line"
|
|
/>
|
|
|
|
-- Allocation Card --
|
|
<x-proxmox::ui.allocation-card
|
|
label="CPU Allocation"
|
|
:percent="45"
|
|
usage-summary="1.8 / 4 vCPU"
|
|
entitlement-label="4 vCPU entitlement"
|
|
description="Live hypervisor usage."
|
|
:badge="['label' => 'Healthy', 'class' => 'text-success bg-success/15']"
|
|
/>
|
|
|
|
-- Action Toolbar --
|
|
<x-proxmox::ui.action-toolbar>
|
|
<x-proxmox::ui.action-button
|
|
wire:click="startServer"
|
|
icon="ri-play-fill"
|
|
label="Start"
|
|
variant="success"
|
|
/>
|
|
<x-proxmox::ui.action-button
|
|
wire:click="stopServer"
|
|
icon="ri-stop-fill"
|
|
label="Stop"
|
|
variant="danger"
|
|
confirm="Are you sure you want to stop this server?"
|
|
/>
|
|
</x-proxmox::ui.action-toolbar>
|
|
|
|
-- Card with Stats --
|
|
<x-proxmox::ui.card title="Server Resources" icon="ri-server-line">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<x-proxmox::ui.stat-card label="CPU Usage" value="45%" icon="ri-cpu-line" :progress="45" />
|
|
<x-proxmox::ui.stat-card label="Memory" value="2GB/4GB" icon="ri-ram-line" :progress="50" />
|
|
</div>
|
|
</x-proxmox::ui.card>
|
|
|
|
-- Notice Banner --
|
|
<x-proxmox::ui.notice-banner
|
|
title="Important Notice"
|
|
variant="warning"
|
|
:collapsible="true"
|
|
storage-key="my-notice-collapsed"
|
|
>
|
|
<p class="text-xs text-base/70">Your notice content here...</p>
|
|
</x-proxmox::ui.notice-banner>
|
|
|
|
-- Help Modal --
|
|
<x-proxmox::ui.help-modal title="Feature Help" icon="ri-server-line">
|
|
<x-slot:description>
|
|
Brief description of the feature.
|
|
</x-slot:description>
|
|
<x-slot:details>
|
|
<p><span class="font-semibold">Item:</span> Detailed explanation...</p>
|
|
</x-slot:details>
|
|
</x-proxmox::ui.help-modal>
|
|
|
|
-- Copyable Field --
|
|
<x-proxmox::ui.copyable label="IP Address" value="192.168.1.1" />
|
|
<x-proxmox::ui.copyable label="Password" value="secret123" :masked="true" />
|
|
--}}
|