[dashboard] avatar menu

Author: svenefftinge

components/dashboard/src/components/ContextMenu.tsx

@@ -34,13 +34,14 @@ function ContextMenu(props: ContextMenuProps) {
     const enhancedEntries = props.menuEntries.map(e => {
         return {
             ... e,
-            onClick: () => {
+            onClick: e.onClick ? () => {
                 e.onClick && e.onClick();
                 toggleExpanded();
-            }
+            }: undefined
         }
     })
-    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) => {
@@ -50,12 +51,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`}>
+                <div className={`mt-2 z-50 ${props.width || 'w-40'} bg-white absolute right-0 flex flex-col border border-gray-200 rounded-lg`}>
                     {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>
                     })}

components/dashboard/src/components/Menu.tsx

@@ -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
@@ -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">
+                    <ContextMenu menuEntries={[
+                    {
+                        title: (user && User.getPrimaryEmail(user)) || '',
+                        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>
     );

components/dashboard/src/components/StartPage.tsx

@@ -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) {
@@ -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>;

components/dashboard/src/workspaces/WorkspaceEntry.tsx

@@ -99,19 +99,19 @@ export function WorkspaceEntry({desc, model}: {desc: WorkspaceInfo, model: Works
             <a href={project ? 'https://'+ project : undefined}><div className="text-sm overflow-ellipsis truncate text-gray-400 truncate">{project || 'Unknown'}</div></a>
         </div>
         <div className="flex w-4/12 truncate overflow-ellipsis" onClick={startWsOnClick}>
-            <div className="flex flex-col">
+            <div className="flex flex-col truncate">
                 <div className="font-medium text-gray-500 truncate">{ws.description}</div>
                 <div className="text-sm text-gray-400 truncate">{ws.contextURL}</div>
             </div>
         </div>
         <div className="flex w-2/12" onClick={numberOfChanges > 0 ? showChanges: startWsOnClick}>
-            <div className="flex flex-col">
+            <div className="flex flex-col truncate">
                 <div className="font-medium text-gray-500 truncate">{currentBranch}</div>
                 {
                     numberOfChanges > 0 ?
-                    <div className={"text-sm text-red truncate cursor-pointer hover:underline"} onClick={showChanges}>{changesLabel}</div>
+                    <div className={"text-sm text-red cursor-pointer hover:underline"} onClick={showChanges}>{changesLabel}</div>
                     :
-                    <div className="text-sm text-gray-400 truncate">No Changes</div>    
+                    <div className="text-sm text-gray-400">No Changes</div>    
                 }
                 <Modal visible={isChangesModalVisible} onClose={() => setChangesModalVisible(false)}>
                     {getChangesPopup(pendingChanges)}