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

update: use a different dialog for templates only

Browse Source
This commit is contained in:
Daniel Gonzalez Albo
2025-10-11 13:29:36 +02:00
committed by Nicolás Hatcher Andrés
parent 49c3d1e03a
commit 7841abe2d2
4 changed files with 190 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,12 +7,8 @@ import TemplatesListItem from "./TemplatesListItem";
function WelcomeDialog(properties: {
onClose: () => void;
onSelectTemplate: (templateId: string) => void;
showHeader: boolean;
showNewSection: boolean;
}) {
const [selectedTemplate, setSelectedTemplate] = useState<string>(
properties.showNewSection ? "blank" : "mortgage_calculator",
);
const [selectedTemplate, setSelectedTemplate] = useState<string>("blank");
const handleClose = () => {
properties.onClose();
@@ -24,56 +20,37 @@ function WelcomeDialog(properties: {
return (
<DialogWrapper open={true} onClose={() => {}}>
{properties.showHeader !== false ? (
<DialogHeader>
<DialogHeaderTitleWrapper>
<DialogHeaderLogoWrapper>
<IronCalcIcon />
</DialogHeaderLogoWrapper>
<DialogHeaderTitle>Welcome to IronCalc</DialogHeaderTitle>
<DialogHeaderTitleSubtitle>
Start with a blank workbook or a ready-made template.
</DialogHeaderTitleSubtitle>
</DialogHeaderTitleWrapper>
<Cross
onClick={handleClose}
title="Close Dialog"
tabIndex={0}
onKeyDown={(event) => event.key === "Enter" && properties.onClose()}
>
<X />
</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>
)}
<DialogHeader>
<DialogHeaderTitleWrapper>
<DialogHeaderLogoWrapper>
<IronCalcIcon />
</DialogHeaderLogoWrapper>
<DialogHeaderTitle>Welcome to IronCalc</DialogHeaderTitle>
<DialogHeaderTitleSubtitle>
Start with a blank workbook or a ready-made template.
</DialogHeaderTitleSubtitle>
</DialogHeaderTitleWrapper>
<Cross
onClick={handleClose}
title="Close Dialog"
tabIndex={0}
onKeyDown={(event) => event.key === "Enter" && properties.onClose()}
>
<X />
</Cross>
</DialogHeader>
<DialogContent>
{properties.showNewSection !== false && (
<>
<ListTitle>New</ListTitle>
<TemplatesListWrapper>
<TemplatesListItem
title="Blank workbook"
description="Create from scratch or upload your own file."
icon={<Table />}
iconColor="#F2994A"
active={selectedTemplate === "blank"}
onClick={() => handleTemplateSelect("blank")}
/>
</TemplatesListWrapper>
</>
)}
<ListTitle>New</ListTitle>
<TemplatesListWrapper>
<TemplatesListItem
title="Blank workbook"
description="Create from scratch or upload your own file."
icon={<Table />}
iconColor="#F2994A"
active={selectedTemplate === "blank"}
onClick={() => handleTemplateSelect("blank")}
/>
</TemplatesListWrapper>
<ListTitle>Templates</ListTitle>
<TemplatesListWrapper>
<TemplatesListItem
@@ -231,14 +208,4 @@ 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;