Add dialog descriptions for project rename and delete confirmations
- Introduced `DialogDescription` components in `canvas-app-menu.tsx` and `canvas-card.tsx` to provide clearer context for users when renaming and deleting projects. - Removed redundant paragraph elements in favor of the new dialog descriptions for a cleaner UI experience.
This commit is contained in:
@@ -17,6 +17,7 @@ import { Button } from "@/components/ui/button";
|
|||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
DialogFooter,
|
DialogFooter,
|
||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
@@ -163,6 +164,9 @@ export function CanvasAppMenu({ canvasId }: CanvasAppMenuProps) {
|
|||||||
<DialogContent className="sm:max-w-md" showCloseButton>
|
<DialogContent className="sm:max-w-md" showCloseButton>
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>Projekt umbenennen</DialogTitle>
|
<DialogTitle>Projekt umbenennen</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Gib einen neuen Namen für dein Projekt ein.
|
||||||
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<Input
|
<Input
|
||||||
value={renameValue}
|
value={renameValue}
|
||||||
@@ -196,11 +200,11 @@ export function CanvasAppMenu({ canvasId }: CanvasAppMenuProps) {
|
|||||||
<DialogContent className="sm:max-w-md" showCloseButton>
|
<DialogContent className="sm:max-w-md" showCloseButton>
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>Projekt löschen?</DialogTitle>
|
<DialogTitle>Projekt löschen?</DialogTitle>
|
||||||
</DialogHeader>
|
<DialogDescription>
|
||||||
<p className="text-sm text-muted-foreground">
|
“{canvas?.name ?? "dieses Projekt"}” und alle Knoten werden dauerhaft
|
||||||
„{canvas?.name ?? "dieses Projekt"}“ und alle Knoten werden dauerhaft
|
|
||||||
gelöscht. Das lässt sich nicht rückgängig machen.
|
gelöscht. Das lässt sich nicht rückgängig machen.
|
||||||
</p>
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
<DialogFooter>
|
<DialogFooter>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -10,9 +10,11 @@ import { Button } from "@/components/ui/button";
|
|||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
DialogFooter,
|
DialogFooter,
|
||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
} from "@/components/ui/dialog";
|
} from "@/components/ui/dialog";
|
||||||
import {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
@@ -174,8 +176,14 @@ export default function CanvasCard({ canvas, onNavigate }: CanvasCardProps) {
|
|||||||
<span className="sr-only">Optionen</span>
|
<span className="sr-only">Optionen</span>
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="end">
|
<DropdownMenuContent
|
||||||
<DropdownMenuItem onSelect={handleStartEdit}>
|
align="end"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<DropdownMenuItem
|
||||||
|
onSelect={handleStartEdit}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
<Pencil className="size-4" />
|
<Pencil className="size-4" />
|
||||||
Umbenennen
|
Umbenennen
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
@@ -185,6 +193,7 @@ export default function CanvasCard({ canvas, onNavigate }: CanvasCardProps) {
|
|||||||
onSelect={() => {
|
onSelect={() => {
|
||||||
setDeleteOpen(true);
|
setDeleteOpen(true);
|
||||||
}}
|
}}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
>
|
>
|
||||||
<Trash2 className="size-4" />
|
<Trash2 className="size-4" />
|
||||||
Löschen
|
Löschen
|
||||||
@@ -199,11 +208,11 @@ export default function CanvasCard({ canvas, onNavigate }: CanvasCardProps) {
|
|||||||
<DialogContent className="sm:max-w-md" showCloseButton>
|
<DialogContent className="sm:max-w-md" showCloseButton>
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>Arbeitsbereich löschen?</DialogTitle>
|
<DialogTitle>Arbeitsbereich löschen?</DialogTitle>
|
||||||
</DialogHeader>
|
<DialogDescription>
|
||||||
<p className="text-sm text-muted-foreground">
|
“{canvas.name}” und alle Knoten werden dauerhaft gelöscht. Das
|
||||||
„{canvas.name}“ und alle Knoten werden dauerhaft gelöscht. Das
|
|
||||||
lässt sich nicht rückgängig machen.
|
lässt sich nicht rückgängig machen.
|
||||||
</p>
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
<DialogFooter>
|
<DialogFooter>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
Reference in New Issue
Block a user