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

Refactored layout. Added NavBar component.

Browse source
This commit is contained in:
Mike Cao 2023-01-18 15:05:39 -08:00
parent fad38dc180
commit 1d9c3133f0
56 changed files with 601 additions and 429 deletions
Download patch file Download diff file Expand all files Collapse all files

21
components/pages/settings/profile/DateRangeSetting.js Normal file
View file

@ -0,0 +1,21 @@
import { FormattedMessage } from 'react-intl';
import DateFilter from 'components/common/DateFilter';
import { Button, Flexbox } from 'react-basics';
import useDateRange from 'hooks/useDateRange';
import { DEFAULT_DATE_RANGE } from 'lib/constants';
export default function DateRangeSetting() {
const [dateRange, setDateRange] = useDateRange();
const { startDate, endDate, value } = dateRange;
const handleReset = () => setDateRange(DEFAULT_DATE_RANGE);
return (
<Flexbox width={400} gap={10}>
<DateFilter value={value} startDate={startDate} endDate={endDate} onChange={setDateRange} />
<Button onClick={handleReset}>
<FormattedMessage id="label.reset" defaultMessage="Reset" />
</Button>
</Flexbox>
);
}

34
components/pages/settings/profile/LanguageSetting.js Normal file
View file

@ -0,0 +1,34 @@
import { useIntl, defineMessages } from 'react-intl';
import { Button, Dropdown, Item, Flexbox } from 'react-basics';
import useLocale from 'hooks/useLocale';
import { DEFAULT_LOCALE } from 'lib/constants';
import { languages } from 'lib/lang';
const messages = defineMessages({
reset: { id: 'label.reset', defaultMessage: 'Reset' },
});
export default function LanguageSetting() {
const { formatMessage } = useIntl();
const { locale, saveLocale } = useLocale();
const options = Object.keys(languages);
const handleReset = () => saveLocale(DEFAULT_LOCALE);
const renderValue = value => languages[value].label;
return (
<Flexbox width={400} gap={10}>
<Dropdown
items={options}
value={locale}
renderValue={renderValue}
onChange={saveLocale}
menuProps={{ style: { height: 300, width: 300 } }}
>
{item => <Item key={item}>{languages[item].label}</Item>}
</Dropdown>
<Button onClick={handleReset}>{formatMessage(messages.reset)}</Button>
</Flexbox>
);
}

46
components/pages/settings/profile/ProfileDetails.js Normal file
View file

@ -0,0 +1,46 @@
import { Form, FormRow } from 'react-basics';
import { useIntl, defineMessages } from 'react-intl';
import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
import LanguageSetting from 'components/pages/settings/profile/LanguageSetting';
import ThemeSetting from 'components/buttons/ThemeSetting';
import useUser from 'hooks/useUser';
const messages = defineMessages({
username: { id: 'label.username', defaultMessage: 'Username' },
role: { id: 'label.role', defaultMessage: 'Role' },
timezone: { id: 'label.timezone', defaultMessage: 'Timezone' },
dateRange: { id: 'label.default-date-range', defaultMessage: 'Default date range' },
language: { id: 'label.language', defaultMessage: 'Language' },
theme: { id: 'label.theme', defaultMessage: 'Theme' },
});
export default function ProfileDetails() {
const { user } = useUser();
const { formatMessage } = useIntl();
if (!user) {
return null;
}
const { username, role } = user;
return (
<Form>
<FormRow label={formatMessage(messages.username)}>{username}</FormRow>
<FormRow label={formatMessage(messages.role)}>{role}</FormRow>
<FormRow label={formatMessage(messages.language)} inline>
<LanguageSetting />
</FormRow>
<FormRow label={formatMessage(messages.timezone)} inline>
<TimezoneSetting />
</FormRow>
<FormRow label={formatMessage(messages.dateRange)} inline>
<DateRangeSetting />
</FormRow>
<FormRow label={formatMessage(messages.theme)}>
<ThemeSetting />
</FormRow>
</Form>
);
}

3
components/pages/settings/profile/ProfileDetails.module.css Normal file
View file

@ -0,0 +1,3 @@
.list dd {
display: flex;
}

2
components/pages/settings/profile/ProfileSettings.js
View file

@ -1,6 +1,6 @@
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import ProfileDetails from 'components/settings/ProfileDetails';
import ProfileDetails from 'components/pages/settings/profile/ProfileDetails';
import { useState } from 'react';
import { Breadcrumbs, Icon, Item, useToast, Modal, Button } from 'react-basics';
import UserPasswordForm from 'components/pages/settings/users/UserPasswordForm';

31
components/pages/settings/profile/TimezoneSetting.js Normal file
View file

@ -0,0 +1,31 @@
import { Dropdown, Item, Button, Flexbox } from 'react-basics';
import { useIntl, defineMessages } from 'react-intl';
import { listTimeZones } from 'timezone-support';
import useTimezone from 'hooks/useTimezone';
import { getTimezone } from 'lib/date';
const messages = defineMessages({
reset: { id: 'label.reset', defaultMessage: 'Reset' },
});
export default function TimezoneSetting() {
const { formatMessage } = useIntl();
const [timezone, saveTimezone] = useTimezone();
const options = listTimeZones();
const handleReset = () => saveTimezone(getTimezone());
return (
<Flexbox width={400} gap={10}>
<Dropdown
items={options}
value={timezone}
onChange={saveTimezone}
menuProps={{ style: { height: 300, width: 300 } }}
>
{item => <Item key={item}>{item}</Item>}
</Dropdown>
<Button onClick={handleReset}>{formatMessage(messages.reset)}</Button>
</Flexbox>
);
}