tiennm99/coolify
1
0 Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-10-14 20:17:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): polish create flows for compose and GitHub repos

Browse Source 
Use shared listbox for private-repo selection, align listbox
trigger heights with form inputs, restore compose editor spacing
and full width, and wire loading states on create/continue
actions.
This commit is contained in:
Andras Bacsai committed 2026-08-07 17:25:50 +02:00
1 parent 9c0908f0fc
commit c07f66cb5e
6 files changed
+73 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/css/app.css
+4 -2
View File
@@ -1430,8 +1430,10 @@ html[data-theme="custom"] textarea:disabled {
/* Inputs & selects: recessed fill + line border (surface hierarchy) */
.application-settings-workspace .input,
.application-settings-workspace .select,
.application-settings-workspace .listbox-trigger,
.application-settings-form .input,
.application-settings-form .select {
.application-settings-form .select,
.application-settings-form .listbox-trigger {
height: 2rem;
border-radius: 8px;
border-color: var(--coollabs-line);
@@ -1741,7 +1743,7 @@ html[data-theme="custom"] textarea:disabled {
gap: 0.5rem;
width: 100%;
min-width: 0;
height: 2rem;
height: 2.25rem;
padding: 0 0.625rem 0 0.75rem;
overflow: hidden;
border-radius: 8px;
resources/views/livewire/project/new/docker-compose.blade.php
+3 -3
View File
@@ -1,4 +1,4 @@
<div class="mt-8 w-full max-w-[1180px] lg:mt-3">
<div class="mt-8 w-full lg:mt-3">
<form wire:submit="submit">
<section class="application-settings-section">
<div class="application-settings-section-header">
@@ -6,9 +6,9 @@
<h2>Docker Compose</h2>
<p>Create a multi-container service directly from a Compose file.</p>
</div>
<x-forms.button type="submit" isHighlighted>Create service</x-forms.button>
<x-forms.button type="submit" wire:target="submit" isHighlighted>Create service</x-forms.button>
</div>
<div class="application-settings-section-body p-0!">
<div class="application-settings-section-body">
<x-forms.textarea useMonacoEditor monacoEditorLanguage="yaml" label="Docker Compose file"
rows="20" id="dockerComposeRaw" autofocus placeholder='services:
app:
resources/views/livewire/project/new/github-private-repository.blade.php
+9 -8
View File
@@ -31,8 +31,9 @@
<div class="application-settings-section-body p-0!">
@foreach ($github_apps as $ghapp)
<button type="button"
class="group flex w-full items-center gap-3 border-b border-neutral-200 px-4 py-3 text-left transition-colors last:border-b-0 hover:bg-neutral-50 dark:border-white/[0.06] dark:hover:bg-white/[0.025]"
class="group relative flex w-full items-center gap-3 border-b border-neutral-200 px-4 py-3 text-left transition-colors last:border-b-0 hover:bg-neutral-50 dark:border-white/[0.06] dark:hover:bg-white/[0.025]"
wire:click.prevent="loadRepositories({{ $ghapp->id }})"
wire:loading.class="coolbox-loading"
wire:loading.attr="disabled" wire:target="loadRepositories({{ $ghapp->id }})"
wire:key="{{ $ghapp->id }}">
<div
@@ -71,13 +72,13 @@
<div class="application-settings-section-body">
@if ($repositories->isNotEmpty())
<div class="flex items-end gap-2">
<x-forms.datalist class="w-full" label="Repository"
placeholder="Search repositories…" wire:model.live="selected_repository_id">
@foreach ($repositories as $repo)
<option value="{{ data_get($repo, 'id') }}">{{ data_get($repo, 'name') }}</option>
@endforeach
</x-forms.datalist>
<x-forms.listbox id="selected_repository_id" label="Repository" required live
:options="$repositories->map(fn ($repository) => [
'value' => data_get($repository, 'id'),
'label' => data_get($repository, 'name'),
])->values()->all()" />
<x-forms.button :showLoadingIndicator="false" wire:click.prevent="loadBranches"
wire:loading.attr="disabled"
wire:target="loadBranches,selected_repository_id">
<x-loading-on-button wire:loading.delay
wire:target="loadBranches,selected_repository_id" />
@@ -99,7 +100,7 @@
<h2>Build configuration</h2>
<p>Choose the branch and build strategy for this application.</p>
</div>
<x-forms.button type="submit" isHighlighted>Continue</x-forms.button>
<x-forms.button type="submit" wire:target="submit" isHighlighted>Continue</x-forms.button>
</div>
<div class="application-settings-section-body space-y-5">
<div class="grid gap-4 sm:grid-cols-2">