Private
Public Access
1
0

Refactor button components to use Proxmox UI library

- Updated button components across various views to utilize the new Proxmox UI button structure.
- Replaced instances of <x-button.primary> and <x-button.secondary> with <x-proxmox::ui.button> for consistency and improved styling.
- Adjusted button attributes and loading states to align with the new component design.
- Ensured that all button functionalities remain intact while enhancing the overall UI consistency.
This commit is contained in:
2025-12-17 17:40:11 -05:00
parent 6d6ea1a2cc
commit 689f84ab53
13 changed files with 245 additions and 250 deletions

View File

@@ -429,15 +429,15 @@
</p>
</div>
<div class="flex justify-end gap-2">
<x-button.secondary type="button" @click="showHostnameEditModal = false; $wire.cancelEditingHostname()">
<x-proxmox::ui.button type="button" @click="showHostnameEditModal = false; $wire.cancelEditingHostname()" variant="secondary">
Cancel
</x-button.secondary>
<x-button.primary type="button" wire:click="updateHostname">
</x-proxmox::ui.button>
<x-proxmox::ui.button type="button" wire:click="updateHostname" variant="primary">
Save
</x-button.primary>
<x-button.primary type="button" wire:click="applyHostname">
</x-proxmox::ui.button>
<x-proxmox::ui.button type="button" wire:click="applyHostname" variant="primary">
Save & Apply
</x-button.primary>
</x-proxmox::ui.button>
</div>
</div>
</div>
@@ -590,15 +590,15 @@
</p>
</div>
<div class="flex justify-end gap-2">
<x-button.secondary type="button" @click="showPasswordEditModal = false; $wire.cancelEditingPassword()">
<x-proxmox::ui.button type="button" @click="showPasswordEditModal = false; $wire.cancelEditingPassword()" variant="secondary">
Cancel
</x-button.secondary>
<x-button.primary type="button" wire:click="updatePassword">
</x-proxmox::ui.button>
<x-proxmox::ui.button type="button" wire:click="updatePassword" variant="primary">
Save
</x-button.primary>
<x-button.primary type="button" wire:click="applyPassword">
</x-proxmox::ui.button>
<x-proxmox::ui.button type="button" wire:click="applyPassword" variant="primary">
Save & Apply
</x-button.primary>
</x-proxmox::ui.button>
</div>
</div>
</div>
@@ -847,7 +847,7 @@
</div>
<p class="text-sm text-gray-700 dark:text-gray-300 mb-3">No notes available to export.</p>
<div class="flex justify-end">
<x-button.secondary type="button" @click="showExportErrorModal = false">Close</x-button.secondary>
<x-proxmox::ui.button type="button" @click="showExportErrorModal = false" variant="secondary">Close</x-proxmox::ui.button>
</div>
</div>
</div>
@@ -862,12 +862,11 @@
<div class="text-xs text-error">{{ $notesError }}</div>
@endif
<div class="flex gap-2">
<x-button.primary wire:click="saveNotes" wire:loading.attr="disabled">
<x-loading target="saveNotes" />
<div wire:loading.remove wire:target="saveNotes">Save</div>
<div wire:loading wire:target="saveNotes">Saving...</div>
</x-button.primary>
<x-button.secondary wire:click="cancelEditingNotes" wire:loading.attr="disabled">Cancel</x-button.secondary>
<x-proxmox::ui.button wire:click="saveNotes" wire:loading.attr="disabled" variant="primary">
<span wire:loading.remove wire:target="saveNotes">Save</span>
<span wire:loading wire:target="saveNotes">Saving...</span>
</x-proxmox::ui.button>
<x-proxmox::ui.button wire:click="cancelEditingNotes" wire:loading.attr="disabled" variant="secondary">Cancel</x-proxmox::ui.button>
</div>
</div>
@else
@@ -883,9 +882,9 @@
@endif
</div>
<div class="flex gap-2">
<x-button.secondary wire:click="startEditingNotes">
<x-ri-edit-fill class="size-3" /> Edit
</x-button.secondary>
<x-proxmox::ui.button wire:click="startEditingNotes" variant="secondary" icon="ri-edit-fill">
Edit
</x-proxmox::ui.button>
</div>
</div>
@endif