Skip to content

Commit 6ed1432

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

File tree

3 files changed

+81
-56
lines changed

3 files changed

+81
-56
lines changed

‎components/dashboard/src/Menu.tsx

Lines changed: 77 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

@@ -268,25 +264,39 @@ export default function Menu() {
268264
setFeedbackFormVisible(false);
269265
};
270266
const renderTeamMenu = () => {
267+
const classes =
268+
"flex h-full text-base py-0 " +
269+
(!projectSlug && !isWorkspacesUI && !isAdminUI && teamOrUserSlug
270+
? "text-gray-50 bg-gray-800 dark:text-gray-900 dark:bg-gray-50 border-gray-700"
271+
: "text-gray-500 bg-gray-50 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700");
271272
return (
272-
<div className="flex p-1 pl-3 ">
273+
<div className="flex p-1 pl-3">
273274
{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>
275+
<Link to={team ? `/t/${team.slug}/projects` : `/projects`}>
276+
<span
277+
className={`${classes} rounded-tl-2xl rounded-bl-2xl dark:border-gray-700 border-r pl-3 pr-2 py-1 bg-gray-50 font-semibold`}
278+
>
279+
{team?.name || userFullName}
280+
</span>
281+
</Link>
281282
)}
282-
<div className="flex h-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
283+
{!projectSlug && (
284+
<Link to={team ? `/t/${team.slug}/projects` : `/projects`}>
285+
<span
286+
className={`${classes} rounded-tl-2xl rounded-bl-2xl dark:border-gray-200 border-r pl-3 pr-2 py-1 bg-gray-50 font-semibold`}
287+
>
288+
{team?.name || userFullName}
289+
</span>
290+
</Link>
291+
)}
292+
<div className={`${classes} rounded-tr-2xl rounded-br-2xl dark:border-gray-700 px-1 bg-gray-50`}>
283293
<ContextMenu
284294
customClasses="w-64 left-0"
285295
menuEntries={[
286296
{
287297
title: userFullName,
288298
customContent: (
289-
<div className="w-full text-gray-400 flex flex-col">
299+
<div className="w-full text-gray-500 flex flex-col">
290300
<span className="text-gray-800 dark:text-gray-100 text-base font-semibold">
291301
{userFullName}
292302
</span>
@@ -295,7 +305,7 @@ export default function Menu() {
295305
),
296306
active: !team,
297307
separator: true,
298-
link: "/",
308+
link: "/projects",
299309
},
300310
...(teams || [])
301311
.map((t) => ({
@@ -343,35 +353,50 @@ export default function Menu() {
343353
},
344354
]}
345355
>
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-
/>
356+
<div className="flex h-full pl-0 pr-1 py-1.5 text-gray-50">
357+
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
358+
<path
359+
fill-rule="evenodd"
360+
clip-rule="evenodd"
361+
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"
362+
fill="#78716C"
363+
/>
364+
<title>Toggle team selection menu</title>
365+
</svg>
359366
</div>
360367
</ContextMenu>
361368
</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>
369+
{projectSlug && !prebuildId && !isAdminUI && (
370+
<Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
371+
<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">
372+
{project?.name}
373+
</span>
374+
</Link>
370375
)}
371376
{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>
377+
<Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
378+
<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">
379+
{project?.name}
380+
</span>
381+
</Link>
382+
)}
383+
{prebuildId && (
384+
<div className="flex ml-2">
385+
<div className="flex pl-0 pr-1 py-1.5">
386+
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
387+
<path
388+
fill-rule="evenodd"
389+
clip-rule="evenodd"
390+
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"
391+
fill="#78716C"
392+
/>
393+
</svg>
394+
</div>
395+
<Link to={`${teamOrUserSlug}/${projectSlug}/${prebuildId}`}>
396+
<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">
397+
{prebuildId.substring(0, 8).trimEnd()}
398+
</span>
399+
</Link>
375400
</div>
376401
)}
377402
</div>
@@ -380,11 +405,8 @@ export default function Menu() {
380405

381406
return (
382407
<>
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">
408+
<header className="app-container flex flex-col pt-4 space-y-4" data-analytics='{"button_type":"menu"}'>
409+
<div className="flex h-10 mb-3">
388410
<div className="flex justify-between items-center pr-3">
389411
<Link to="/">
390412
<img src={gitpodIcon} className="h-6" alt="Gitpod's logo" />
@@ -393,7 +415,7 @@ export default function Menu() {
393415
</div>
394416
<div className="flex flex-1 items-center w-auto" id="menu">
395417
<nav className="flex-1">
396-
<ul className="flex flex-1 items-center justify-between text-base text-gray-700 space-x-2">
418+
<ul className="flex flex-1 items-center justify-between text-base text-gray-500 dark:text-gray-400 space-x-2">
397419
<li className="flex-1"></li>
398420
{!isMinimalUI &&
399421
rightMenu.map((entry) => (
@@ -427,6 +449,10 @@ export default function Menu() {
427449
title: "Settings",
428450
link: "/settings",
429451
},
452+
{
453+
title: "Docs",
454+
link: "https://www.gitpod.io/docs/",
455+
},
430456
{
431457
title: "Help",
432458
href: "https://www.gitpod.io/support",
@@ -448,7 +474,7 @@ export default function Menu() {
448474
</div>
449475
{isFeedbackFormVisible && <FeedbackFormModal onClose={onFeedbackFormClose} />}
450476
</div>
451-
{!isMinimalUI && !prebuildId && (
477+
{!isMinimalUI && !prebuildId && !isWorkspacesUI && !isAdminUI && (
452478
<nav className="flex">
453479
{leftMenu.map((entry: Entry) => (
454480
<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)