mirror of
https://github.com/tiennm99/coolify.git
synced 2026-08-20 06:23:23 +00:00
Andras Bacsai
8ae9c03209
Defer container loading with wire:init and a containersLoaded gate, add autoStart/starting session state, extract a shared theme selector, and restyle terminal headers, pickers, and fullscreen chrome. Cover the new packaging and header behavior in feature tests.
34 lines
2.2 KiB
PHP
34 lines
2.2 KiB
PHP
@props(['themes', 'themeNames', 'themeAccents'])
|
|
|
|
<div class="relative ml-auto shrink-0" @click.outside="themeOpen = false">
|
|
<button type="button"
|
|
class="terminal-theme-trigger flex h-8 items-center gap-2 rounded-md px-2.5 text-xs font-medium text-white/70 transition-colors hover:bg-white/[0.08] hover:text-white"
|
|
@click="themeOpen = !themeOpen" aria-label="Choose terminal theme" :aria-expanded="themeOpen">
|
|
<span class="size-2 rounded-full ring-1 ring-white/20"
|
|
:style="{ backgroundColor: @js($themeAccents)[consoleTheme] }"></span>
|
|
<span x-text="@js($themeNames)[consoleTheme]"></span>
|
|
<svg class="size-2.5 text-white/35" viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
|
<path d="m3.5 4.75 2.5 2.5 2.5-2.5" stroke="currentColor" stroke-width="1.25"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div x-cloak x-show="themeOpen" x-transition.origin.top.right
|
|
class="console-theme-selector absolute top-11 right-0 z-50 max-h-80 w-56 overflow-y-auto rounded-lg border border-neutral-200 bg-white p-1 shadow-[0_18px_50px_rgba(0,0,0,0.18)] dark:border-white/[0.1] dark:bg-[#111113] dark:shadow-[0_18px_50px_rgba(0,0,0,0.55)]">
|
|
@foreach ($themes as $theme)
|
|
<button type="button"
|
|
class="flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-[11px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-950 dark:text-white/65 dark:hover:bg-white/[0.07] dark:hover:text-white"
|
|
@click="setTheme('{{ $theme['key'] }}')">
|
|
<span class="h-3 w-5 rounded-full border border-white/10"
|
|
style="background: {{ $theme['background'] }}"></span>
|
|
<span class="flex-1">{{ $theme['name'] }}</span>
|
|
<svg x-show="consoleTheme === '{{ $theme['key'] }}'" class="size-3 text-[#fcd452]"
|
|
viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
|
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor" stroke-width="1.4"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|