pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-31 12:39:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

adjust label overflow

Browse Source
This commit is contained in:
miloschwartz
2026-05-26 23:59:49 -07:00
parent 0b6a3234a5
commit e2441ce284
2 changed files with 32 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/LabelColumnFilterButton.tsx
View File

@@ -26,8 +26,6 @@ import { LabelBadge } from "./label-badge";
import { LabelOverflowBadge } from "./label-overflow-badge";
import { LABEL_COLORS } from "./labels-selector";
const MAX_VISIBLE_SUMMARY_LABELS = 3;
function areSelectionsEqual(a: string[], b: string[]) {
if (a.length !== b.length) {
return false;
@@ -85,28 +83,24 @@ export function LabelColumnFilterButton({
return null;
}
const visibleLabels = selectedLabels.slice(0, MAX_VISIBLE_SUMMARY_LABELS);
const overflowLabels = selectedLabels.slice(MAX_VISIBLE_SUMMARY_LABELS);
if (selectedLabels.length === 1) {
const label = selectedLabels[0];
return (
<LabelBadge
displayOnly
name={label.name}
color={label.color}
className="shrink-0"
/>
);
}
return (
<div className="flex min-w-0 flex-nowrap items-center gap-1">
{visibleLabels.map((label) => (
<LabelBadge
key={label.name}
displayOnly
name={label.name}
color={label.color}
className="shrink-0"
/>
))}
{overflowLabels.length > 0 && (
<LabelOverflowBadge
labels={overflowLabels}
displayOnly
className="shrink-0"
/>
)}
</div>
<LabelOverflowBadge
labels={selectedLabels}
displayOnly
className="shrink-0"
/>
);
}, [selectedLabels]);

23
src/components/TableLabelsCell.tsx
View File

@@ -16,7 +16,8 @@ import {
PopoverTrigger
} from "./ui/popover";
const MAX_VISIBLE_LABELS = 3;
const MAX_VISIBLE_LABELS = 4;
const MAX_VISIBLE_BEFORE_OVERFLOW = MAX_VISIBLE_LABELS - 1;
type TableLabelsCellProps = {
orgId: string;
@@ -36,8 +37,14 @@ export function TableLabelsCell({
getBoundingClientRect: () => new DOMRect()
});
const visibleLabels = localLabels.slice(0, MAX_VISIBLE_LABELS);
const overflowLabels = localLabels.slice(MAX_VISIBLE_LABELS);
const hasOverflow = localLabels.length > MAX_VISIBLE_LABELS;
const visibleLabels = localLabels.slice(
0,
hasOverflow ? MAX_VISIBLE_BEFORE_OVERFLOW : MAX_VISIBLE_LABELS
);
const overflowLabels = hasOverflow
? localLabels.slice(MAX_VISIBLE_BEFORE_OVERFLOW)
: [];
function handleOpenChange(open: boolean) {
if (open && triggerRef.current) {
@@ -88,10 +95,12 @@ export function TableLabelsCell({
{...label}
/>
))}
<LabelOverflowBadge
labels={overflowLabels}
onClick={() => handleOpenChange(true)}
/>
{overflowLabels.length > 0 && (
<LabelOverflowBadge
labels={overflowLabels}
onClick={() => handleOpenChange(true)}
/>
)}
</div>
</div>
);