mirror of
https://github.com/umami-software/umami.git
synced 2026-02-04 04:37:11 +01:00
Styling for all forms.
This commit is contained in:
parent
c98f324c22
commit
3650204519
28 changed files with 36 additions and 33 deletions
|
|
@ -2,7 +2,7 @@ import esbuild from 'esbuild';
|
|||
|
||||
esbuild
|
||||
.build({
|
||||
entryPoints: ['src/generated/prisma/client.ts'], // Adjust this to your entry file
|
||||
entryPoints: ['src/generated/prisma/client.js'], // Adjust this to your entry file
|
||||
bundle: true, // Bundle all files into one (optional)
|
||||
outfile: 'dist/generated/prisma/client.js', // Output file
|
||||
platform: 'node', // For Node.js compatibility
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export function AdminLayout({ children }: { children: ReactNode }) {
|
|||
<SideMenu items={items} selectedKey={value} />
|
||||
</Column>
|
||||
<Column>
|
||||
<Panel>{children}</Panel>
|
||||
<Panel minHeight="300px">{children}</Panel>
|
||||
</Column>
|
||||
</Grid>
|
||||
</Column>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export function AdminTeamsTable({
|
|||
|
||||
return (
|
||||
<MenuButton>
|
||||
<MenuItem href={`/admin/users/${id}`} data-test="link-button-edit">
|
||||
<MenuItem href={`/admin/teams/${id}`} data-test="link-button-edit">
|
||||
<Row alignItems="center" gap>
|
||||
<Icon>
|
||||
<Edit />
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export function UserAddButton({ onSave }: { onSave?: () => void }) {
|
|||
<Text>{formatMessage(labels.createUser)}</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.createUser)}>
|
||||
<Dialog title={formatMessage(labels.createUser)} style={{ width: 400 }}>
|
||||
{({ close }) => <UserAddForm onSave={handleSave} onClose={close} />}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export function UserDeleteButton({
|
|||
<Text>{formatMessage(labels.delete)}</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.deleteUser)}>
|
||||
<Dialog title={formatMessage(labels.deleteUser)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<UserDeleteForm userId={userId} username={username} onSave={onDelete} onClose={close} />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
|
|||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={getMessage(error)} values={user} style={{ width: 300 }}>
|
||||
<Form onSubmit={handleSubmit} error={getMessage(error)} values={user}>
|
||||
<FormField name="username" label={formatMessage(labels.username)}>
|
||||
<TextField data-test="input-username" />
|
||||
</FormField>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export function UserSettings({ userId }: { userId: string }) {
|
|||
<Tab id="details">{formatMessage(labels.details)}</Tab>
|
||||
<Tab id="websites">{formatMessage(labels.websites)}</Tab>
|
||||
</TabList>
|
||||
<TabPanel id="details">
|
||||
<TabPanel id="details" style={{ width: 500 }}>
|
||||
<UserEditForm userId={userId} />
|
||||
</TabPanel>
|
||||
<TabPanel id="websites">
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export function BoardAddButton() {
|
|||
<Text>{formatMessage(labels.addBoard)}</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.addBoard)}>
|
||||
<Dialog title={formatMessage(labels.addBoard)} style={{ width: 400 }}>
|
||||
{({ close }) => <BoardAddForm teamId={teamId} onSave={handleSave} onClose={close} />}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export function PasswordChangeButton() {
|
|||
<Text>{formatMessage(labels.changePassword)}</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.changePassword)}>
|
||||
<Dialog title={formatMessage(labels.changePassword)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<Column width="300px">
|
||||
<PasswordEditForm onSave={handleSave} onClose={close} />
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose:
|
|||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error} style={{ minWidth: 300 }}>
|
||||
<Form onSubmit={handleSubmit} error={error}>
|
||||
<FormField name="name" label={formatMessage(labels.name)}>
|
||||
<TextField autoComplete="off" />
|
||||
</FormField>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose:
|
|||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error} style={{ minWidth: 300 }}>
|
||||
<Form onSubmit={handleSubmit} error={error}>
|
||||
<FormField
|
||||
label={formatMessage(labels.accessCode)}
|
||||
name="accessCode"
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName
|
|||
<Text>{formatMessage(labels.leave)}</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.leaveTeam)}>
|
||||
<Dialog title={formatMessage(labels.leaveTeam)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<TeamLeaveForm
|
||||
teamId={teamId}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export function TeamsAddButton({ onSave }: { onSave?: () => void }) {
|
|||
<Text>{formatMessage(labels.createTeam)}</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.createTeam)}>
|
||||
<Dialog title={formatMessage(labels.createTeam)} style={{ width: 400 }}>
|
||||
{({ close }) => <TeamAddForm onSave={handleSave} onClose={close} />}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export function TeamsJoinButton() {
|
|||
<Text>{formatMessage(labels.joinTeam)}</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.joinTeam)}>
|
||||
<Dialog title={formatMessage(labels.joinTeam)} style={{ width: 400 }}>
|
||||
{({ close }) => <TeamJoinForm onSave={handleJoin} onClose={close} />}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export function TeamDetails({ teamId }: { teamId: string }) {
|
|||
<Tab id="websites">{formatMessage(labels.websites)}</Tab>
|
||||
{isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
|
||||
</TabList>
|
||||
<TabPanel id="details">
|
||||
<TabPanel id="details" style={{ width: 500 }}>
|
||||
<TeamEditForm teamId={teamId} allowEdit={canEdit} />
|
||||
</TabPanel>
|
||||
<TabPanel id="members">
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export function TeamEditForm({
|
|||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error} defaultValues={{ ...team }} style={{ width: 400 }}>
|
||||
<Form onSubmit={handleSubmit} error={error} defaultValues={{ ...team }}>
|
||||
{({ setValue }) => {
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export function TeamManage({ teamId }: { teamId: string }) {
|
|||
<DialogTrigger>
|
||||
<Button variant="danger">{formatMessage(labels.delete)}</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.deleteTeam)}>
|
||||
<Dialog title={formatMessage(labels.deleteTeam)} style={{ width: 400 }}>
|
||||
{({ close }) => <TeamDeleteForm teamId={teamId} onSave={handleLeave} onClose={close} />}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export function TeamMemberEditButton({
|
|||
</Row>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.editMember)}>
|
||||
<Dialog title={formatMessage(labels.editMember)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<TeamMemberEditForm
|
||||
teamId={teamId}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export function TeamMemberEditForm({
|
|||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error} defaultValues={{ role }} style={{ minWidth: 400 }}>
|
||||
<Form onSubmit={handleSubmit} error={error} defaultValues={{ role }}>
|
||||
<FormField
|
||||
name="role"
|
||||
rules={{ required: formatMessage(labels.required) }}
|
||||
|
|
|
|||
|
|
@ -41,11 +41,11 @@ export function TeamMemberRemoveButton({
|
|||
</Icon>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.removeMember)}>
|
||||
<Dialog title={formatMessage(labels.removeMember)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<ConfirmationForm
|
||||
message={formatMessage(messages.confirmRemove, {
|
||||
target: <b key={messages.confirmRemove.id}>{userName}</b>,
|
||||
target: userName,
|
||||
})}
|
||||
isLoading={isPending}
|
||||
error={error}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?:
|
|||
<Text>{formatMessage(labels.addWebsite)}</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.addWebsite)}>
|
||||
<Dialog title={formatMessage(labels.addWebsite)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<Column width="300px">
|
||||
<WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
|
|||
<DialogTrigger>
|
||||
<Button isDisabled={!canTransferWebsite}>{formatMessage(labels.transfer)}</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.transferWebsite)}>
|
||||
<Dialog title={formatMessage(labels.transferWebsite)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<WebsiteTransferForm websiteId={websiteId} onSave={handleSave} onClose={close} />
|
||||
)}
|
||||
|
|
@ -72,7 +72,7 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
|
|||
<DialogTrigger>
|
||||
<Button>{formatMessage(labels.reset)}</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.resetWebsite)}>
|
||||
<Dialog title={formatMessage(labels.resetWebsite)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />
|
||||
)}
|
||||
|
|
@ -90,7 +90,7 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
|
|||
{formatMessage(labels.delete)}
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.deleteWebsite)}>
|
||||
<Dialog title={formatMessage(labels.deleteWebsite)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<WebsiteDeleteForm websiteId={websiteId} onSave={handleSave} onClose={close} />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
|
|||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error} values={website} style={{ width: 400 }}>
|
||||
<Form onSubmit={handleSubmit} error={error} values={website}>
|
||||
<FormField name="id" label={formatMessage(labels.websiteId)}>
|
||||
<TextField data-test="text-field-websiteId" value={website?.id} isReadOnly allowCopy />
|
||||
</FormField>
|
||||
|
|
|
|||
|
|
@ -37,13 +37,13 @@ export function WebsiteSettings({
|
|||
<Tab id="share"> {formatMessage(labels.shareUrl)}</Tab>
|
||||
<Tab id="manage">{formatMessage(labels.manage)}</Tab>
|
||||
</TabList>
|
||||
<TabPanel id="details">
|
||||
<TabPanel id="details" style={{ width: 500 }}>
|
||||
<WebsiteEditForm websiteId={websiteId} />
|
||||
</TabPanel>
|
||||
<TabPanel id="tracking">
|
||||
<WebsiteTrackingCode websiteId={websiteId} />
|
||||
</TabPanel>
|
||||
<TabPanel id="share">
|
||||
<TabPanel id="share" style={{ width: 500 }}>
|
||||
<WebsiteShareForm websiteId={websiteId} shareId={website.shareId} />
|
||||
</TabPanel>
|
||||
<TabPanel id="manage">
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ const ShareButton = ({ websiteId, shareId }) => {
|
|||
<Text>Share</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.share)} style={{ width: 600 }}>
|
||||
<Dialog title={formatMessage(labels.share)} style={{ width: 400 }}>
|
||||
{({ close }) => {
|
||||
return <WebsiteShareForm websiteId={websiteId} shareId={shareId} onClose={close} />;
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const FieldsButton = ({ value, onChange }) => {
|
|||
<Text>Fields</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.fields)}>
|
||||
<Dialog title={formatMessage(labels.fields)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<FieldSelectForm selectedFields={value} onChange={onChange} onClose={close} />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -25,9 +25,7 @@ export function ConfirmationForm({
|
|||
|
||||
return (
|
||||
<Form onSubmit={onConfirm} error={error}>
|
||||
<Row marginY="4" gap="2">
|
||||
{message}
|
||||
</Row>
|
||||
<Row marginY="4">{message}</Row>
|
||||
<FormButtons>
|
||||
<Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
|
||||
<FormSubmitButton
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { useMessages, useNavigation } from '@/components/hooks';
|
|||
import { Pager } from '@/components/common/Pager';
|
||||
import { LoadingPanel } from '@/components/common/LoadingPanel';
|
||||
import { PageResult } from '@/lib/types';
|
||||
import { Empty } from '@/components/common/Empty';
|
||||
|
||||
const DEFAULT_SEARCH_DELAY = 600;
|
||||
|
||||
|
|
@ -46,6 +47,10 @@ export function DataGrid({
|
|||
[search],
|
||||
);
|
||||
|
||||
if (data?.data?.length === 0) {
|
||||
return <Empty />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Column gap="4" minHeight="300px">
|
||||
{allowSearch && (data || search) && (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue