Clean up look and interaction

sillsdev · Oct 20, 2023 · a866623 · a866623
1 parent 69c0ef5
commit a866623
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 39 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -488,7 +488,7 @@
     "senseCount": "Senses: {{ val }}",
     "wordId": "Id: {{ val }}",
     "wordModified": "Modified: {{ val }}",
-    "domainAdded": "Domain added: {{ val }}",
+    "domainAdded": "Added: {{ val }}",
     "user": "By user: {{ val }}"
   }
 }
diff --git a/src/components/WordCard/index.tsx b/src/components/WordCard/index.tsx
@@ -56,13 +56,13 @@ export default function WordCard(props: WordCardProps): ReactElement {
           {full ? (
             <IconButtonWithTooltip
               buttonId={`word-${word.id}-collapse`}
-              icon={<CloseFullscreen />}
+              icon={<CloseFullscreen style={{ color: "black" }} />}
               onClick={() => setFull(false)}
             />
           ) : (
             <IconButtonWithTooltip
               buttonId={`word-${word.id}-expand`}
-              icon={<OpenInFull />}
+              icon={<OpenInFull style={{ color: "gray" }} />}
               onClick={() => setFull(true)}
             />
           )}
@@ -89,32 +89,6 @@ export default function WordCard(props: WordCardProps): ReactElement {
         ) : (
           <SummarySenseCard senses={senses} />
         )}
-        {/*full || senses.length <= 2 ? (
-          senses.map((s) => (
-            <SenseCard
-              key={s.guid}
-              languages={languages}
-              minimal={!full}
-              provenance={provenance}
-              sense={s}
-            />
-          ))
-        ) : senses.length > 2 ? (
-          <>
-            <SenseCard
-              key={senses[0].guid}
-              languages={languages}
-              minimal={!full}
-              provenance={provenance}
-              sense={senses[0]}
-            />
-            <Card style={{ backgroundColor: "white" }}>
-              <Typography variant="h6">{`+${
-                senses.length - 1
-              } more senses`}</Typography>
-            </Card>
-          </>
-            ) : null*/}
         {/* Timestamps */}
         {provenance && (
           <Typography display="block" variant="caption">

diff --git a/src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/HistoryCell.tsx b/src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/HistoryCell.tsx
@@ -1,4 +1,4 @@
-import { History } from "@mui/icons-material";
+import { Close, History, Merge, Straight } from "@mui/icons-material";
 import { Dialog, Grid } from "@mui/material";
 import { Fragment, ReactElement, useState } from "react";
 
@@ -24,27 +24,61 @@ export default function HistoryCell(props: HistoryCellProps): ReactElement {
         onClick={getHistory}
       />
       <Dialog fullScreen onClose={() => setHistory(undefined)} open={!!history}>
+        <Grid container justifyContent="flex-end">
+          <IconButtonWithTooltip
+            buttonId={"word-history-exit-button"}
+            icon={<Close />}
+            onClick={() => setHistory(undefined)}
+            textId={"buttons.exit"}
+          />
+        </Grid>
         {history ? <WordTree tree={history} /> : <Fragment />}
       </Dialog>
     </>
   );
 }
 
 function WordTree(props: { tree: Pedigree }): ReactElement {
+  const [showParents, setShowParents] = useState(true);
+  const { word, parents } = props.tree;
+  const arrowStyle = { color: showParents ? "black" : "gray" };
   return (
     <>
       <Grid container justifyContent="space-around">
-        <WordCard provenance word={props.tree.word} />
+        <WordCard provenance word={word} />
       </Grid>
-      {props.tree.parents ? (
-        <Grid alignItems="flex-start" container justifyContent="space-around">
-          {props.tree.parents.map((p) => (
-            <Grid item key={p.word.id}>
-              <WordTree tree={p} />
+      {parents.length > 0 && (
+        <>
+          <Grid container justifyContent="space-around">
+            <IconButtonWithTooltip
+              buttonId={`word-${word.id}`}
+              icon={
+                parents.length > 1 ? (
+                  <Merge fontSize="large" style={arrowStyle} />
+                ) : (
+                  <Straight fontSize="large" style={arrowStyle} />
+                )
+              }
+              onClick={() => setShowParents(!showParents)}
+              text={parents.length}
+            />
+          </Grid>
+          {showParents && (
+            <Grid
+              alignItems="flex-start"
+              container
+              justifyContent="space-around"
+              wrap="nowrap"
+            >
+              {parents.map((p) => (
+                <Grid item key={p.word.id}>
+                  <WordTree tree={p} />
+                </Grid>
+              ))}
             </Grid>
-          ))}
-        </Grid>
-      ) : null}
+          )}
+        </>
+      )}
     </>
   );
 }