fix(wizard): fix UI/UX and usability glitches
- constrain viewport height on wizard routes in HeaderWrapper - remove nested scrollbar in step-software - add active module glows and tooltips for locked licenses - show device name badge in step 3 card header when editing - update main action button text in summary sidebar when editing - implement double-click inline delete confirmation in step-summary - animate customer accordion and add tab-index key bindings
This commit is contained in:
@@ -29,6 +29,7 @@ interface StepSoftwareProps {
|
||||
/** Modul-IDs, die bereits lizenziert sind (Upgrade-Modus) */
|
||||
existingModuleIds?: string[]
|
||||
activeCategoryId: string | null
|
||||
editingDeviceName?: string | null
|
||||
}
|
||||
|
||||
export function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) {
|
||||
@@ -52,6 +53,7 @@ export function StepSoftware({
|
||||
billingBadgeClass,
|
||||
existingModuleIds = [],
|
||||
activeCategoryId,
|
||||
editingDeviceName = null,
|
||||
}: StepSoftwareProps) {
|
||||
const currentCategory = visibleCategories.find(c => c.id === activeCategoryId) ?? visibleCategories[0] ?? null
|
||||
|
||||
@@ -69,15 +71,22 @@ export function StepSoftware({
|
||||
return (
|
||||
<Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl">
|
||||
<CardHeader className="border-b border-white/5 pb-4">
|
||||
<CardTitle className="text-xl flex items-center gap-2 text-white font-bold">
|
||||
<ShoppingCart className="w-5 h-5 text-primary" />
|
||||
Optionen wählen
|
||||
<CardTitle className="text-xl flex items-center justify-between gap-2 text-white font-bold flex-wrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<ShoppingCart className="w-5 h-5 text-primary" />
|
||||
<span>Optionen wählen</span>
|
||||
</div>
|
||||
{editingDeviceName && (
|
||||
<Badge className="bg-amber-500/20 text-amber-400 border border-amber-500/30 text-xs font-bold gap-1 px-2.5 py-1 rounded-lg animate-pulse shrink-0">
|
||||
✏️ Bearbeite Kasse: "{editingDeviceName}"
|
||||
</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-slate-400">
|
||||
Passen Sie die Konfiguration für {currentCategory.name} an.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 overflow-y-auto pt-6 space-y-6">
|
||||
<CardContent className="flex-1 pt-6 space-y-6">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={currentCategory.id}
|
||||
@@ -260,13 +269,14 @@ export function StepSoftware({
|
||||
return (
|
||||
<div
|
||||
key={module.id}
|
||||
title={isExistingLicense ? "Dieses Modul ist auf dieser Kasse bereits aktiv und dauerhaft lizenziert." : undefined}
|
||||
className={`flex flex-col p-4 rounded-xl border transition-all duration-200 ${
|
||||
isExistingLicense
|
||||
? 'border-primary/20 bg-primary/5 opacity-75'
|
||||
: disabled
|
||||
? 'border-white/5 bg-white/5 opacity-40'
|
||||
: checked
|
||||
? 'border-primary/30 bg-primary/5'
|
||||
? 'border-primary bg-primary/10 shadow-[0_0_15px_rgba(59,130,246,0.15)] text-white'
|
||||
: 'border-white/5 bg-white/5 hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user