astra/ntfy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Mute button

Browse source
This commit is contained in:
Philipp Heckel 2022-03-08 16:56:41 -05:00
parent d3462d2905
commit 60980df26b
4 changed files with 35 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

38
web/src/components/ActionBar.js
View file

@ -16,6 +16,8 @@ import Popper from '@mui/material/Popper';
import MenuItem from '@mui/material/MenuItem';
import MenuList from '@mui/material/MenuList';
import MoreVertIcon from "@mui/icons-material/MoreVert";
import NotificationsIcon from '@mui/icons-material/Notifications';
import NotificationsOffIcon from '@mui/icons-material/NotificationsOff';
import api from "../app/Api";
import subscriptionManager from "../app/SubscriptionManager";
@ -50,25 +52,32 @@ const ActionBar = (props) => {
<Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
{title}
</Typography>
{props.selected && <SettingsIcon
subscription={props.selected}
onUnsubscribe={props.onUnsubscribe}
/>}
{props.selected &&
<SettingsIcons
subscription={props.selected}
onUnsubscribe={props.onUnsubscribe}
/>}
</Toolbar>
</AppBar>
);
};
// Originally from https://mui.com/components/menus/#MenuListComposition.js
const SettingsIcon = (props) => {
const SettingsIcons = (props) => {
const navigate = useNavigate();
const [open, setOpen] = useState(false);
const anchorRef = useRef(null);
const subscription = props.subscription;
const handleToggle = () => {
const handleToggleOpen = () => {
setOpen((prevOpen) => !prevOpen);
};
const handleToggleMute = async () => {
const mutedUntil = (subscription.mutedUntil) ? 0 : 1; // Make this a timestamp in the future
await subscriptionManager.setMutedUntil(subscription.id, mutedUntil);
}
const handleClose = (event) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
@ -122,14 +131,10 @@ const SettingsIcon = (props) => {
return (
<>
<IconButton
color="inherit"
size="large"
edge="end"
ref={anchorRef}
id="composition-button"
onClick={handleToggle}
>
<IconButton color="inherit" size="large" edge="end" onClick={handleToggleMute} sx={{marginRight: 0}}>
{subscription.mutedUntil ? <NotificationsOffIcon/> : <NotificationsIcon/>}
</IconButton>
<IconButton color="inherit" size="large" edge="end" ref={anchorRef} onClick={handleToggleOpen}>
<MoreVertIcon/>
</IconButton>
<Popper
@ -143,10 +148,7 @@ const SettingsIcon = (props) => {
{({TransitionProps, placement}) => (
<Grow
{...TransitionProps}
style={{
transformOrigin:
placement === 'bottom-start' ? 'left top' : 'left bottom',
}}
style={{transformOrigin: placement === 'bottom-start' ? 'left top' : 'left bottom'}}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>

6
web/src/components/Navigation.js
View file

@ -18,11 +18,11 @@ import {subscriptionRoute, topicShortUrl, topicUrl} from "../app/utils";
import {ConnectionState} from "../app/Connection";
import {useLocation, useNavigate} from "react-router-dom";
import subscriptionManager from "../app/SubscriptionManager";
import {ChatBubble} from "@mui/icons-material";
import {ChatBubble, NotificationsOffOutlined} from "@mui/icons-material";
import Box from "@mui/material/Box";
import notifier from "../app/Notifier";
const navWidth = 240;
const navWidth = 280;
const Navigation = (props) => {
const navigationList = <NavList {...props}/>;
@ -159,6 +159,8 @@ const SubscriptionItem = (props) => {
<ListItemButton onClick={handleClick} selected={props.selected}>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={label}/>
{subscription.mutedUntil > 0 &&
<ListItemIcon edge="end"><NotificationsOffOutlined /></ListItemIcon>}
</ListItemButton>
);
};