fsdf
parent
c2f16f740b
commit
8ff168283c
|
@ -7,7 +7,7 @@ import Typography from "@mui/material/Typography";
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import {useEffect, useRef, useState} from "react";
|
import {useEffect, useRef, useState} from "react";
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
import {formatShortDateTime, shuffle, topicDisplayName, topicShortUrl} from "../app/utils";
|
import {formatShortDateTime, shuffle, topicDisplayName} from "../app/utils";
|
||||||
import {useLocation, useNavigate} from "react-router-dom";
|
import {useLocation, useNavigate} from "react-router-dom";
|
||||||
import ClickAwayListener from '@mui/material/ClickAwayListener';
|
import ClickAwayListener from '@mui/material/ClickAwayListener';
|
||||||
import Grow from '@mui/material/Grow';
|
import Grow from '@mui/material/Grow';
|
||||||
|
@ -23,11 +23,14 @@ import routes from "./routes";
|
||||||
import subscriptionManager from "../app/SubscriptionManager";
|
import subscriptionManager from "../app/SubscriptionManager";
|
||||||
import logo from "../img/ntfy.svg";
|
import logo from "../img/ntfy.svg";
|
||||||
import {useTranslation} from "react-i18next";
|
import {useTranslation} from "react-i18next";
|
||||||
import {Portal, Snackbar} from "@mui/material";
|
import {Menu, Portal, Snackbar} from "@mui/material";
|
||||||
import SubscriptionSettingsDialog from "./SubscriptionSettingsDialog";
|
import SubscriptionSettingsDialog from "./SubscriptionSettingsDialog";
|
||||||
import session from "../app/Session";
|
import session from "../app/Session";
|
||||||
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
|
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
|
||||||
import Button from "@mui/material/Button";
|
import Button from "@mui/material/Button";
|
||||||
|
import Divider from "@mui/material/Divider";
|
||||||
|
import {Logout, Person, Settings} from "@mui/icons-material";
|
||||||
|
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||||
|
|
||||||
const ActionBar = (props) => {
|
const ActionBar = (props) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
@ -246,32 +249,15 @@ const SettingsIcons = (props) => {
|
||||||
|
|
||||||
const ProfileIcon = (props) => {
|
const ProfileIcon = (props) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [open, setOpen] = useState(false);
|
const [anchorEl, setAnchorEl] = useState(null);
|
||||||
const anchorRef = useRef(null);
|
const open = Boolean(anchorEl);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const handleToggleOpen = () => {
|
const handleClick = (event) => {
|
||||||
setOpen((prevOpen) => !prevOpen);
|
setAnchorEl(event.currentTarget);
|
||||||
};
|
};
|
||||||
|
const handleClose = () => {
|
||||||
const handleClose = (event) => {
|
setAnchorEl(null);
|
||||||
if (anchorRef.current && anchorRef.current.contains(event.target)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleListKeyDown = (event) => {
|
|
||||||
if (event.key === 'Tab') {
|
|
||||||
event.preventDefault();
|
|
||||||
setOpen(false);
|
|
||||||
} else if (event.key === 'Escape') {
|
|
||||||
setOpen(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleUpgrade = () => {
|
|
||||||
// TODO
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleLogout = async () => {
|
const handleLogout = async () => {
|
||||||
|
@ -280,19 +266,10 @@ const ProfileIcon = (props) => {
|
||||||
window.location.href = routes.app;
|
window.location.href = routes.app;
|
||||||
};
|
};
|
||||||
|
|
||||||
// return focus to the button when we transitioned from !open -> open
|
|
||||||
const prevOpen = useRef(open);
|
|
||||||
useEffect(() => {
|
|
||||||
if (prevOpen.current === true && open === false) {
|
|
||||||
anchorRef.current.focus();
|
|
||||||
}
|
|
||||||
prevOpen.current = open;
|
|
||||||
}, [open]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{session.exists() &&
|
{session.exists() &&
|
||||||
<IconButton color="inherit" size="large" edge="end" ref={anchorRef} onClick={handleToggleOpen} sx={{marginRight: 0}} aria-label={t("xxxxxxx")}>
|
<IconButton color="inherit" size="large" edge="end" onClick={handleClick} sx={{marginRight: 0}} aria-label={t("xxxxxxx")}>
|
||||||
<AccountCircleIcon/>
|
<AccountCircleIcon/>
|
||||||
</IconButton>
|
</IconButton>
|
||||||
}
|
}
|
||||||
|
@ -302,30 +279,61 @@ const ProfileIcon = (props) => {
|
||||||
<Button color="inherit" variant="outlined" onClick={() => navigate(routes.signup)}>Sign up</Button>
|
<Button color="inherit" variant="outlined" onClick={() => navigate(routes.signup)}>Sign up</Button>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
<Popper
|
<Menu
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
id="account-menu"
|
||||||
open={open}
|
open={open}
|
||||||
anchorEl={anchorRef.current}
|
onClose={handleClose}
|
||||||
role={undefined}
|
onClick={handleClose}
|
||||||
placement="bottom-start"
|
PaperProps={{
|
||||||
transition
|
elevation: 0,
|
||||||
disablePortal
|
sx: {
|
||||||
|
overflow: 'visible',
|
||||||
|
filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
|
||||||
|
mt: 1.5,
|
||||||
|
'& .MuiAvatar-root': {
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
|
ml: -0.5,
|
||||||
|
mr: 1,
|
||||||
|
},
|
||||||
|
'&:before': {
|
||||||
|
content: '""',
|
||||||
|
display: 'block',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
right: 14,
|
||||||
|
width: 10,
|
||||||
|
height: 10,
|
||||||
|
bgcolor: 'background.paper',
|
||||||
|
transform: 'translateY(-50%) rotate(45deg)',
|
||||||
|
zIndex: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
||||||
|
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
||||||
>
|
>
|
||||||
{({TransitionProps, placement}) => (
|
<MenuItem>
|
||||||
<Grow
|
<ListItemIcon>
|
||||||
{...TransitionProps}
|
<Person />
|
||||||
style={{transformOrigin: placement === 'bottom-start' ? 'left top' : 'left bottom'}}
|
</ListItemIcon>
|
||||||
>
|
<b>{session.username()}</b>
|
||||||
<Paper>
|
</MenuItem>
|
||||||
<ClickAwayListener onClickAway={handleClose}>
|
<Divider />
|
||||||
<MenuList autoFocusItem={open} onKeyDown={handleListKeyDown}>
|
<MenuItem>
|
||||||
<MenuItem onClick={handleUpgrade}>Upgrade</MenuItem>
|
<ListItemIcon>
|
||||||
<MenuItem onClick={handleLogout}>Logout</MenuItem>
|
<Settings fontSize="small" />
|
||||||
</MenuList>
|
</ListItemIcon>
|
||||||
</ClickAwayListener>
|
Settings
|
||||||
</Paper>
|
</MenuItem>
|
||||||
</Grow>
|
<MenuItem onClick={handleLogout}>
|
||||||
)}
|
<ListItemIcon>
|
||||||
</Popper>
|
<Logout fontSize="small" />
|
||||||
|
</ListItemIcon>
|
||||||
|
Logout
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue