mirror of
https://github.com/tiennm99/coolify.git
synced 2026-10-15 06:16:04 +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:
Andras Bacsai committed
1 parent
4926cdba0e
commit
ada3ea354a
12 files changed
+207
-144
No files matched your search
@@ -1,66 +1,34 @@
|
||||
<div x-data="{
|
||||
raw: true,
|
||||
showNormalTextarea: false,
|
||||
editorHeight: 400,
|
||||
calculateEditorHeight() {
|
||||
// Get viewport height
|
||||
const viewportHeight = window.innerHeight;
|
||||
// Modal max height is calc(100vh - 2rem) = viewport - 32px
|
||||
const modalMaxHeight = viewportHeight - 32;
|
||||
// Account for: modal header (~80px) + info text (~60px) + checkboxes (~80px) + buttons (~80px) + padding (~48px)
|
||||
const fixedElementsHeight = 348;
|
||||
// Calculate available height for editor
|
||||
const availableHeight = modalMaxHeight - fixedElementsHeight;
|
||||
// Set minimum height of 300px and maximum of available space
|
||||
this.editorHeight = Math.max(300, Math.min(availableHeight, viewportHeight - 200));
|
||||
}
|
||||
}" x-init="calculateEditorHeight(); window.addEventListener('resize', () => calculateEditorHeight())">
|
||||
<div class="pb-4">Volume names are updated upon save. The service UUID will be added as a prefix to all volumes, to
|
||||
prevent
|
||||
name collision. <br>To see the actual volume names, check the Deployable Compose file, or go to Storage
|
||||
menu.</div>
|
||||
<div x-data="{ raw: true, showNormalTextarea: false }"
|
||||
@compose-preview-toggle.window="raw = !raw"
|
||||
@compose-validate.window="$wire.validateCompose()"
|
||||
@compose-save.window="$wire.saveEditedCompose()"
|
||||
class="flex min-h-0 flex-col gap-3">
|
||||
<x-callout type="info" title="Volume names">
|
||||
Volume names are prefixed with the service UUID when you save to prevent collisions.
|
||||
</x-callout>
|
||||
|
||||
<div class="compose-editor-container" x-bind:style="`--editor-height: ${editorHeight}px`">
|
||||
<div class="compose-editor-container min-h-[24rem] overflow-hidden rounded-lg border border-neutral-200 bg-white dark:border-white/[0.10] dark:bg-[#0b0b0c]"
|
||||
style="--editor-height: clamp(24rem, calc(100dvh - 25rem), 48rem)">
|
||||
<div x-cloak x-show="raw" class="font-mono">
|
||||
<div x-cloak x-show="showNormalTextarea">
|
||||
<x-forms.textarea x-bind:style="`height: ${editorHeight}px`" id="dockerComposeRaw">
|
||||
</x-forms.textarea>
|
||||
<x-forms.textarea class="min-h-[24rem] font-mono" style="height: var(--editor-height)"
|
||||
id="dockerComposeRaw" />
|
||||
</div>
|
||||
<div x-cloak x-show="!showNormalTextarea">
|
||||
<x-forms.textarea allowTab useMonacoEditor monacoEditorLanguage="yaml" id="dockerComposeRaw">
|
||||
</x-forms.textarea>
|
||||
<x-forms.textarea allowTab useMonacoEditor monacoEditorLanguage="yaml" id="dockerComposeRaw" />
|
||||
</div>
|
||||
</div>
|
||||
<div x-cloak x-show="raw === false" class="font-mono">
|
||||
<x-forms.textarea x-bind:style="`height: ${editorHeight}px`" readonly id="dockerCompose">
|
||||
</x-forms.textarea>
|
||||
<x-forms.textarea class="min-h-[24rem] font-mono" style="height: var(--editor-height)" readonly
|
||||
id="dockerCompose" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-2 flex gap-2">
|
||||
<div class="flex flex-col gap-2">
|
||||
<x-forms.checkbox label="Escape special characters in labels?"
|
||||
helper="By default, $ (and other chars) is escaped. So if you write $ in the labels, it will be saved as $$.<br><br>If you want to use env variables inside the labels, turn this off."
|
||||
id="isContainerLabelEscapeEnabled" instantSave></x-forms.checkbox>
|
||||
<x-forms.checkbox label="Show Normal Textarea" x-model="showNormalTextarea"></x-forms.checkbox>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-2 rounded-lg border border-neutral-200 bg-neutral-50 p-1 dark:border-white/[0.08] dark:bg-white/[0.025]">
|
||||
<x-forms.checkbox label="Escape special characters in labels"
|
||||
helper="By default, $ (and other characters) is escaped. A $ in a label is saved as $$. Turn this off to use environment variables inside labels."
|
||||
id="isContainerLabelEscapeEnabled" instantSave />
|
||||
<x-forms.checkbox label="Use plain-text editor" id="showNormalTextarea" x-model="showNormalTextarea" />
|
||||
</div>
|
||||
<div class="flex w-full gap-2 pt-4">
|
||||
<div x-cloak x-show="raw">
|
||||
<x-forms.button class="w-64" @click.prevent="raw = !raw">Show Deployable Compose</x-forms.button>
|
||||
</div>
|
||||
<div x-cloak x-show="raw === false">
|
||||
<x-forms.button class="w-64" @click.prevent="raw = !raw">Show Source
|
||||
Compose</x-forms.button>
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
@if (blank($service->service_type))
|
||||
<x-forms.button class="w-28" wire:click.prevent='validateCompose'>
|
||||
Validate
|
||||
</x-forms.button>
|
||||
@endif
|
||||
<x-forms.button class="w-28" wire:click.prevent='saveEditedCompose'>
|
||||
Save
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in new issue
Block a user