1cafe307d5
* light and dark mode added in Invite modal * warnings removed * create org and invite user test cases fixed * Application invite design implemented * manage user icon added * button width fixed * PR feedback implemented * test cases fixed * used blueprint classes * used calc for width distribution * copy button width fixed * prop passing fixed * copy button size reduced * readonly input field background color fixed * input background theme name ordering changed * TagInputComponent moved to ads * created DropdownWrapper for select field in orgInviteForm * Warnings created due to unique key and depdencies is fixed * Warning fixed in dropdown component * correct prop name used Co-authored-by: Rohit Kumawat <rohit.kumawat@primathon.in>
113 lines
2.9 KiB
TypeScript
113 lines
2.9 KiB
TypeScript
import React, { Fragment } from "react";
|
|
import { CommonComponentProps, Classes } from "components/ads/common";
|
|
import { getInitialsAndColorCode } from "utils/AppsmithUtils";
|
|
import { useSelector } from "react-redux";
|
|
import { getThemeDetails } from "selectors/themeSelectors";
|
|
import Text, { TextType } from "components/ads/Text";
|
|
import styled, { createGlobalStyle } from "styled-components";
|
|
import { Position } from "@blueprintjs/core";
|
|
import Menu from "components/ads/Menu";
|
|
import ThemeSwitcher from "./ThemeSwitcher";
|
|
import MenuDivider from "components/ads/MenuDivider";
|
|
import MenuItem from "components/ads/MenuItem";
|
|
import {
|
|
getOnSelectAction,
|
|
DropdownOnSelectActions,
|
|
} from "./CustomizedDropdown/dropdownHelpers";
|
|
import { ReduxActionTypes } from "constants/ReduxActionConstants";
|
|
|
|
type TagProps = CommonComponentProps & {
|
|
onClick?: (text: string) => void;
|
|
userName?: string;
|
|
};
|
|
|
|
export const ProfileImage = styled.div<{ backgroundColor?: string }>`
|
|
width: 34px;
|
|
height: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
background-color: ${props => props.backgroundColor};
|
|
`;
|
|
|
|
const ProfileMenuStyle = createGlobalStyle`
|
|
.profile-menu {
|
|
.bp3-popover .bp3-popover-content{
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const UserInformation = styled.div`
|
|
padding: ${props => props.theme.spaces[6]}px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.user-name {
|
|
flex-basis: 80%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
.${Classes.TEXT} {
|
|
color: ${props => props.theme.colors.profileDropdown.userName};
|
|
}
|
|
}
|
|
|
|
.user-image {
|
|
margin-right: ${props => props.theme.spaces[4]}px;
|
|
div {
|
|
cursor: default;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default function ProfileDropdown(props: TagProps) {
|
|
const themeDetails = useSelector(getThemeDetails);
|
|
|
|
const initialsAndColorCode = getInitialsAndColorCode(
|
|
props.userName,
|
|
themeDetails.theme.colors.appCardColors,
|
|
);
|
|
|
|
const Profile = (
|
|
<ProfileImage backgroundColor={initialsAndColorCode[1]}>
|
|
<Text type={TextType.H6} highlight>
|
|
{initialsAndColorCode[0]}
|
|
</Text>
|
|
</ProfileImage>
|
|
);
|
|
return (
|
|
<Fragment>
|
|
<ProfileMenuStyle />
|
|
<Menu
|
|
className="profile-menu"
|
|
position={Position.BOTTOM}
|
|
target={Profile}
|
|
>
|
|
<UserInformation>
|
|
<div className="user-image">{Profile}</div>
|
|
<div className="user-name">
|
|
<Text type={TextType.P1} highlight>
|
|
{props.userName}
|
|
</Text>
|
|
</div>
|
|
</UserInformation>
|
|
<MenuDivider />
|
|
<ThemeSwitcher />
|
|
<MenuDivider />
|
|
<MenuItem
|
|
icon="logout"
|
|
text="Sign Out"
|
|
onSelect={() =>
|
|
getOnSelectAction(DropdownOnSelectActions.DISPATCH, {
|
|
type: ReduxActionTypes.LOGOUT_USER_INIT,
|
|
})
|
|
}
|
|
/>
|
|
</Menu>
|
|
</Fragment>
|
|
);
|
|
}
|