mirror of
https://github.com/tiennm99/coolify.git
synced 2026-10-20 02:17:09 +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
@@ -1,95 +1,99 @@
|
||||
<div wire:poll.3000ms x-data="{
|
||||
<div wire:poll.3000ms x-on:livewire:navigated.window="
|
||||
$wire.updateShouldShowFromPath(window.location.pathname || '/')
|
||||
" x-data="{
|
||||
expanded: @entangle('expanded'),
|
||||
reduceOpacity: @js($this->shouldReduceOpacity)
|
||||
}" class="fixed bottom-0 left-0 z-60 mb-4 ml-4 transition-[left] duration-200"
|
||||
:class="collapsed ? 'lg:left-16' : 'lg:left-56'">
|
||||
@if ($this->deploymentCount > 0)
|
||||
@if ($this->shouldShow && $this->deploymentCount > 0)
|
||||
<div class="relative transition-opacity duration-200"
|
||||
:class="{ 'opacity-100': expanded || !reduceOpacity, 'opacity-60 hover:opacity-100': reduceOpacity && !expanded }">
|
||||
<!-- Indicator Button -->
|
||||
<button @click="expanded = !expanded"
|
||||
class="flex items-center gap-2 px-4 py-2 rounded-lg shadow-lg transition-all duration-200 dark:bg-coolgray-100 bg-white dark:border dark:border-coolgray-200 hover:shadow-xl">
|
||||
<!-- Animated spinner -->
|
||||
<svg class="w-4 h-4 text-coollabs 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>
|
||||
|
||||
<!-- Deployment count -->
|
||||
<span class="text-sm font-medium dark:text-neutral-200 text-gray-800">
|
||||
{{ $this->deploymentCount }} {{ Str::plural('deployment', $this->deploymentCount) }}
|
||||
</span>
|
||||
|
||||
<!-- Expand/collapse icon -->
|
||||
<svg class="w-4 h-4 transition-transform duration-200 dark:text-neutral-400 text-gray-600"
|
||||
:class="{ 'rotate-180': expanded }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Expanded deployment list -->
|
||||
{{-- Expanded deployment list (above the pill) --}}
|
||||
<div x-show="expanded" x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 translate-y-2" x-cloak
|
||||
class="absolute bottom-full mb-2 w-80 max-h-96 overflow-y-auto rounded-lg shadow-xl dark:bg-coolgray-100 bg-white dark:border dark:border-coolgray-200">
|
||||
|
||||
<div class="p-4 space-y-3">
|
||||
class="absolute bottom-full mb-2 w-[min(22rem,calc(100vw-2rem))] overflow-hidden rounded-xl"
|
||||
style="background: var(--coollabs-elevated); box-shadow: 0 0 0 1px var(--coollabs-line), var(--shadow-modal);">
|
||||
<div class="max-h-96 space-y-1 overflow-y-auto p-2 scrollbar">
|
||||
@foreach ($this->deployments as $deployment)
|
||||
<a href="{{ $deployment->deployment_url }}" {{ wireNavigate() }}
|
||||
class="flex items-start gap-3 p-3 rounded-lg dark:bg-coolgray-200 bg-gray-50 transition-all duration-200 hover:ring-2 hover:ring-coollabs dark:hover:ring-warning cursor-pointer">
|
||||
<!-- Status indicator -->
|
||||
<div class="flex-shrink-0 mt-1">
|
||||
@php
|
||||
$deploymentStatus = $deployment->status === 'in_progress' ? 'In progress' : 'Queued';
|
||||
$deploymentStatusType = $deployment->status === 'in_progress' ? 'warning' : 'neutral';
|
||||
$projectName = $deployment->application?->environment?->project?->name;
|
||||
$environmentName = $deployment->application?->environment?->name;
|
||||
$environmentPath = collect([$projectName, $environmentName])->filter()->join(' / ');
|
||||
@endphp
|
||||
<a wire:key="indicator-deployment-{{ $deployment->id }}"
|
||||
href="{{ $deployment->deployment_url }}" {{ wireNavigate() }}
|
||||
class="flex items-start gap-3 rounded-lg border border-transparent p-3 transition-colors hover:border-neutral-200 hover:bg-neutral-50 hover:no-underline dark:hover:border-white/[0.08] dark:hover:bg-white/[0.04]">
|
||||
<div
|
||||
class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-coollabs dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-warning">
|
||||
@if ($deployment->status === 'in_progress')
|
||||
<svg class="w-4 h-4 text-coollabs 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>
|
||||
<svg class="size-3.5 animate-spin" 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>
|
||||
@else
|
||||
<svg class="w-4 h-4 dark:text-neutral-400 text-gray-500" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<x-reicon name="time-back" class="size-3.5 text-neutral-500 dark:text-fg-dim" />
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Deployment info -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="text-sm font-medium dark:text-neutral-200 text-gray-900 truncate">
|
||||
{{ $deployment->application_name }}
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<p class="truncate text-[13px] font-semibold text-black dark:text-fg">
|
||||
{{ $deployment->application_name }}
|
||||
</p>
|
||||
<x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType"
|
||||
class="shrink-0" />
|
||||
</div>
|
||||
<p class="text-xs dark:text-neutral-400 text-gray-600 mt-1">
|
||||
{{ $deployment->application?->environment?->project?->name }} /
|
||||
{{ $deployment->application?->environment?->name }}
|
||||
</p>
|
||||
<p class="text-xs dark:text-neutral-400 text-gray-600">
|
||||
{{ $deployment->server_name }}
|
||||
</p>
|
||||
@if ($deployment->pull_request_id)
|
||||
<p class="text-xs dark:text-neutral-400 text-gray-600">
|
||||
PR #{{ $deployment->pull_request_id }}
|
||||
|
||||
@if ($environmentPath !== '')
|
||||
<p class="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-fg-faint">
|
||||
{{ $environmentPath }}
|
||||
</p>
|
||||
@endif
|
||||
<p class="text-xs mt-1 capitalize" :class="{
|
||||
'text-coollabs dark:text-warning': '{{ $deployment->status }}' === 'in_progress',
|
||||
'dark:text-neutral-400 text-gray-500': '{{ $deployment->status }}' === 'queued'
|
||||
}">
|
||||
{{ str_replace('_', ' ', $deployment->status) }}
|
||||
|
||||
<p class="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-fg-faint">
|
||||
{{ $deployment->server_name ?: '-' }}
|
||||
@if ($deployment->pull_request_id)
|
||||
<span class="px-1 text-neutral-300 dark:text-white/15">·</span>
|
||||
PR #{{ $deployment->pull_request_id }}
|
||||
@endif
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Collapsed pill --}}
|
||||
<button type="button" @click="expanded = !expanded"
|
||||
class="flex items-center gap-2 rounded-xl border border-neutral-200 bg-white px-3.5 py-2 text-sm font-medium text-neutral-800 transition-colors hover:bg-neutral-50 dark:border-white/[0.08] dark:bg-surface dark:text-fg dark:hover:bg-white/[0.04]"
|
||||
style="box-shadow: 0 0 0 1px var(--coollabs-hairline), var(--shadow-modal);"
|
||||
:aria-expanded="expanded.toString()" aria-label="Active deployments">
|
||||
<svg class="size-3.5 shrink-0 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>
|
||||
|
||||
<span>
|
||||
{{ $this->deploymentCount }} {{ Str::plural('deployment', $this->deploymentCount) }}
|
||||
</span>
|
||||
|
||||
<span class="inline-flex shrink-0 text-neutral-400 transition-transform duration-200 dark:text-fg-faint"
|
||||
:class="{ 'rotate-180': expanded }">
|
||||
<x-reicon name="chevron-down" class="size-3.5" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
Reference in new issue
Block a user