mirror of
https://github.com/tiennm99/coolify.git
synced 2026-08-20 06:23:23 +00:00
Andras Bacsai
9c0908f0fc
Gate public TCP proxy until a port is set, show loading while saving access, and open proxy logs in process-dialog. Compact backup execution actions, add Postgres general section anchors, and tint resource Actions icons with warning color.
83 lines
4.2 KiB
PHP
83 lines
4.2 KiB
PHP
@props([
|
|
'closeWithX' => false,
|
|
'open' => false,
|
|
'size' => 'lg',
|
|
])
|
|
|
|
@php
|
|
$panelWidth = match ($size) {
|
|
'md' => 'min-w-0 w-full max-w-2xl sm:min-w-[28rem]',
|
|
'xl' => 'min-w-0 w-full max-w-5xl sm:min-w-[36rem] lg:min-w-[48rem]',
|
|
default => 'min-w-0 w-full max-w-4xl sm:min-w-[32rem] lg:min-w-[42rem]',
|
|
};
|
|
@endphp
|
|
|
|
{{-- `contents` so event-only shells (no trigger in the default slot) do not leave a
|
|
ghost layout box above layer-2 tabs. Trigger buttons in the slot still flow
|
|
into the parent as if unwrapped. --}}
|
|
<div x-data="{
|
|
processDialogOpen: @js($open)
|
|
}"
|
|
x-init="$watch('processDialogOpen', value => {
|
|
if (!value) {
|
|
$dispatch('processDialogClosed')
|
|
}
|
|
})"
|
|
{{ $attributes->merge(['class' => 'contents']) }}>
|
|
{{ $slot }}
|
|
<template x-teleport="body">
|
|
<div x-show="processDialogOpen" x-cloak class="relative z-99"
|
|
@if (! $closeWithX) @keydown.window.escape="processDialogOpen = false" @endif>
|
|
<div x-show="processDialogOpen"
|
|
x-transition:enter="ease-out duration-150"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="ease-in duration-100"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@if (! $closeWithX) @click="processDialogOpen = false" @endif
|
|
class="fixed inset-0 bg-black/50 backdrop-blur-[2px] dark:bg-black/60"></div>
|
|
|
|
<div class="fixed inset-0 overflow-y-auto">
|
|
<div @if (! $closeWithX) @click.self="processDialogOpen = false" @endif
|
|
class="flex min-h-full items-center justify-center p-4 sm:p-6">
|
|
<div x-show="processDialogOpen"
|
|
x-trap.inert.noscroll="processDialogOpen"
|
|
x-transition:enter="ease-out duration-150"
|
|
x-transition:enter-start="opacity-0 translate-y-2 sm:scale-95"
|
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave="ease-in duration-100"
|
|
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 translate-y-2 sm:scale-95"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="process-dialog-title"
|
|
@class([
|
|
'application-settings-section application-settings-form process-dialog relative flex flex-col overflow-hidden',
|
|
$panelWidth,
|
|
// Fixed shell size so empty “waiting for process” state does not collapse.
|
|
'min-h-[min(70dvh,28rem)] h-[min(85dvh,52rem)] max-h-[calc(100dvh-2rem)]',
|
|
])
|
|
style="box-shadow: 0 0 0 1px var(--coollabs-hairline), var(--shadow-modal)">
|
|
<header class="flex-nowrap!">
|
|
<h3 id="process-dialog-title" class="min-w-0 flex-1 truncate">
|
|
{{ $title }}
|
|
</h3>
|
|
<button type="button" @click="processDialogOpen = false"
|
|
class="flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-500 outline-0 transition-colors hover:bg-neutral-100 hover:text-black focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg"
|
|
aria-label="Close">
|
|
<x-reicon name="x" class="size-4" />
|
|
</button>
|
|
</header>
|
|
|
|
<div class="application-settings-section-body process-dialog-body flex min-h-0 flex-1 flex-col overflow-hidden p-3 sm:p-4"
|
|
style="-webkit-overflow-scrolling: touch;">
|
|
{{ $content }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|