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

Added DialogButton to handle mobile.
Some checks are pending
Create docker images (cloud) / Build, push, and deploy (push) Waiting to run
Details
Node.js CI / build (postgresql, 18.18, 10) (push) Waiting to run
Details

Browse source
This commit is contained in:
Mike Cao 2025-10-16 23:59:18 -07:00
parent 036748cdeb
commit 40492ec7c4
32 changed files with 2146 additions and 1807 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/app/(main)/pixels/PixelAddButton.tsx
View file

@ -1,24 +1,19 @@
import { useMessages } from '@/components/hooks';
import { Button, Icon, Modal, Dialog, DialogTrigger, Text } from '@umami/react-zen';
import { Plus } from '@/components/icons';
import { PixelEditForm } from './PixelEditForm';
import { DialogButton } from '@/components/input/DialogButton';
export function PixelAddButton({ teamId }: { teamId?: string }) {
const { formatMessage, labels } = useMessages();
return (
<DialogTrigger>
<Button data-test="button-website-add" variant="primary">
<Icon>
<Plus />
</Icon>
<Text>{formatMessage(labels.addPixel)}</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.addPixel)} style={{ width: 600 }}>
{({ close }) => <PixelEditForm teamId={teamId} onClose={close} />}
</Dialog>
</Modal>
</DialogTrigger>
<DialogButton
icon={<Plus />}
label={formatMessage(labels.addPixel)}
variant="primary"
width="600px"
>
{({ close }) => <PixelEditForm teamId={teamId} onClose={close} />}
</DialogButton>
);
}

51
src/app/(main)/pixels/PixelDeleteButton.tsx
View file

@ -1,9 +1,9 @@
import { Dialog } from '@umami/react-zen';
import { ActionButton } from '@/components/input/ActionButton';
import { Trash } from '@/components/icons';
import { ConfirmationForm } from '@/components/common/ConfirmationForm';
import { messages } from '@/components/messages';
import { useDeleteQuery, useMessages, useModified } from '@/components/hooks';
import { DialogButton } from '@/components/input/DialogButton';
export function PixelDeleteButton({
pixelId,
name,
@ -28,27 +28,30 @@ export function PixelDeleteButton({
};
return (
<ActionButton title={formatMessage(labels.delete)} icon={<Trash />}>
<Dialog title={formatMessage(labels.confirm)} style={{ width: 400 }}>
{({ close }) => (
<ConfirmationForm
message={
<FormattedMessage
{...messages.confirmRemove}
values={{
target: <b>{name}</b>,
}}
/>
}
isLoading={isPending}
error={getErrorMessage(error)}
onConfirm={handleConfirm.bind(null, close)}
onClose={close}
buttonLabel={formatMessage(labels.delete)}
buttonVariant="danger"
/>
)}
</Dialog>
</ActionButton>
<DialogButton
icon={<Trash />}
variant="quiet"
title={formatMessage(labels.confirm)}
width="400px"
>
{({ close }) => (
<ConfirmationForm
message={
<FormattedMessage
{...messages.confirmRemove}
values={{
target: <b>{name}</b>,
}}
/>
}
isLoading={isPending}
error={getErrorMessage(error)}
onConfirm={handleConfirm.bind(null, close)}
onClose={close}
buttonLabel={formatMessage(labels.delete)}
buttonVariant="danger"
/>
)}
</DialogButton>
);
}

20
src/app/(main)/pixels/PixelEditButton.tsx
View file

@ -1,19 +1,21 @@
import { ActionButton } from '@/components/input/ActionButton';
import { Edit } from '@/components/icons';
import { Dialog } from '@umami/react-zen';
import { PixelEditForm } from './PixelEditForm';
import { useMessages } from '@/components/hooks';
import { DialogButton } from '@/components/input/DialogButton';
export function PixelEditButton({ pixelId }: { pixelId: string }) {
const { formatMessage, labels } = useMessages();
return (
<ActionButton title={formatMessage(labels.edit)} icon={<Edit />}>
<Dialog title={formatMessage(labels.pixel)} style={{ width: 600, minHeight: 300 }}>
{({ close }) => {
return <PixelEditForm pixelId={pixelId} onClose={close} />;
}}
</Dialog>
</ActionButton>
<DialogButton
icon={<Edit />}
title={formatMessage(labels.addPixel)}
variant="quiet"
width="600px"
>
{({ close }) => {
return <PixelEditForm pixelId={pixelId} onClose={close} />;
}}
</DialogButton>
);
}