From e44a2e8c3ea76a591ec2b8a584a04e3c73858935 Mon Sep 17 00:00:00 2001 From: Daniel Gonzalez Albo Date: Fri, 7 Nov 2025 03:06:07 +0100 Subject: [PATCH] update: styling and layout --- .../NamedRanges/EditNamedRange.tsx | 136 +++++++++++------- .../RightDrawer/NamedRanges/NamedRanges.tsx | 31 ++-- 2 files changed, 105 insertions(+), 62 deletions(-) diff --git a/webapp/IronCalc/src/components/RightDrawer/NamedRanges/EditNamedRange.tsx b/webapp/IronCalc/src/components/RightDrawer/NamedRanges/EditNamedRange.tsx index 360955e..d4d0e02 100644 --- a/webapp/IronCalc/src/components/RightDrawer/NamedRanges/EditNamedRange.tsx +++ b/webapp/IronCalc/src/components/RightDrawer/NamedRanges/EditNamedRange.tsx @@ -1,10 +1,11 @@ import type { WorksheetProperties } from "@ironcalc/wasm"; -import { Box, IconButton, MenuItem, TextField, styled } from "@mui/material"; +import { Box, MenuItem, TextField, styled } from "@mui/material"; import { t } from "i18next"; -import { Check, X } from "lucide-react"; +import { Check, Tag } from "lucide-react"; import { useState } from "react"; import type React from "react"; import { theme } from "../../../theme"; +import { Footer, NewButton } from "./NamedRanges"; interface EditNamedRangeProps { worksheets: WorksheetProperties[]; @@ -31,14 +32,22 @@ const EditNamedRange: React.FC = ({ return ( + + + + + {name || "New Named Range"} + Range name = ({ ))} + + The scope of the named range determines where it is available. + Refers to @@ -83,6 +95,8 @@ const EditNamedRange: React.FC = ({ size="small" margin="none" fullWidth + multiline + rows={3} error={formulaError} value={formula} onChange={(event) => setFormula(event.target.value)} @@ -92,28 +106,31 @@ const EditNamedRange: React.FC = ({ onClick={(event) => event.stopPropagation()} /> +
- - { - const error = onSave(name, scope, formula); - if (error) { - setFormulaError(true); - } - }} - title={t("name_manager_dialog.apply")} - > - - - - - - + + Cancel + + } + onClick={() => { + const error = onSave(name, scope, formula); + if (error) { + setFormulaError(true); + } + }} + > + {t("name_manager_dialog.apply")} +
); @@ -142,6 +159,43 @@ const MenuSpanGrey = styled("span")` color: ${theme.palette.grey[400]}; `; +const HeaderBox = styled(Box)` + font-size: 14px; + font-family: "Inter"; + font-weight: 600; + width: auto; + gap: 8px; + padding: 24px 12px; + color: ${theme.palette.text.primary}; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + border-bottom: 1px solid ${theme.palette.grey["200"]}; + `; + +const HeaderBoxText = styled("span")` + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + `; + +const HeaderIcon = styled(Box)` + width: 28px; + height: 28px; + border-radius: 4px; + background-color: ${theme.palette.grey["100"]}; + display: flex; + align-items: center; + justify-content: center; + svg { + width: 16px; + height: 16px; + color: ${theme.palette.grey["600"]}; + } +`; + const StyledBox = styled(Box)` display: flex; flex-direction: column; @@ -157,7 +211,6 @@ const StyledBox = styled(Box)` const StyledTextField = styled(TextField)(() => ({ "& .MuiInputBase-root": { - height: "36px", width: "100%", margin: 0, fontFamily: "Inter", @@ -166,38 +219,11 @@ const StyledTextField = styled(TextField)(() => ({ "& .MuiInputBase-input": { padding: "8px", }, -})); - -const StyledIconButton = styled(IconButton)(({ theme }) => ({ - color: theme.palette.error.main, - borderRadius: "8px", - "&:hover": { - backgroundColor: theme.palette.grey["50"], - }, - "&.Mui-disabled": { - opacity: 0.6, - color: theme.palette.error.light, + "& .MuiInputBase-inputMultiline": { + padding: "0px", }, })); -const StyledCheck = styled(Check)(({ theme }) => ({ - color: theme.palette.success.main, -})); - -const Footer = styled("div")` - padding: 8px; - display: flex; - align-items: center; - justify-content: flex-end; - font-size: 12px; - color: ${theme.palette.grey["600"]}; - border-top: 1px solid ${theme.palette.grey["300"]}; -`; - -const IconsWrapper = styled(Box)({ - display: "flex", -}); - const FieldWrapper = styled(Box)` display: flex; flex-direction: column; @@ -213,4 +239,12 @@ const StyledLabel = styled("label")` display: block; `; +const StyledHelperText = styled("p")` + font-size: 10px; + font-family: "Inter"; + color: ${theme.palette.grey[400]}; + margin: 0; + line-height: 1.25; +`; + export default EditNamedRange; diff --git a/webapp/IronCalc/src/components/RightDrawer/NamedRanges/NamedRanges.tsx b/webapp/IronCalc/src/components/RightDrawer/NamedRanges/NamedRanges.tsx index 4f5e0f2..ce3e057 100644 --- a/webapp/IronCalc/src/components/RightDrawer/NamedRanges/NamedRanges.tsx +++ b/webapp/IronCalc/src/components/RightDrawer/NamedRanges/NamedRanges.tsx @@ -1,7 +1,7 @@ import type { DefinedName, WorksheetProperties } from "@ironcalc/wasm"; import { Button, Tooltip, styled } from "@mui/material"; import { t } from "i18next"; -import { BookOpen, ChevronRight, Plus } from "lucide-react"; +import { BookOpen, Plus } from "lucide-react"; import { useState } from "react"; import { theme } from "../../../theme"; import EditNamedRange from "./EditNamedRange"; @@ -140,9 +140,9 @@ const NamedRanges: React.FC = ({ tabIndex={0} > - {scopeName} - {definedName.name} + {scopeName} + {definedName.formula} ); @@ -218,8 +218,9 @@ const ListItemText = styled("div")({ fontFamily: theme.typography.fontFamily, flex: 1, display: "flex", - alignItems: "center", - gap: "4px", + flexDirection: "column", + alignItems: "flex-start", + gap: "2px", }); const ScopeText = styled("span")({ @@ -227,18 +228,18 @@ const ScopeText = styled("span")({ color: theme.palette.common.black, }); -const ChevronRightStyled = styled(ChevronRight)({ - width: "12px", - height: "12px", - color: theme.palette.grey[500], +const FormulaText = styled("span")({ + fontSize: "12px", + color: theme.palette.grey[600], }); const NameText = styled("span")({ fontSize: "12px", color: theme.palette.common.black, + fontWeight: 600, }); -const Footer = styled("div")` +export const Footer = styled("div")` padding: 8px; display: flex; align-items: center; @@ -246,6 +247,7 @@ const Footer = styled("div")` font-size: 12px; color: ${theme.palette.grey["600"]}; border-top: 1px solid ${theme.palette.grey["300"]}; + gap: 8px; `; const HelpLink = styled("a")` @@ -267,10 +269,17 @@ const HelpLink = styled("a")` } `; -const NewButton = styled(Button)` +export const NewButton = styled(Button)` text-transform: none; min-width: fit-content; font-size: 12px; + &.MuiButton-colorSecondary { + background-color: ${theme.palette.grey[200]}; + color: ${theme.palette.grey[700]}; + &:hover { + background-color: ${theme.palette.grey[300]}; + } + } `; export default NamedRanges;