mirror of
https://github.com/tiennm99/coolify.git
synced 2026-10-14 18:18:29 +00:00
feat(ui): polish domains UX and dark-mode loading accents
Group service domain tables with inline redirect controls, live-save redirects without full refreshes, and only auto-pair www hosts when a www redirect is active. Align helper tooltips, server-timing HUD, and loading spinners with dark-theme accents; default theme-color to dark.
This commit is contained in:
1 parent
232b999cc9
commit
bb83c1e3be
19 files changed
+404
-176
No files matched your search
@@ -5,21 +5,17 @@
|
||||
|
||||
<div x-data="{
|
||||
open: false,
|
||||
pinned: false,
|
||||
hideTimer: null,
|
||||
style: '',
|
||||
show(pinned = false) {
|
||||
show() {
|
||||
this.cancelHide();
|
||||
this.pinned = pinned;
|
||||
this.open = true;
|
||||
this.$nextTick(() => this.position());
|
||||
},
|
||||
hide() {
|
||||
this.cancelHide();
|
||||
this.hideTimer = setTimeout(() => {
|
||||
if (!this.pinned) {
|
||||
this.open = false;
|
||||
}
|
||||
this.open = false;
|
||||
}, 150);
|
||||
},
|
||||
cancelHide() {
|
||||
@@ -30,7 +26,6 @@
|
||||
},
|
||||
close() {
|
||||
this.cancelHide();
|
||||
this.pinned = false;
|
||||
this.open = false;
|
||||
},
|
||||
closeWhenFocusLeaves() {
|
||||
@@ -81,8 +76,8 @@
|
||||
'size-3.5' => ! isset($trigger),
|
||||
])
|
||||
aria-label="{{ $label }}" :aria-describedby="open ? $id('helper-popup') : null"
|
||||
@mouseenter="show(false)" @mouseleave="hide" @focus="show(false)" @blur="closeWhenFocusLeaves()"
|
||||
@click.prevent.stop="open && pinned ? close() : show(true)">
|
||||
@mouseenter="show()" @mouseleave="hide" @focus="show()" @blur="closeWhenFocusLeaves()"
|
||||
@click.prevent.stop="show()">
|
||||
@isset($trigger)
|
||||
{{ $trigger }}
|
||||
@elseif (isset($icon))
|
||||
@@ -93,20 +88,18 @@
|
||||
aria-hidden="true" />
|
||||
@endisset
|
||||
</button>
|
||||
<template x-teleport="body">
|
||||
<div x-ref="popup" x-show="open" x-cloak :id="$id('helper-popup')" role="tooltip"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="opacity-0 translate-y-0.5"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
:style="style"
|
||||
class="info-helper-popup fixed z-[9999] w-max max-w-[min(20rem,calc(100vw-2rem))]"
|
||||
@mouseenter="cancelHide()" @mouseleave="hide()" @focusout="closeWhenFocusLeaves()" @click.stop>
|
||||
<div class="px-3 py-2.5 text-[13px] leading-5">
|
||||
{!! $helper !!}
|
||||
</div>
|
||||
<div x-ref="popup" x-show="open" x-cloak :id="$id('helper-popup')" role="tooltip"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="opacity-0 translate-y-0.5"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
:style="style"
|
||||
class="info-helper-popup fixed z-[9999] w-max max-w-[min(20rem,calc(100vw-2rem))]"
|
||||
@mouseenter="cancelHide()" @mouseleave="hide()" @focusout="closeWhenFocusLeaves()" @click.stop>
|
||||
<div class="px-3 py-2.5 text-[13px] leading-5">
|
||||
{!! $helper !!}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
Reference in new issue
Block a user