Restyle tracker row and category select
Stack the tracker type badge above the pattern name and drop the separate Type column so the now-wider row reads more compactly; the edit row spans the reduced column count. Tint script-sourced rows light blue (excluded styling still wins when both apply). Make the move-to-category select stand out when the tracker sits in a real category by switching it to the highlighted pill variant, and align its ghost-variant padding so the label does not shift horizontally between categorised and uncategorised rows. Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
@@ -267,7 +267,6 @@ export default function CookieBannerTrackersPage({
|
||||
>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>{__("Type")}</Th>
|
||||
<SortableTh field="NAME">{__("Name")}</SortableTh>
|
||||
<Th>{__("Third party")}</Th>
|
||||
<SortableTh field="SOURCE">{__("Source")}</SortableTh>
|
||||
|
||||
@@ -25,12 +25,14 @@ import { moveToCategoryDropdownQuery } from "./MoveToCategoryDropdown";
|
||||
interface MoveToCategorySelectProps {
|
||||
currentCategoryId?: string;
|
||||
currentCategoryName?: string;
|
||||
highlight?: boolean;
|
||||
onSelect: (categoryId: string) => void;
|
||||
}
|
||||
|
||||
export function MoveToCategorySelect({
|
||||
currentCategoryId,
|
||||
currentCategoryName,
|
||||
highlight = false,
|
||||
onSelect,
|
||||
}: MoveToCategorySelectProps) {
|
||||
const { cookieBannerId } = useParams<{ cookieBannerId: string }>();
|
||||
@@ -57,7 +59,8 @@ export function MoveToCategorySelect({
|
||||
|
||||
return (
|
||||
<Select
|
||||
variant="ghost"
|
||||
variant={highlight ? "editor" : "ghost"}
|
||||
className={highlight ? undefined : "px-0"}
|
||||
placeholder={currentCategoryName ?? <span className="text-txt-tertiary">-</span>}
|
||||
onValueChange={handleValueChange}
|
||||
onOpenChange={handleOpenChange}
|
||||
|
||||
@@ -340,12 +340,19 @@ export function TrackerPatternRow({ patternKey, connectionId }: TrackerPatternRo
|
||||
const srcBadge = pattern.source ? getTrackerSourceBadge(pattern.source, __) : null;
|
||||
|
||||
return (
|
||||
<Tr to={pattern.id} className={pattern.excluded ? "bg-txt-quaternary opacity-80 line-through" : undefined}>
|
||||
<Tr
|
||||
to={pattern.id}
|
||||
className={
|
||||
pattern.excluded
|
||||
? "bg-txt-quaternary/70 line-through"
|
||||
: pattern.source === "SCRIPT"
|
||||
? undefined
|
||||
: "bg-txt-quaternary/25"
|
||||
}
|
||||
>
|
||||
<Td>
|
||||
<Badge variant={typeBadge.variant}>{typeBadge.label}</Badge>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex flex-col min-w-0 max-w-xs gap-1">
|
||||
<div className="flex flex-col items-start min-w-0 max-w-xs gap-1">
|
||||
<Badge variant={typeBadge.variant}>{typeBadge.label}</Badge>
|
||||
<span className={pattern.excluded ? undefined : "font-medium"}>{pattern.displayName}</span>
|
||||
{pattern.description && (
|
||||
<span className="text-xs text-txt-tertiary wrap-break-word line-clamp-1">
|
||||
@@ -374,14 +381,17 @@ export function TrackerPatternRow({ patternKey, connectionId }: TrackerPatternRo
|
||||
: <span className="text-txt-tertiary">-</span>}
|
||||
</Td>
|
||||
<Td noLink>
|
||||
<MoveToCategorySelect
|
||||
currentCategoryId={pattern.cookieCategory?.id}
|
||||
currentCategoryName={pattern.cookieCategory?.name}
|
||||
onSelect={handleMove}
|
||||
/>
|
||||
<div className="pr-2 flex justify-start">
|
||||
<MoveToCategorySelect
|
||||
currentCategoryId={pattern.cookieCategory?.id}
|
||||
currentCategoryName={pattern.cookieCategory?.name}
|
||||
highlight={!!pattern.cookieCategory && pattern.cookieCategory.kind !== "UNCATEGORISED"}
|
||||
onSelect={handleMove}
|
||||
/>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<span>{humanizeSeconds(pattern.maxAgeSeconds ?? null)}</span>
|
||||
<span className="pl-2">{humanizeSeconds(pattern.maxAgeSeconds ?? null)}</span>
|
||||
</Td>
|
||||
<Td>
|
||||
{pattern.lastMatchedAt
|
||||
|
||||
@@ -58,7 +58,7 @@ export function TrackerPatternRowEdit({
|
||||
|
||||
return (
|
||||
<Tr>
|
||||
<Td colSpan={8}>
|
||||
<Td colSpan={7}>
|
||||
<div className="flex flex-col gap-3">
|
||||
<span className="font-medium wrap-break-word">{pattern}</span>
|
||||
<div className="flex items-end gap-2">
|
||||
|
||||
Reference in New Issue
Block a user