[DataEntryTable] Improve submit/note/exit clarity (#3245)

sillsdev · Aug 21, 2024 · f36973c · f36973c
1 parent 097f4af
commit f36973c
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 6 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -30,7 +30,7 @@
     "domain": "Domain",
     "domainTitle": "Domain: {{ val1 }} ({{ val2 }})",
     "glosses": "Glosses",
-    "pressEnter": "Press enter to save word",
+    "pressEnter": "Press Enter to save word",
     "vernacular": "Vernacular"
   },
   "appBar": {

diff --git a/public/locales/pt/translation.json b/public/locales/pt/translation.json
@@ -29,7 +29,7 @@
     "domain": "Domínio",
     "domainTitle": "Domínio: {{ val1 }} ({{ val2 }})",
     "glosses": "Glosas",
-    "pressEnter": "Pressione enter para salvar a palavra",
+    "pressEnter": "Pressione Enter para salvar a palavra",
     "vernacular": "Vernáculo"
   },
   "appBar": {

diff --git a/src/components/Buttons/IconButtonWithTooltip.tsx b/src/components/Buttons/IconButtonWithTooltip.tsx
@@ -6,6 +6,7 @@ interface IconButtonWithTooltipProps {
   disabled?: boolean;
   icon: ReactElement;
   text?: ReactNode;
+  /** `textId` will only be used if `text` is null or undefined. */
   textId?: string;
   size?: "large" | "medium" | "small";
   onClick?: MouseEventHandler<HTMLButtonElement>;

diff --git a/src/components/Buttons/NoteButton.tsx b/src/components/Buttons/NoteButton.tsx
@@ -7,6 +7,8 @@ import { EditTextDialog } from "components/Dialogs";
 interface NoteButtonProps {
   buttonId?: string;
   disabled?: boolean;
+  /** If `noteText` is empty and `updateNote` defined,
+   * the button will have default add-note hover text. */
   noteText: string;
   updateNote?: (newText: string) => void | Promise<void>;
 }
@@ -34,8 +36,8 @@ export default function NoteButton(props: NoteButtonProps): ReactElement {
         onClick={props.updateNote ? () => setNoteOpen(true) : undefined}
         side="top"
         size="small"
-        text={props.noteText}
-        textId="addWords.addNote"
+        text={props.noteText || undefined}
+        textId={props.updateNote ? "addWords.addNote" : undefined}
       />
       <EditTextDialog
         open={noteOpen}

diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx b/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx
@@ -336,7 +336,7 @@ function EnterGrid(): ReactElement {
   const { t } = useTranslation();
   return (
     <Grid item xs={12} style={{ paddingLeft: theme.spacing(2) }}>
-      <Typography variant="caption">{t("addWords.pressEnter")}</Typography>
+      <Typography variant="body2">{t("addWords.pressEnter")}</Typography>
     </Grid>
   );
 }
diff --git a/src/components/DataEntry/DataEntryTable/index.tsx b/src/components/DataEntry/DataEntryTable/index.tsx
@@ -1009,6 +1009,14 @@ export default function DataEntryTable(
     [state.recentWords, updateWordInBackend]
   );
 
+  const isNewEntryInProgress =
+    state.newAudio.length ||
+    state.newGloss.trim() ||
+    state.newNote.trim() ||
+    state.newVern.trim();
+  const highlightExitButton =
+    state.recentWords.length > 0 && !isNewEntryInProgress;
+
   return (
     <form onSubmit={(e?: FormEvent<HTMLFormElement>) => e?.preventDefault()}>
       <input type="submit" style={{ display: "none" }} />
@@ -1114,7 +1122,7 @@ export default function DataEntryTable(
             id={exitButtonId}
             type="submit"
             variant="contained"
-            color={state.newVern.trim() ? "primary" : "secondary"}
+            color={highlightExitButton ? "primary" : "secondary"}
             style={{ marginTop: theme.spacing(2) }}
             endIcon={<ExitToApp />}
             tabIndex={-1}