calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-06-11 18:09:05 +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 { LabelOverflowBadge } from "./label-overflow-badge";
import { LABEL_COLORS } from "./labels-selector"; import { LABEL_COLORS } from "./labels-selector";
const MAX_VISIBLE_SUMMARY_LABELS = 3;
function areSelectionsEqual(a: string[], b: string[]) { function areSelectionsEqual(a: string[], b: string[]) {
if (a.length !== b.length) { if (a.length !== b.length) {
return false; return false;
@@ -85,28 +83,24 @@ export function LabelColumnFilterButton({
return null; return null;
} }
const visibleLabels = selectedLabels.slice(0, MAX_VISIBLE_SUMMARY_LABELS); if (selectedLabels.length === 1) {
const overflowLabels = selectedLabels.slice(MAX_VISIBLE_SUMMARY_LABELS); const label = selectedLabels[0];
return (
<LabelBadge
displayOnly
name={label.name}
color={label.color}
className="shrink-0"
/>
);
}
return ( return (
<div className="flex min-w-0 flex-nowrap items-center gap-1"> <LabelOverflowBadge
{visibleLabels.map((label) => ( labels={selectedLabels}
<LabelBadge displayOnly
key={label.name} className="shrink-0"
displayOnly />
name={label.name}
color={label.color}
className="shrink-0"
/>
))}
{overflowLabels.length > 0 && (
<LabelOverflowBadge
labels={overflowLabels}
displayOnly
className="shrink-0"
/>
)}
</div>
); );
}, [selectedLabels]); }, [selectedLabels]);

23
src/components/TableLabelsCell.tsx
View File

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