Robotail/Corp
Robotail/Corp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve task link pill priority display

Browse Source
This commit is contained in:
lizerk 2026-08-19 17:01:43 +03:00
parent 63378d6480
commit f6904ca2dd
1 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/tasks/TaskLinkPill.tsx
View File

@ -41,6 +41,13 @@ const priorityLabels: Record<TaskPriority, string> = {
critical: "Критический",
};
const priorityTitleShiftClasses: Record<TaskPriority, string> = {
low: "group-hover/task-pill:translate-x-10 group-focus-visible/task-pill:translate-x-10",
medium: "group-hover/task-pill:translate-x-12 group-focus-visible/task-pill:translate-x-12",
high: "group-hover/task-pill:translate-x-12 group-focus-visible/task-pill:translate-x-12",
critical: "group-hover/task-pill:translate-x-16 group-focus-visible/task-pill:translate-x-16",
};
function normalizeHexColor(value?: string | null): string {
const color = String(value || "").trim();
if (/^#[0-9a-f]{6}$/i.test(color)) return color;
@ -77,11 +84,10 @@ export default function TaskLinkPill({
const priority = task.priority || "medium";
const priorityColor = priorityColors[priority];
const priorityLabel = task.priority_display || priorityLabels[priority];
const priorityTitleShiftClass = priorityTitleShiftClasses[priority];
const textColor = getReadableTextColor(columnColor);
const isOnAccent = tone === "onAccent";
const title = `${task.board_name ? `${task.board_name}: ` : ""}${task.title}${
task.priority_display ? `, ${task.priority_display}` : ""
}`;
const title = `${task.board_name ? `${task.board_name}: ` : ""}${task.title}, ${priorityLabel}`;
const style: CSSProperties = {
backgroundColor: columnColor,
boxShadow: isOnAccent ? "inset 0 1px 0 rgba(255, 255, 255, 0.18)" : undefined,
@ -89,26 +95,29 @@ export default function TaskLinkPill({
};
const href = `/tasks?board=${task.board_id}&task=${task.id}`;
const canOpen = task.can_open !== false;
const pillClassName = `group/task-pill inline-flex max-w-full items-center gap-1.5 rounded-full px-2 py-1 text-[11px] font-medium shadow-sm transition ${
const pillClassName = `group/task-pill inline-flex min-w-0 max-w-full items-center gap-1.5 overflow-hidden rounded-full px-2 py-1 text-[11px] font-medium shadow-sm transition ${
canOpen
? "hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/45"
: "cursor-pointer hover:brightness-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/45"
} ${className}`;
const content = (
<>
<span
className="inline-flex h-2.5 min-w-2.5 max-w-2.5 shrink-0 items-center justify-center overflow-hidden rounded-full border transition-[height,max-width,padding] duration-200 ease-out group-hover/task-pill:h-4 group-hover/task-pill:max-w-24 group-hover/task-pill:px-1.5 group-focus-visible/task-pill:h-4 group-focus-visible/task-pill:max-w-24 group-focus-visible/task-pill:px-1.5"
style={{
backgroundColor: priorityColor,
borderColor: textColor,
}}
aria-hidden="true"
>
<span className="max-w-0 whitespace-nowrap text-[9px] font-semibold leading-none text-white opacity-0 transition-[max-width,opacity] duration-200 ease-out group-hover/task-pill:max-w-20 group-hover/task-pill:opacity-100 group-focus-visible/task-pill:max-w-20 group-focus-visible/task-pill:opacity-100">
{priorityLabel}
<span className="relative h-4 w-2.5 shrink-0" aria-hidden="true">
<span
className="absolute left-0 top-1/2 z-10 inline-flex h-2.5 min-w-2.5 max-w-2.5 -translate-y-1/2 items-center justify-center overflow-hidden rounded-full border transition-[height,max-width,padding] duration-200 ease-out group-hover/task-pill:h-4 group-hover/task-pill:max-w-24 group-hover/task-pill:px-1.5 group-focus-visible/task-pill:h-4 group-focus-visible/task-pill:max-w-24 group-focus-visible/task-pill:px-1.5"
style={{
backgroundColor: priorityColor,
borderColor: textColor,
}}
>
<span className="max-w-0 whitespace-nowrap text-[9px] font-semibold leading-none text-white opacity-0 transition-[max-width,opacity] duration-200 ease-out group-hover/task-pill:max-w-20 group-hover/task-pill:opacity-100 group-focus-visible/task-pill:max-w-20 group-focus-visible/task-pill:opacity-100">
{priorityLabel}
</span>
</span>
</span>
<span className={`${maxTitleClassName} truncate`}>{task.title}</span>
<span className={`${maxTitleClassName} min-w-0 truncate transition-transform duration-200 ease-out ${priorityTitleShiftClass}`}>
{task.title}
</span>
</>
);