Skip to content

Commit b5dea05

Browse files
svenefftingesvenefftinge
committed
[dashboard] avatar menu
1 parent 4b92cdd commit b5dea05

File tree

4 files changed

+43
-17
lines changed

4 files changed

+43
-17
lines changed

‎components/dashboard/src/components/ContextMenu.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ function ContextMenu(props: ContextMenuProps) {
4141
}
4242
}
4343
})
44-
const font = "text-gray-400 hover:text-gray-800"
44+
45+
const font = "text-gray-600 hover:text-gray-800"
4546
return (
4647
<div className="relative cursor-pointer">
4748
<div onClick={(e) => {
@@ -51,12 +52,16 @@ function ContextMenu(props: ContextMenuProps) {
5152
{props.children}
5253
</div>
5354
{expanded?
54-
<div className={`z-50 ${props.width || 'w-40'} bg-white absolute py-2 right-0 flex flex-col border border-gray-200 rounded-lg space-y-2`}>
55+
<div className={`mt-2 z-50 ${props.width || 'w-48'} bg-white absolute right-0 flex flex-col border border-gray-200 rounded-lg truncated`}>
5556
{enhancedEntries.map(e => {
56-
const entry = <div key={e.title} className={`px-4 flex py-2 text-gray-600 hover:bg-gray-200 text-sm leading-1 ${e.customFontStyle || font} ${e.separator? ' border-b border-gray-200':''}`} >
57+
const clickable = e.href || e.onClick;
58+
const entry = <div key={e.title} className={`px-4 flex py-3 ${clickable?'hover:bg-gray-200':''} text-sm leading-1 ${e.customFontStyle || font} ${e.separator? ' border-b border-gray-200':''}`} >
5759
<div>{e.title}</div><div className="flex-1"></div>{e.active ? <div className="pl-1 font-semibold">&#x2713;</div>: null}
5860
</div>
59-
return <a href={e.href} onClick={e.onClick}>
61+
if (!clickable) {
62+
return entry;
63+
}
64+
return <a key={e.title} href={e.href} onClick={e.onClick}>
6065
{entry}
6166
</a>
6267
})}

‎components/dashboard/src/components/Menu.tsx

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
import { User } from "@gitpod/gitpod-protocol";
12
import { useContext } from "react";
23
import { Link } from "react-router-dom";
4+
import { gitpodHostUrl } from "../service/service";
35
import { UserContext } from "../user-context";
6+
import ContextMenu from "./ContextMenu";
47

58
interface Entry {
69
title: string, link: string
@@ -57,10 +60,27 @@ function Menu(props: { left: Entry[], right: Entry[] }) {
5760
{props.right.map(MenuItem)}
5861
</ul>
5962
</nav>
60-
<Link className="lg:ml-3 flex items-center justify-start lg:mb-0 mb-4 pointer-cursor m-l-auto rounded-full border-2 border-white hover:border-gray-200 p-0.5" to="/account">
61-
<img className="rounded-full w-6 h-6"
62-
src={user?.avatarUrl || ''} alt={user?.name || 'Anonymous'} />
63-
</Link>
63+
<div className="lg:ml-3 flex items-center justify-start lg:mb-0 mb-4 pointer-cursor m-l-auto rounded-full border-2 border-white hover:border-gray-200 p-0.5">
64+
<ContextMenu menuEntries={[
65+
{
66+
title: (user && User.getPrimaryEmail(user)) || '',
67+
customFontStyle: 'text-gray-400',
68+
separator: true
69+
},
70+
{
71+
title: 'Settings',
72+
href: '/settings',
73+
separator: true
74+
},
75+
{
76+
title: 'Logout',
77+
href: gitpodHostUrl.asApiLogout().toString()
78+
},
79+
]}>
80+
<img className="rounded-full w-6 h-6"
81+
src={user?.avatarUrl || ''} alt={user?.name || 'Anonymous'} />
82+
</ContextMenu>
83+
</div>
6484
</div>
6585
</header>
6686
);

‎components/dashboard/src/components/StartPage.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,15 @@ function ProgressBar(props: { phase: number, error: boolean }) {
2323
// This phase is currently running
2424
classes += ' bg-green-400 animate-pulse';
2525
}
26-
return <div key={'phase-'+i} className={classes}/>;
26+
return <div key={'phase-' + i} className={classes} />;
2727
})}
2828
</div>;
2929
}
3030

3131
export interface StartPageProps {
32-
phase: number;
33-
error?: boolean;
34-
children?: React.ReactNode;
32+
phase: number;
33+
error?: boolean;
34+
children?: React.ReactNode;
3535
}
3636

3737
export function StartPage(props: StartPageProps) {
@@ -56,11 +56,12 @@ export function StartPage(props: StartPageProps) {
5656
title = "Starting";
5757
break;
5858
}
59-
return <div className="h-screen flex bg-white">
60-
<div className="w-full mt-40 md:mt-60 flex flex-col items-center">
59+
return <div className="w-screen h-screen bg-white align-middle">
60+
<div className="flex flex-col mx-auto items-center h-screen">
61+
<div className="h-1/3"></div>
6162
<img src="/gitpod.svg" className="h-16 flex-shrink-0" />
6263
<h3 className="mt-8 text-xl">{title}</h3>
63-
<ProgressBar phase={props.phase} error={!!props.error}/>
64+
<ProgressBar phase={props.phase} error={!!props.error} />
6465
{props.children}
6566
</div>
6667
</div>;

‎components/dashboard/src/workspaces/WorkspaceEntry.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export function WorkspaceEntry({ desc, model }: { desc: WorkspaceInfo, model: Wo
110110
<div className="text-sm text-gray-400 truncate">{ws.contextURL}</div>
111111
</div>
112112
</div>
113-
<div className="flex w-2/12" onClick={numberOfChanges > 0 ? showChanges : undefined}>
113+
<div className="flex w-2/12 truncate" onClick={numberOfChanges > 0 ? showChanges : undefined}>
114114
<div className="flex flex-col">
115115
<div className="font-medium text-gray-500 truncate">{currentBranch}</div>
116116
{
@@ -121,7 +121,7 @@ export function WorkspaceEntry({ desc, model }: { desc: WorkspaceInfo, model: Wo
121121
}
122122
</div>
123123
</div>
124-
<div className="flex w-2/12 self-center space-x-2">
124+
<div className="flex w-2/12 self-center space-x-2 truncate">
125125
<div className="text-sm text-gray-400 truncate">{moment(WorkspaceInfo.lastActiveISODate(desc)).fromNow()}</div>
126126
</div>
127127
<div className="flex w-8 self-center hover:bg-gray-300 rounded-md cursor-pointer">

0 commit comments

Comments
 (0)