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

fix(ui): improve desktop hover and cursor feedback

This commit is contained in:
t8y2 2026-08-07 16:30:31 +08:00
parent 2df9a1dd48
commit 3affcbfa85
No known key found for this signature in database
6 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/desktop/src/components/layout/AppTabBar.vue
View File

@ -478,13 +478,15 @@ function tabColorStyle(tab: QueryTab) {
if (isClassic) {
return {
backgroundColor: hexToRgba(color, isActive ? 0.16 : 0.07),
"--app-tab-background": hexToRgba(color, isActive ? 0.16 : 0.07),
"--app-tab-hover-background": hexToRgba(color, 0.14),
boxShadow: isActive ? `inset 0 -2px 0 ${color}` : undefined,
};
}
return {
backgroundColor: hexToRgba(color, isActive ? 0.16 : 0.09),
"--app-tab-background": hexToRgba(color, isActive ? 0.16 : 0.09),
"--app-tab-hover-background": hexToRgba(color, 0.16),
borderColor: isActive ? hexToRgba(color, 0.72) : hexToRgba(color, 0.18),
};
}
@ -644,7 +646,7 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
<Tooltip>
<TooltipTrigger as-child>
<div
class="app-tab-pill group flex items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap select-none"
class="app-tab-pill group flex cursor-default items-center gap-1 px-2 text-xs transition-colors whitespace-nowrap select-none"
:class="
isClassicLayout
? [
@ -722,7 +724,7 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
<div :class="isClassicLayout ? 'h-full' : ''" @contextmenu="onContextMenu">
<div
data-settings-page-tab
class="app-tab-pill group flex min-w-36 items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap"
class="app-tab-pill group flex min-w-36 cursor-default items-center gap-1 px-2 text-xs transition-colors whitespace-nowrap"
:class="
isClassicLayout
? ['h-full border-r border-border/80 dark:border-border/45 font-medium', settingsPageActive ? 'bg-background text-foreground' : 'text-foreground/70 hover:text-foreground/90']
@ -749,7 +751,7 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
<div :class="isClassicLayout ? 'h-full' : ''" @contextmenu="onContextMenu">
<div
data-driver-store-tab
class="app-tab-pill group flex min-w-38 items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap"
class="app-tab-pill group flex min-w-38 cursor-default items-center gap-1 px-2 text-xs transition-colors whitespace-nowrap"
:class="
isClassicLayout
? ['h-full border-r border-border/80 dark:border-border/45 font-medium', driverStoreActive ? 'bg-background text-foreground' : 'text-foreground/70 hover:text-foreground/90']
@ -840,7 +842,7 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
<Tooltip>
<TooltipTrigger as-child>
<div
class="app-tab-pill group flex items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap select-none"
class="app-tab-pill group flex cursor-default items-center gap-1 px-2 text-xs transition-colors whitespace-nowrap select-none"
:class="
isClassicLayout
? [
@ -1058,6 +1060,14 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
height: 2rem;
}
.app-tab-pill {
background-color: var(--app-tab-background);
}
.app-tab-pill[data-active-tab="false"]:hover {
background-color: var(--app-tab-hover-background, color-mix(in oklch, var(--foreground) 8%, transparent));
}
.dirty-tab-marker {
display: inline-flex;
width: 0.5rem;

4
apps/desktop/src/components/layout/SqlFilePanel.vue
View File

@ -381,7 +381,7 @@ function clearContextTarget() {
<div v-else>
<div v-for="(folder, fi) in folders" :key="folder.path" class="border-b last:border-b-0">
<div
class="flex items-center gap-1 px-2 py-1.5 text-[11px] font-medium text-muted-foreground bg-muted/10 sticky top-0 cursor-pointer select-none hover:bg-muted/30"
class="flex cursor-default items-center gap-1 px-2 py-1.5 text-[11px] font-medium text-muted-foreground bg-muted/10 sticky top-0 select-none hover:bg-muted/30"
:class="selectedPath === folder.path ? 'bg-accent/60 text-accent-foreground' : ''"
@click="
toggleFolderCollapse(folder);
@ -429,7 +429,7 @@ function clearContextTarget() {
<div
v-for="{ entry, depth } in flatTree(folder.entries, folder.expanded)"
:key="entry.path"
class="flex items-center gap-1 px-2 py-1 cursor-pointer hover:bg-muted/60 text-sm"
class="flex cursor-default items-center gap-1 px-2 py-1 hover:bg-muted/60 text-sm"
:class="[entry.is_dir ? 'rounded-sm' : 'rounded-none', selectedPath === entry.path ? 'bg-accent text-accent-foreground' : '']"
:style="{ paddingLeft: depth * 16 + 8 + 'px' }"
@click="

10
apps/desktop/src/components/layout/SqlLibraryPanel.vue
View File

@ -1179,7 +1179,7 @@ function showDropInside(targetId: string) {
<div v-for="item in itemsByDate" :key="item.type + '-' + item.item.id">
<div
v-if="item.type === 'folder'"
class="relative flex items-center gap-1 px-2 py-1.5 text-[13px] cursor-pointer group"
class="relative flex cursor-default items-center gap-1 px-2 py-1.5 text-[13px] group"
:class="[folderRowClass(item.item.id), isDraggingItem(item.item.id) ? 'opacity-50' : '']"
@mousedown="handleDragMouseDown($event, item.item.id, 'folder')"
@click="handleFolderClick(item.item, $event)"
@ -1223,7 +1223,7 @@ function showDropInside(targetId: string) {
<div
v-else
class="relative flex items-center gap-1 px-2 py-1.5 text-[13px] cursor-pointer group"
class="relative flex cursor-default items-center gap-1 px-2 py-1.5 text-[13px] group"
:class="[fileRowClass(item.item.id), isDraggingItem(item.item.id) ? 'opacity-50' : '']"
@mousedown="handleDragMouseDown($event, item.item.id, 'file')"
@click="handleFileClick(item.item, $event)"
@ -1259,7 +1259,7 @@ function showDropInside(targetId: string) {
<div v-for="row in visibleFolderRows" :key="row.type === 'folder' ? row.folder.id : row.file.id">
<div
v-if="row.type === 'folder'"
class="relative flex items-center gap-1 py-1.5 pr-2 text-[13px] cursor-pointer group"
class="relative flex cursor-default items-center gap-1 py-1.5 pr-2 text-[13px] group"
:style="{ paddingLeft: `${8 + row.depth * 16}px` }"
:class="[showDropInside(row.folder.id) ? 'ring-1 ring-primary/50 bg-primary/5' : folderRowClass(row.folder.id), isDraggingItem(row.folder.id) ? 'opacity-50' : '']"
@mousedown="handleDragMouseDown($event, row.folder.id, 'folder')"
@ -1308,7 +1308,7 @@ function showDropInside(targetId: string) {
<div
v-else
class="relative flex items-center gap-1 py-1.5 pr-2 text-[13px] cursor-pointer group"
class="relative flex cursor-default items-center gap-1 py-1.5 pr-2 text-[13px] group"
:style="{ paddingLeft: `${8 + row.depth * 16}px` }"
:class="[fileRowClass(row.file.id), isDraggingItem(row.file.id) ? 'opacity-50' : '']"
@mousedown="handleDragMouseDown($event, row.file.id, 'file')"
@ -1356,7 +1356,7 @@ function showDropInside(targetId: string) {
<div
v-for="file in visibleFiles"
:key="file.id"
class="relative flex items-center gap-1 px-2 py-1.5 text-[13px] cursor-pointer group"
class="relative flex cursor-default items-center gap-1 px-2 py-1.5 text-[13px] group"
:class="[fileRowClass(file.id), isDraggingItem(file.id) ? 'opacity-50' : '']"
@mousedown="handleDragMouseDown($event, file.id, 'file')"
@mousemove="updateDropTarget($event, file.id, 'file')"

4
apps/desktop/src/components/objects/ObjectBrowser.vue
View File

@ -3000,7 +3000,7 @@ function getObjectBrowserMenuItems(item: ObjectBrowserRow): ContextMenuItem[] {
<template #default="{ item }">
<CustomContextMenu :items="() => getObjectBrowserMenuItems(item)" v-slot="{ onContextMenu }">
<div
class="grid h-[34px] cursor-pointer items-center gap-3 border-b px-3 hover:bg-accent/50"
class="grid h-[34px] cursor-default items-center gap-3 border-b px-3 hover:bg-accent/50"
:class="{
'bg-accent/40': sourceRow?.id === item.id,
'bg-primary/10': sidePanelRow?.id === item.id && !selectedTableIds.has(item.id),
@ -3059,7 +3059,7 @@ function getObjectBrowserMenuItems(item: ObjectBrowserRow): ContextMenuItem[] {
<div class="object-browser-grid-row" :style="{ gridTemplateColumns: `repeat(${gridColumns}, minmax(0, 1fr))`, height: `${objectGridRowHeight - OBJECT_GRID_GAP}px` }">
<CustomContextMenu v-for="item in row.cards" :key="item.id" :items="() => getObjectBrowserMenuItems(item)" v-slot="{ onContextMenu }">
<div
class="relative flex h-full min-h-0 cursor-pointer flex-col items-center gap-1 rounded-lg border bg-card p-3 text-center transition-all hover:border-primary/40 hover:shadow-sm"
class="relative flex h-full min-h-0 cursor-default flex-col items-center gap-1 rounded-lg border bg-card p-3 text-center transition-all hover:border-primary/40 hover:shadow-sm"
:class="{
'border-primary bg-primary/5': selectedTableIds.has(item.id),
'border-primary/60': sourceRow?.id === item.id && !selectedTableIds.has(item.id),

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

@ -707,7 +707,7 @@ const rowStyle = computed(() => {
paddingLeft: paddingLeft.value,
paddingRight: trailingComment.value ? "12px" : undefined,
"--tree-connection-row-bg": backgroundColor,
"--tree-connection-row-hover-bg": hexToRgba(color, isActiveConnectionScope.value ? 0.18 : 0.12),
"--tree-connection-row-hover-bg": hexToRgba(color, isActiveConnectionScope.value ? 0.2 : 0.16),
"--tree-connection-active-bg": hexToRgba(color, 0.18),
"--tree-connection-active-focus-bg": hexToRgba(color, 0.22),
};
@ -1120,7 +1120,7 @@ function onKeydown(event: KeyboardEvent) {
<LightTooltip :text="visibleLabel(node)" :disabled="isTooltipDisabled()" side="right" :side-offset="8" :delay="0" :close-delay="30" :surface="detailTooltip ? 'popover' : 'foreground'">
<div
ref="rowRef"
class="group flex items-center gap-2 py-1 px-2 cursor-pointer relative outline-none"
class="group flex cursor-default items-center gap-2 py-1 px-2 relative outline-none"
style="contain: layout style"
:class="[
rowWidthClass,
@ -1130,7 +1130,7 @@ function onKeydown(event: KeyboardEvent) {
'opacity-50': dragVisual.dragging,
'tree-item-connection-tint': connectionColor,
'hover:bg-accent': node.type !== 'connection',
'hover:bg-secondary/60': node.type === 'connection',
'hover:bg-sidebar-accent': node.type === 'connection',
rounded: !selectionVisual.rowSelected,
'tree-item-active': selectionVisual.rowSelected,
'tree-item-active--selection-set': selectionVisual.usesSelectionSetHighlight && selectionVisual.rowSelected,

4
apps/desktop/src/styles/globals.css
View File

@ -1537,7 +1537,6 @@ html.dbx-data-grid-native-selection-blocked [role="textbox"] * {
[role="button"],
[role="menuitem"],
[role="option"],
[role="tab"],
[role="checkbox"],
[role="radio"],
[role="switch"],
@ -1548,6 +1547,9 @@ html.dbx-data-grid-native-selection-blocked [role="textbox"] * {
cursor: pointer;
user-select: none;
}
[role="tab"] {
user-select: none;
}
}
.dbx-desktop-window-frame {