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

Reserve dialogs

Browse source
This commit is contained in:
binwiederhier 2023-01-31 21:39:30 -05:00
parent 259293f9b3
commit 07cdf2bc7a
13 changed files with 587 additions and 397 deletions
Download patch file Download diff file Expand all files Collapse all files

51
web/src/components/ReserveIcons.js
View file

@ -3,43 +3,44 @@ import {Lock, Public} from "@mui/icons-material";
import Box from "@mui/material/Box";
export const PermissionReadWrite = React.forwardRef((props, ref) => {
const size = props.size ?? "medium";
return <Public fontSize={size} ref={ref} {...props}/>;
return <PermissionInternal icon={Public} ref={ref} {...props}/>;
});
export const PermissionDenyAll = React.forwardRef((props, ref) => {
const size = props.size ?? "medium";
return <Lock fontSize={size} ref={ref} {...props}/>;
return <PermissionInternal icon={Lock} ref={ref} {...props}/>;
});
export const PermissionRead = React.forwardRef((props, ref) => {
return <PermissionReadOrWrite text="R" ref={ref} {...props}/>;
return <PermissionInternal icon={Public} text="R" ref={ref} {...props}/>;
});
export const PermissionWrite = React.forwardRef((props, ref) => {
return <PermissionReadOrWrite text="W" ref={ref} {...props}/>;
return <PermissionInternal icon={Public} text="W" ref={ref} {...props}/>;
});
const PermissionReadOrWrite = React.forwardRef((props, ref) => {
const PermissionInternal = React.forwardRef((props, ref) => {
const size = props.size ?? "medium";
const Icon = props.icon;
return (
<div ref={ref} {...props} style={{position: "relative", display: "inline-flex", verticalAlign: "middle", height: "24px"}}>
<Public fontSize={size}/>
<Box
sx={{
position: "absolute",
right: "-6px",
bottom: "5px",
fontSize: 10,
fontWeight: 600,
color: "gray",
width: "8px",
height: "8px",
marginTop: "3px"
}}
>
{props.text}
</Box>
</div>
<Box ref={ref} {...props} style={{ position: "relative", display: "inline-flex", verticalAlign: "middle", height: "24px" }}>
<Icon fontSize={size} sx={{ color: "gray" }}/>
{props.text &&
<Box
sx={{
position: "absolute",
right: "-6px",
bottom: "5px",
fontSize: 10,
fontWeight: 600,
color: "gray",
width: "8px",
height: "8px",
marginTop: "3px"
}}
>
{props.text}
</Box>
}
</Box>
);
});