Skip to content

Commit

Permalink
feat(web): custom dialog component
Browse files Browse the repository at this point in the history
  • Loading branch information
@LukeWasTakenn
LukeWasTakenn committed Oct 1, 2023
1 parent d070661 commit ef107b9
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 79 deletions.
133 changes: 67 additions & 66 deletions web/src/components/inventory/UsefulControls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,81 +4,82 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { Locale } from '../../store/locale';
import React, { useState } from 'react';
import { TransitionProps } from '@mui/material/transitions';
import {
FloatingFocusManager,
FloatingOverlay,
FloatingPortal,
useDismiss,
useFloating,
useInteractions,
useTransitionStyles,
} from '@floating-ui/react';

interface Props {
infoVisible: boolean;
setInfoVisible: React.Dispatch<React.SetStateAction<boolean>>;
}

const Transition = React.forwardRef(function Transition(
props: TransitionProps & {
children: React.ReactElement<any, any>;
},
ref: React.Ref<unknown>
) {
return <Slide direction="up" ref={ref} {...props} />;
});

const UsefulControls: React.FC<Props> = ({ infoVisible, setInfoVisible }) => {
const [open, setOpen] = useState(false);
const { refs, context } = useFloating({
open: infoVisible,
onOpenChange: setInfoVisible,
});

const dismiss = useDismiss(context, {
outsidePressEvent: 'mousedown',
});

const { isMounted, styles } = useTransitionStyles(context);

const { getFloatingProps } = useInteractions([dismiss]);

return (
<Dialog
open={infoVisible}
fullWidth
maxWidth={'xs'}
onClose={() => setInfoVisible(false)}
TransitionComponent={Transition}
>
<DialogTitle>
<p>{Locale.ui_usefulcontrols}</p>
<IconButton className="useful-controls-exit-button" aria-label="close" onClick={() => setInfoVisible(false)}>
<FontAwesomeIcon icon={faTimes} />
</IconButton>
</DialogTitle>
<DialogContent>
<div className="useful-controls-content-wrapper">
<p>
<kbd>RMB</kbd>
<br />
{Locale.ui_rmb}
</p>
<p>
<kbd>ALT + LMB</kbd>
<br />
{Locale.ui_alt_lmb}
</p>
<p>
<kbd>CTRL + LMB</kbd>
<br />
{Locale.ui_ctrl_lmb}
</p>
<p>
<kbd>SHIFT + Drag</kbd>
<br />
{Locale.ui_shift_drag}
</p>
<p>
<kbd>CTRL + SHIFT + LMB</kbd>
<br />
{Locale.ui_ctrl_shift_lmb}
</p>
</div>
</DialogContent>
<DialogActions>
<span onClick={() => setOpen(true)}>🐂</span>
</DialogActions>
<Snackbar
open={open}
onClose={() => setOpen(false)}
autoHideDuration={2000}
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
>
<Alert severity="success" color="info" sx={{ width: '100%' }}>
Made with 🐂 by the Overextended team
</Alert>
</Snackbar>
</Dialog>
<>
{isMounted && (
<FloatingPortal>
<FloatingOverlay lockScroll className="useful-controls-dialog-overlay" data-open={infoVisible} style={styles}>
<FloatingFocusManager context={context}>
<div ref={refs.setFloating} {...getFloatingProps()} className="useful-controls-dialog" style={styles}>
<div className="useful-controls-dialog-title">
<p>{Locale.ui_usefulcontrols || 'Useful controls'}</p>
<div className="useful-controls-dialog-close" onClick={() => setInfoVisible(false)}>
<FontAwesomeIcon icon={faTimes} />
</div>
</div>
<div className="useful-controls-content-wrapper">
<p>
<kbd>RMB</kbd>
<br />
{Locale.ui_rmb}
</p>
<p>
<kbd>ALT + LMB</kbd>
<br />
{Locale.ui_alt_lmb}
</p>
<p>
<kbd>CTRL + LMB</kbd>
<br />
{Locale.ui_ctrl_lmb}
</p>
<p>
<kbd>SHIFT + Drag</kbd>
<br />
{Locale.ui_shift_drag}
</p>
<p>
<kbd>CTRL + SHIFT + LMB</kbd>
<br />
{Locale.ui_ctrl_shift_lmb}
</p>
<div style={{ textAlign: 'right' }}>🐂</div>
</div>
</div>
</FloatingFocusManager>
</FloatingOverlay>
</FloatingPortal>
)}
</>
);
};

Expand Down
50 changes: 37 additions & 13 deletions web/src/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,9 +153,46 @@ button:active {
}

.useful-controls-dialog {
background-color: $mainColor;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: $textColor;
width: 450px;
display: flex;
flex-direction: column;
padding: 16px;
border-radius: 4px;
gap: 16px;
}

.useful-controls-dialog-overlay {
background-color: rgba(0, 0, 0, 0.5);
}

.useful-controls-dialog-title {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
font-size: 18px;
}

.useful-controls-dialog-close {
width: 25px;
height: 25px;
padding: 6px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
&:hover {
background-color: $secondaryColorHighlight;
cursor: pointer;
}
}

.useful-controls-content-wrapper {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -183,20 +220,7 @@ button:active {
}

// Dialog is used fro useful controls window
.MuiDialogContent-root {
background-color: $mainColor;
color: $textColor;
}

.MuiDialogTitle-root {
background-color: $mainColor;
color: $textColor;
}

.MuiDialogActions-root {
background-color: $mainColor;
color: $textColor;
}

// inventory grids
.inventory-grid-wrapper {
Expand Down

0 comments on commit ef107b9

Please sign in to comment.