fix(graph): swap task pill layout — subject large on top, ID small below
This commit is contained in:
parent
3be815ecbb
commit
7804e86979
1 changed files with 14 additions and 12 deletions
|
|
@ -139,23 +139,25 @@ function drawTaskPill(
|
||||||
);
|
);
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
|
|
||||||
// Display ID
|
// Subject (main title — large)
|
||||||
const displayId = node.displayId ?? node.label;
|
|
||||||
ctx.font = `bold ${TASK_PILL.idFontSize}px monospace`;
|
|
||||||
ctx.textAlign = 'left';
|
|
||||||
ctx.textBaseline = 'middle';
|
|
||||||
ctx.fillStyle = isFinished ? COLORS.textDim : COLORS.textPrimary;
|
|
||||||
ctx.fillText(displayId, -halfW + TASK_PILL.textOffsetX, -4);
|
|
||||||
|
|
||||||
// Subject text
|
|
||||||
if (node.sublabel) {
|
if (node.sublabel) {
|
||||||
ctx.font = `${TASK_PILL.subjectFontSize}px sans-serif`;
|
ctx.font = `bold ${TASK_PILL.idFontSize}px sans-serif`;
|
||||||
ctx.fillStyle = isFinished ? COLORS.textMuted : COLORS.textDim;
|
ctx.textAlign = 'left';
|
||||||
|
ctx.textBaseline = 'middle';
|
||||||
|
ctx.fillStyle = isFinished ? COLORS.textDim : COLORS.textPrimary;
|
||||||
const maxW = w - TASK_PILL.textOffsetX - 8;
|
const maxW = w - TASK_PILL.textOffsetX - 8;
|
||||||
const subject = truncateText(ctx, node.sublabel, maxW, ctx.font);
|
const subject = truncateText(ctx, node.sublabel, maxW, ctx.font);
|
||||||
ctx.fillText(subject, -halfW + TASK_PILL.textOffsetX, 8);
|
ctx.fillText(subject, -halfW + TASK_PILL.textOffsetX, -4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Display ID (secondary — small)
|
||||||
|
const displayId = node.displayId ?? node.label;
|
||||||
|
ctx.font = `${TASK_PILL.subjectFontSize}px monospace`;
|
||||||
|
ctx.textAlign = 'left';
|
||||||
|
ctx.textBaseline = 'middle';
|
||||||
|
ctx.fillStyle = isFinished ? COLORS.textMuted : COLORS.textDim;
|
||||||
|
ctx.fillText(displayId, -halfW + TASK_PILL.textOffsetX, 8);
|
||||||
|
|
||||||
// Approved badge: checkmark at right side
|
// Approved badge: checkmark at right side
|
||||||
if (node.reviewState === 'approved') {
|
if (node.reviewState === 'approved') {
|
||||||
ctx.font = 'bold 11px sans-serif';
|
ctx.font = 'bold 11px sans-serif';
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue