github/dbx
4
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-11-15 14:52:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): improve desktop hover and cursor feedback

Browse Source
This commit is contained in:
t8y2 committed 2026-08-07 16:31:02 +08:00
1 parent 2df9a1dd48
commit 3affcbfa85
6 files changed
+31 -19
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/layout/AppTabBar.vue
+16 -6
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;
apps/desktop/src/components/layout/SqlFilePanel.vue
+2 -2
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="
apps/desktop/src/components/layout/SqlLibraryPanel.vue
+5 -5
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')"