m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-06-23 01:36:23 +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 = [
{
label: formatMessage(labels.dashboard),
value: '/dashboard',
url: '/dashboard',
},
{ label: formatMessage(labels.realtime), value: '/realtime' },
{ label: formatMessage(labels.realtime), url: '/realtime' },
!cloudMode && {
label: formatMessage(labels.settings),
value: '/settings',
url: '/settings',
children: [
{
label: formatMessage(labels.websites),
value: '/settings/websites',
url: '/settings/websites',
},
{
label: formatMessage(labels.teams),
value: '/settings/teams',
url: '/settings/teams',
},
{
label: formatMessage(labels.users),
value: '/settings/users',
url: '/settings/users',
},
],
},
{
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);
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 }) => (
<div className={classNames(styles.items, className)}>
{items.map(({ label, value, children }) => {
const selected = pathname === value;
{items.map(({ label, url, children }) => {
const selected = pathname.startsWith(url);
return (
<>
<Link
key={value}
href={value}
key={url}
href={url}
className={classNames(styles.item, { [styles.selected]: selected })}
onClick={onClose}
>

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

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

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

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

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>

2
package.json
View File

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

8
yarn.lock
View File

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