Refactor components to align with AdminLTE styles
- Updated alert component to use AdminLTE variant classes and added callout support. - Refined badge component with AdminLTE base and variant classes, including size adjustments. - Modified button component to implement AdminLTE button styles and improved loading indicators. - Enhanced card component with AdminLTE variant classes and improved header/footer structure. - Adjusted input component to follow AdminLTE design, including size classes and icon handling. - Updated layout component to streamline button styles and loading indicators. - Refined progress component to utilize AdminLTE styles for size and variant classes. - Enhanced table component with AdminLTE table classes and improved loading state representation.
This commit is contained in:
@@ -1231,12 +1231,10 @@
|
||||
<div class="hidden lg:flex flex-row gap-2 ml-auto justify-end items-center">
|
||||
<button wire:click="do('start')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'stopped') disabled @endif
|
||||
class="inline-flex items-center gap-2 px-4 py-2 bg-success hover:bg-success/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-success">
|
||||
<span wire:loading wire:target="do('start')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
class="lte-btn lte-btn-success"
|
||||
style="border-radius: 0.375rem;">
|
||||
<span wire:loading wire:target="do('start')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
|
||||
<x-ri-play-fill wire:loading.remove wire:target="do('start')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('start')">Start</span>
|
||||
<span wire:loading wire:target="do('start')">Starting...</span>
|
||||
@@ -1244,12 +1242,10 @@
|
||||
<div x-show="isAdvancedView" x-transition>
|
||||
<button wire:click="do('shutdown')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'running') disabled @endif
|
||||
class="inline-flex items-center gap-2 px-4 py-2 bg-warning hover:bg-warning/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-warning">
|
||||
<span wire:loading wire:target="do('shutdown')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
class="lte-btn lte-btn-warning"
|
||||
style="border-radius: 0.375rem;">
|
||||
<span wire:loading wire:target="do('shutdown')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
|
||||
<x-ri-stop-fill wire:loading.remove wire:target="do('shutdown')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('shutdown')">Stop (ACPI)</span>
|
||||
<span wire:loading wire:target="do('shutdown')">Stopping...</span>
|
||||
@@ -1258,12 +1254,10 @@
|
||||
<div x-show="isAdvancedView" x-transition>
|
||||
<button wire:click="do('reboot')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'running') disabled @endif
|
||||
class="inline-flex items-center gap-2 px-4 py-2 bg-info hover:bg-info/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-info">
|
||||
<span wire:loading wire:target="do('reboot')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
class="lte-btn lte-btn-info"
|
||||
style="border-radius: 0.375rem;">
|
||||
<span wire:loading wire:target="do('reboot')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
|
||||
<x-ri-restart-line wire:loading.remove wire:target="do('reboot')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('reboot')">Reboot (ACPI)</span>
|
||||
<span wire:loading wire:target="do('reboot')">Rebooting...</span>
|
||||
@@ -1271,12 +1265,10 @@
|
||||
</div>
|
||||
<button wire:click="do('stop')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'running') disabled @endif
|
||||
class="inline-flex items-center gap-2 px-4 py-2 bg-danger hover:bg-danger/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-danger">
|
||||
<span wire:loading wire:target="do('stop')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
class="lte-btn lte-btn-danger"
|
||||
style="border-radius: 0.375rem;">
|
||||
<span wire:loading wire:target="do('stop')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
|
||||
<x-ri-shut-down-line wire:loading.remove wire:target="do('stop')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('stop')">Power Off</span>
|
||||
<span wire:loading wire:target="do('stop')">Powering Off...</span>
|
||||
@@ -1287,12 +1279,10 @@
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<button wire:click="do('start')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'stopped') disabled @endif
|
||||
class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-success hover:bg-success/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-success">
|
||||
<span wire:loading wire:target="do('start')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
class="lte-btn lte-btn-success"
|
||||
style="width: 100%; justify-content: center; border-radius: 0.375rem; padding: 0.625rem 1rem;">
|
||||
<span wire:loading wire:target="do('start')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
|
||||
<x-ri-play-fill wire:loading.remove wire:target="do('start')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('start')">Start</span>
|
||||
<span wire:loading wire:target="do('start')">Starting...</span>
|
||||
@@ -1300,12 +1290,10 @@
|
||||
<div x-show="isAdvancedView" x-transition>
|
||||
<button wire:click="do('shutdown')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'running') disabled @endif
|
||||
class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-warning hover:bg-warning/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-warning">
|
||||
<span wire:loading wire:target="do('shutdown')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
class="lte-btn lte-btn-warning"
|
||||
style="width: 100%; justify-content: center; border-radius: 0.375rem; padding: 0.625rem 1rem;">
|
||||
<span wire:loading wire:target="do('shutdown')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
|
||||
<x-ri-stop-fill wire:loading.remove wire:target="do('shutdown')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('shutdown')">Stop (ACPI)</span>
|
||||
<span wire:loading wire:target="do('shutdown')">Stopping...</span>
|
||||
@@ -1314,12 +1302,10 @@
|
||||
<div x-show="isAdvancedView" x-transition>
|
||||
<button wire:click="do('reboot')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'running') disabled @endif
|
||||
class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-info hover:bg-info/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-info">
|
||||
<span wire:loading wire:target="do('reboot')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
class="lte-btn lte-btn-info"
|
||||
style="width: 100%; justify-content: center; border-radius: 0.375rem; padding: 0.625rem 1rem;">
|
||||
<span wire:loading wire:target="do('reboot')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
|
||||
<x-ri-restart-line wire:loading.remove wire:target="do('reboot')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('reboot')">Reboot (ACPI)</span>
|
||||
<span wire:loading wire:target="do('reboot')">Rebooting...</span>
|
||||
@@ -1327,12 +1313,10 @@
|
||||
</div>
|
||||
<button wire:click="do('stop')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
@if($vmStatus !== 'running') disabled @endif
|
||||
class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-danger hover:bg-danger/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-danger">
|
||||
<span wire:loading wire:target="do('stop')" class="animate-spin">
|
||||
<x-ri-loader-4-line class="size-4" />
|
||||
</span>
|
||||
class="lte-btn lte-btn-danger"
|
||||
style="width: 100%; justify-content: center; border-radius: 0.375rem; padding: 0.625rem 1rem;">
|
||||
<span wire:loading wire:target="do('stop')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
|
||||
<x-ri-shut-down-line wire:loading.remove wire:target="do('stop')" class="size-4" />
|
||||
<span wire:loading.remove wire:target="do('stop')">Power Off</span>
|
||||
<span wire:loading wire:target="do('stop')">Powering Off...</span>
|
||||
|
||||
Reference in New Issue
Block a user