mirror of
https://github.com/tiennm99/coolify.git
synced 2026-10-15 14:16:28 +00:00
feat(ui): Shadow UI redesign, domain management, and DNS autoconfigure (#11119)
Co-authored-by: ShadowArcanist <162910371+ShadowArcanist@users.noreply.github.com>
This commit is contained in:
Andras BacsaiandShadowArcanist authored and GitHub committed
1 parent
0b843bb07c
commit
8ae56587d5
497 files changed
+44045
-22630
No files matched your search
@@ -9,144 +9,52 @@
|
||||
|
||||
The currentStep variable is inherited from parent Alpine component (upgradeModal).
|
||||
--}}
|
||||
<div class="w-full" x-data="{ activeStep: {{ $step }} }" x-effect="activeStep = $el.closest('[x-data]')?.__x?.$data?.currentStep ?? {{ $step }}">
|
||||
<div class="flex items-center justify-between">
|
||||
{{-- Step 1: Preparing --}}
|
||||
<div class="flex items-center flex-1">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
|
||||
:class="{
|
||||
'bg-success border-success': currentStep > 1,
|
||||
'bg-black/20 border-black dark:bg-warning/20 dark:border-warning': currentStep === 1,
|
||||
'border-neutral-400 dark:border-coolgray-300': currentStep < 1
|
||||
}">
|
||||
<template x-if="currentStep > 1">
|
||||
<svg class="size-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</template>
|
||||
<template x-if="currentStep === 1">
|
||||
<svg class="size-4 text-black dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</template>
|
||||
<template x-if="currentStep < 1">
|
||||
<span class="text-xs font-medium text-neutral-500 dark:text-neutral-400">1</span>
|
||||
</template>
|
||||
</div>
|
||||
<span class="mt-1.5 text-xs font-medium transition-colors duration-300"
|
||||
:class="{
|
||||
'text-success': currentStep > 1,
|
||||
'text-black dark:text-warning': currentStep === 1,
|
||||
'text-neutral-500 dark:text-neutral-400': currentStep < 1
|
||||
}">Preparing</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 mx-2 transition-all duration-300"
|
||||
:class="currentStep > 1 ? 'bg-success' : 'bg-neutral-300 dark:bg-coolgray-300'"></div>
|
||||
</div>
|
||||
@php
|
||||
$steps = [
|
||||
1 => 'Preparing',
|
||||
2 => 'Helper',
|
||||
3 => 'Image',
|
||||
4 => 'Restart',
|
||||
];
|
||||
@endphp
|
||||
|
||||
{{-- Step 2: Helper --}}
|
||||
<div class="flex items-center flex-1">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="grid grid-cols-4 overflow-hidden rounded-[10px] border border-neutral-200 bg-white dark:border-white/[0.08] dark:bg-white/[0.025]">
|
||||
@foreach ($steps as $stepNumber => $label)
|
||||
<div
|
||||
class="flex min-h-10 items-center justify-center gap-2 border-r border-neutral-200 px-2 text-[11px] font-medium last:border-r-0 dark:border-white/[0.08] sm:px-3"
|
||||
:class="{
|
||||
'bg-coollabs/[0.07] text-coollabs dark:bg-warning/[0.09] dark:text-warning': currentStep === {{ $stepNumber }},
|
||||
'text-emerald-600 dark:text-emerald-400': currentStep > {{ $stepNumber }},
|
||||
'text-neutral-500 dark:text-fg-dim': currentStep < {{ $stepNumber }}
|
||||
}">
|
||||
<span
|
||||
class="flex size-5 shrink-0 items-center justify-center rounded-full border text-[10px] font-semibold"
|
||||
:class="{
|
||||
'bg-success border-success': currentStep > 2,
|
||||
'bg-black/20 border-black dark:bg-warning/20 dark:border-warning': currentStep === 2,
|
||||
'border-neutral-400 dark:border-coolgray-300': currentStep < 2
|
||||
'border-coollabs/25 bg-coollabs/10 dark:border-warning/25 dark:bg-warning/15': currentStep === {{ $stepNumber }},
|
||||
'border-emerald-500/25 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400': currentStep > {{ $stepNumber }},
|
||||
'border-neutral-200 dark:border-white/[0.1]': currentStep < {{ $stepNumber }}
|
||||
}">
|
||||
<template x-if="currentStep > 2">
|
||||
<svg class="size-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
<template x-if="currentStep > {{ $stepNumber }}">
|
||||
<x-reicon name="check-circle" class="size-3" />
|
||||
</template>
|
||||
<template x-if="currentStep === {{ $stepNumber }}">
|
||||
<svg class="size-3 animate-spin text-coollabs dark:text-warning" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
|
||||
stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
||||
</path>
|
||||
</svg>
|
||||
</template>
|
||||
<template x-if="currentStep === 2">
|
||||
<svg class="size-4 text-black dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<template x-if="currentStep < {{ $stepNumber }}">
|
||||
<span>{{ $stepNumber }}</span>
|
||||
</template>
|
||||
<template x-if="currentStep < 2">
|
||||
<span class="text-xs font-medium text-neutral-500 dark:text-neutral-400">2</span>
|
||||
</template>
|
||||
</div>
|
||||
<span class="mt-1.5 text-xs font-medium transition-colors duration-300"
|
||||
:class="{
|
||||
'text-success': currentStep > 2,
|
||||
'text-black dark:text-warning': currentStep === 2,
|
||||
'text-neutral-500 dark:text-neutral-400': currentStep < 2
|
||||
}">Helper</span>
|
||||
</span>
|
||||
<span class="hidden truncate sm:inline">{{ $label }}</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 mx-2 transition-all duration-300"
|
||||
:class="currentStep > 2 ? 'bg-success' : 'bg-neutral-300 dark:bg-coolgray-300'"></div>
|
||||
</div>
|
||||
|
||||
{{-- Step 3: Image --}}
|
||||
<div class="flex items-center flex-1">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
|
||||
:class="{
|
||||
'bg-success border-success': currentStep > 3,
|
||||
'bg-black/20 border-black dark:bg-warning/20 dark:border-warning': currentStep === 3,
|
||||
'border-neutral-400 dark:border-coolgray-300': currentStep < 3
|
||||
}">
|
||||
<template x-if="currentStep > 3">
|
||||
<svg class="size-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</template>
|
||||
<template x-if="currentStep === 3">
|
||||
<svg class="size-4 text-black dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</template>
|
||||
<template x-if="currentStep < 3">
|
||||
<span class="text-xs font-medium text-neutral-500 dark:text-neutral-400">3</span>
|
||||
</template>
|
||||
</div>
|
||||
<span class="mt-1.5 text-xs font-medium transition-colors duration-300"
|
||||
:class="{
|
||||
'text-success': currentStep > 3,
|
||||
'text-black dark:text-warning': currentStep === 3,
|
||||
'text-neutral-500 dark:text-neutral-400': currentStep < 3
|
||||
}">Image</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 mx-2 transition-all duration-300"
|
||||
:class="currentStep > 3 ? 'bg-success' : 'bg-neutral-300 dark:bg-coolgray-300'"></div>
|
||||
</div>
|
||||
|
||||
{{-- Step 4: Restart --}}
|
||||
<div class="flex items-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
|
||||
:class="{
|
||||
'bg-success border-success': currentStep > 4,
|
||||
'bg-black/20 border-black dark:bg-warning/20 dark:border-warning': currentStep === 4,
|
||||
'border-neutral-400 dark:border-coolgray-300': currentStep < 4
|
||||
}">
|
||||
<template x-if="currentStep > 4">
|
||||
<svg class="size-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</template>
|
||||
<template x-if="currentStep === 4">
|
||||
<svg class="size-4 text-black dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</template>
|
||||
<template x-if="currentStep < 4">
|
||||
<span class="text-xs font-medium text-neutral-500 dark:text-neutral-400">4</span>
|
||||
</template>
|
||||
</div>
|
||||
<span class="mt-1.5 text-xs font-medium transition-colors duration-300"
|
||||
:class="{
|
||||
'text-success': currentStep > 4,
|
||||
'text-black dark:text-warning': currentStep === 4,
|
||||
'text-neutral-500 dark:text-neutral-400': currentStep < 4
|
||||
}">Restart</span>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
Reference in new issue
Block a user