Skip to content

Commit 52649df

Browse files
damianpumardamianpumar
authored
feat/fine tune ui buttons (huggingface#399)
* feat: enhance tooltip positioning for source view button * style: update button shadow effect on hover for better visibility * style: update button hover effects for improved visibility and consistency * style: enhance button hover effects for improved visibility and interaction * style: adjust layout and sizing for cell action components for improved consistency * style: simplify layout structure in TableHTMLRenderer and TableMarkDownRenderer components for improved readability style: adjust body margins in TableSandbox for better content alignment style: refine padding in TableCell for enhanced spacing consistency
1 parent 4f23d39 commit 52649df

File tree

6 files changed

+15
-29
lines changed

6 files changed

+15
-29
lines changed

‎src/features/table/components/body/cell-actions.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,14 @@ export const CellActions = component$<{ cell: Cell }>(({ cell }) => {
4949

5050
return (
5151
<>
52-
<div class="absolute h-[101px] w-full z-40 top-0 right-0">
53-
<div class="flex flex-col items-end justify-center gap-1 w-full h-full pr-2">
54-
<div class="flex flex-col justify-end items-center gap-3 h-full py-2">
52+
<div class="absolute h-full w-full z-40 bottom-0 right-0">
53+
<div class="flex flex-col items-end justify-center w-full h-full">
54+
<div class="flex flex-col justify-end items-center gap-1 h-full p-2">
5555
<Button
5656
look="ghost"
5757
size="sm"
5858
class={cn(
59-
'opacity-0 group-hover:opacity-100 transition-opacity visible rounded-full text-white w-4 h-4 bg-neutral-600 p-4 hover:shadow-lg shadow-neutral-600',
59+
'opacity-0 group-hover:opacity-100 transition-opacity visible rounded-full w-[30px] h-fit text-white bg-neutral-600 p-2 hover:shadow-md shadow-neutral-700 hover:bg-neutral-700',
6060
{
6161
hidden: !cell.value || !cell.sources?.length,
6262
},
@@ -70,17 +70,17 @@ export const CellActions = component$<{ cell: Cell }>(({ cell }) => {
7070
}
7171
}}
7272
>
73-
<Tooltip text="View sources">
74-
<LuGlobe class="text-lg" />
73+
<Tooltip text="View sources" floating="right" gutter={12}>
74+
<LuGlobe class="text-sm" />
7575
</Tooltip>
7676
</Button>
7777
<Button
7878
look="ghost"
7979
size="sm"
8080
class={cn(
81-
'opacity-0 group-hover:opacity-100 transition-opacity visible rounded-full w-4 h-4 text-white bg-neutral-600 p-4 hover:shadow-lg shadow-neutral-600',
81+
'opacity-0 group-hover:opacity-100 transition-opacity visible rounded-full w-[30px] h-fit text-white bg-neutral-600 p-2 hover:shadow-md shadow-neutral-700 hover:bg-neutral-700',
8282
{
83-
'bg-secondary-400 shadow-secondary-400 opacity-100':
83+
'bg-secondary-400 shadow-secondary-400 hover:bg-secondary-400 hover:text-secondary-200 opacity-100':
8484
cell.validated,
8585
hidden: !cell.value,
8686
},
@@ -94,7 +94,7 @@ export const CellActions = component$<{ cell: Cell }>(({ cell }) => {
9494
floating="right"
9595
gutter={12}
9696
>
97-
<LuThumbsUp class="text-lg" />
97+
<LuThumbsUp class="text-sm" />
9898
</Tooltip>
9999
</Button>
100100
</div>

‎src/features/table/components/body/renderer/components/cell/table-blob-renderer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const AudioRenderer = component$<MediaRendererProps>(({ src }) => {
2828

2929
const ImageRenderer = component$<MediaRendererProps>(({ src, path }) => {
3030
return (
31-
<div class="w-full h-[90px] flex flex-col items-center">
31+
<div class="w-full h-full flex flex-col items-center">
3232
<div class="flex items-center justify-center overflow-hidden">
3333
<img
3434
src={src}

‎src/features/table/components/body/renderer/components/cell/table-html-renderer.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,7 @@ export const TableHTMLRenderer = component$<TableProps>(({ cell }) => {
99
return (
1010
<div class="h-full flex flex-col justify-between">
1111
<CellActions cell={cell} />
12-
<div class="w-full h-[90px] flex flex-col items-center">
13-
<div class="flex items-center justify-center overflow-hidden">
14-
<TableSandbox content={content} />
15-
</div>
16-
</div>
12+
<TableSandbox content={content} />
1713
</div>
1814
);
1915
});

‎src/features/table/components/body/renderer/components/cell/table-markdown-renderer.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,7 @@ export const TableMarkDownRenderer = component$<CellProps>((props) => {
6666
return (
6767
<div class="h-full flex flex-col justify-between">
6868
<CellActions cell={cell} />
69-
<div class="w-full h-[90px] flex flex-col items-center">
70-
<div class="flex items-center justify-center overflow-hidden">
71-
<TableSandbox content={htmlContent.value || ''} />
72-
</div>
73-
</div>
69+
<TableSandbox content={htmlContent.value || ''} />
7470
</div>
7571
);
7672
});

‎src/features/table/components/body/renderer/components/table-sandbox.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const TableSandbox = component$<{ content: string }>(({ content }) => {
1313
html {
1414
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
1515
}
16-
body { margin: 0; padding: 0; overflow: hidden; }
16+
body { margin-top: -20px; margin-right: 0; margin-bottom: 0; margin-left: 0; padding: 0; padding: 0; overflow: hidden; }
1717
</style>
1818
</head>
1919
<body>
@@ -34,12 +34,6 @@ export const TableSandbox = component$<{ content: string }>(({ content }) => {
3434
</script>
3535
</body>
3636
</html>`}
37-
style={{
38-
width: '100%',
39-
height: '100%',
40-
border: 'none',
41-
overflow: 'hidden',
42-
}}
4337
/>
4438
);
4539
});

‎src/features/table/table-cell.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,11 @@ export const TableCell = component$<{
4949
});
5050

5151
return (
52-
<div class="min-h-[100px] h-[100px] max-h-[100px] relative flex flex-col overflow-hidden group">
52+
<div class="min-h-[100px] h-[102px] max-h-[102px] relative flex flex-col overflow-hidden group">
5353
<CellSkeleton cell={cell} />
5454
<CellError cell={cell} />
5555

56-
<div class="flex-1 p-2">
56+
<div class="flex-1 px-2 pt-2">
5757
<CellRenderer cell={cell} column={cellColumn.value!} />
5858
</div>
5959
</div>

0 commit comments

Comments
 (0)