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>
|
<Thead>
|
||||||
<Tr>
|
<Tr>
|
||||||
<Th>{__("Type")}</Th>
|
|
||||||
<SortableTh field="NAME">{__("Name")}</SortableTh>
|
<SortableTh field="NAME">{__("Name")}</SortableTh>
|
||||||
<Th>{__("Third party")}</Th>
|
<Th>{__("Third party")}</Th>
|
||||||
<SortableTh field="SOURCE">{__("Source")}</SortableTh>
|
<SortableTh field="SOURCE">{__("Source")}</SortableTh>
|
||||||
|
|||||||
@@ -25,12 +25,14 @@ import { moveToCategoryDropdownQuery } from "./MoveToCategoryDropdown";
|
|||||||
interface MoveToCategorySelectProps {
|
interface MoveToCategorySelectProps {
|
||||||
currentCategoryId?: string;
|
currentCategoryId?: string;
|
||||||
currentCategoryName?: string;
|
currentCategoryName?: string;
|
||||||
|
highlight?: boolean;
|
||||||
onSelect: (categoryId: string) => void;
|
onSelect: (categoryId: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function MoveToCategorySelect({
|
export function MoveToCategorySelect({
|
||||||
currentCategoryId,
|
currentCategoryId,
|
||||||
currentCategoryName,
|
currentCategoryName,
|
||||||
|
highlight = false,
|
||||||
onSelect,
|
onSelect,
|
||||||
}: MoveToCategorySelectProps) {
|
}: MoveToCategorySelectProps) {
|
||||||
const { cookieBannerId } = useParams<{ cookieBannerId: string }>();
|
const { cookieBannerId } = useParams<{ cookieBannerId: string }>();
|
||||||
@@ -57,7 +59,8 @@ export function MoveToCategorySelect({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Select
|
<Select
|
||||||
variant="ghost"
|
variant={highlight ? "editor" : "ghost"}
|
||||||
|
className={highlight ? undefined : "px-0"}
|
||||||
placeholder={currentCategoryName ?? <span className="text-txt-tertiary">-</span>}
|
placeholder={currentCategoryName ?? <span className="text-txt-tertiary">-</span>}
|
||||||
onValueChange={handleValueChange}
|
onValueChange={handleValueChange}
|
||||||
onOpenChange={handleOpenChange}
|
onOpenChange={handleOpenChange}
|
||||||
|
|||||||
@@ -340,12 +340,19 @@ export function TrackerPatternRow({ patternKey, connectionId }: TrackerPatternRo
|
|||||||
const srcBadge = pattern.source ? getTrackerSourceBadge(pattern.source, __) : null;
|
const srcBadge = pattern.source ? getTrackerSourceBadge(pattern.source, __) : null;
|
||||||
|
|
||||||
return (
|
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>
|
<Td>
|
||||||
|
<div className="flex flex-col items-start min-w-0 max-w-xs gap-1">
|
||||||
<Badge variant={typeBadge.variant}>{typeBadge.label}</Badge>
|
<Badge variant={typeBadge.variant}>{typeBadge.label}</Badge>
|
||||||
</Td>
|
|
||||||
<Td>
|
|
||||||
<div className="flex flex-col min-w-0 max-w-xs gap-1">
|
|
||||||
<span className={pattern.excluded ? undefined : "font-medium"}>{pattern.displayName}</span>
|
<span className={pattern.excluded ? undefined : "font-medium"}>{pattern.displayName}</span>
|
||||||
{pattern.description && (
|
{pattern.description && (
|
||||||
<span className="text-xs text-txt-tertiary wrap-break-word line-clamp-1">
|
<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>}
|
: <span className="text-txt-tertiary">-</span>}
|
||||||
</Td>
|
</Td>
|
||||||
<Td noLink>
|
<Td noLink>
|
||||||
|
<div className="pr-2 flex justify-start">
|
||||||
<MoveToCategorySelect
|
<MoveToCategorySelect
|
||||||
currentCategoryId={pattern.cookieCategory?.id}
|
currentCategoryId={pattern.cookieCategory?.id}
|
||||||
currentCategoryName={pattern.cookieCategory?.name}
|
currentCategoryName={pattern.cookieCategory?.name}
|
||||||
|
highlight={!!pattern.cookieCategory && pattern.cookieCategory.kind !== "UNCATEGORISED"}
|
||||||
onSelect={handleMove}
|
onSelect={handleMove}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</Td>
|
</Td>
|
||||||
<Td>
|
<Td>
|
||||||
<span>{humanizeSeconds(pattern.maxAgeSeconds ?? null)}</span>
|
<span className="pl-2">{humanizeSeconds(pattern.maxAgeSeconds ?? null)}</span>
|
||||||
</Td>
|
</Td>
|
||||||
<Td>
|
<Td>
|
||||||
{pattern.lastMatchedAt
|
{pattern.lastMatchedAt
|
||||||
|
|||||||
@@ -58,7 +58,7 @@ export function TrackerPatternRowEdit({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Tr>
|
<Tr>
|
||||||
<Td colSpan={8}>
|
<Td colSpan={7}>
|
||||||
<div className="flex flex-col gap-3">
|
<div className="flex flex-col gap-3">
|
||||||
<span className="font-medium wrap-break-word">{pattern}</span>
|
<span className="font-medium wrap-break-word">{pattern}</span>
|
||||||
<div className="flex items-end gap-2">
|
<div className="flex items-end gap-2">
|
||||||
|
|||||||
Reference in New Issue
Block a user