Skip to content

Commit b93664b

Browse files
Update project cards style and layout (#5098)
Co-authored-by: Jan Keromnes <[email protected]>
1 parent 873208d commit b93664b

File tree

1 file changed

+55
-21
lines changed

1 file changed

+55
-21
lines changed

components/dashboard/src/projects/Projects.tsx

Lines changed: 55 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,13 @@ import { useContext, useEffect, useState } from "react";
1414
import { getGitpodService } from "../service/service";
1515
import { getCurrentTeam, TeamsContext } from "../teams/teams-context";
1616
import { ThemeContext } from "../theme-context";
17-
import { PrebuildInfo, Project } from "@gitpod/gitpod-protocol";
17+
import { PrebuildInfo, PrebuiltWorkspaceState, Project } from "@gitpod/gitpod-protocol";
1818
import { toRemoteURL } from "./render-utils";
1919
import ContextMenu from "../components/ContextMenu";
20+
import StatusDone from "../icons/StatusDone.svg";
21+
import StatusPaused from "../icons/StatusPaused.svg";
22+
import StatusRunning from "../icons/StatusRunning.svg";
23+
import StatusFailed from "../icons/StatusFailed.svg";
2024

2125
export default function () {
2226
const location = useLocation();
@@ -60,10 +64,6 @@ export default function () {
6064
history.push(newProjectUrl);
6165
}
6266

63-
const viewAllPrebuilds = (p: Project) => {
64-
history.push(`/${!!team ? team.slug : 'projects'}/${p.name}/prebuilds`);
65-
}
66-
6767
const onRemoveProject = async (p: Project) => {
6868
await getGitpodService().server.deleteProject(p.id);
6969
await updateProjects();
@@ -76,6 +76,23 @@ export default function () {
7676
return true;
7777
}
7878

79+
const teamOrUserSlug = !!team ? team.slug : 'projects';
80+
81+
const getPrebuildStatusIcon = (status: PrebuiltWorkspaceState) => {
82+
switch (status) {
83+
case undefined: // Fall through
84+
case "queued":
85+
return StatusPaused;
86+
case "building":
87+
return StatusRunning;
88+
case "aborted": // Fall through
89+
case "timeout":
90+
return StatusFailed;
91+
case "available":
92+
return StatusDone;
93+
}
94+
}
95+
7996
return <>
8097
<Header title="Projects" subtitle="Manage recently added projects." />
8198
{projects.length < 1 && (
@@ -106,10 +123,10 @@ export default function () {
106123
<button className="ml-2" onClick={() => onNewProject()}>New Project</button>
107124
</div>
108125
<div className="mt-4 grid grid-cols-3 gap-4">
109-
{projects.filter(filter).map(p => (<div key={`project-${p.id}`} className="h-48">
110-
<div className="h-5/6 border border-gray-200 dark:border-gray-800 rounded-t-xl">
111-
<div className="h-3/4 p-6">
112-
<div className="flex self-center text-base text-gray-900 dark:text-gray-50 font-medium">
126+
{projects.filter(filter).map(p => (<div key={`project-${p.id}`} className="h-52">
127+
<div className="h-42 border border-gray-100 dark:border-gray-800 rounded-t-xl">
128+
<div className="h-32 p-6">
129+
<div className="flex text-xl font-semibold text-gray-700 dark:text-gray-200 font-medium">
113130
<Link to={`/${!!team ? team.slug : 'projects'}/${p.name}`}>
114131
{p.name}
115132
</Link>
@@ -122,19 +139,36 @@ export default function () {
122139
}]} />
123140
</div>
124141
</div>
125-
<p>{toRemoteURL(p.cloneUrl)}</p>
142+
<a href={p.cloneUrl.replace(/\.git$/, '')}>
143+
<p className="hover:text-gray-600 dark:hover:text-gray-400 dark:text-gray-500">{toRemoteURL(p.cloneUrl)}</p>
144+
</a>
145+
</div>
146+
<div className="h-10 px-6 py-1 text-gray-400 text-sm">
147+
<span className="hover:text-gray-600 dark:hover:text-gray-300">
148+
<Link to={`/${teamOrUserSlug}/${p.name}`}>
149+
Branches
150+
</Link>
151+
</span>
152+
<span className="mx-2 my-auto">·</span>
153+
<span className="hover:text-gray-600 dark:hover:text-gray-300">
154+
<Link to={`/${teamOrUserSlug}/${p.name}/prebuilds`}>
155+
Prebuilds
156+
</Link>
157+
</span>
126158
</div>
127-
<div className="h-1/4 px-6 py-1"><p>__ Active Branches</p></div>
128159
</div>
129-
<div className="h-1/6 px-6 border rounded-b-xl dark:border-gray-800 bg-gray-200 cursor-pointer" onClick={() => viewAllPrebuilds(p)}>
160+
<div className="h-10 px-4 border rounded-b-xl dark:border-gray-800 bg-gray-100 border-gray-100 dark:bg-gray-800">
130161
{lastPrebuilds.get(p.id)
131-
? (<div className="flex flex-row space-x-3 h-full text-sm">
132-
<div className={"my-auto rounded-full w-3 h-3 text-sm align-middle " + (true ? "bg-green-500" : "bg-gray-400")}>
133-
&nbsp;
134-
</div>
135-
<div className="my-auto">{lastPrebuilds.get(p.id)!.branch}</div>
136-
<div className="my-auto text-gray-400">{moment(lastPrebuilds.get(p.id)!.startedAt, "YYYYMMDD").fromNow()}</div>
137-
<div className="my-auto text-gray-400 flex-grow text-right">View All ⟶</div>
162+
? (<div className="flex flex-row h-full text-sm justify-between">
163+
<Link to={`/${teamOrUserSlug}/${p.name}/${lastPrebuilds.get(p.id)!.id}`} className="flex my-auto group space-x-2">
164+
<img className="h-4 w-4 my-auto" src={getPrebuildStatusIcon(lastPrebuilds.get(p.id)!.status)} />
165+
<div className="my-auto font-semibold text-gray-500 dark:text-gray-400 truncate w-24" title={lastPrebuilds.get(p.id)!.branch}>{lastPrebuilds.get(p.id)!.branch}</div>
166+
<span className="mx-1 my-auto text-gray-400 dark:text-gray-600">·</span>
167+
<div className="my-auto text-gray-400 dark:text-gray-500 flex-grow hover:text-gray-800 dark:hover:text-gray-300">{moment(lastPrebuilds.get(p.id)!.startedAt, "YYYYMMDD").fromNow()}</div>
168+
</Link>
169+
<Link to={`/${teamOrUserSlug}/${p.name}/prebuilds`} className="my-auto group">
170+
<div className="flex my-auto text-gray-400 flex-grow text-right group-hover:text-gray-600 dark:hover:text-gray-300">View All &rarr;</div>
171+
</Link>
138172
</div>)
139173
: (<div className="flex h-full text-md">
140174
<p className="my-auto ">No recent prebuilds</p>
@@ -143,10 +177,10 @@ export default function () {
143177
</div>))}
144178
{!searchFilter && (
145179
<div key="new-project"
146-
className="h-48 border-dashed border-2 border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl focus:bg-gitpod-kumquat-light transition ease-in-out group">
180+
className="h-52 border-dashed border-2 border-gray-100 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl focus:bg-gitpod-kumquat-light transition ease-in-out group">
147181
<Link to={newProjectUrl}>
148182
<div className="flex h-full">
149-
<div className="m-auto">New Project</div>
183+
<div className="m-auto text-gray-400 dark:text-gray-600">New Project</div>
150184
</div>
151185
</Link>
152186
</div>

0 commit comments

Comments
 (0)