Skip to content

[dashboard] avatar menu #3491

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 19, 2021
Merged

[dashboard] avatar menu #3491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions components/dashboard/src/components/ContextMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ function ContextMenu(props: ContextMenuProps) {
}
}
})
const font = "text-gray-400 hover:text-gray-800"

const font = "text-gray-600 hover:text-gray-800"
return (
<div className="relative cursor-pointer">
<div onClick={(e) => {
Expand All @@ -51,12 +52,16 @@ function ContextMenu(props: ContextMenuProps) {
{props.children}
</div>
{expanded?
<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`}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: In the end, this dropdown should use the same spacing as the workspace more actions dropdown as described in #3496 (review).

Let's change the width of the dropdown of the more actions to w-48. This will also use the same width as the side menu. Also, let's change the dropdown spacing from space-y-2 to space-y-1 and py-2 to py-1.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I went away from the inbetween spacing, because separators would be hard to align in the middle. They are no based on borders.

<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`}>
{enhancedEntries.map(e => {
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':''}`} >
const clickable = e.href || e.onClick;
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':''}`} >
<div>{e.title}</div><div className="flex-1"></div>{e.active ? <div className="pl-1 font-semibold">&#x2713;</div>: null}
</div>
return <a href={e.href} onClick={e.onClick}>
if (!clickable) {
return entry;
}
return <a key={e.title} href={e.href} onClick={e.onClick}>
{entry}
</a>
})}
Expand Down
28 changes: 24 additions & 4 deletions components/dashboard/src/components/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { User } from "@gitpod/gitpod-protocol";
import { useContext } from "react";
import { Link } from "react-router-dom";
import { gitpodHostUrl } from "../service/service";
import { UserContext } from "../user-context";
import ContextMenu from "./ContextMenu";

interface Entry {
title: string, link: string
Expand Down Expand Up @@ -57,10 +60,27 @@ function Menu(props: { left: Entry[], right: Entry[] }) {
{props.right.map(MenuItem)}
</ul>
</nav>
<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">
<img className="rounded-full w-6 h-6"
src={user?.avatarUrl || ''} alt={user?.name || 'Anonymous'} />
</Link>
<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">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: Could we make the border gray-500 when the profile menu is active (dropdown is visible)?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems rather involving to do tbh

Copy link
Contributor

@gtsiolis gtsiolis Mar 19, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True, let's drop this idea for now.

<ContextMenu menuEntries={[
{
title: (user && User.getPrimaryEmail(user)) || '',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: This should be truncated, right?

customFontStyle: 'text-gray-400',
separator: true
},
{
title: 'Settings',
href: '/settings',
separator: true
},
{
title: 'Logout',
href: gitpodHostUrl.asApiLogout().toString()
},
]}>
<img className="rounded-full w-6 h-6"
src={user?.avatarUrl || ''} alt={user?.name || 'Anonymous'} />
</ContextMenu>
</div>
</div>
</header>
);
Expand Down
15 changes: 8 additions & 7 deletions components/dashboard/src/components/StartPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,15 @@ function ProgressBar(props: { phase: number, error: boolean }) {
// This phase is currently running
classes += ' bg-green-400 animate-pulse';
}
return <div key={'phase-'+i} className={classes}/>;
return <div key={'phase-' + i} className={classes} />;
})}
</div>;
}

export interface StartPageProps {
phase: number;
error?: boolean;
children?: React.ReactNode;
phase: number;
error?: boolean;
children?: React.ReactNode;
}

export function StartPage(props: StartPageProps) {
Expand All @@ -56,11 +56,12 @@ export function StartPage(props: StartPageProps) {
title = "Starting";
break;
}
return <div className="h-screen flex bg-white">
<div className="w-full mt-40 md:mt-60 flex flex-col items-center">
return <div className="w-screen h-screen bg-white align-middle">
<div className="flex flex-col mx-auto items-center h-screen">
<div className="h-1/3"></div>
<img src="/gitpod.svg" className="h-16 flex-shrink-0" />
<h3 className="mt-8 text-xl">{title}</h3>
<ProgressBar phase={props.phase} error={!!props.error}/>
<ProgressBar phase={props.phase} error={!!props.error} />
{props.children}
</div>
</div>;
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/src/workspaces/WorkspaceEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export function WorkspaceEntry({ desc, model }: { desc: WorkspaceInfo, model: Wo
<div className="text-sm text-gray-400 truncate">{ws.contextURL}</div>
</div>
</div>
<div className="flex w-2/12" onClick={numberOfChanges > 0 ? showChanges : undefined}>
<div className="flex w-2/12 truncate" onClick={numberOfChanges > 0 ? showChanges : undefined}>
<div className="flex flex-col">
<div className="font-medium text-gray-500 truncate">{currentBranch}</div>
{
Expand All @@ -121,7 +121,7 @@ export function WorkspaceEntry({ desc, model }: { desc: WorkspaceInfo, model: Wo
}
</div>
</div>
<div className="flex w-2/12 self-center space-x-2">
<div className="flex w-2/12 self-center space-x-2 truncate">
<div className="text-sm text-gray-400 truncate">{moment(WorkspaceInfo.lastActiveISODate(desc)).fromNow()}</div>
</div>
<div className="flex w-8 self-center hover:bg-gray-300 rounded-md cursor-pointer">
Expand Down