Skip to content

Commit a4d9353

Browse files
gtsiolisgtsiolis
committed
Update dashboard navigation
1 parent 5ad43cf commit a4d9353

File tree

3 files changed

+72
-56
lines changed

3 files changed

+72
-56
lines changed

‎components/dashboard/src/Menu.tsx

Lines changed: 68 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@ import { useLocation, useRouteMatch } from "react-router";
1111
import { Location } from "history";
1212
import { countries } from "countries-list";
1313
import gitpodIcon from "./icons/gitpod.svg";
14-
import CaretDown from "./icons/CaretDown.svg";
15-
import CaretUpDown from "./icons/CaretUpDown.svg";
1614
import { getGitpodService, gitpodHostUrl } from "./service/service";
1715
import { UserContext } from "./user-context";
1816
import { TeamsContext, getCurrentTeam } from "./teams/teams-context";
@@ -108,6 +106,8 @@ export default function Menu() {
108106

109107
// Hide most of the top menu when in a full-page form.
110108
const isMinimalUI = ["/new", "/teams/new", "/open"].includes(location.pathname);
109+
const isWorkspacesUI = ["/workspaces"].includes(location.pathname);
110+
const isAdminUI = window.location.pathname.startsWith("/admin");
111111

112112
const [teamMembers, setTeamMembers] = useState<Record<string, TeamMemberInfo[]>>({});
113113
useEffect(() => {
@@ -228,11 +228,6 @@ export default function Menu() {
228228
}
229229
// User menu
230230
return [
231-
{
232-
title: "Workspaces",
233-
link: "/workspaces",
234-
alternatives: ["/"],
235-
},
236231
{
237232
title: "Projects",
238233
link: "/projects",
@@ -255,8 +250,9 @@ export default function Menu() {
255250
]
256251
: []),
257252
{
258-
title: "Docs",
259-
link: "https://www.gitpod.io/docs/",
253+
title: "Workspaces",
254+
link: "/workspaces",
255+
alternatives: ["/"],
260256
},
261257
];
262258

@@ -269,24 +265,29 @@ export default function Menu() {
269265
};
270266
const renderTeamMenu = () => {
271267
return (
272-
<div className="flex p-1 pl-3 ">
268+
<div className="flex p-1 pl-3">
273269
{projectSlug && (
274-
<div className="flex h-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 px-2 py-1">
275-
<Link to={team ? `/t/${team.slug}/projects` : `/projects`}>
276-
<span className="text-base text-gray-600 dark:text-gray-400 font-semibold">
277-
{team?.name || userFullName}
278-
</span>
279-
</Link>
280-
</div>
270+
<Link to={team ? `/t/${team.slug}/projects` : `/projects`}>
271+
<span className="flex h-full text-base text-gray-500 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 font-semibold pl-3 pr-2 py-1 bg-gray-50 hover:bg-gray-100 rounded-tl-2xl rounded-bl-2xl border-gray-100 dark:border-gray-700 border-r">
272+
{team?.name || userFullName}
273+
</span>
274+
</Link>
281275
)}
282-
<div className="flex h-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
276+
{!projectSlug && (
277+
<Link to={team ? `/t/${team.slug}/projects` : `/projects`}>
278+
<span className="flex h-full text-base text-gray-500 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 font-semibold pl-3 pr-2 py-1 bg-gray-50 hover:bg-gray-100 rounded-tl-2xl rounded-bl-2xl border-gray-100 dark:border-gray-700 border-r">
279+
{team?.name || userFullName}
280+
</span>
281+
</Link>
282+
)}
283+
<div className="flex h-full rounded-tr-2xl rounded-br-2xl bg-gray-50 hover:bg-gray-100 px-1 dark:bg-gray-800 dark:hover:bg-gray-700">
283284
<ContextMenu
284285
customClasses="w-64 left-0"
285286
menuEntries={[
286287
{
287288
title: userFullName,
288289
customContent: (
289-
<div className="w-full text-gray-400 flex flex-col">
290+
<div className="w-full text-gray-500 flex flex-col">
290291
<span className="text-gray-800 dark:text-gray-100 text-base font-semibold">
291292
{userFullName}
292293
</span>
@@ -295,7 +296,7 @@ export default function Menu() {
295296
),
296297
active: !team,
297298
separator: true,
298-
link: "/",
299+
link: "/projects",
299300
},
300301
...(teams || [])
301302
.map((t) => ({
@@ -343,35 +344,50 @@ export default function Menu() {
343344
},
344345
]}
345346
>
346-
<div className="flex h-full px-2 py-1 space-x-3.5">
347-
{!projectSlug && (
348-
<span className="text-base text-gray-600 dark:text-gray-400 font-semibold">
349-
{team?.name || userFullName}
350-
</span>
351-
)}
352-
<img
353-
alt=""
354-
aria-label="Toggle team selection menu"
355-
className="filter-grayscale"
356-
style={{ marginTop: 5, marginBottom: 5 }}
357-
src={CaretUpDown}
358-
/>
347+
<div className="flex h-full pl-0 pr-1 py-1.5 text-gray-50">
348+
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
349+
<path
350+
fill-rule="evenodd"
351+
clip-rule="evenodd"
352+
d="M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z"
353+
fill="#78716C"
354+
/>
355+
<title>Toggle team selection menu</title>
356+
</svg>
359357
</div>
360358
</ContextMenu>
361359
</div>
362-
{projectSlug && (
363-
<div className="flex h-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 px-2 py-1">
364-
<Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
365-
<span className="text-base text-gray-600 dark:text-gray-400 font-semibold">
366-
{project?.name}
367-
</span>
368-
</Link>
369-
</div>
360+
{projectSlug && !prebuildId && (
361+
<Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
362+
<span className=" flex h-full text-base text-gray-50 bg-gray-800 dark:bg-gray-50 dark:text-gray-900 font-semibold ml-2 px-3 py-1 rounded-2xl border-gray-100">
363+
{project?.name}
364+
</span>
365+
</Link>
370366
)}
371367
{prebuildId && (
372-
<div className="flex h-full ml-2 py-1">
373-
<img alt="" className="mr-3 filter-grayscale m-auto transform -rotate-90" src={CaretDown} />
374-
<span className="text-base text-gray-600 dark:text-gray-400 font-semibold">{prebuildId}</span>
368+
<Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
369+
<span className=" flex h-full text-base text-gray-500 bg-gray-50 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 font-semibold ml-2 px-3 py-1 rounded-2xl border-gray-100">
370+
{project?.name}
371+
</span>
372+
</Link>
373+
)}
374+
{prebuildId && (
375+
<div className="flex ml-2">
376+
<div className="flex pl-0 pr-1 py-1.5">
377+
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
378+
<path
379+
fill-rule="evenodd"
380+
clip-rule="evenodd"
381+
d="M7.293 14.707a1 1 0 0 1 0-1.414L10.586 10 7.293 6.707a1 1 0 1 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0Z"
382+
fill="#78716C"
383+
/>
384+
</svg>
385+
</div>
386+
<Link to={`${teamOrUserSlug}/${projectSlug}/${prebuildId}`}>
387+
<span className="flex h-full text-base text-gray-50 bg-gray-800 dark:bg-gray-50 dark:text-gray-900 font-semibold px-3 py-1 rounded-2xl border-gray-100">
388+
{prebuildId.substring(0, 8).trimEnd()}
389+
</span>
390+
</Link>
375391
</div>
376392
)}
377393
</div>
@@ -380,11 +396,8 @@ export default function Menu() {
380396

381397
return (
382398
<>
383-
<header
384-
className={`app-container flex flex-col pt-4 space-y-4 ${isMinimalUI || !!prebuildId ? "pb-4" : ""}`}
385-
data-analytics='{"button_type":"menu"}'
386-
>
387-
<div className="flex h-10">
399+
<header className="app-container flex flex-col pt-4 space-y-4" data-analytics='{"button_type":"menu"}'>
400+
<div className="flex h-10 mb-3">
388401
<div className="flex justify-between items-center pr-3">
389402
<Link to="/">
390403
<img src={gitpodIcon} className="h-6" alt="Gitpod's logo" />
@@ -393,7 +406,7 @@ export default function Menu() {
393406
</div>
394407
<div className="flex flex-1 items-center w-auto" id="menu">
395408
<nav className="flex-1">
396-
<ul className="flex flex-1 items-center justify-between text-base text-gray-700 space-x-2">
409+
<ul className="flex flex-1 items-center justify-between text-base text-gray-500 dark:text-gray-400 space-x-2">
397410
<li className="flex-1"></li>
398411
{!isMinimalUI &&
399412
rightMenu.map((entry) => (
@@ -427,6 +440,10 @@ export default function Menu() {
427440
title: "Settings",
428441
link: "/settings",
429442
},
443+
{
444+
title: "Docs",
445+
link: "https://www.gitpod.io/docs/",
446+
},
430447
{
431448
title: "Help",
432449
href: "https://www.gitpod.io/support",
@@ -448,7 +465,7 @@ export default function Menu() {
448465
</div>
449466
{isFeedbackFormVisible && <FeedbackFormModal onClose={onFeedbackFormClose} />}
450467
</div>
451-
{!isMinimalUI && !prebuildId && (
468+
{!isMinimalUI && !prebuildId && !isWorkspacesUI && !isAdminUI && (
452469
<nav className="flex">
453470
{leftMenu.map((entry: Entry) => (
454471
<TabMenuItem

‎components/dashboard/src/components/PillMenuItem.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,10 @@ export default function PillMenuItem(p: {
1313
onClick?: (event: React.MouseEvent) => void;
1414
}) {
1515
const classes =
16-
"flex block font-medium dark:text-gray-200 px-2 py-1 rounded-lg transition ease-in-out " +
17-
(p.selected ? "bg-gray-200 dark:bg-gray-700" : "text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800");
16+
"flex block font-medium dark:text-gray-400 px-3 py-1 rounded-2xl transition ease-in-out font-semibold " +
17+
(p.selected
18+
? "text-gray-50 bg-gray-800 dark:text-gray-900 dark:bg-gray-50"
19+
: "hover:bg-gray-100 dark:hover:bg-gray-700");
1820
return !p.link || p.link.startsWith("https://") ? (
1921
<a className={classes} href={p.link} onClick={p.onClick} data-analytics='{"button_type":"pill_menu"}'>
2022
{p.name}

‎components/dashboard/src/icons/CaretUpDown.svg

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)