changed to display the username in a circle that can be expanded w/ burnettk

This commit is contained in:
jasquat 2023-05-09 17:05:37 -04:00
parent 7b190d204b
commit ddc78c5446
3 changed files with 79 additions and 52 deletions

View File

@ -42,7 +42,7 @@ export default function ActiveUsers() {
return ( return (
<div <div
title={`${activeUser.username} is also viewing this page`} title={`${activeUser.username} is also viewing this page`}
className="user-circle" className="user-circle user-circle-for-list"
> >
{activeUser.username.charAt(0).toUpperCase()} {activeUser.username.charAt(0).toUpperCase()}
</div> </div>

View File

@ -1,6 +1,12 @@
import { import {
Popover,
PopoverContent,
Button,
RadioButtonGroup,
RadioButton,
Header, Header,
HeaderContainer, HeaderContainer,
HeaderMenu,
HeaderMenuButton, HeaderMenuButton,
SkipToContent, SkipToContent,
SideNav, SideNav,
@ -14,7 +20,7 @@ import {
// @ts-ignore // @ts-ignore
} from '@carbon/react'; } from '@carbon/react';
// @ts-ignore // @ts-ignore
import { Logout, Login } from '@carbon/icons-react'; import { Settings, Logout, Login } from '@carbon/icons-react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import { Can } from '@casl/react'; import { Can } from '@casl/react';
@ -77,6 +83,40 @@ export default function NavigationBar() {
return activeKey === menuItemPath; return activeKey === menuItemPath;
}; };
const [openTwo, setOpenTwo] = useState<boolean>(false);
const popover = (
<div style={{ display: 'flex' }} id="profile-user-button">
<Popover open={openTwo} isTabTip align="bottom-right">
<button
aria-label="User Actions"
className="hot-button"
type="button"
onClick={() => {
setOpenTwo(!openTwo);
}}
>
<div className="user-circle with-top-margin">
{UserService.getPreferredUsername()[0].toUpperCase()}
</div>
</button>
<PopoverContent className="p-3">
<p>{UserService.getPreferredUsername()}</p>
<p>{UserService.getUserEmail()}</p>
<hr />
<Button
kind="ghost"
className="button-link-for-popover"
onClick={handleLogout}
>
<Logout />
&nbsp;&nbsp;Sign out
</Button>
</PopoverContent>
</Popover>
</div>
);
const loginAndLogoutAction = () => { const loginAndLogoutAction = () => {
if (UserService.isLoggedIn()) { if (UserService.isLoggedIn()) {
return ( return (
@ -86,16 +126,7 @@ export default function NavigationBar() {
{SPIFF_ENVIRONMENT} {SPIFF_ENVIRONMENT}
</HeaderGlobalAction> </HeaderGlobalAction>
) : null} ) : null}
<HeaderGlobalAction className="username-header-text unclickable-text"> {popover}
{UserService.getPreferredUsername()}
</HeaderGlobalAction>
<HeaderGlobalAction
aria-label="Logout"
onClick={handleLogout}
data-qa="logout-button"
>
<Logout />
</HeaderGlobalAction>
</> </>
); );
} }

View File

@ -114,6 +114,23 @@ h2 {
padding-left: 0; padding-left: 0;
} }
.cds--btn--ghost.button-link-for-popover {
color: #f4f4f4;
padding-left: 0;
}
.cds--btn--ghost.button-link-for-popover:visited {
color: #f4f4f4;
padding-left: 0;
}
.cds--btn--ghost.button-link-for-popover:hover {
color: #f4f4f4;
padding-left: 0;
}
.cds--btn--ghost.button-link-for-popover:visited:hover {
color: #f4f4f4;
padding-left: 0;
}
.cds--header__global .cds--btn--primary { .cds--header__global .cds--btn--primary {
background-color: #161616 background-color: #161616
} }
@ -200,6 +217,22 @@ h1.with-icons {
margin-bottom: 1em; margin-bottom: 1em;
} }
#profile-user-button {
margin-right: 8px;
}
.hot-button:hover {
background-color: #161616;
}
#profile-user-button .cds--popover--tab-tip__button::after {
content: none;
}
#profile-user-button .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button{
background-color: #161616;
}
.with-top-margin { .with-top-margin {
margin-top: 1em; margin-top: 1em;
} }
@ -471,49 +504,12 @@ svg.notification-icon {
border-radius: 50%; border-radius: 50%;
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
}
.user-circle-for-list {
margin-right: 10px; margin-right: 10px;
} }
.user-circle.color-1 {
background-color: #8e8e8e;
}
.user-circle.color-2 {
background-color: #a57c63;
}
.user-circle.color-3 {
background-color: #8f7c7c;
}
.user-circle.color-4 {
background-color: #9a927f;
}
.user-circle.color-5 {
background-color: #5e5d5d;
}
.user-circle.color-6 {
background-color: #676767;
}
.user-circle.color-7 {
background-color: #6d7d6d;
}
.user-circle.color-8 {
background-color: #7a7171;
}
.user-circle.color-9 {
background-color: #837d63;
}
.user-circle.color-10 {
background-color: #686a70;
}
/* Randomize color assignment */ /* Randomize color assignment */
.user-circle:nth-child(1) { .user-circle:nth-child(1) {
background-color: #8e8e8e; background-color: #8e8e8e;