WIP: custom messages

This commit is contained in:
Philipp Heckel 2022-03-20 13:52:07 -04:00
parent 23547f4504
commit cc90a1af15
2 changed files with 132 additions and 1 deletions

View file

@ -18,6 +18,18 @@ import {expandUrl} from "../app/utils";
import ErrorBoundary from "./ErrorBoundary"; import ErrorBoundary from "./ErrorBoundary";
import routes from "./routes"; import routes from "./routes";
import {useAutoSubscribe, useConnectionListeners, useLocalStorageMigration} from "./hooks"; import {useAutoSubscribe, useConnectionListeners, useLocalStorageMigration} from "./hooks";
import {Backdrop, ListItemIcon, ListItemText, Menu} from "@mui/material";
import Paper from "@mui/material/Paper";
import IconButton from "@mui/material/IconButton";
import {MoreVert} from "@mui/icons-material";
import InsertEmoticonIcon from "@mui/icons-material/InsertEmoticon";
import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";
import SendIcon from "@mui/icons-material/Send";
import priority1 from "../img/priority-1.svg";
import priority2 from "../img/priority-2.svg";
import priority4 from "../img/priority-4.svg";
import priority5 from "../img/priority-5.svg";
// TODO add drag and drop // TODO add drag and drop
// TODO races when two tabs are open // TODO races when two tabs are open
@ -73,6 +85,7 @@ const Layout = () => {
return ( return (
<Box sx={{display: 'flex'}}> <Box sx={{display: 'flex'}}>
<CssBaseline/> <CssBaseline/>
<DropZone/>
<ActionBar <ActionBar
selected={selected} selected={selected}
onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)} onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
@ -89,6 +102,7 @@ const Layout = () => {
<Toolbar/> <Toolbar/>
<Outlet context={{ subscriptions, selected }}/> <Outlet context={{ subscriptions, selected }}/>
</Main> </Main>
<Sender/>
</Box> </Box>
); );
} }
@ -114,6 +128,122 @@ const Main = (props) => {
); );
}; };
const priorityFiles = {
1: priority1,
2: priority2,
4: priority4,
5: priority5
};
const Sender = (props) => {
const [priority, setPriority] = useState(5);
const [priorityAnchorEl, setPriorityAnchorEl] = React.useState(null);
const priorityMenuOpen = Boolean(priorityAnchorEl);
const handlePriorityClick = (p) => {
setPriority(p);
setPriorityAnchorEl(null);
};
return (
<Paper
elevation={3}
sx={{
display: "flex",
position: 'fixed',
bottom: 0,
right: 0,
padding: 2,
width: `calc(100% - ${Navigation.width}px)`,
backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
}}
>
<IconButton color="inherit" size="large" edge="start">
<MoreVert/>
</IconButton>
<IconButton color="inherit" size="large" edge="start">
<InsertEmoticonIcon/>
</IconButton>
<IconButton color="inherit" size="large" edge="start" onClick={(ev) => setPriorityAnchorEl(ev.currentTarget)}>
<img src={priorityFiles[priority]}/>
</IconButton>
<Menu
anchorEl={priorityAnchorEl}
open={priorityMenuOpen}
onClose={() => setPriorityAnchorEl(null)}
>
{[5,4,2,1].map(p => <MenuItem onClick={() => handlePriorityClick(p)}>
<ListItemIcon><img src={priorityFiles[p]}/></ListItemIcon>
<ListItemText>Priority {p}</ListItemText>
</MenuItem>)}
</Menu>
<div style={{display: "flex", flexDirection: "column", width: "100%"}}>
<TextField
autoFocus
margin="dense"
placeholder="Message"
type="text"
fullWidth
variant="standard"
multiline
/>
<div style={{display: "flex", width: "100%"}}>
<TextField
margin="dense"
placeholder="Title"
type="text"
fullWidth
variant="standard"
/>
</div>
</div>
<IconButton color="inherit" size="large" edge="end">
<SendIcon/>
</IconButton>
</Paper>
);
};
const DropZone = (props) => {
const [showDropZone, setShowDropZone] = useState(false);
useEffect(() => {
window.addEventListener('dragenter', () => setShowDropZone(true));
}, []);
const allowSubmit = () => true;
const allowDrag = (e) => {
if (allowSubmit()) {
e.dataTransfer.dropEffect = 'copy';
e.preventDefault();
}
};
const handleDrop = (e) => {
e.preventDefault();
setShowDropZone(false);
console.log(e.dataTransfer.files[0]);
};
if (!showDropZone) {
return null;
}
return (
<Backdrop
sx={{ color: '#fff', zIndex: 3500 }}
open={showDropZone}
onClick={() => setShowDropZone(false)}
onDragEnter={allowDrag}
onDragOver={allowDrag}
onDragLeave={() => setShowDropZone(false)}
onDrop={handleDrop}
>
</Backdrop>
);
};
const updateTitle = (newNotificationsCount) => { const updateTitle = (newNotificationsCount) => {
document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy` : "ntfy"; document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy` : "ntfy";
} }

View file

@ -20,7 +20,8 @@ import {
formatMessage, formatMessage,
formatShortDateTime, formatShortDateTime,
formatTitle, formatTitle,
openUrl, shortUrl, openUrl,
shortUrl,
topicShortUrl, topicShortUrl,
unmatchedTags unmatchedTags
} from "../app/utils"; } from "../app/utils";