schalli
bdaa3c8db5
Der Knopf Bearbeiten belegte eine eigene Zeile ueber den Widgets. Die Aktionen rendern jetzt per Portal in einen Einhaengepunkt rechts in der Kopfzeile (HEADER_ACTIONS_SLOT_ID); in der Ansicht nur der Stift, im Bearbeitungsmodus Hintergrund, Widget hinzufuegen und Fertig. Version 1.5.1. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
interface EditModeToggleProps {
|
|
isEditMode: boolean;
|
|
onToggle: () => void;
|
|
}
|
|
|
|
/**
|
|
* Pencil / Checkmark icon button to toggle dashboard edit mode (D-01).
|
|
* Active state (edit mode) uses primary background.
|
|
* Sitzt seit quick-260928-vxe rechts in der dunklen App-Leiste: in der
|
|
* Ansicht nur der Stift (Name per aria-label/Tooltip), im Bearbeitungsmodus
|
|
* der gelbe Knopf „Fertig“.
|
|
*/
|
|
export function EditModeToggle({ isEditMode, onToggle }: EditModeToggleProps) {
|
|
const t = useTranslations('widgets');
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onToggle}
|
|
className={`btn ${isEditMode ? 'btn-primary' : 'btn-appbar btn-icon'}`}
|
|
aria-pressed={isEditMode}
|
|
aria-label={isEditMode ? undefined : t('editShort')}
|
|
title={isEditMode ? t('saveChanges') : t('editMode')}
|
|
>
|
|
{isEditMode ? (
|
|
// Checkmark icon
|
|
<svg
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<polyline points="20 6 9 17 4 12" />
|
|
</svg>
|
|
) : null}
|
|
{isEditMode ? null : (
|
|
// Pencil icon
|
|
<svg
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
|
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
|
</svg>
|
|
)}
|
|
{isEditMode ? t('done') : null}
|
|
</button>
|
|
);
|
|
}
|