fix(ui): apply corner style to remaining controls
This commit is contained in:
80 files changed
+487
-305
No files matched your search
@@ -4870,7 +4870,7 @@ const canvasDetailButtonStyle = computed(() => {
|
||||
const edgeGap = 6;
|
||||
return {
|
||||
left: `${Math.max(DATA_GRID_ROW_NUM_WIDTH, cell.rect.left + cell.rect.width - actionWidth - edgeGap)}px`,
|
||||
top: `${cell.rect.top + 2}px`,
|
||||
top: `${cell.rect.top + cell.rect.height / 2}px`,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -7851,7 +7851,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
||||
<span class="text-muted-foreground/70 italic">{{ draftCellPlaceholder(displayItems[cell.recordIndex], cell.valueIndex) }}</span>
|
||||
</template>
|
||||
<template v-else>{{ firstLineCellDisplayValue(cell.display) }}</template>
|
||||
<div v-if="cellDetailButtonVisible(cell.recordIndex, cell.valueIndex)" class="absolute right-2 top-0.5 flex items-center gap-1">
|
||||
<div v-if="cellDetailButtonVisible(cell.recordIndex, cell.valueIndex)" class="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1">
|
||||
<LightDropdownMenu
|
||||
v-if="canQuickDownloadCellValue(cell.recordIndex, cell.valueIndex)"
|
||||
:items="binaryCellDownloadMenuItems"
|
||||
@@ -8002,7 +8002,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
||||
<Code2 class="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="start" side="bottom" class="w-[450px] max-w-[calc(100vw-2rem)] gap-0 overflow-hidden rounded-xl border bg-popover p-0 text-popover-foreground shadow-xl" @click.stop @keydown.stop>
|
||||
<PopoverContent align="start" side="bottom" class="w-[450px] max-w-[calc(100vw-2rem)] gap-0 overflow-hidden rounded-md border bg-popover p-0 text-popover-foreground shadow-xl" @click.stop @keydown.stop>
|
||||
<div class="border-b bg-muted/40 px-3 py-2">
|
||||
<div class="text-sm font-semibold">
|
||||
{{ t("grid.columnFormatterFor", { column: col.name }) }}
|
||||
@@ -8181,7 +8181,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
||||
<Filter class="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="start" side="bottom" class="w-[300px] max-w-[calc(100vw-2rem)] gap-0 overflow-hidden rounded-xl border bg-popover p-0 text-popover-foreground shadow-xl" @click.stop @keydown.stop>
|
||||
<PopoverContent align="start" side="bottom" class="w-[300px] max-w-[calc(100vw-2rem)] gap-0 overflow-hidden rounded-md border bg-popover p-0 text-popover-foreground shadow-xl" @click.stop @keydown.stop>
|
||||
<div class="border-b bg-muted/40 px-2 py-1.5 text-center text-xs font-semibold">
|
||||
{{ columnFilterPanelTitle(col.name) }}
|
||||
</div>
|
||||
@@ -8347,7 +8347,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
||||
@paste.stop="onCellEditTextareaPaste"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="canvasDetailButtonCell" class="absolute pointer-events-auto z-20 flex items-center gap-1" :style="canvasDetailButtonStyle" @mouseenter="keepCanvasDetailHover" @mouseleave="clearCanvasDetailHover">
|
||||
<div v-if="canvasDetailButtonCell" class="absolute pointer-events-auto z-20 flex -translate-y-1/2 items-center gap-1" :style="canvasDetailButtonStyle" @mouseenter="keepCanvasDetailHover" @mouseleave="clearCanvasDetailHover">
|
||||
<LightDropdownMenu
|
||||
v-if="canvasDetailButtonCell.canQuickDownload"
|
||||
:items="binaryCellDownloadMenuItems"
|
||||
@@ -8509,7 +8509,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
||||
<span class="text-muted-foreground/70 italic">{{ draftCellPlaceholder(item, col.actualColIdx) }}</span>
|
||||
</template>
|
||||
<template v-else>{{ firstLineCellDisplayValue(formatCellCached(item.data[col.actualColIdx], col.actualColIdx)) }}</template>
|
||||
<div v-if="cellDetailButtonVisible(item.displayIndex, col.actualColIdx)" class="absolute right-2 top-0.5 flex items-center gap-1">
|
||||
<div v-if="cellDetailButtonVisible(item.displayIndex, col.actualColIdx)" class="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1">
|
||||
<LightDropdownMenu
|
||||
v-if="canQuickDownloadCellValue(item.displayIndex, col.actualColIdx)"
|
||||
:items="binaryCellDownloadMenuItems"
|
||||
@@ -8553,7 +8553,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
||||
<div ref="gridVerticalScrollbarThumbRef" class="data-grid-vertical-scrollbar__thumb" />
|
||||
</div>
|
||||
<div v-if="loading" class="absolute inset-0 z-20 bg-background/50 flex items-center justify-center">
|
||||
<div class="flex items-center gap-2 px-3 py-1.5 rounded-md bg-background border shadow-sm text-xs text-muted-foreground">
|
||||
<div class="flex items-center gap-2 rounded-md border bg-background px-3 py-1.5 text-xs text-muted-foreground shadow-sm">
|
||||
<Loader2 class="w-3.5 h-3.5 animate-spin" />
|
||||
<span>{{ formatElapsedSeconds(loadingElapsed) }}s</span>
|
||||
</div>
|
||||
@@ -9508,7 +9508,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
||||
background-color: var(--background);
|
||||
background-color: color-mix(in oklab, var(--background) 96%, var(--primary) 4%);
|
||||
border: 1px solid color-mix(in oklab, var(--primary) 62%, var(--border));
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
z-index: 90;
|
||||
box-shadow:
|
||||
0 28px 72px rgb(0 0 0 / 34%),
|
||||
|
||||
@@ -184,7 +184,7 @@ onUnmounted(() => {
|
||||
:show-close-button="false"
|
||||
overlay-class="!z-[80]"
|
||||
portal-class="!z-[81]"
|
||||
class="image-preview-dialog !flex !max-w-[92vw] flex-col gap-0 overflow-hidden rounded-xl border-white/10 bg-[#090b0f] p-0 text-white shadow-2xl sm:!max-w-[92vw]"
|
||||
class="image-preview-dialog !flex !max-w-[92vw] flex-col gap-0 overflow-hidden rounded-lg border-white/10 bg-[#090b0f] p-0 text-white shadow-2xl sm:!max-w-[92vw]"
|
||||
:style="dialogStyle"
|
||||
@escape-key-down="close"
|
||||
>
|
||||
|
||||
@@ -436,7 +436,7 @@ onBeforeUnmount(() => cleanupMap());
|
||||
|
||||
<template>
|
||||
<Dialog :open="open" @update:open="(value) => emit('update:open', value)">
|
||||
<DialogContent :show-close-button="false" :style="contentStyle" class="layer-preview-dialog flex w-[96vw] max-w-[1800px] h-[88vh] max-h-[960px] min-w-[640px] min-h-[400px] flex-col gap-0 overflow-hidden rounded-xl border p-0 shadow-2xl" @escape-key-down="close">
|
||||
<DialogContent :show-close-button="false" :style="contentStyle" class="layer-preview-dialog flex w-[96vw] max-w-[1800px] h-[88vh] max-h-[960px] min-w-[640px] min-h-[400px] flex-col gap-0 overflow-hidden rounded-lg border p-0 shadow-2xl" @escape-key-down="close">
|
||||
<!-- Header -->
|
||||
<div class="flex h-12 shrink-0 items-center gap-2 border-b bg-muted/20 px-3">
|
||||
<div class="flex min-w-0 shrink-0 items-center gap-2">
|
||||
@@ -503,7 +503,7 @@ onBeforeUnmount(() => cleanupMap());
|
||||
background: #1a1a2e;
|
||||
}
|
||||
.layer-preview-dialog .leaflet-popup-content-wrapper {
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
font-size: 12px;
|
||||
}
|
||||
.layer-preview-dialog .leaflet-popup-content {
|
||||
|
||||
Reference in new issue
Block a user