mirror of
https://github.com/tiennm99/coolify.git
synced 2026-10-13 18:15:24 +00:00
feat(ui): dock resource actions in top bar, user menu in sidebar
Teleport application/database/service heading actions into a fixed #resource-action-hud-slot so they no longer overlay page content. Render the account menu in the sidebar footer (with collapse-aware layout) instead of the header, and drop the project card hover arrow.
This commit is contained in:
1 parent
85613b01ba
commit
ec165412c3
12 files changed
+115
-34
No files matched your search
@@ -1,6 +1,6 @@
|
||||
<?php
|
||||
|
||||
it('shows the shared hover arrow on project and server cards', function () {
|
||||
it('uses card hover animation without a right arrow on project and server cards', function () {
|
||||
$views = [
|
||||
resource_path('views/livewire/project/index.blade.php'),
|
||||
resource_path('views/livewire/server/index.blade.php'),
|
||||
@@ -10,8 +10,9 @@ it('shows the shared hover arrow on project and server cards', function () {
|
||||
$contents = file_get_contents($view);
|
||||
|
||||
expect($contents)
|
||||
->toContain('<x-reicon name="arrow-right"')
|
||||
->toContain('group-hover:translate-x-0.5 group-hover:opacity-100')
|
||||
->toContain('pointer-events-none absolute top-1/2 right-3');
|
||||
->toContain('hover:-translate-y-px')
|
||||
->toContain('hover:shadow-md')
|
||||
->not->toContain('group-hover:translate-x-0.5 group-hover:opacity-100')
|
||||
->not->toContain('pointer-events-none absolute top-1/2 right-3');
|
||||
}
|
||||
});
|
||||
@@ -22,9 +22,9 @@ it('uses a single unified navbar for application, service, database, and server
|
||||
->toContain('justify-start')
|
||||
->toContain('xl:justify-end')
|
||||
->toContain('xl:w-auto')
|
||||
->toContain('xl:bg-transparent')
|
||||
->toContain('xl:fixed')
|
||||
->toContain('xl:top-14')
|
||||
->toContain("@teleport('#resource-action-hud-slot')")
|
||||
->not->toContain('xl:fixed')
|
||||
->not->toContain('xl:top-14')
|
||||
->toContain('xl:hidden')
|
||||
->not->toContain('application-primary-tabs')
|
||||
->not->toContain("typeof collapsed !== 'undefined'")
|
||||
@@ -33,6 +33,55 @@ it('uses a single unified navbar for application, service, database, and server
|
||||
->not->toContain('border-l border-neutral-200 pl-1');
|
||||
});
|
||||
|
||||
it('docks desktop resource actions in the top bar instead of floating over content', function () {
|
||||
$layout = file_get_contents(resource_path('views/layouts/app.blade.php'));
|
||||
$files = [
|
||||
resource_path('views/livewire/project/application/heading.blade.php'),
|
||||
resource_path('views/livewire/project/service/heading.blade.php'),
|
||||
resource_path('views/livewire/project/database/heading.blade.php'),
|
||||
resource_path('views/livewire/server/navbar.blade.php'),
|
||||
];
|
||||
|
||||
expect($layout)->toContain('id="resource-action-hud-slot"');
|
||||
|
||||
foreach ($files as $path) {
|
||||
$contents = file_get_contents($path);
|
||||
|
||||
expect($contents)
|
||||
->toContain("@teleport('#resource-action-hud-slot')")
|
||||
->not->toContain('xl:fixed xl:top-14 xl:right-4');
|
||||
|
||||
$desktopHud = str($contents)->after("@teleport('#resource-action-hud-slot')")->before('@endteleport')->toString();
|
||||
|
||||
expect($desktopHud)
|
||||
->not->toContain('rounded-[10px]')
|
||||
->not->toContain('border-neutral-200')
|
||||
->not->toContain('bg-neutral-100')
|
||||
->not->toContain('dark:bg-white/[0.035]');
|
||||
}
|
||||
});
|
||||
|
||||
it('places the account menu beside the desktop sidebar toggle while retaining it on mobile', function () {
|
||||
$layout = file_get_contents(resource_path('views/layouts/app.blade.php'));
|
||||
$navbar = file_get_contents(resource_path('views/components/navbar.blade.php'));
|
||||
$accountMenu = file_get_contents(resource_path('views/components/top-user-menu.blade.php'));
|
||||
|
||||
expect($layout)
|
||||
->not->toContain("{{-- Right cluster --}}\n <x-top-user-menu />")
|
||||
->toContain('<x-top-user-menu />')
|
||||
->toContain('flex grow min-w-0 flex-col overflow-visible');
|
||||
|
||||
expect(substr_count($layout, '<x-top-user-menu />'))->toBe(1);
|
||||
|
||||
expect($navbar)
|
||||
->toContain('<x-top-user-menu sidebar />')
|
||||
->toContain('Toggle sidebar');
|
||||
|
||||
expect($accountMenu)
|
||||
->toContain("'sidebar' => false")
|
||||
->toContain("'bottom-full! left-0! right-auto! top-auto! mb-1!' => \$sidebar");
|
||||
});
|
||||
|
||||
it('keeps application links next to advanced actions on the right', function () {
|
||||
$application = file_get_contents(resource_path('views/livewire/project/application/heading.blade.php'));
|
||||
$links = file_get_contents(resource_path('views/components/applications/links.blade.php'));
|
||||
@@ -168,6 +217,17 @@ it('keeps the deployment log sidebar fixed in the layout without a top gap', fun
|
||||
->and($css)->toContain('overflow: visible;');
|
||||
});
|
||||
|
||||
it('uses the same mobile heading gap on deployment pages as application settings', function () {
|
||||
$configuration = file_get_contents(resource_path('views/livewire/project/application/configuration.blade.php'));
|
||||
$deploymentIndex = file_get_contents(resource_path('views/livewire/project/application/deployment/index.blade.php'));
|
||||
$deploymentShow = file_get_contents(resource_path('views/livewire/project/application/deployment/show.blade.php'));
|
||||
|
||||
expect($configuration)->toContain('application-settings-workspace mt-4')
|
||||
->and($deploymentIndex)->toContain("'mt-4 max-w-[1180px] lg:mt-0' => ! \$embedded")
|
||||
->and($deploymentShow)->toContain('application-settings-workspace mt-4')
|
||||
->toContain('lg:mt-0');
|
||||
});
|
||||
|
||||
it('removes desktop top spacing from the deployment log viewer', function () {
|
||||
$deployment = file_get_contents(resource_path('views/livewire/project/application/deployment/show.blade.php'));
|
||||
|
||||
|
||||
Reference in new issue
Block a user