xiaoxue_admin
/
dbx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): align LightTooltip arrow surface

This commit is contained in:
ducheng1 2026-07-08 18:53:48 +08:00 committed by GitHub
parent ffc0279352
commit b4588b47f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/desktop/src/components/sidebar/TreeItem.vue
View File

@ -5066,7 +5066,7 @@ function treeItemMenuItems(): ContextMenuItem[] {
<CustomContextMenu v-else :items="treeItemMenuItems()" v-slot="contextMenuSlot">
<div @contextmenu="onTreeItemContextMenu($event, contextMenuSlot.onContextMenu)">
<LightTooltip :text="displayLabel(node)" :disabled="isTooltipDisabled()" side="right" :side-offset="8" :delay="0" :close-delay="0">
<LightTooltip :text="displayLabel(node)" :disabled="isTooltipDisabled()" side="right" :side-offset="8" :delay="0" :close-delay="0" :surface="detailTooltip ? 'popover' : 'foreground'">
<div
ref="rowRef"
class="group flex items-center gap-1.5 py-1 px-2 cursor-pointer relative outline-none"

20
apps/desktop/src/components/ui/LightTooltip.vue
View File

@ -11,6 +11,7 @@ const props = withDefaults(
closeDelay?: number;
openOnFocus?: boolean;
nowrap?: boolean;
surface?: "foreground" | "popover";
}>(),
{
disabled: false,
@ -20,6 +21,7 @@ const props = withDefaults(
closeDelay: 100,
openOnFocus: true,
nowrap: false,
surface: "foreground",
},
);
@ -62,17 +64,21 @@ const tooltipTransformClass = computed(() => {
const arrowClass = computed(() => {
switch (props.side) {
case "right":
return "absolute -left-1 top-1/2 -translate-y-1/2";
return "absolute -left-1.25 top-1/2 -translate-y-1/2 border-b border-l";
case "left":
return "absolute -right-1 top-1/2 -translate-y-1/2";
return "absolute -right-1.25 top-1/2 -translate-y-1/2 border-t border-r";
case "bottom":
return "absolute -top-1 left-1/2 -translate-x-1/2";
return "absolute -top-1.25 left-1/2 -translate-x-1/2 border-t border-l";
case "top":
default:
return "absolute -bottom-1 left-1/2 -translate-x-1/2";
return "absolute -bottom-1.25 left-1/2 -translate-x-1/2 border-b border-r";
}
});
const tooltipSurfaceClass = computed(() => (props.surface === "popover" ? "bg-popover text-popover-foreground" : "bg-foreground text-background"));
const arrowSurfaceClass = computed(() => (props.surface === "popover" ? "bg-popover border-border" : "bg-foreground border-foreground"));
function clearTimer() {
if (!timer) return;
clearTimeout(timer);
@ -241,15 +247,15 @@ watch(
<div
v-if="show"
ref="tooltipRef"
class="fixed z-50 rounded-md bg-foreground text-xs text-background"
:class="[slots.content ? '' : ['inline-flex w-fit max-w-xs items-center gap-1.5 px-3 py-1.5', nowrap ? 'whitespace-nowrap' : ''], tooltipTransformClass]"
class="fixed z-50 rounded-md text-xs"
:class="[tooltipSurfaceClass, slots.content ? '' : ['inline-flex w-fit max-w-xs items-center gap-1.5 px-3 py-1.5', nowrap ? 'whitespace-nowrap' : ''], tooltipTransformClass]"
:style="{ left: `${x}px`, top: `${y}px` }"
role="tooltip"
@mouseenter="clearCloseTimer"
@mouseleave="scheduleClose"
>
<slot name="content">{{ text }}</slot>
<span :class="[arrowClass, 'size-2.5 rotate-45 rounded-[2px] bg-foreground']" aria-hidden="true" />
<span :class="[arrowClass, arrowSurfaceClass, 'size-2.5 rotate-45 rounded-[2px]']" aria-hidden="true" />
</div>
</Teleport>
</template>