Files
RecipesCam/docker/frontend/src/ui/ClearPhotoModal.tsx
T
3dtours f9a40a9e1c web: the histogram opens top-left, and CLEAR asks before it forgets
The histogram used to park itself in the top-right corner on the first
paint; it now starts at the top-left of the photo and is dragged from
there, the way the rest of the overlay is. Nothing else changed in it —
same drag, same clamping, same resize.

The stage also gains a CLEAR button, sitting before the picker button,
which is now OPEN PHOTO. CLEAR takes the photo off the stage, but not
before asking: SAVE PHOTO files it first and only then clears, EXPORT
IMAGE writes the JPEG and then clears, CLEAR WITHOUT SAVING drops it
there and then, and CANCEL leaves everything alone. Saving from that
modal resumes the clear once the file has really landed — a guest, a
capped account or a cancelled name prompt never loses the frame.

Clearing forgets the working photo (source, preview, GPS, ISO, and the
IndexedDB copy session.ts now deletes), while the look, the crop and the
undo history stay put, so the next photo opens on the same settings the
way replacing a photo already did.
2026-09-22 08:56:58 +07:00

45 lines
1.5 KiB
TypeScript

import { useI18n } from '../i18n/I18nProvider';
// CLEAR takes the photo off the stage, and the work standing on it goes with
// it: the look lives in the session, not in the picture. So the button asks
// first, and the two ways of keeping something are one tap each — file the
// frame in MY PHOTOS so it can be picked up again, or put a JPEG in the user's
// hands. Neither is forced: CLEAR WITHOUT SAVING is a plain discard, and
// closing the dialog does nothing at all.
export function ClearPhotoModal({
onSave,
onExport,
onDiscard,
onClose,
}: {
onSave: () => void;
onExport: () => void;
onDiscard: () => void;
onClose: () => void;
}) {
const { t } = useI18n();
return (
<div className="modal-backdrop" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
<div className="modal" data-key="clear-modal">
<h2>{t('clear.title')}</h2>
<p className="hint" data-key="clear-hint">
{t('clear.hint')}
</p>
<button type="button" className="btn" data-key="clear-save" onClick={onSave}>
{t('clear.save')}
</button>
<button type="button" className="btn" data-key="clear-export" onClick={onExport}>
{t('clear.export')}
</button>
<button type="button" className="btn adm-danger" data-key="clear-discard" onClick={onDiscard}>
{t('clear.discard')}
</button>
<button type="button" className="btn ghost" data-key="clear-cancel" onClick={onClose}>
{t('clear.cancel')}
</button>
</div>
</div>
);
}