From 3fd55bb5c98e9749aca5d6754a129626f9848196 Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 24 Nov 2025 17:20:28 +0100 Subject: [PATCH] update: add dropdowns to content --- .../components/SheetTabBar/SheetTabBar.tsx | 3 +- .../WorkbookSettingsDialog.tsx | 355 +++++++++++++++++- webapp/IronCalc/src/locale/en_us.json | 14 +- 3 files changed, 358 insertions(+), 14 deletions(-) diff --git a/webapp/IronCalc/src/components/SheetTabBar/SheetTabBar.tsx b/webapp/IronCalc/src/components/SheetTabBar/SheetTabBar.tsx index f250a30..dd3e592 100644 --- a/webapp/IronCalc/src/components/SheetTabBar/SheetTabBar.tsx +++ b/webapp/IronCalc/src/components/SheetTabBar/SheetTabBar.tsx @@ -98,7 +98,7 @@ function SheetTabBar(props: SheetTabBarProps) { - + { @@ -124,7 +124,6 @@ function SheetTabBar(props: SheetTabBarProps) { setWorkbookSettingsOpen(false)} - onExited={() => setWorkbookSettingsOpen(false)} /> ); diff --git a/webapp/IronCalc/src/components/WorkbookSettings/WorkbookSettingsDialog.tsx b/webapp/IronCalc/src/components/WorkbookSettings/WorkbookSettingsDialog.tsx index 8fa4408..85b9303 100644 --- a/webapp/IronCalc/src/components/WorkbookSettings/WorkbookSettingsDialog.tsx +++ b/webapp/IronCalc/src/components/WorkbookSettings/WorkbookSettingsDialog.tsx @@ -1,29 +1,65 @@ import styled from "@emotion/styled"; -import { Dialog } from "@mui/material"; -import { X } from "lucide-react"; +import { + Autocomplete, + Box, + Dialog, + FormControl, + MenuItem, + Select, + TextField, +} from "@mui/material"; +import { Check, X } from "lucide-react"; +import { useState } from "react"; import { useTranslation } from "react-i18next"; import { theme } from "../../theme"; type WorkbookSettingsDialogProps = { open: boolean; onClose: () => void; - onExited: () => void; + initialLocale?: string; + initialTimezone?: string; + onSave?: (locale: string, timezone: string) => void; }; const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => { const { t } = useTranslation(); + const [selectedLocale, setSelectedLocale] = useState( + properties.initialLocale || "", + ); + const [selectedTimezone, setSelectedTimezone] = useState( + properties.initialTimezone || "", + ); - const handleClose = () => { + const handleSave = () => { + if (properties.onSave && selectedLocale && selectedTimezone) { + properties.onSave(selectedLocale, selectedTimezone); + } properties.onClose(); }; + const timezones = [ + "Berlin, Germany (GMT+1)", + "New York, USA (GMT-5)", + "Tokyo, Japan (GMT+9)", + "London, UK (GMT+0)", + "Sydney, Australia (GMT+10)", + ]; + + const locales = ["en-US", "en-GB", "de-DE", "fr-FR", "es-ES"]; + return ( - + { + if (reason === "backdropClick" || reason === "escapeKeyDown") { + properties.onClose(); + } + }} + > {t("workbook_settings.title")} { if (event.key === "Enter") { @@ -34,17 +70,140 @@ const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => { - - {/* Settings content will go here */} + + event.stopPropagation()} + onMouseDown={(event) => event.stopPropagation()} + > + + {t("workbook_settings.locale_and_timezone.title")} + + + + {t("workbook_settings.locale_and_timezone.locale_label")} + + + { + setSelectedLocale(event.target.value as string); + }} + displayEmpty + MenuProps={{ + PaperProps: { + sx: menuPaperStyles, + }, + TransitionProps: { + timeout: 0, + }, + }} + > + {locales.map((locale) => { + const isSelected = locale === selectedLocale; + return ( + + {locale} + + ); + })} + + + + {t("workbook_settings.locale_and_timezone.locale_example1")} + 1,234.56 + + + {t("workbook_settings.locale_and_timezone.locale_example2")} + 12/31/2025 + + + {t("workbook_settings.locale_and_timezone.locale_example3")} + 11/23/2025 09:21:06 PM + + + {t("workbook_settings.locale_and_timezone.locale_example4")} + Monday + + + + + + + {t("workbook_settings.locale_and_timezone.timezone_label")} + + + { + setSelectedTimezone((newValue as string) || ""); + }} + options={timezones} + renderInput={(params) => } + renderOption={(props, option) => { + const isSelected = option === selectedTimezone; + return ( + + {option as string} + + ); + }} + disableClearable + slotProps={{ + paper: { + sx: menuPaperStyles, + }, + popper: { + sx: { + "& .MuiAutocomplete-paper": { + transition: "none !important", + }, + }, + }, + popupIndicator: { + disableRipple: true, + }, + }} + /> + + + {t("workbook_settings.locale_and_timezone.timezone_example1")} + 23/11/2025 + + + {t("workbook_settings.locale_and_timezone.timezone_example2")} + 11/23/2025 09:21:06 PM + + + + + + + + + {t("num_fmt.save")} + + ); }; const StyledDialog = styled(Dialog)` & .MuiPaper-root { - max-width: 400px; - min-width: 280px; + max-width: 320px; + min-width: 320px; border-radius: 8px; padding: 0px; } @@ -81,8 +240,182 @@ const Cross = styled("div")` `; const StyledDialogContent = styled("div")` + display: flex; + flex-direction: column; + gap: 12px; font-size: 12px; margin: 12px; `; +const StyledSectionTitle = styled("h1")` + font-size: 14px; + font-weight: 600; + font-family: Inter; + margin: 0px; + color: ${theme.palette.text.primary}; +`; + +const StyledSelect = styled(Select)` + font-size: 12px; + height: 32px; + & .MuiInputBase-root { + padding: 0px !important; + } + & .MuiInputBase-input { + font-size: 12px; + height: 20px; + padding-right: 0px !important; + margin: 0px; + } + & .MuiSelect-select { + padding: 8px 32px 8px 8px !important; + font-size: 12px; + } + & .MuiSvgIcon-root { + right: 4px !important; + } +`; + +const HelperBox = styled("div")` + display: flex; + flex-direction: column; + align-items: start; + justify-content: center; + gap: 2px; + box-sizing: border-box; + border: 1px solid ${theme.palette.grey["300"]}; + font-family: Inter; + width: 100%; + height: 100%; + margin-top: 8px; + background-color: ${theme.palette.grey["100"]}; + border-radius: 4px; + padding: 8px; +`; + +const Row = styled("div")` + display: flex; + flex-direction: row; + gap: 4px; + width: 100%; + justify-content: space-between; + color: ${theme.palette.grey[700]}; +`; + +const RowValue = styled("span")` + font-size: 12px; + font-family: Inter; + font-weight: normal; + color: ${theme.palette.grey[500]}; +`; + +const StyledAutocomplete = styled(Autocomplete)` + & .MuiInputBase-root { + padding: 0px !important; + height: 32px; + } + & .MuiInputBase-input { + font-size: 12px; + height: 20px; + padding: 0px; + padding-right: 0px !important; + margin: 0px; + } + & .MuiAutocomplete-popupIndicator:hover { + background-color: transparent !important; + } + & .MuiAutocomplete-popupIndicator { + & .MuiTouchRipple-root { + display: none; + } + } + & .MuiOutlinedInput-root .MuiAutocomplete-endAdornment { + right: 4px; + } + & .MuiOutlinedInput-root .MuiAutocomplete-input { + padding: 8px !important; + } +`; + +const menuPaperStyles = { + boxSizing: "border-box", + marginTop: "4px", + padding: "4px", + borderRadius: "8px", + transition: "none !important", + "& .MuiList-padding": { + padding: 0, + }, + "& .MuiList-root": { + padding: 0, + }, + "& .MuiAutocomplete-noOptions": { + padding: "8px", + fontSize: "12px", + fontFamily: "Inter", + }, + "& .MuiMenuItem-root": { + height: "32px !important", + padding: "8px !important", + minHeight: "32px !important", + }, +}; + +const StyledMenuItem = styled(MenuItem)<{ $isSelected?: boolean }>` + padding: 8px !important; + height: 32px !important; + min-height: 32px !important; + border-radius: 4px; + display: flex; + align-items: center; + font-size: 12px; + background-color: ${({ $isSelected }) => + $isSelected ? theme.palette.grey[50] : "transparent"} !important; + &:hover { + background-color: ${theme.palette.grey[50]} !important; + } +`; + +const FieldWrapper = styled(Box)` + display: flex; + flex-direction: column; + width: 100%; + gap: 6px; +`; + +const StyledLabel = styled("label")` + font-size: 12px; + font-family: "Inter"; + font-weight: 500; + color: ${theme.palette.text.primary}; + display: block; +`; + +const DialogFooter = styled("div")` + color: ${theme.palette.grey[700]}; + display: flex; + align-items: center; + border-top: 1px solid ${theme.palette.grey["300"]}; + font-family: Inter; + justify-content: flex-end; + padding: 12px; +`; + +const StyledButton = styled("div")` + cursor: pointer; + color: ${theme.palette.common.white}; + background: ${theme.palette.primary.main}; + padding: 0px 10px; + height: 36px; + line-height: 36px; + border-radius: 4px; + display: flex; + align-items: center; + font-family: "Inter"; + font-size: 14px; + &:hover { + background: ${theme.palette.primary.dark}; + } +`; + export default WorkbookSettingsDialog; diff --git a/webapp/IronCalc/src/locale/en_us.json b/webapp/IronCalc/src/locale/en_us.json index 1e0cf02..8573920 100644 --- a/webapp/IronCalc/src/locale/en_us.json +++ b/webapp/IronCalc/src/locale/en_us.json @@ -169,7 +169,19 @@ "resize_drawer": "Resize drawer" }, "workbook_settings": { + "open_settings": "Open settings", "title": "Workbook Settings", - "close": "Close dialog" + "close": "Close dialog", + "locale_and_timezone": { + "title": "Locale & Timezone", + "locale_label": "Locale", + "locale_example1": "Number", + "locale_example2": "Date", + "locale_example3": "Date and Time", + "locale_example4": "First day of the week", + "timezone_label": "Timezone", + "timezone_example1": "TODAY()", + "timezone_example2": "NOW()" + } } }