m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-06-28 00:37:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

Responsive fixes for settings pages.

Browse Source
This commit is contained in:
Mike Cao 2023-04-12 17:43:08 -07:00
parent 4a1c6f40a6
commit b32ced5501
16 changed files with 97 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/common/HamburgerButton.js
View File

@ -13,32 +13,32 @@ export default function HamburgerButton() {
const menuItems = [ const menuItems = [
{ {
label: formatMessage(labels.dashboard), label: formatMessage(labels.dashboard),
value: '/dashboard', url: '/dashboard',
}, },
{ label: formatMessage(labels.realtime), value: '/realtime' }, { label: formatMessage(labels.realtime), url: '/realtime' },
!cloudMode && { !cloudMode && {
label: formatMessage(labels.settings), label: formatMessage(labels.settings),
value: '/settings', url: '/settings',
children: [ children: [
{ {
label: formatMessage(labels.websites), label: formatMessage(labels.websites),
value: '/settings/websites', url: '/settings/websites',
}, },
{ {
label: formatMessage(labels.teams), label: formatMessage(labels.teams),
value: '/settings/teams', url: '/settings/teams',
}, },
{ {
label: formatMessage(labels.users), label: formatMessage(labels.users),
value: '/settings/users', url: '/settings/users',
}, },
], ],
}, },
{ {
label: formatMessage(labels.profile), label: formatMessage(labels.profile),
value: '/settings/profile', url: '/settings/profile',
}, },
!cloudMode && { label: formatMessage(labels.logout), value: '/logout' }, !cloudMode && { label: formatMessage(labels.logout), url: '/logout' },
].filter(n => n); ].filter(n => n);
const handleClick = () => setActive(state => !state); const handleClick = () => setActive(state => !state);

8
components/common/MobileMenu.js
View File

@ -8,14 +8,14 @@ export default function MobileMenu({ items = [], onClose }) {
const Items = ({ items, className }) => ( const Items = ({ items, className }) => (
<div className={classNames(styles.items, className)}> <div className={classNames(styles.items, className)}>
{items.map(({ label, value, children }) => { {items.map(({ label, url, children }) => {
const selected = pathname === value; const selected = pathname.startsWith(url);
return ( return (
<> <>
<Link <Link
key={value} key={url}
href={value} href={url}
className={classNames(styles.item, { [styles.selected]: selected })} className={classNames(styles.item, { [styles.selected]: selected })}
onClick={onClose} onClick={onClose}
> >

4
components/common/SettingsTable.module.css
View File

@ -1,3 +1,7 @@
.cell {
align-items: center;
}
.row .cell:last-child { .row .cell:last-child {
gap: 10px; gap: 10px;
justify-content: flex-end; justify-content: flex-end;

2
components/layout/PageHeader.module.css
View File

@ -26,7 +26,7 @@
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
gap: 20px; gap: 20px;
line-height: 50px; height: 60px;
} }
.actions { .actions {

2
components/pages/settings/profile/DateRangeSetting.js
View File

@ -12,7 +12,7 @@ export default function DateRangeSetting() {
const handleReset = () => setDateRange(DEFAULT_DATE_RANGE); const handleReset = () => setDateRange(DEFAULT_DATE_RANGE);
return ( return (
<Flexbox width={400} gap={10}> <Flexbox gap={10}>
<DateFilter value={value} startDate={startDate} endDate={endDate} /> <DateFilter value={value} startDate={startDate} endDate={endDate} />
<Button onClick={handleReset}>{formatMessage(labels.reset)}</Button> <Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
</Flexbox> </Flexbox>

2
components/pages/settings/profile/LanguageSetting.js
View File

@ -14,7 +14,7 @@ export default function LanguageSetting() {
const renderValue = value => languages[value].label; const renderValue = value => languages[value].label;
return ( return (
<Flexbox width={400} gap={10}> <Flexbox gap={10}>
<Dropdown <Dropdown
items={options} items={options}
value={locale} value={locale}

5
components/pages/settings/profile/TimezoneSetting.js
View File

@ -12,12 +12,13 @@ export default function TimezoneSetting() {
const handleReset = () => saveTimezone(getTimezone()); const handleReset = () => saveTimezone(getTimezone());
return ( return (
<Flexbox width={400} gap={10}> <Flexbox gap={10}>
<Dropdown <Dropdown
items={options} items={options}
value={timezone} value={timezone}
onChange={saveTimezone} onChange={saveTimezone}
menuProps={{ style: { height: 300, width: 300 } }} style={{ flex: 1 }}
menuProps={{ style: { height: 300 } }}
> >
{item => <Item key={item}>{item}</Item>} {item => <Item key={item}>{item}</Item>}
</Dropdown> </Dropdown>

2
components/pages/settings/teams/TeamEditForm.js
View File

@ -41,7 +41,7 @@ export default function TeamEditForm({ teamId, data, onSave, readOnly }) {
}; };
return ( return (
<Form ref={ref} onSubmit={handleSubmit} error={error} values={data} style={{ width: 600 }}> <Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
<FormRow label={formatMessage(labels.teamId)}> <FormRow label={formatMessage(labels.teamId)}>
<TextField value={teamId} readOnly allowCopy /> <TextField value={teamId} readOnly allowCopy />
</FormRow> </FormRow>

2
components/pages/settings/teams/TeamMembers.js
View File

@ -12,7 +12,7 @@ export default function TeamMembers({ teamId, readOnly }) {
); );
if (isLoading) { if (isLoading) {
return <Loading icon="dots" position="block" />; return <Loading icon="dots" style={{ minHeight: 300 }} />;
} }
const handleSave = async () => { const handleSave = async () => {

87
components/pages/settings/teams/TeamMembersTable.js
View File

@ -1,72 +1,45 @@
import useMessages from 'hooks/useMessages'; import useMessages from 'hooks/useMessages';
import useUser from 'hooks/useUser'; import useUser from 'hooks/useUser';
import { ROLES } from 'lib/constants'; import { ROLES } from 'lib/constants';
import {
Flexbox,
Table,
TableBody,
TableCell,
TableColumn,
TableHeader,
TableRow,
} from 'react-basics';
import TeamMemberRemoveButton from './TeamMemberRemoveButton'; import TeamMemberRemoveButton from './TeamMemberRemoveButton';
import SettingsTable from 'components/common/SettingsTable';
export default function TeamMembersTable({ data = [], onSave, readOnly }) { export default function TeamMembersTable({ data = [], onSave, readOnly }) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { user } = useUser(); const { user } = useUser();
const columns = [ const columns = [
{ name: 'username', label: formatMessage(labels.username), style: { flex: 2 } }, { name: 'username', label: formatMessage(labels.username) },
{ name: 'role', label: formatMessage(labels.role), style: { flex: 1 } }, { name: 'role', label: formatMessage(labels.role) },
{ name: 'action', label: '', style: { flex: 1 } }, { name: 'action', label: ' ' },
]; ];
return ( const cellRender = (row, data, key) => {
<Table columns={columns} rows={data}> if (key === 'username') {
<TableHeader> return row?.user?.username;
{(column, index) => { }
return ( if (key === 'role') {
<TableColumn key={index} style={{ ...column.style }}> return formatMessage(
{column.label} labels[Object.keys(ROLES).find(key => ROLES[key] === row.role) || labels.unknown],
</TableColumn> );
); }
}} return data[key];
</TableHeader> };
<TableBody>
{(row, keys, rowIndex) => {
const rowData = {
username: row?.user?.username,
role: formatMessage(
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role) || labels.unknown],
),
action: !readOnly && (
<Flexbox flex={1} justifyContent="end">
<TeamMemberRemoveButton
teamId={row.teamId}
userId={row.userId}
disabled={user.id === row?.user?.id || row.role === ROLES.teamOwner}
onSave={onSave}
></TeamMemberRemoveButton>
</Flexbox>
),
};
return ( return (
<TableRow key={rowIndex} data={rowData} keys={keys}> <SettingsTable data={data} columns={columns} cellRender={cellRender}>
{(data, key, colIndex) => { {row => {
return ( return (
<TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}> !readOnly && (
<Flexbox flex={1} alignItems="center"> <TeamMemberRemoveButton
{data[key]} teamId={row.teamId}
</Flexbox> userId={row.userId}
</TableCell> disabled={user.id === row?.user?.id || row.role === ROLES.teamOwner}
); onSave={onSave}
}} />
</TableRow> )
); );
}} }}
</TableBody> </SettingsTable>
</Table>
); );
} }

12
components/pages/settings/teams/TeamWebsites.js
View File

@ -9,7 +9,6 @@ import {
Text, Text,
useToast, useToast,
} from 'react-basics'; } from 'react-basics';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable'; import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable';
import TeamAddWebsiteForm from 'components/pages/settings/teams/TeamAddWebsiteForm'; import TeamAddWebsiteForm from 'components/pages/settings/teams/TeamAddWebsiteForm';
import useApi from 'hooks/useApi'; import useApi from 'hooks/useApi';
@ -25,7 +24,7 @@ export default function TeamWebsites({ teamId }) {
const hasData = data && data.length !== 0; const hasData = data && data.length !== 0;
if (isLoading) { if (isLoading) {
return <Loading icon="dots" position="block" />; return <Loading icon="dots" style={{ minHeight: 300 }} />;
} }
const handleSave = async () => { const handleSave = async () => {
@ -50,15 +49,8 @@ export default function TeamWebsites({ teamId }) {
return ( return (
<div> <div>
{toast} {toast}
{hasData && ( <ActionForm description={formatMessage(messages.teamWebsitesInfo)}>{addButton}</ActionForm>
<ActionForm description={formatMessage(messages.teamWebsitesInfo)}>{addButton}</ActionForm>
)}
{hasData && <TeamWebsitesTable teamId={teamId} data={data} onSave={handleSave} />} {hasData && <TeamWebsitesTable teamId={teamId} data={data} onSave={handleSave} />}
{!hasData && (
<EmptyPlaceholder message={formatMessage(messages.noTeamWebsites)}>
{addButton}
</EmptyPlaceholder>
)}
</div> </div>
); );
} }

102
components/pages/settings/teams/TeamWebsitesTable.js
View File

@ -1,23 +1,14 @@
import useMessages from 'hooks/useMessages'; import useMessages from 'hooks/useMessages';
import useUser from 'hooks/useUser'; import useUser from 'hooks/useUser';
import Link from 'next/link'; import Link from 'next/link';
import { import { Button, Icon, Icons, Text } from 'react-basics';
Button,
Flexbox,
Icon,
Icons,
Table,
TableBody,
TableCell,
TableColumn,
TableHeader,
TableRow,
Text,
} from 'react-basics';
import TeamWebsiteRemoveButton from './TeamWebsiteRemoveButton'; import TeamWebsiteRemoveButton from './TeamWebsiteRemoveButton';
import SettingsTable from 'components/common/SettingsTable';
import useConfig from 'hooks/useConfig';
export default function TeamWebsitesTable({ data = [], onSave }) { export default function TeamWebsitesTable({ data = [], onSave }) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { openExternal } = useConfig();
const { user } = useUser(); const { user } = useUser();
const columns = [ const columns = [
{ name: 'name', label: formatMessage(labels.name) }, { name: 'name', label: formatMessage(labels.name) },
@ -26,62 +17,37 @@ export default function TeamWebsitesTable({ data = [], onSave }) {
]; ];
return ( return (
<Table columns={columns} rows={data}> <SettingsTable columns={columns} data={data}>
<TableHeader> {row => {
{(column, index) => { const { teamId } = row;
return ( const { id: websiteId, name, domain, userId } = row.website;
<TableColumn key={index} style={{ ...column.style }}> const { teamUser } = row.team;
{column.label} const owner = teamUser[0];
</TableColumn> const canRemove = user.id === userId || user.id === owner.userId;
);
}}
</TableHeader>
<TableBody>
{(row, keys, rowIndex) => {
const { teamId } = row;
const { id: websiteId, name, domain, userId } = row.website;
const { teamUser } = row.team;
const owner = teamUser[0];
const canRemove = user.id === userId || user.id === owner.userId;
row.name = name; row.name = name;
row.domain = domain; row.domain = domain;
row.action = ( return (
<Flexbox flex={1} justifyContent="end" gap={10}> <>
<Link href={`/websites/${websiteId}`} target="_blank"> <Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
<Button> <Button>
<Icon> <Icon>
<Icons.External /> <Icons.External />
</Icon> </Icon>
<Text>{formatMessage(labels.view)}</Text> <Text>{formatMessage(labels.view)}</Text>
</Button> </Button>
</Link> </Link>
{canRemove && ( {canRemove && (
<TeamWebsiteRemoveButton <TeamWebsiteRemoveButton
teamId={teamId} teamId={teamId}
websiteId={websiteId} websiteId={websiteId}
onSave={onSave} onSave={onSave}
></TeamWebsiteRemoveButton> ></TeamWebsiteRemoveButton>
)} )}
</Flexbox> </>
); );
}}
return ( </SettingsTable>
<TableRow key={rowIndex} data={row} keys={keys}>
{(data, key, colIndex) => {
return (
<TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}>
<Flexbox flex={1} alignItems="center">
{data[key]}
</Flexbox>
</TableCell>
);
}}
</TableRow>
);
}}
</TableBody>
</Table>
); );
} }

2
components/pages/settings/users/UserWebsites.js
View File

@ -12,7 +12,7 @@ export default function UserWebsites({ userId }) {
const hasData = data && data.length !== 0; const hasData = data && data.length !== 0;
if (isLoading) { if (isLoading) {
return <Loading icon="dots" position="block" />; return <Loading icon="dots" style={{ minHeight: 300 }} />;
} }
return ( return (

2
components/pages/settings/websites/WebsiteEditForm.js
View File

@ -20,7 +20,7 @@ export default function WebsiteEditForm({ websiteId, data, onSave }) {
}; };
return ( return (
<Form ref={ref} onSubmit={handleSubmit} error={error} values={data} style={{ width: 600 }}> <Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
<FormRow label={formatMessage(labels.websiteId)}> <FormRow label={formatMessage(labels.websiteId)}>
<TextField value={websiteId} readOnly allowCopy /> <TextField value={websiteId} readOnly allowCopy />
</FormRow> </FormRow>

2
package.json
View File

@ -94,7 +94,7 @@
"node-fetch": "^3.2.8", "node-fetch": "^3.2.8",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"react": "^18.2.0", "react": "^18.2.0",
"react-basics": "^0.76.0", "react-basics": "^0.77.0",
"react-beautiful-dnd": "^13.1.0", "react-beautiful-dnd": "^13.1.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-intl": "^5.24.7", "react-intl": "^5.24.7",

8
yarn.lock
View File

@ -6727,10 +6727,10 @@ rc@^1.2.7:
minimist "^1.2.0" minimist "^1.2.0"
strip-json-comments "~2.0.1" strip-json-comments "~2.0.1"
react-basics@^0.76.0: react-basics@^0.77.0:
version "0.76.0" version "0.77.0"
resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.76.0.tgz#7369ba68409388f458a2ecf73a86603884fc0711" resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.77.0.tgz#31d35b4db8119c699eeab24a7cab10a613b549f4"
integrity sha512-RRtudldMecbuT/ap1giy6OdNc1t8gfGdyfXDTy4x99PWN9kvfS8MU11cfyQif8F0C6v9wKFu2taxklQQarE+mw== integrity sha512-L14dZqlg7P9m700OvND1fsdZA/vvLH3W0Ntw5Oyk2RxE47K6oMESSuPhDi1yC2QjDYwFdKzGSsgJGfWlc++Kww==
dependencies: dependencies:
classnames "^2.3.1" classnames "^2.3.1"
date-fns "^2.29.3" date-fns "^2.29.3"