Skip to content

Commit

Permalink
Merge pull request #663 from bcgov/feat/srs-282
Browse files Browse the repository at this point in the history 
Feat/srs 282
  • Loading branch information
@midhun-aot
midhun-aot authored Apr 16, 2024
2 parents c726d4b + f99d882 commit d54479a
Show file tree
Hide file tree
Showing 10 changed files with 411 additions and 13 deletions.
68 changes: 68 additions & 0 deletions frontend/Site/src/app/components/account/UserAccount.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
.account-custom-dropdown {
display: flex;
justify-content: space-between;
}

.account-custom-toggle {
color: var(--typography-color-primary-invert) !important;
}

.account-custom-toggle-mobile {
color: var(--typography-color-primary);
}

.account-custom-toggle:active {
border-color: transparent !important;
}

.account-custom-menu {
height: 231px;
border-radius: var(--surface-border-radius-medium) !important;
padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px !important;
background-color: var(--surface-background-white) !important;
box-shadow: var(--surface-shadow-medium);
inset: 16px 0px auto auto !important;
border: none !important;
}

.account-custom-item-first {
padding: 0px var(--layout-margin-medium) 16px var(--layout-margin-medium) !important;
border-bottom: 1px solid var(--surface-color-border-light, #D8D8D8) !important;
}

.account-custom-label {
font: var(--typography-regular-label);
color: var(--typography-color-secondary);
}

.account-image {
border-radius: 100px;
height: 44px;
width: 44px;
}

.account-username span {
color: var(--typography-color-primary);
font: var(--typography-bold-body);
}

.account-custom-item {
display: flex !important;
padding: var(--layout-padding-small) var(--layout-padding-medium) var(--layout-padding-small) var(--layout-padding-medium) !important;
gap: var(--layout-margin-medium) ;
color: var(--typography-color-primary) !important;
}

.account-custom-item-mobile {
padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px !important;
}
.account-custom-item:hover {
background-color: var(--surface-secondary-hover) !important;
color: var(--typography-color-secondary) !important;
}

@media screen and (max-width: 767px){
.user-dropdown{
display: none;
}
}
102 changes: 102 additions & 0 deletions frontend/Site/src/app/components/account/UserAccount.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
import { useState } from "react";
import Dropdown from "react-bootstrap/Dropdown";
import './UserAccount.css';
import avatar from '../../images/avatar.png';
import { DropdownIcon, DropdownUpIcon } from "../common/icon";

const UserAccount = ( props : any) =>{
// Sample user data
const userObj = {
name: 'Ipsum, Loren WLRS:EX',
profileImage: avatar, // URL to the profile image
};

const [user, setUser] = useState(userObj);
const [dropdownArrow, setDropdownArrow] = useState(false);
const toggleButton = (event : any) => {
event.stopPropagation();
setDropdownArrow(!dropdownArrow);
}

if(props.mobileView)
{
return (
<>
{/* Dropdown component for user account */}
<div aria-label="User Account" className="d-md-none">
<div role="navigation">
{/* Logged in as label */}
<div className="account-custom-label" id="user-account-label">Logged in as:</div>
{/* Dropdown toggle button */}
<div role="button" className="account-username py-3 d-flex align-items-center" aria-expanded={dropdownArrow}
aria-controls="account-menu"
aria-labelledby="user-account-label">
{/* Profile image */}
<img src={user.profileImage} alt="User profile image." className="account-image" aria-hidden="true"/>
{/* User name */}
<div className="p-3">{user.name}</div>
<div id="account-dropdown" className="account-custom-toggle-mobile align-item-center" aria-label="Account Menu Button"
onClick={toggleButton}>
{ dropdownArrow ? <DropdownUpIcon/> : <DropdownIcon/> }
</div>
</div>
</div>
{ dropdownArrow &&
<div role="menu" id="account-menu"
aria-labelledby="account-dropdown" className="p-0">
{/* Account settings */}
<div role="menuitem"
aria-label="Account Settings"
tabIndex={0} // Make focusable with keyboard
className="account-custom-item-mobile">Account Settings</div>
{/* Logout */}
<div role="menuitem" aria-label="Log Out"
tabIndex={0} // Make focusable with keyboard
className="account-custom-item-mobile">Log Out</div>
</div>
}
</div>
</>
)
}
else {
return(
<>
{/* Dropdown component for user account */}
<Dropdown aria-label="User Account" className="d-md-flex justify-content-between d-sm-none d-none">
{/* Dropdown toggle button */}
<div className="d-flex">
{/* Profile image */}
<img src={user.profileImage} alt="User profile image." className="account-image" />
<Dropdown.Toggle id="account-dropdown" variant="" className="account-custom-toggle p-2" aria-label="Account Menu">
</Dropdown.Toggle>
</div>
{/* Dropdown menu */}
<Dropdown.Menu className="account-custom-menu" role="menu" aria-labelledby="account-dropdown">
{/* Logged in as label */}
<Dropdown.Item role="menuitem" className="account-custom-item-first" disabled aria-disabled="true">
<div className="account-custom-label">Logged in as:</div>
<div className="account-username py-3">
{/* Profile image */}
<img src={user.profileImage} alt="User profile image." className="account-image me-3"/>

{/* User name */}
<span>{user.name}</span>
</div>
</Dropdown.Item>
<div className="pt-3">
{/* Account settings */}
<Dropdown.Item role="menuitem" className="account-custom-item" aria-label="Account Settings">Account Settings</Dropdown.Item>

{/* Logout */}
<Dropdown.Item role="menuitem" className="account-custom-item" aria-label="Log Out">Log Out</Dropdown.Item>
</div>
</Dropdown.Menu>
</Dropdown>
</>
)
}
}


export default UserAccount;
8 changes: 7 additions & 1 deletion frontend/Site/src/app/components/common/icon.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@ import {
FaAnglesLeft,
FaAnglesRight,
FaAngleDown,
FaRegCircleXmark
FaRegCircleXmark,
FaCheck,
FaCaretUp,
FaCaretDown
} from "react-icons/fa6";


Expand All @@ -40,3 +43,6 @@ import {
export const AnglesRightIcon = FaAnglesRight;
export const ArrowDownIcon = FaAngleDown ;
export const CircleXMarkIcon = FaRegCircleXmark;
export const TickIcon = FaCheck;
export const DropdownUpIcon = FaCaretUp;
export const DropdownIcon = FaCaretDown;
72 changes: 72 additions & 0 deletions frontend/Site/src/app/components/language/LanguageSwitcher.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@

.custom-toggle {
cursor: pointer;
color: var(--typography-color-primary-invert);
}

.custom-toggle:first-child:active {
border-color: transparent;
}

.custom-menu {
height: 370px;
border-radius: var(--surface-border-radius-medium);
padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px;
box-shadow: var(--surface-shadow-medium);
background-color: var(--surface-background-white);
inset: 45px auto auto auto;
position:absolute;
left:calc(100% - 410px);
}

.custom-item {
padding: var(--layout-padding-small) var(--layout-padding-medium) var(--layout-padding-small) var(--layout-padding-medium);
gap: var(--layout-margin-medium);
color: var(--typography-color-primary);
}

.custom-item:hover {
background-color: var(--surface-secondary-hover);
color: var(--typography-color-secondary);
}

.custom-item-first-child {
padding: var(--layout-padding-small) var(--layout-padding-medium) var(--layout-padding-small) var(--layout-padding-medium) ;
gap: var(--layout-margin-medium);

}

.custom-item-label {
font: var(--typography-regular-label);
color: var(--typography-color-secondary);
}

.tick-icon {
color: var(--icons-icons-primary);
float: right;
}

@media screen and (max-width: 767px){
.custom-menu {
border-radius: 0px 0px var(--surface-border-radius-medium) var(--surface-border-radius-medium);
padding: var(--layout-padding-large);
box-shadow: var(--surface-shadow-medium);
background-color: var(--surface-background-white);
inset: 41px 0 0 0 ;
overflow: auto;
}


.custom-item {
padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px;
gap: var(--layout-margin-medium);
color: var(--typography-color-primary);
font: var(--typography-regular-body);
}

.custom-item-first-child {
padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px;
gap: var(--layout-margin-medium);

}
}
Loading

0 comments on commit d54479a

Please sign in to comment.