[NewEntry] Improve dialog UI (#2746)

sillsdev · Nov 8, 2023 · c1e208b · c1e208b
1 parent 74801d2
commit c1e208b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/SenseDialog.tsx b/src/components/DataEntry/DataEntryTable/NewEntry/SenseDialog.tsx
@@ -1,8 +1,9 @@
+import { Close } from "@mui/icons-material";
 import {
   Dialog,
   DialogContent,
-  Divider,
   Grid,
+  IconButton,
   MenuList,
   Typography,
 } from "@mui/material";
@@ -50,7 +51,7 @@ export default function SenseDialog(props: SenseDialogProps): ReactElement {
 
 interface SenseListProps {
   selectedWord: Word;
-  closeDialog: (gloss: string) => void;
+  closeDialog: (gloss?: string) => void;
   analysisLang: string;
 }
 
@@ -95,11 +96,7 @@ export function SenseList(props: SenseListProps): ReactElement {
     );
   };
 
-  const menuItems: ReactElement[] = [];
-  for (const s of props.selectedWord.senses) {
-    menuItems.push(menuItem(s));
-    menuItems.push(<Divider key={`${s.guid}-divider`} />);
-  }
+  const menuItems = props.selectedWord.senses.map(menuItem);
   menuItems.push(
     <StyledMenuItem key="new-sense" onClick={() => props.closeDialog("")}>
       {t("addWords.newSenseFor")}
@@ -109,7 +106,16 @@ export function SenseList(props: SenseListProps): ReactElement {
 
   return (
     <>
+      {/* Cancel button */}
+      <IconButton
+        onClick={() => props.closeDialog()}
+        style={{ position: "absolute", right: 0, top: 0 }}
+      >
+        <Close />
+      </IconButton>
+      {/* Header */}
       <Typography variant="h3">{t("addWords.selectSense")}</Typography>
+      {/* Sense options */}
       <MenuList autoFocusItem>{menuItems}</MenuList>
     </>
   );

diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/StyledMenuItem.ts b/src/components/DataEntry/DataEntryTable/NewEntry/StyledMenuItem.ts
@@ -4,6 +4,9 @@ import { withStyles } from "@mui/styles";
 // Copied from customized menus at https://material-ui.com/components/menus/
 const StyledMenuItem = withStyles((theme) => ({
   root: {
+    border: "1px solid gray",
+    borderRadius: "8px",
+    marginTop: "8px",
     "&:focus": {
       backgroundColor: theme.palette.primary.main,
       "& .MuiListItemIcon-root, & .MuiListItemText-primary": {

diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx b/src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx
@@ -1,8 +1,9 @@
+import { Close } from "@mui/icons-material";
 import {
   Dialog,
   DialogContent,
-  Divider,
   Grid,
+  IconButton,
   MenuList,
   Typography,
 } from "@mui/material";
@@ -50,7 +51,7 @@ export default function VernDialog(props: vernDialogProps): ReactElement {
 
 interface VernListProps {
   vernacularWords: Word[];
-  closeDialog: (wordId: string) => void;
+  closeDialog: (wordId?: string) => void;
   analysisLang?: string;
 }
 
@@ -96,11 +97,7 @@ export function VernList(props: VernListProps): ReactElement {
     );
   };
 
-  const menuItems: ReactElement[] = [];
-  for (const w of props.vernacularWords) {
-    menuItems.push(menuItem(w));
-    menuItems.push(<Divider key={`${w.id}-divider`} />);
-  }
+  const menuItems = props.vernacularWords.map(menuItem);
   menuItems.push(
     <StyledMenuItem key="new-entry" onClick={() => props.closeDialog("")}>
       {t("addWords.newEntryFor")}
@@ -110,7 +107,16 @@ export function VernList(props: VernListProps): ReactElement {
 
   return (
     <>
+      {/* Cancel button */}
+      <IconButton
+        onClick={() => props.closeDialog()}
+        style={{ position: "absolute", right: 0, top: 0 }}
+      >
+        <Close />
+      </IconButton>
+      {/* Header */}
       <Typography variant="h3">{t("addWords.selectEntry")}</Typography>
+      {/* Entry options */}
       <MenuList autoFocusItem>{menuItems}</MenuList>
     </>
   );