ambiser
/
umami
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Converted popup into modal.

pull/2068/head
Mike Cao 2023-05-24 21:54:49 -07:00
parent fb4dd75e18
commit 5a5127c921
2 changed files with 12 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/pages/reports/funnel/FunnelParameters.js
View File

@ -6,8 +6,8 @@ import {
FormButtons, FormButtons,
FormInput, FormInput,
FormRow, FormRow,
PopupTrigger, ModalTrigger,
Popup, Modal,
SubmitButton, SubmitButton,
Text, Text,
TextField, TextField,
@ -85,29 +85,34 @@ function AddURLButton({ onAdd }) {
const handleChange = e => { const handleChange = e => {
setUrl(e.target.value); setUrl(e.target.value);
}; };
const handleClose = close => {
setUrl('');
close();
};
return ( return (
<PopupTrigger> <ModalTrigger>
<Icon> <Icon>
<Icons.Plus /> <Icons.Plus />
</Icon> </Icon>
<Popup className={styles.popup} position="right" alignment="start"> <Modal>
{close => { {close => {
return ( return (
<Form> <Form>
<FormRow label={formatMessage(labels.url)}> <FormRow label={formatMessage(labels.url)}>
<TextField name="url" value={url} onChange={handleChange} autoComplete="off" /> <TextField name="url" value={url} onChange={handleChange} autoComplete="off" />
</FormRow> </FormRow>
<FormButtons> <FormButtons align="center" flex>
<Button variant="primary" onClick={() => handleAdd(close)}> <Button variant="primary" onClick={() => handleAdd(close)}>
{formatMessage(labels.add)} {formatMessage(labels.add)}
</Button> </Button>
<Button onClick={() => handleClose(close)}>{formatMessage(labels.cancel)}</Button>
</FormButtons> </FormButtons>
</Form> </Form>
); );
}} }}
</Popup> </Modal>
</PopupTrigger> </ModalTrigger>
); );
} }

9
components/pages/reports/funnel/FunnelParameters.module.css
View File

@ -1,12 +1,3 @@
.popup {
background: var(--base50);
padding: 20px;
margin-left: 10px;
border: 1px solid var(--base400);
border-radius: var(--border-radius);
width: 400px;
}
.urls { .urls {
display: flex; display: flex;
flex-direction: column; flex-direction: column;