sirtimbly/IronCalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: make dialogs content change depending on scenario

Browse Source
This commit is contained in:
Daniel Gonzalez Albo
2025-10-06 20:59:51 +02:00
committed by Nicolás Hatcher Andrés
parent 0b925a4d6a
commit eb3e92ffd8
2 changed files with 71 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
webapp/app.ironcalc.com/frontend/src/App.tsx
View File

@@ -24,6 +24,7 @@ import { IronCalc, IronCalcIcon, Model, init } from "@ironcalc/workbook";
function App() { function App() {
const [model, setModel] = useState<Model | null>(null); const [model, setModel] = useState<Model | null>(null);
const [showWelcomeDialog, setShowWelcomeDialog] = useState(false); const [showWelcomeDialog, setShowWelcomeDialog] = useState(false);
const [isTemplateOnlyDialog, setIsTemplateOnlyDialog] = useState(false);
useEffect(() => { useEffect(() => {
async function start() { async function start() {
@@ -58,6 +59,7 @@ function App() {
const newModel = loadModelFromStorageOrCreate(); const newModel = loadModelFromStorageOrCreate();
if (!newModel) { if (!newModel) {
setShowWelcomeDialog(true); setShowWelcomeDialog(true);
setIsTemplateOnlyDialog(false); // Full dialog for first-time usage
const createdModel = new Model("template", "en", "UTC"); const createdModel = new Model("template", "en", "UTC");
setModel(createdModel); setModel(createdModel);
} else { } else {
@@ -107,6 +109,7 @@ function App() {
}} }}
newModelFromTemplate={() => { newModelFromTemplate={() => {
setShowWelcomeDialog(true); setShowWelcomeDialog(true);
setIsTemplateOnlyDialog(true); // Template-only dialog for "New from template"
}} }}
setModel={(uuid: string) => { setModel={(uuid: string) => {
const newModel = selectModelFromStorage(uuid); const newModel = selectModelFromStorage(uuid);
@@ -130,6 +133,7 @@ function App() {
setModel(createdModel); setModel(createdModel);
} }
setShowWelcomeDialog(false); setShowWelcomeDialog(false);
setIsTemplateOnlyDialog(false);
}} }}
onSelectTemplate={async (templateId) => { onSelectTemplate={async (templateId) => {
switch (templateId) { switch (templateId) {
@@ -147,7 +151,10 @@ function App() {
} }
} }
setShowWelcomeDialog(false); setShowWelcomeDialog(false);
setIsTemplateOnlyDialog(false);
}} }}
showHeader={!isTemplateOnlyDialog}
showNewSection={!isTemplateOnlyDialog}
/> />
)} )}
</Wrapper> </Wrapper>

95
webapp/app.ironcalc.com/frontend/src/components/WelcomeDialog/WelcomeDialog.tsx
View File

@@ -7,8 +7,12 @@ import IronCalcIcon from "./ironcalc_icon_white.svg";
function WelcomeDialog(properties: { function WelcomeDialog(properties: {
onClose: () => void; onClose: () => void;
onSelectTemplate: (templateId: string) => void; onSelectTemplate: (templateId: string) => void;
showHeader?: boolean;
showNewSection?: boolean;
}) { }) {
const [selectedTemplate, setSelectedTemplate] = useState<string>("blank"); const [selectedTemplate, setSelectedTemplate] = useState<string>(
properties.showNewSection ? "blank" : "mortgage_calculator",
);
const handleClose = () => { const handleClose = () => {
properties.onClose(); properties.onClose();
@@ -20,37 +24,56 @@ function WelcomeDialog(properties: {
return ( return (
<DialogWrapper open={true} onClose={() => {}}> <DialogWrapper open={true} onClose={() => {}}>
<DialogHeader> {properties.showHeader !== false ? (
<DialogHeaderTitleWrapper> <DialogHeader>
<DialogHeaderLogoWrapper> <DialogHeaderTitleWrapper>
<DialogHeaderLogo src={IronCalcIcon} /> <DialogHeaderLogoWrapper>
</DialogHeaderLogoWrapper> <DialogHeaderLogo src={IronCalcIcon} />
<DialogHeaderTitle>Welcome to IronCalc</DialogHeaderTitle> </DialogHeaderLogoWrapper>
<DialogHeaderTitleSubtitle> <DialogHeaderTitle>Welcome to IronCalc</DialogHeaderTitle>
Start with a blank workbook or a ready-made template. <DialogHeaderTitleSubtitle>
</DialogHeaderTitleSubtitle> Start with a blank workbook or a ready-made template.
</DialogHeaderTitleWrapper> </DialogHeaderTitleSubtitle>
<Cross </DialogHeaderTitleWrapper>
onClick={handleClose} <Cross
title="Close Dialog" onClick={handleClose}
tabIndex={0} title="Close Dialog"
onKeyDown={(event) => event.key === "Enter" && properties.onClose()} tabIndex={0}
> onKeyDown={(event) => event.key === "Enter" && properties.onClose()}
<X /> >
</Cross> <X />
</DialogHeader> </Cross>
</DialogHeader>
) : (
<AlternativeHeader>
<span style={{ flexGrow: 2, marginLeft: 12 }}>Choose a template</span>
<Cross
style={{ marginRight: 12 }}
onClick={handleClose}
title="Close Dialog"
tabIndex={0}
onKeyDown={(event) => event.key === "Enter" && properties.onClose()}
>
<X />
</Cross>
</AlternativeHeader>
)}
<DialogContent> <DialogContent>
<ListTitle>New</ListTitle> {properties.showNewSection !== false && (
<TemplatesListWrapper> <>
<TemplatesListItem <ListTitle>New</ListTitle>
title="Blank workbook" <TemplatesListWrapper>
description="Create from scratch or upload your own file." <TemplatesListItem
icon={<Table />} title="Blank workbook"
iconColor="#F2994A" description="Create from scratch or upload your own file."
active={selectedTemplate === "blank"} icon={<Table />}
onClick={() => handleTemplateSelect("blank")} iconColor="#F2994A"
/> active={selectedTemplate === "blank"}
</TemplatesListWrapper> onClick={() => handleTemplateSelect("blank")}
/>
</TemplatesListWrapper>
</>
)}
<ListTitle>Templates</ListTitle> <ListTitle>Templates</ListTitle>
<TemplatesListWrapper> <TemplatesListWrapper>
<TemplatesListItem <TemplatesListItem
@@ -211,4 +234,14 @@ const DialogFooterButton = styled("button")`
} }
`; `;
const AlternativeHeader = styled("div")`
display: flex;
align-items: center;
border-bottom: 1px solid #e0e0e0;
height: 44px;
font-size: 14px;
font-weight: 500;
font-family: Inter;
`;
export default WelcomeDialog; export default WelcomeDialog;