Skip to content

Add confirmation step for clearing charts #782

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 31, 2025
Merged

Add confirmation step for clearing charts #782

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
865dac4
Add confirmation step for replacing content
rob-gordon Mar 31, 2025
6065a70
Add translations
rob-gordon Mar 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 91 additions & 42 deletions app/src/components/LoadTemplateDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export function LoadTemplateDialog() {
const [layout, setLayout] = useState(true);
// Whether to load the content or not
const [replaceContent, setReplaceContent] = useState(getContentInitialValue);
const [showConfirmation, setShowConfirmation] = useState(false);
const disabled = !layout && !replaceContent;

/**
Expand All @@ -39,14 +40,19 @@ export function LoadTemplateDialog() {
setTemplate(null);
setLayout(true);
setReplaceContent(getContentInitialValue);
setShowConfirmation(false);
}, []);

const load = useCallback(async () => {
if (replaceContent && !showConfirmation) {
setShowConfirmation(true);
return;
}
loadTemplate(template, replaceContent, () => {
reset();
setOpen(false);
});
}, [template, replaceContent, reset]);
}, [template, replaceContent, reset, showConfirmation]);

return (
<Dialog.Root
Expand Down Expand Up @@ -76,7 +82,6 @@ export function LoadTemplateDialog() {
<div className="grid gap-1 sm:flex justify-between items-baseline">
<Dialog.Title className="text-xl font-bold flex items-baseline">
<PiShapesDuotone className="mr-2 translate-y-1" />

<span className="mr-4">
<Trans>Examples</Trans>
</span>
Expand All @@ -98,7 +103,7 @@ export function LoadTemplateDialog() {
<ArrowLeft className="mr-2" />
<Trans>Back</Trans>
</button>
<div className="grid sm:grid-cols-[2fr,1fr] gap-6">
<div className="grid sm:grid-cols-[minmax(0,2fr),minmax(0,1fr)] gap-6">
<div className="h-full w-full overflow-hidden rounded-lg shadow-md">
<img
src={`/template-screenshots/${template}.png`}
Expand All @@ -107,45 +112,89 @@ export function LoadTemplateDialog() {
/>
</div>
<div className="self-center grid gap-3">
<h2 className="text-lg mb-2">Options</h2>
<Option id="layout" checked={layout} set={setLayout}>
<Trans>Load layout and styles</Trans>
</Option>
<Option
id="content"
checked={replaceContent}
set={setReplaceContent}
>
<Trans>Load default content</Trans>
</Option>
<div
className={classNames(
"text-xs text-neutral-500 rounded transition-opacity duration-200 flex gap-1 justify-start items-center",
{
"opacity-100": replaceContent,
"opacity-0": !replaceContent,
}
)}
>
{replaceContent ? (
<>
<WarningCircle size={16} className="shrink-0" />
<Trans>This will replace the current content.</Trans>
</>
) : (
<>&nbsp;</>
)}
</div>
<Button2
color="blue"
disabled={disabled}
onClick={load}
className="mt-2"
data-session-activity="Load Template: Load"
data-template={template}
>
<Trans>Load</Trans>
</Button2>
{showConfirmation ? (
<>
<div className="grid gap-2 bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-lg border border-yellow-200 dark:border-yellow-800">
<div className="flex gap-2 items-center text-yellow-800 dark:text-yellow-200">
<WarningCircle size={20} className="shrink-0" />
<h2 className="font-semibold">
<Trans>Are you sure?</Trans>
</h2>
</div>
<p className="text-sm text-yellow-800/90 dark:text-yellow-200/90">
<Trans>
This will replace your current chart content with
the template content.
</Trans>
</p>
</div>
<div className="grid gap-2">
<Button2
color="blue"
onClick={load}
data-session-activity="Load Template: Confirm Load"
data-template={template}
className="w-full"
>
<Trans>Yes, Replace Content</Trans>
</Button2>
<Button2
color="default"
onClick={() => {
setShowConfirmation(false);
}}
data-session-activity="Load Template: Cancel Confirmation"
className="w-full"
>
<Trans>Cancel</Trans>
</Button2>
</div>
</>
) : (
<>
<h2 className="text-lg mb-2">Options</h2>
<Option id="layout" checked={layout} set={setLayout}>
<Trans>Load layout and styles</Trans>
</Option>
<Option
id="content"
checked={replaceContent}
set={setReplaceContent}
>
<Trans>Load default content</Trans>
</Option>
<div
className={classNames(
"text-xs text-neutral-500 rounded transition-opacity duration-200 flex gap-1 justify-start items-center",
{
"opacity-100": replaceContent,
"opacity-0": !replaceContent,
}
)}
>
{replaceContent ? (
<>
<WarningCircle size={16} className="shrink-0" />
<Trans>
This will replace the current content.
</Trans>
</>
) : (
<>&nbsp;</>
)}
</div>
<Button2
color="blue"
disabled={disabled}
onClick={load}
className="mt-2"
data-session-activity="Load Template: Load"
data-template={template}
>
<Trans>Load</Trans>
</Button2>
</>
)}
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/src/locales/de/messages.js
View file
Open in desktop

Large diffs are not rendered by default.

35 changes: 24 additions & 11 deletions app/src/locales/de/messages.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,10 @@ msgstr "Es ist ein Fehler aufgetreten. Versuchen Sie, es erneut einzureichen ode
msgid "Appearance"
msgstr "Erscheinungsbild"

#: src/components/LoadTemplateDialog.tsx:121
msgid "Are you sure?"
msgstr "Bist du sicher?"

#: src/components/Tabs/ThemeTab.tsx:571
#: src/components/Tabs/ThemeTab.tsx:572
msgid "Arrow Size"
Expand All @@ -115,7 +119,7 @@ msgstr "Attribute"
msgid "August 2023"
msgstr "August 2023"

#: src/components/LoadTemplateDialog.tsx:99
#: src/components/LoadTemplateDialog.tsx:104
msgid "Back"
msgstr "Zurück"

Expand Down Expand Up @@ -190,6 +194,7 @@ msgstr "Erstellen Sie Ihre persönliche Flussdiagramm-Bibliothek"

#: src/components/ClearTextButton.tsx:26
#: src/components/ImportDataDialog.tsx:698
#: src/components/LoadTemplateDialog.tsx:149
#: src/components/RenameButton.tsx:160
#: src/pages/Account.tsx:323
#: src/pages/Account.tsx:335
Expand Down Expand Up @@ -294,7 +299,7 @@ msgstr "Spalte"
msgid "Comment"
msgstr "Kommentar"

#: src/components/FeatureBreakdown.tsx:126
#: src/components/FeatureBreakdown.tsx:146
msgid "Compare our plans and find the perfect fit for your flowcharting needs"
msgstr "Vergleichen Sie unsere Pläne und finden Sie die perfekte Lösung für Ihre Flussdiagramm-Bedürfnisse"

Expand Down Expand Up @@ -640,8 +645,8 @@ msgstr "Geben Sie unten Ihre E-Mail-Adresse ein, und wir senden Ihnen einen Link
msgid "Equal To"
msgstr "Gleich"

#: src/components/LoadTemplateDialog.tsx:65
#: src/components/LoadTemplateDialog.tsx:81
#: src/components/LoadTemplateDialog.tsx:71
#: src/components/LoadTemplateDialog.tsx:86
msgid "Examples"
msgstr "Beispiele"

Expand Down Expand Up @@ -678,7 +683,7 @@ msgstr "Exportieren Sie nach PNG & JPG"
msgid "Export to PNG, JPG, and SVG"
msgstr "Exportieren Sie nach PNG, JPG und SVG"

#: src/components/FeatureBreakdown.tsx:123
#: src/components/FeatureBreakdown.tsx:143
msgid "Feature Breakdown"
msgstr "Funktionsübersicht"

Expand Down Expand Up @@ -757,7 +762,7 @@ msgstr "Erhalten Sie unbegrenzte KI-Anfragen"
msgid "Get rapid responses to your questions"
msgstr "Erhalten Sie schnelle Antworten auf Ihre Fragen"

#: src/components/FeatureBreakdown.tsx:235
#: src/components/FeatureBreakdown.tsx:295
msgid "Get unlimited flowcharts and premium features"
msgstr "Erhalten Sie unbegrenzte Flussdiagramme und Premium-Funktionen"

Expand Down Expand Up @@ -979,7 +984,7 @@ msgstr "Link"
msgid "Link back"
msgstr "Verlinke zurück"

#: src/components/LoadTemplateDialog.tsx:147
#: src/components/LoadTemplateDialog.tsx:194
msgid "Load"
msgstr "Laden"

Expand All @@ -995,15 +1000,15 @@ msgstr "Datei laden"
msgid "Load Files"
msgstr "Dateien laden"

#: src/components/LoadTemplateDialog.tsx:119
#: src/components/LoadTemplateDialog.tsx:164
msgid "Load default content"
msgstr "Standardinhalt laden"

#: src/components/LoadFromHashDialog.tsx:36
msgid "Load from link?"
msgstr "Von Link laden?"

#: src/components/LoadTemplateDialog.tsx:112
#: src/components/LoadTemplateDialog.tsx:157
msgid "Load layout and styles"
msgstr "Layout und Stile laden"

Expand Down Expand Up @@ -1670,10 +1675,14 @@ msgstr "Dies kann je nach Länge Ihrer Eingabe zwischen 30 Sekunden und 2 Minute
msgid "This sandbox is perfect for experimenting, but remember - it resets daily. Upgrade now and keep your current work!"
msgstr "Diese Sandbox ist perfekt zum Experimentieren, aber denk daran - sie wird täglich zurückgesetzt. Upgrade jetzt und behalte deine aktuelle Arbeit!"

#: src/components/LoadTemplateDialog.tsx:133
#: src/components/LoadTemplateDialog.tsx:178
msgid "This will replace the current content."
msgstr "Dies ersetzt den aktuellen Inhalt."

#: src/components/LoadTemplateDialog.tsx:125
msgid "This will replace your current chart content with the template content."
msgstr "Dies ersetzt den aktuellen Inhalt deines Diagramms mit dem Vorlageneinhalt."

#: src/components/LoadFromHashDialog.tsx:41
msgid "This will replace your current sandbox."
msgstr "Dies ersetzt deine aktuelle Sandbox."
Expand Down Expand Up @@ -1804,7 +1813,7 @@ msgstr "Upgrade auf Flowchart Fun Pro und schalte frei:"
msgid "Upgrade to Flowchart Fun Pro to unlock SVG exports and enjoy more advanced features for your diagrams."
msgstr "Upgrade auf Flowchart Fun Pro, um SVG-Export freizuschalten und mehr fortschrittliche Funktionen für Ihre Diagramme zu nutzen."

#: src/components/FeatureBreakdown.tsx:247
#: src/components/FeatureBreakdown.tsx:307
#: src/components/Header.tsx:422
msgid "Upgrade to Pro"
msgstr "Auf Pro upgraden"
Expand Down Expand Up @@ -1943,6 +1952,10 @@ msgstr "Schreiben Sie hier Ihre Aufforderung oder klicken Sie auf das Mikrofon,
msgid "Yearly"
msgstr "Jährlich"

#: src/components/LoadTemplateDialog.tsx:139
msgid "Yes, Replace Content"
msgstr "Ja, Inhalt ersetzen"

#: src/components/ImportDataDialog.tsx:693
msgid "You are about to add {numNodes} nodes and {numEdges} edges to your graph."
msgstr "Sie sind dabei, {numNodes} Knoten und {numEdges} Kanten zu Ihrem Graphen hinzuzufügen."
Expand Down
2 changes: 1 addition & 1 deletion app/src/locales/en/messages.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading
Loading