mirror of
https://github.com/tiennm99/coolify.git
synced 2026-10-14 08:18:08 +00:00
feat(ui): unify team, security, and notification settings layouts
Extract shared settings-layout components and a dedicated team danger-zone page. Enable modal editing for security resources, polish OAuth/API-token controls, and align notification and service configuration UI with the new navigation patterns.
This commit is contained in:
1 parent
5842d77b81
commit
2291c3fa1c
83 files changed
+1585
-597
No files matched your search
@@ -3,7 +3,9 @@
|
||||
Cloud-Init Scripts | Coolify
|
||||
</x-slot>
|
||||
|
||||
<x-security.navbar>
|
||||
<x-security.settings-layout>
|
||||
<x-application.settings-section title="Cloud-init scripts"
|
||||
description="Reusable initialization scripts for cloud servers." flush>
|
||||
<x-slot:actions>
|
||||
@can('create', App\Models\CloudInitScript::class)
|
||||
<x-modal-input title="New Cloud-Init Script">
|
||||
@@ -18,24 +20,29 @@
|
||||
</x-modal-input>
|
||||
@endcan
|
||||
</x-slot:actions>
|
||||
</x-security.navbar>
|
||||
|
||||
<div class="application-settings-form">
|
||||
<x-application.settings-section title="Cloud-init scripts"
|
||||
description="Reusable initialization scripts for cloud servers." flush>
|
||||
|
||||
@if ($scripts->isEmpty())
|
||||
<x-empty title="No cloud-init scripts"
|
||||
description="Create a script to reuse it during server provisioning."
|
||||
icon-name="file-content" size="sm" />
|
||||
@else
|
||||
<div class="grid grid-cols-1 gap-3 p-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div>
|
||||
<div class="grid grid-cols-[minmax(0,1fr)_12rem_1.75rem] items-center gap-3 border-b border-neutral-200 bg-neutral-50 px-4 py-2.5 text-[13px] font-medium text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.025] dark:text-fg-faint">
|
||||
<div class="pl-11">Script</div>
|
||||
<div>Last updated</div>
|
||||
<div class="w-7"></div>
|
||||
</div>
|
||||
@foreach ($scripts as $script)
|
||||
@can('view', $script)
|
||||
<a wire:key="cloud-init-script-{{ $script->id }}"
|
||||
class="group flex min-h-28 min-w-0 flex-col rounded-xl border border-neutral-200 bg-white p-3 shadow-sm transition-all hover:-translate-y-px hover:border-neutral-300 hover:no-underline hover:shadow-md dark:border-white/[0.08] dark:bg-white/[0.025] dark:hover:border-white/[0.14]"
|
||||
href="{{ route('security.cloud-init-scripts.show', ['cloud_init_script_uuid' => $script->uuid]) }}"
|
||||
{{ wireNavigate() }}>
|
||||
<div class="flex min-w-0 items-start gap-3">
|
||||
<x-modal-input title="Edit Cloud-Init Script" isFullWidth :wireIgnore="false" :contentClicks="false"
|
||||
wire:key="cloud-init-script-{{ $script->id }}"
|
||||
class="border-b border-neutral-200 last:border-b-0 dark:border-white/[0.07]">
|
||||
<x-slot:content>
|
||||
<div
|
||||
class="grid min-h-14 w-full grid-cols-[minmax(0,1fr)_12rem_1.75rem] items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-neutral-50 dark:hover:bg-white/[0.025]"
|
||||
>
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<div
|
||||
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-fg-dim">
|
||||
<x-reicon name="file-content" class="size-4" />
|
||||
@@ -45,21 +52,27 @@
|
||||
class="truncate text-[13px]! leading-4! font-semibold! text-black dark:text-fg">
|
||||
{{ $script->name }}
|
||||
</h3>
|
||||
<p class="mt-0.5 text-[11px] text-neutral-500 dark:text-fg-faint">
|
||||
Cloud-init script
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-auto flex items-center pt-4">
|
||||
<div class="flex items-center">
|
||||
<span class="text-[10px] text-neutral-400 dark:text-fg-faint">
|
||||
Updated {{ $script->updated_at->diffForHumans() }}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<button type="button" class="icon-button" title="Edit cloud-init script"
|
||||
aria-label="Edit {{ $script->name }}" @click="modalOpen=true">
|
||||
<x-reicon name="settings" class="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</x-slot:content>
|
||||
<livewire:security.cloud-init-script.show :cloud_init_script_uuid="$script->uuid"
|
||||
:modalMode="true" :key="'cloud-init-editor-'.$script->uuid" />
|
||||
</x-modal-input>
|
||||
@endcan
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</x-application.settings-section>
|
||||
</div>
|
||||
|
||||
</x-security.settings-layout>
|
||||
</div>
|
||||
Reference in new issue
Block a user