mirror of
https://github.com/tiennm99/coolify.git
synced 2026-10-13 20:14:45 +00:00
feat(ui): add collapsible advanced settings and enlarge compose modal
Extract a shared forms collapsible for advanced SSH/build settings across boarding, server creation, and application general. Support larger modals with header actions, close the compose editor after save via compose-save-finished, and cover the layout in tests.
This commit is contained in:
1 parent
4926cdba0e
commit
ada3ea354a
12 files changed
+207
-144
No files matched your search
@@ -12,6 +12,7 @@
|
||||
// Optional Livewire bool property to entangle open state (survives Livewire re-renders).
|
||||
'wireOpen' => null,
|
||||
'contentClicks' => true,
|
||||
'isLarge' => false,
|
||||
])
|
||||
|
||||
@php
|
||||
@@ -54,10 +55,19 @@
|
||||
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"
|
||||
class="application-settings-form application-settings-section relative max-h-[calc(100dvh-2rem)] w-full lg:w-auto lg:min-w-2xl lg:max-w-4xl"
|
||||
@class([
|
||||
'application-settings-form application-settings-section relative flex max-h-[calc(100dvh-2rem)] w-full flex-col overflow-hidden',
|
||||
'lg:w-[95vw]! lg:max-w-7xl!' => $isLarge,
|
||||
'lg:w-auto lg:min-w-2xl lg:max-w-4xl' => ! $isLarge,
|
||||
])
|
||||
style="box-shadow: 0 0 0 1px var(--coollabs-hairline), var(--shadow-modal)">
|
||||
<header class="flex-nowrap!">
|
||||
<h3 class="min-w-0 flex-1 truncate">{{ $title }}</h3>
|
||||
@isset($headerActions)
|
||||
<div class="flex shrink-0 items-center gap-2">
|
||||
{{ $headerActions }}
|
||||
</div>
|
||||
@endisset
|
||||
<button type="button" @click="modalOpen=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">
|
||||
<x-reicon name="x" class="size-4" />
|
||||
|
||||
Reference in new issue
Block a user