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

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
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

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

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

@ -41,7 +41,7 @@ export default function TeamEditForm({ teamId, data, onSave, readOnly }) {
};
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)}>
<TextField value={teamId} readOnly allowCopy />
</FormRow>

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

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

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

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

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

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

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

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

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

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

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

@ -20,7 +20,7 @@ export default function WebsiteEditForm({ websiteId, data, onSave }) {
};
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)}>
<TextField value={websiteId} readOnly allowCopy />
</FormRow>