fix: footer, header, translation file

2025-11-08 19:01:39 +01:00
parent f8bd03d92c
commit a252f9c626
4 changed files with 177 additions and 116 deletions
--- a/webapp/IronCalc/src/components/RightDrawer/NamedRanges/EditNamedRange.tsx
+++ b/webapp/IronCalc/src/components/RightDrawer/NamedRanges/EditNamedRange.tsx
@@ -36,18 +36,22 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
          <HeaderIcon>
            <Tag />
          </HeaderIcon>
-          <HeaderBoxText>{name || "New Named Range"}</HeaderBoxText>
+          <HeaderBoxText>
+            {name || t("name_manager_dialog.new_named_range")}
+          </HeaderBoxText>
        </HeaderBox>
        <StyledBox>
          <FieldWrapper>
-            <StyledLabel htmlFor="name">Range name</StyledLabel>
+            <StyledLabel htmlFor="name">
+              {t("name_manager_dialog.range_name")}
+            </StyledLabel>
            <StyledTextField
              autoFocus={true}
              id="name"
              variant="outlined"
              size="small"
              margin="none"
-              placeholder="Enter range name"
+              placeholder={t("name_manager_dialog.enter_range_name")}
              fullWidth
              error={formulaError}
              value={name}
@@ -59,7 +63,9 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
            />
          </FieldWrapper>
          <FieldWrapper>
-            <StyledLabel htmlFor="scope">Scope</StyledLabel>
+            <StyledLabel htmlFor="scope">
+              {t("name_manager_dialog.scope_label")}
+            </StyledLabel>
            <StyledTextField
              id="scope"
              variant="outlined"
@@ -73,7 +79,7 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
                setScope(event.target.value);
              }}
            >
-              <MenuItem value={"[global]"}>
+              <MenuItem value={"[Global]"}>
                <MenuSpan>{t("name_manager_dialog.workbook")}</MenuSpan>
                <MenuSpanGrey>{` ${t("name_manager_dialog.global")}`}</MenuSpanGrey>
              </MenuItem>
@@ -84,11 +90,13 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
              ))}
            </StyledTextField>
            <StyledHelperText>
-              The scope of the named range determines where it is available.
+              {t("name_manager_dialog.scope_helper")}
            </StyledHelperText>
          </FieldWrapper>
          <FieldWrapper>
-            <StyledLabel htmlFor="formula">Refers to</StyledLabel>
+            <StyledLabel htmlFor="formula">
+              {t("name_manager_dialog.refers_to")}
+            </StyledLabel>
            <StyledTextField
              id="formula"
              variant="outlined"
@@ -115,7 +123,7 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
          disableElevation
          onClick={onCancel}
        >
-          Cancel
+          {t("name_manager_dialog.cancel")}
        </NewButton>
        <NewButton
          variant="contained"
--- 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, PencilLine, Plus, Trash2 } from "lucide-react";
+import { ArrowLeft, BookOpen, PencilLine, Plus, Trash2, X } from "lucide-react";
 import { useState } from "react";
 import { theme } from "../../../theme";
 import EditNamedRange from "./EditNamedRange";
@@ -13,6 +13,7 @@ const normalizeRangeString = (range: string): string => {

 interface NamedRangesProps {
  title?: string;
+  onClose?: () => void;
  definedNameList?: DefinedName[];
  worksheets?: WorksheetProperties[];
  updateDefinedName?: (
@@ -32,6 +33,8 @@ interface NamedRangesProps {
 }

 const NamedRanges: React.FC<NamedRangesProps> = ({
+  title,
+  onClose,
  definedNameList = [],
  worksheets = [],
  updateDefinedName,
@@ -99,7 +102,7 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
  // Show edit view if a named range is being edited or created
  if (editingDefinedName || isCreatingNew) {
    let name = "";
-    let scopeName = "[global]";
+    let scopeName = "[Global]";
    let formula = "";

    if (editingDefinedName) {
@@ -107,14 +110,65 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
      scopeName =
        editingDefinedName.scope !== undefined
          ? worksheets[editingDefinedName.scope]?.name || "[unknown]"
-          : "[global]";
+          : "[Global]";
      formula = editingDefinedName.formula;
    } else if (isCreatingNew && selectedArea) {
      formula = selectedArea();
    }

+    const headerTitle = isCreatingNew
+      ? t("name_manager_dialog.add_new_range")
+      : t("name_manager_dialog.edit_range");
+
    return (
      <Container>
+        <EditHeader>
+          <Tooltip title={t("name_manager_dialog.back")}>
+            <IconButtonWrapper
+              onClick={handleCancel}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  handleCancel();
+                }
+              }}
+              aria-label="Back to list"
+              tabIndex={0}
+            >
+              <ArrowLeft />
+            </IconButtonWrapper>
+          </Tooltip>
+          <EditHeaderTitle>{headerTitle}</EditHeaderTitle>
+          {onClose && (
+            <Tooltip
+              title={t("right_drawer.close")}
+              slotProps={{
+                popper: {
+                  modifiers: [
+                    {
+                      name: "offset",
+                      options: {
+                        offset: [0, -8],
+                      },
+                    },
+                  ],
+                },
+              }}
+            >
+              <IconButtonWrapper
+                onClick={onClose}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    onClose();
+                  }
+                }}
+                aria-label="Close drawer"
+                tabIndex={0}
+              >
+                <X />
+              </IconButtonWrapper>
+            </Tooltip>
+          )}
+        </EditHeader>
        <Content>
          <EditNamedRange
            worksheets={worksheets}
@@ -134,15 +188,47 @@ const NamedRanges: React.FC<NamedRangesProps> = ({

  return (
    <Container>
+      {onClose && (
+        <Header>
+          <HeaderTitle>{title}</HeaderTitle>
+          <Tooltip
+            title={t("right_drawer.close")}
+            slotProps={{
+              popper: {
+                modifiers: [
+                  {
+                    name: "offset",
+                    options: {
+                      offset: [0, -8],
+                    },
+                  },
+                ],
+              },
+            }}
+          >
+            <IconButtonWrapper
+              onClick={onClose}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  onClose();
+                }
+              }}
+              aria-label="Close drawer"
+              tabIndex={0}
+            >
+              <X />
+            </IconButtonWrapper>
+          </Tooltip>
+        </Header>
+      )}
      <Content>
        {definedNameList.length > 0 && (
          <ListContainer>
            {definedNameList.map((definedName) => {
              const scopeName =
                definedName.scope !== undefined
-                  ? worksheets[definedName.scope]?.name || "[unknown]"
-                  : "[global]";
-              // Check if this named range matches the currently selected area
+                  ? worksheets[definedName.scope]?.name || "[Unknown]"
+                  : "[Global]";
              const isSelected =
                currentSelectedArea !== null &&
                normalizeRangeString(definedName.formula) ===
@@ -193,22 +279,14 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
        )}
      </Content>
      <Footer>
-        <Tooltip
-          title={t("name_manager_dialog.help")}
-          slotProps={{
-            popper: {
-              modifiers: [{ name: "offset", options: { offset: [0, -8] } }],
-            },
-          }}
-        >
        <HelpLink
          href="https://docs.ironcalc.com/web-application/name-manager.html"
          target="_blank"
          rel="noopener noreferrer"
        >
          <BookOpen />
+          {t("name_manager_dialog.help")}
        </HelpLink>
-        </Tooltip>
        <NewButton
          variant="contained"
          disableElevation
@@ -322,7 +400,7 @@ export const Footer = styled("div")`
 const HelpLink = styled("a")`
  display: flex;
  align-items: center;
-  gap: 8px;
+  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  font-family: "Inter";
@@ -334,7 +412,6 @@ const HelpLink = styled("a")`
  svg {
    width: 16px;
    height: 16px;
-    color: ${theme.palette.grey["600"]};
  }
 `;

@@ -351,4 +428,52 @@ export const NewButton = styled(Button)`
  }
 `;

+const Header = styled("div")({
+  height: "40px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  padding: "0 8px",
+  borderBottom: `1px solid ${theme.palette.grey[300]}`,
+});
+
+const HeaderTitle = styled("div")({
+  width: "100%",
+  fontSize: "12px",
+});
+
+const EditHeader = styled("div")({
+  height: "40px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "0 8px",
+  gap: "8px",
+  borderBottom: `1px solid ${theme.palette.grey[300]}`,
+});
+
+const EditHeaderTitle = styled("div")({
+  flex: 1,
+  fontSize: "12px",
+  fontWeight: 500,
+});
+
+const IconButtonWrapper = styled("div")`
+    &:hover {
+      background-color: ${theme.palette.grey["50"]};
+    }
+    display: flex;
+    border-radius: 4px;
+    height: 24px;
+    width: 24px;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    svg {
+      width: 16px;
+      height: 16px;
+      stroke-width: 1.5;
+    }
+  `;
+
 export default NamedRanges;
--- a/webapp/IronCalc/src/components/RightDrawer/RightDrawer.tsx
+++ b/webapp/IronCalc/src/components/RightDrawer/RightDrawer.tsx
@@ -1,10 +1,5 @@
 import type { DefinedName, WorksheetProperties } from "@ironcalc/wasm";
-import Breadcrumbs from "@mui/material/Breadcrumbs";
-import Link from "@mui/material/Link";
-import Tooltip from "@mui/material/Tooltip";
 import { styled } from "@mui/material/styles";
-import { t } from "i18next";
-import { X } from "lucide-react";
 import type { MouseEvent as ReactMouseEvent, ReactNode } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { theme } from "../../theme";
@@ -115,48 +110,12 @@ const RightDrawer = ({
        $isResizing={isResizing}
        aria-label="Resize drawer"
      />
-      {showCloseButton && (
-        <Header>
-          <HeaderTitle>
-            <HeaderBreadcrumbs separator="›">
-              <HeaderBreadcrumbLink href="/">{title}</HeaderBreadcrumbLink>
-            </HeaderBreadcrumbs>
-          </HeaderTitle>
-          <Tooltip
-            title={t("right_drawer.close")}
-            slotProps={{
-              popper: {
-                modifiers: [
-                  {
-                    name: "offset",
-                    options: {
-                      offset: [0, -8],
-                    },
-                  },
-                ],
-              },
-            }}
-          >
-            <CloseButton
-              onClick={onClose}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  onClose();
-                }
-              }}
-              aria-label="Close drawer"
-              tabIndex={0}
-            >
-              <X />
-            </CloseButton>
-          </Tooltip>
-        </Header>
-      )}
      {children}
      <Divider />
      <DrawerContent>
        <NamedRanges
          title={title}
+          onClose={showCloseButton ? onClose : undefined}
          definedNameList={definedNameList}
          worksheets={worksheets}
          updateDefinedName={updateDefinedName}
@@ -178,7 +137,7 @@ const DrawerContainer = styled("div")<DrawerContainerProps>(
    overflow: "hidden",
    backgroundColor: theme.palette.common.white,
    right: 0,
-    top: `${TOOLBAR_HEIGHT + 1}px`,
+    top: `${TOOLBAR_HEIGHT}px`,
    bottom: 0,
    borderLeft: `1px solid ${theme.palette.grey[300]}`,
    width: `${$drawerWidth}px`,
@@ -187,47 +146,6 @@ const DrawerContainer = styled("div")<DrawerContainerProps>(
  }),
 );

-const Header = styled("div")({
-  height: "40px",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-end",
-  padding: "0 8px",
-});
-
-const HeaderTitle = styled("div")({
-  width: "100%",
-});
-
-const HeaderBreadcrumbs = styled(Breadcrumbs)({
-  fontSize: "12px",
-  marginRight: "8px",
-  width: "100%",
-});
-
-const HeaderBreadcrumbLink = styled(Link)({
-  color: theme.palette.grey[900],
-  textDecoration: "none",
-});
-
-const CloseButton = styled("div")`
-    &:hover {
-      background-color: ${theme.palette.grey["50"]};
-    }
-    display: flex;
-    border-radius: 4px;
-    height: 24px;
-    width: 24px;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    svg {
-      width: 16px;
-      height: 16px;
-      stroke-width: 1.5;
-    }
-  `;
-
 const Divider = styled("div")({
  height: "1px",
  width: "100%",
--- a/webapp/IronCalc/src/locale/en_us.json
+++ b/webapp/IronCalc/src/locale/en_us.json
@@ -104,13 +104,23 @@
    "name": "Name",
    "range": "Scope",
    "scope": "Range",
-    "help": "Learn more about Named Ranges",
+    "help": "About Named Ranges",
    "new": "Add new",
    "workbook": "Workbook",
    "global": "(Global)",
    "close": "Close dialog",
    "delete": "Delete Range",
    "edit": "Edit Range",
+    "back": "Back to list",
+    "add_new_range": "Add a new range",
+    "edit_range": "Edit range",
+    "new_named_range": "New Named Range",
+    "range_name": "Range name",
+    "enter_range_name": "Enter range name",
+    "scope_label": "Scope",
+    "scope_helper": "The scope of the named range determines where it is available.",
+    "refers_to": "Refers to",
+    "cancel": "Cancel",
    "apply": "Apply changes",
    "discard": "Discard changes"
  },