watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-07 06:07:17 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Fixed sticky header scrolling. Updated settings button.

Browse source
This commit is contained in:
Mike Cao 2023-03-03 12:37:26 -08:00
parent 5262d19c8b
commit bb99b3eba5
16 changed files with 109 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

64
components/input/SettingsButton.js
View file

@ -1,49 +1,33 @@
import { useRef, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import TimezoneSetting from '../pages/settings/profile/TimezoneSetting';
import DateRangeSetting from '../pages/settings/profile/DateRangeSetting';
import { Button, Icon } from 'react-basics';
import { useIntl } from 'react-intl';
import { Button, Icon, Tooltip, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
import Icons from 'components/icons';
import { labels } from 'components/messages';
import styles from './SettingsButton.module.css';
import Gear from 'assets/gear.svg';
import useDocumentClick from '../../hooks/useDocumentClick';
export default function SettingsButton() {
const [show, setShow] = useState(false);
const ref = useRef();
function handleClick() {
setShow(state => !state);
}
useDocumentClick(e => {
if (!ref.current?.contains(e.target)) {
setShow(false);
}
});
const { formatMessage } = useIntl();
return (
<div className={styles.button} ref={ref}>
<Button variant="light" onClick={handleClick}>
<Icon>
<Gear />
</Icon>
</Button>
{show && (
<div className={styles.panel}>
<dt>
<FormattedMessage id="label.timezone" defaultMessage="Timezone" />
</dt>
<dd>
<PopupTrigger>
<Tooltip label={formatMessage(labels.settings)} position="bottom">
<Button variant="quiet">
<Icon>
<Icons.Gear />
</Icon>
</Button>
</Tooltip>
<Popup className={styles.popup} position="bottom" alignment="end">
<Form>
<FormRow label={formatMessage(labels.timezone)}>
<TimezoneSetting />
</dd>
<dt>
<FormattedMessage id="label.default-date-range" defaultMessage="Default date range" />
</dt>
<dd>
</FormRow>
<FormRow label={formatMessage(labels.defaultDateRange)}>
<DateRangeSetting />
</dd>
</div>
)}
</div>
</FormRow>
</Form>
</Popup>
</PopupTrigger>
);
}