more style changes, changelog and locale

CHANGELOG.md

@@ -7,6 +7,7 @@
 - New function UNICODE ([#128](https://github.com/ironcalc/IronCalc/pull/128))
 - New document server (Thanks Dani!)
 - New function FORMULATEXT
+- Name Manager ([#212](https://github.com/ironcalc/IronCalc/pull/212) [#220](https://github.com/ironcalc/IronCalc/pull/220))
 
 ### Fixed
 

webapp/src/components/NameManager/NameManagerDialog.tsx

@@ -34,14 +34,12 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
   const worksheets = model.getWorksheetsProperties();
   const definedNameList = model.getDefinedNameList();
 
-  // reset modal state in case editing was in progress
   useEffect(() => {
     if (open) {
       setEditingNameIndex(-2);
     }
   }, [open]);
 
-  // enable/disable options while editing
   useEffect(() => {
     if (editingNameIndex !== -2) {
       setShowOptions(false);
@@ -94,7 +92,7 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
                   name={definedName.name}
                   scope={definedName.scope}
                   formula={definedName.formula}
-                  key={definedName.name}
+                  key={definedName.name + definedName.scope}
                   onSave={handleSave}
                   onCancel={() => setEditingNameIndex(-2)}
                 />
@@ -107,7 +105,7 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
                 name={definedName.name}
                 scope={definedName.scope}
                 formula={definedName.formula}
-                key={definedName.name}
+                key={definedName.name + definedName.scope}
                 showOptions={showOptions}
                 onEdit={() => setEditingNameIndex(index)}
                 onDelete={handleDelete}
@@ -151,12 +149,14 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
 const StyledDialog = styled(Dialog)(() => ({
   "& .MuiPaper-root": {
     height: "380px",
+    minHeight: "200px",
     minWidth: "620px",
   },
 }));
 
 const StyledDialogTitle = styled(DialogTitle)`
 padding: 12px 20px;
+height: 20px;
 font-size: 14px;
 font-weight: 600;
 display: flex;
@@ -170,7 +170,7 @@ const NameListWrapper = styled(Stack)`
 `;
 
 const StyledBox = styled(Box)`
-width: 171px;
+width: 161.67px;
 `;
 
 const StyledDialogContent = styled(DialogContent)`
@@ -182,6 +182,7 @@ padding: 20px 12px 20px 20px;
 
 const StyledRangesHeader = styled(Stack)(({ theme }) => ({
   flexDirection: "row",
+  padding: "0 8px",
   gap: "12px",
   fontFamily: theme.typography.fontFamily,
   fontSize: "12px",

webapp/src/components/NameManager/NamedRangeActive.tsx

@@ -33,10 +33,11 @@ function NamedRangeActive(properties: NamedRangeProperties) {
   const [nameError, setNameError] = useState(false);
   const [formulaError, setFormulaError] = useState(false);
 
+  //todo: move logic to NameManagerDialog
   const handleSaveUpdate = () => {
     const definedNamesModel = model.getDefinedNameList();
 
-    if (definedNamesModel.find((n) => n.name === name)) {
+    if (definedNamesModel.find((n) => n.name === name && n.scope === scope)) {
       try {
         model.updateDefinedName(name, scope, newName, newScope, newFormula);
       } catch (error) {
@@ -84,7 +85,7 @@ function NamedRangeActive(properties: NamedRangeProperties) {
           }}
         >
           <MenuItem value={"global"}>
-            {t("name_manager_dialog.workbook")}
+            {`${t("name_manager_dialog.workbook")} ${t("name_manager_dialog.global")}`}
           </MenuItem>
           {worksheets.map((option, index) => (
             <MenuItem key={option.name} value={index}>
@@ -106,14 +107,14 @@ function NamedRangeActive(properties: NamedRangeProperties) {
           }}
           onClick={(event) => event.stopPropagation()}
         />
-        <>
+        <IconsWrapper>
           <IconButton onClick={handleSaveUpdate}>
             <StyledCheck size={12} />
           </IconButton>
           <StyledIconButton onClick={onCancel}>
             <X size={12} />
           </StyledIconButton>
-        </>
+        </IconsWrapper>
       </StyledBox>
       <Divider />
     </>
@@ -129,6 +130,7 @@ width: 577px;
 const StyledTextField = styled(TextField)(() => ({
   "& .MuiInputBase-root": {
     height: "28px",
+    width: "161.67px",
     margin: 0,
     fontFamily: "Inter",
     fontSize: "12px",
@@ -150,4 +152,8 @@ const StyledCheck = styled(Check)(({ theme }) => ({
   color: theme.palette.success.main,
 }));
 
+const IconsWrapper = styled(Box)({
+  display: "flex",
+});
+
 export default NamedRangeActive;

webapp/src/components/NameManager/NamedRangeInactive.tsx

@@ -26,6 +26,7 @@ function NamedRangeInactive(properties: NamedRangeInactiveProperties) {
     showOptions,
   } = properties;
 
+  //todo: move logic to NameManagerDialog
   const handleDelete = () => {
     try {
       model.deleteDefinedName(name, scope);
@@ -35,9 +36,10 @@ function NamedRangeInactive(properties: NamedRangeInactiveProperties) {
     onDelete();
   };
 
+  //todo: pass the name, avoid logic
   const scopeName =
     worksheets.find((sheet, index) => index === scope)?.name ||
-    t("name_manager_dialog.workbook");
+    `${t("name_manager_dialog.workbook")} ${t("name_manager_dialog.global")}`;
 
   return (
     <>
@@ -45,14 +47,14 @@ function NamedRangeInactive(properties: NamedRangeInactiveProperties) {
         <StyledDiv>{name}</StyledDiv>
         <StyledDiv>{scopeName}</StyledDiv>
         <StyledDiv>{formula}</StyledDiv>
-        <WrappedIcons>
+        <IconsWrapper>
           <StyledIconButtonBlack onClick={onEdit} disabled={!showOptions}>
             <PencilLine size={12} />
           </StyledIconButtonBlack>
           <StyledIconButtonRed onClick={handleDelete} disabled={!showOptions}>
             <Trash2 size={12} />
           </StyledIconButtonRed>
-        </WrappedIcons>
+        </IconsWrapper>
       </WrappedLine>
       <Divider />
     </>
@@ -75,6 +77,7 @@ const WrappedLine = styled(Box)({
   display: "flex",
   height: "28px",
   alignItems: "center",
+  gap: "12px",
 });
 
 const StyledDiv = styled("div")(({ theme }) => ({
@@ -82,12 +85,12 @@ const StyledDiv = styled("div")(({ theme }) => ({
   fontSize: "12px",
   fontWeight: "400",
   color: theme.palette.common.black,
-  width: "171px",
+  width: "153.67px",
+  paddingLeft: "8px",
 }));
 
-const WrappedIcons = styled(Box)({
+const IconsWrapper = styled(Box)({
   display: "flex",
-  gap: "0px",
 });
 
 export default NamedRangeInactive;

webapp/src/locale/en_us.json

@@ -84,6 +84,7 @@
     "scope": "Range",
     "help": "Learn more about Named Ranges",
     "new": "Add new",
-    "workbook": "Workbook (Global)"
+    "workbook": "Workbook",
+    "global": "(Global)"
   }
 }