diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/SenseDialog.tsx b/src/components/DataEntry/DataEntryTable/NewEntry/SenseDialog.tsx index 11132c97f4..14df7766a1 100644 --- 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(); - } + const menuItems = props.selectedWord.senses.map(menuItem); menuItems.push( props.closeDialog("")}> {t("addWords.newSenseFor")} @@ -109,7 +106,16 @@ export function SenseList(props: SenseListProps): ReactElement { return ( <> + {/* Cancel button */} + props.closeDialog()} + style={{ position: "absolute", right: 0, top: 0 }} + > + + + {/* Header */} {t("addWords.selectSense")} + {/* Sense options */} {menuItems} ); diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/StyledMenuItem.ts b/src/components/DataEntry/DataEntryTable/NewEntry/StyledMenuItem.ts index 0410fedf5b..2cb3895f4f 100644 --- 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 index 77e96dc084..b489398dff 100644 --- 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(); - } + const menuItems = props.vernacularWords.map(menuItem); menuItems.push( props.closeDialog("")}> {t("addWords.newEntryFor")} @@ -110,7 +107,16 @@ export function VernList(props: VernListProps): ReactElement { return ( <> + {/* Cancel button */} + props.closeDialog()} + style={{ position: "absolute", right: 0, top: 0 }} + > + + + {/* Header */} {t("addWords.selectEntry")} + {/* Entry options */} {menuItems} );