mirror of
https://github.com/tiennm99/coolify.git
synced 2026-10-13 22:15:35 +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
@@ -0,0 +1,137 @@
|
||||
@props([
|
||||
'resource',
|
||||
'variables',
|
||||
'type',
|
||||
'title',
|
||||
'view',
|
||||
'variablesLabel',
|
||||
])
|
||||
|
||||
@php
|
||||
$alphabeticalPositions = $variables->sortBy('key')->values()->pluck('id')->flip();
|
||||
$sharedVariableRows = $variables
|
||||
->map(fn($variable) => [
|
||||
'key' => mb_strtolower($variable->key),
|
||||
'comment' => mb_strtolower($variable->comment ?? ''),
|
||||
'scope' => mb_strtolower(str($type)->headline()),
|
||||
])
|
||||
->values();
|
||||
@endphp
|
||||
|
||||
<div class="application-settings-form w-full" x-data="{
|
||||
sharedSearch: '',
|
||||
sharedSort: 'alphabetical',
|
||||
sortOpen: false,
|
||||
rows: @js($sharedVariableRows),
|
||||
get filteredCount() {
|
||||
const query = this.sharedSearch.trim().toLowerCase();
|
||||
if (!query) return this.rows.length;
|
||||
return this.rows.filter(row => [row.key, row.comment, row.scope].some(value => value.includes(query))).length;
|
||||
}
|
||||
}">
|
||||
<x-dashboard.navbar section="shared-variables" title="Shared variables"
|
||||
subtitle="Reusable environment variables across resources" :titleOnDesktop="false">
|
||||
<x-slot:actions>
|
||||
<x-forms.button type="button" wire:click="switch" class="whitespace-nowrap">
|
||||
<x-reicon :name="$view === 'normal' ? 'browser-code' : 'unordered-list'" class="size-3.5" />
|
||||
<span class="max-sm:hidden">{{ $view === 'normal' ? 'Developer view' : 'Normal view' }}</span>
|
||||
<span class="sm:hidden">{{ $view === 'normal' ? 'Developer' : 'Normal' }}</span>
|
||||
</x-forms.button>
|
||||
</x-slot:actions>
|
||||
</x-dashboard.navbar>
|
||||
|
||||
<x-application.settings-section :title="$title" flush>
|
||||
@if ($view === 'normal')
|
||||
<div
|
||||
class="flex flex-col gap-3 border-b border-neutral-200 p-3 sm:flex-row sm:items-center sm:justify-between dark:border-white/[0.08]">
|
||||
<div class="relative w-full sm:max-w-sm">
|
||||
<x-reicon name="search"
|
||||
class="pointer-events-none absolute top-1/2 left-2.5 z-10 size-3.5 -translate-y-1/2 text-neutral-400 dark:text-fg-faint" />
|
||||
<input x-model.debounce.150ms="sharedSearch" type="search" placeholder="Search variables"
|
||||
class="h-8! w-full rounded-lg! border-neutral-200! bg-white! py-0! pr-8! pl-8! text-[12px]! shadow-none! placeholder:text-neutral-400 focus:border-accent! focus:ring-0! dark:border-white/[0.08]! dark:bg-white/[0.035]! dark:text-fg! dark:placeholder:text-fg-faint">
|
||||
<button x-cloak x-show="sharedSearch" @click="sharedSearch = ''" type="button"
|
||||
class="absolute top-1/2 right-2 flex size-5 -translate-y-1/2 items-center justify-center rounded text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.07] dark:hover:text-fg"
|
||||
aria-label="Clear search">
|
||||
<x-reicon name="x" class="size-3" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative" @click.outside="sortOpen = false" @keydown.escape.window="sortOpen = false">
|
||||
<button type="button" class="button" @click="sortOpen = !sortOpen">
|
||||
<x-reicon name="sort-direction" class="size-3.5" />
|
||||
Sort
|
||||
</button>
|
||||
<div x-show="sortOpen" x-cloak x-transition.opacity.duration.120ms
|
||||
class="listbox-panel left-auto! right-0! z-[90]! min-w-48!">
|
||||
<button type="button" class="listbox-option"
|
||||
@click="sharedSort = 'alphabetical'; sortOpen = false">
|
||||
<span>Alphabetical</span>
|
||||
<svg x-show="sharedSort === 'alphabetical'" class="size-3.5 shrink-0" viewBox="0 0 24 24"
|
||||
fill="none">
|
||||
<path d="M5 12l5 5 9-11" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" class="listbox-option"
|
||||
@click="sharedSort = 'creation'; sortOpen = false">
|
||||
<span>Creation order</span>
|
||||
<svg x-show="sharedSort === 'creation'" class="size-3.5 shrink-0" viewBox="0 0 24 24"
|
||||
fill="none">
|
||||
<path d="M5 12l5 5 9-11" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@can('update', $resource)
|
||||
<x-modal-input title="New Shared Variable">
|
||||
<x-slot:content>
|
||||
<button type="button"
|
||||
class="button bg-coollabs/10! text-coollabs! ring-1 ring-coollabs/25 hover:bg-coollabs/15! dark:bg-warning/15! dark:text-warning! dark:ring-warning/25 dark:hover:bg-warning/20!">
|
||||
<x-reicon name="plus" class="size-3.5" />
|
||||
Add variable
|
||||
</button>
|
||||
</x-slot:content>
|
||||
<livewire:project.shared.environment-variable.add :shared="true" />
|
||||
</x-modal-input>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($variables->isEmpty())
|
||||
<x-empty title="No shared variables"
|
||||
description="Add a variable to make it available to resources in this scope."
|
||||
icon-name="variables" size="sm" />
|
||||
@else
|
||||
<div class="data-table flex w-full flex-col">
|
||||
<div class="data-table-header env-table-grid-shared order-[-1]">
|
||||
<span>Name</span>
|
||||
<span>Scope</span>
|
||||
<span>Comment</span>
|
||||
<span class="text-center">Multiline</span>
|
||||
<span></span>
|
||||
</div>
|
||||
@foreach ($variables as $env)
|
||||
<livewire:project.shared.environment-variable.show
|
||||
wire:key="shared-variable-{{ $type }}-{{ $env->id }}" :env="$env"
|
||||
:type="$type" :tableAlphabeticalOrder="$alphabeticalPositions[$env->id]"
|
||||
:tableCreationOrder="$loop->index" />
|
||||
@endforeach
|
||||
<div
|
||||
class="order-[9999] flex min-h-11 items-center border-t border-neutral-200 px-4 text-[11px] text-neutral-500 dark:border-white/[0.08] dark:text-fg-faint">
|
||||
<span x-text="`${filteredCount} ${filteredCount === 1 ? 'variable' : 'variables'}`"></span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@else
|
||||
<form wire:submit="submit" class="p-4">
|
||||
<x-unsaved-bar action="submit" />
|
||||
<x-forms.textarea canGate="update" :canResource="$resource" rows="20"
|
||||
class="whitespace-pre-wrap" id="variables" wire:model="variables" monospace
|
||||
:label="$variablesLabel" />
|
||||
</form>
|
||||
@endif
|
||||
</x-application.settings-section>
|
||||
</div>
|
||||
Reference in new issue
Block a user