mirror of
https://github.com/hex248/sprint.git
synced 2026-02-08 02:33:01 +00:00
Improved "No sprints left", larger font sizes for IssueLine
This commit is contained in:
@@ -10,6 +10,7 @@ import { useSelection } from "@/components/selection-provider";
|
|||||||
import { SprintForm } from "@/components/sprint-form";
|
import { SprintForm } from "@/components/sprint-form";
|
||||||
import StatusTag from "@/components/status-tag";
|
import StatusTag from "@/components/status-tag";
|
||||||
import TopBar from "@/components/top-bar";
|
import TopBar from "@/components/top-bar";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
import { ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
|
import { ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
|
||||||
import { BREATHING_ROOM } from "@/lib/layout";
|
import { BREATHING_ROOM } from "@/lib/layout";
|
||||||
import {
|
import {
|
||||||
@@ -238,13 +239,7 @@ export default function Timeline() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{selectedOrganisationId && selectedProjectId && sprints.length === 0 && (
|
{selectedOrganisationId && selectedProjectId && (
|
||||||
<div className="text-sm text-muted-foreground text-pretty">
|
|
||||||
No sprints yet. Create a sprint from the organisations menu to start planning work.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{selectedOrganisationId && selectedProjectId && sprints.length > 0 && (
|
|
||||||
<div className="border">
|
<div className="border">
|
||||||
<ResizablePanelGroup className="h-full">
|
<ResizablePanelGroup className="h-full">
|
||||||
<ResizablePanel
|
<ResizablePanel
|
||||||
@@ -278,106 +273,121 @@ export default function Timeline() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ResizablePanel>
|
</ResizablePanel>
|
||||||
<ResizablePanel id="timeline-grid">
|
{sprints.length > 0 ? (
|
||||||
<div className="overflow-x-auto" ref={scrollRef}>
|
<ResizablePanel id="timeline-grid">
|
||||||
<div style={{ minWidth: `${weeks.length * WEEK_COLUMN_WIDTH}px` }}>
|
<div className="overflow-x-auto" ref={scrollRef}>
|
||||||
<div
|
<div style={{ minWidth: `${weeks.length * WEEK_COLUMN_WIDTH}px` }}>
|
||||||
className="grid border-b bg-muted/20"
|
|
||||||
style={{ gridTemplateColumns: weekGridTemplateColumns }}
|
|
||||||
>
|
|
||||||
{weeks.map((week, index) => (
|
|
||||||
<div
|
|
||||||
key={week.toISOString()}
|
|
||||||
className={cn(
|
|
||||||
`px-${BREATHING_ROOM} py-${BREATHING_ROOM} text-xs text-muted-foreground tabular-nums`,
|
|
||||||
index === 0 ? "" : "border-l",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{formatWeekLabel(week)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{sprints.map((sprint, sprintIndex) => {
|
|
||||||
const sprintIssues = issueGroup.issuesBySprint.get(sprint.id) ?? [];
|
|
||||||
const barStyle = getSprintBarStyle(sprint);
|
|
||||||
const showTodayLabel = sprintIndex === 0;
|
|
||||||
return (
|
|
||||||
<div key={sprint.id} className="relative border-b">
|
|
||||||
<div
|
|
||||||
className={`px-${BREATHING_ROOM} pt-0.5 py-${BREATHING_ROOM} flex flex-col gap-${BREATHING_ROOM} opacity-0 pointer-events-none`}
|
|
||||||
>
|
|
||||||
<SprintLabelContent
|
|
||||||
sprint={sprint}
|
|
||||||
sprintIssues={sprintIssues}
|
|
||||||
statuses={statuses}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={cn(`absolute inset-0 py-${BREATHING_ROOM}`)}>
|
|
||||||
<div
|
|
||||||
className="absolute inset-0 grid z-10 pointer-events-none"
|
|
||||||
style={{
|
|
||||||
gridTemplateColumns: `repeat(${weeks.length}, ${WEEK_COLUMN_WIDTH}px)`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{weeks.map((week, index) => (
|
|
||||||
<div
|
|
||||||
key={`${week.toISOString()}-${sprint.id}`}
|
|
||||||
className={cn(index === 0 ? "" : "border-l")}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
{todayMarker && (
|
|
||||||
<div
|
|
||||||
className="absolute inset-y-0 z-10 pointer-events-none"
|
|
||||||
style={{ left: `${todayMarker.leftPx}px` }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"absolute inset-y-0 w-px bg-primary",
|
|
||||||
showTodayLabel && "mt-1",
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{showTodayLabel && (
|
|
||||||
<div className="absolute -top-1.5">
|
|
||||||
<span className="bg-primary px-1 py-0.5 text-[10px] font-semibold text-primary-foreground whitespace-nowrap">
|
|
||||||
TODAY
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{barStyle && (
|
|
||||||
<SprintForm
|
|
||||||
mode="edit"
|
|
||||||
existingSprint={sprint}
|
|
||||||
sprints={sprints}
|
|
||||||
trigger={
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
aria-label={`Edit sprint ${sprint.name}`}
|
|
||||||
className="absolute top-1/2 -translate-y-1/2 z-0 h-4 rounded cursor-pointer"
|
|
||||||
style={barStyle}
|
|
||||||
title={`${sprint.name}: ${getSprintDateRange(sprint)}`}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
<div className="relative">
|
|
||||||
<div
|
<div
|
||||||
className={`px-${BREATHING_ROOM} pt-0.5 py-${BREATHING_ROOM} flex flex-col gap-${BREATHING_ROOM} opacity-0 pointer-events-none`}
|
className="grid border-b bg-muted/20"
|
||||||
|
style={{ gridTemplateColumns: weekGridTemplateColumns }}
|
||||||
>
|
>
|
||||||
<BacklogLabelContent issueGroup={issueGroup} statuses={statuses} />
|
{weeks.map((week, index) => (
|
||||||
|
<div
|
||||||
|
key={week.toISOString()}
|
||||||
|
className={cn(
|
||||||
|
`px-${BREATHING_ROOM} py-${BREATHING_ROOM} text-xs text-muted-foreground tabular-nums`,
|
||||||
|
index === 0 ? "" : "border-l",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{formatWeekLabel(week)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{sprints.map((sprint, sprintIndex) => {
|
||||||
|
const sprintIssues = issueGroup.issuesBySprint.get(sprint.id) ?? [];
|
||||||
|
const barStyle = getSprintBarStyle(sprint);
|
||||||
|
const showTodayLabel = sprintIndex === 0;
|
||||||
|
return (
|
||||||
|
<div key={sprint.id} className="relative border-b">
|
||||||
|
<div
|
||||||
|
className={`px-${BREATHING_ROOM} pt-0.5 py-${BREATHING_ROOM} flex flex-col gap-${BREATHING_ROOM} opacity-0 pointer-events-none`}
|
||||||
|
>
|
||||||
|
<SprintLabelContent
|
||||||
|
sprint={sprint}
|
||||||
|
sprintIssues={sprintIssues}
|
||||||
|
statuses={statuses}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={cn(`absolute inset-0 py-${BREATHING_ROOM}`)}>
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 grid z-10 pointer-events-none"
|
||||||
|
style={{
|
||||||
|
gridTemplateColumns: `repeat(${weeks.length}, ${WEEK_COLUMN_WIDTH}px)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{weeks.map((week, index) => (
|
||||||
|
<div
|
||||||
|
key={`${week.toISOString()}-${sprint.id}`}
|
||||||
|
className={cn(index === 0 ? "" : "border-l")}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{todayMarker && (
|
||||||
|
<div
|
||||||
|
className="absolute inset-y-0 z-10 pointer-events-none"
|
||||||
|
style={{ left: `${todayMarker.leftPx}px` }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"absolute inset-y-0 w-px bg-primary",
|
||||||
|
showTodayLabel && "mt-1",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{showTodayLabel && (
|
||||||
|
<div className="absolute -top-1.5">
|
||||||
|
<span className="bg-primary px-1 py-0.5 text-[10px] font-semibold text-primary-foreground whitespace-nowrap">
|
||||||
|
TODAY
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{barStyle && (
|
||||||
|
<SprintForm
|
||||||
|
mode="edit"
|
||||||
|
existingSprint={sprint}
|
||||||
|
sprints={sprints}
|
||||||
|
trigger={
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label={`Edit sprint ${sprint.name}`}
|
||||||
|
className="absolute top-1/2 -translate-y-1/2 z-0 h-4 rounded cursor-pointer"
|
||||||
|
style={barStyle}
|
||||||
|
title={`${sprint.name}: ${getSprintDateRange(sprint)}`}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<div
|
||||||
|
className={`px-${BREATHING_ROOM} pt-0.5 py-${BREATHING_ROOM} flex flex-col gap-${BREATHING_ROOM} opacity-0 pointer-events-none`}
|
||||||
|
>
|
||||||
|
<BacklogLabelContent issueGroup={issueGroup} statuses={statuses} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ResizablePanel>
|
||||||
</ResizablePanel>
|
) : (
|
||||||
|
<ResizablePanel
|
||||||
|
id="timeline-grid"
|
||||||
|
className={"flex flex-col items-center justify-center gap-2"}
|
||||||
|
>
|
||||||
|
No sprints yet...
|
||||||
|
<SprintForm
|
||||||
|
projectId={selectedProjectId}
|
||||||
|
mode="create"
|
||||||
|
sprints={sprints}
|
||||||
|
trigger={<Button variant={"outline"}>Create a sprint</Button>}
|
||||||
|
/>
|
||||||
|
</ResizablePanel>
|
||||||
|
)}
|
||||||
</ResizablePanelGroup>
|
</ResizablePanelGroup>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -399,7 +409,7 @@ function SprintLabelContent({
|
|||||||
<>
|
<>
|
||||||
<div className="flex items-center justify-between gap-3">
|
<div className="flex items-center justify-between gap-3">
|
||||||
<span
|
<span
|
||||||
className="text-sm font-medium"
|
className="text-md font-medium"
|
||||||
style={{
|
style={{
|
||||||
color: sprint.color || DEFAULT_SPRINT_COLOUR,
|
color: sprint.color || DEFAULT_SPRINT_COLOUR,
|
||||||
}}
|
}}
|
||||||
@@ -435,7 +445,7 @@ function BacklogLabelContent({
|
|||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="text-sm font-medium">Backlog</div>
|
<div className="text-md font-medium">Backlog</div>
|
||||||
{issueGroup.unassigned.length === 0 && (
|
{issueGroup.unassigned.length === 0 && (
|
||||||
<div className="text-xs text-muted-foreground text-pretty">No unassigned issues.</div>
|
<div className="text-xs text-muted-foreground text-pretty">No unassigned issues.</div>
|
||||||
)}
|
)}
|
||||||
@@ -466,12 +476,12 @@ function IssueLine({ issue, statusColour }: { issue: IssueResponse; statusColour
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={cn(
|
className={cn(
|
||||||
`flex items-center gap-${BREATHING_ROOM} text-xs text-muted-foreground`,
|
`flex items-center gap-${BREATHING_ROOM} text-sm text-muted-foreground`,
|
||||||
"hover:text-foreground cursor-pointer",
|
"hover:text-foreground cursor-pointer",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<span className="tabular-nums">{issue.Issue.number.toString().padStart(3, "0")}</span>
|
<span className="tabular-nums">{issue.Issue.number.toString().padStart(3, "0")}</span>
|
||||||
<StatusTag status={issue.Issue.status} colour={statusColour} className="text-[10px]" />
|
<StatusTag status={issue.Issue.status} colour={statusColour} className="text-[10.5px] font-600" />
|
||||||
<span className="truncate">{issue.Issue.title}</span>
|
<span className="truncate">{issue.Issue.title}</span>
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user