Issue #10: Improved output formatting

Styled copy button Fixed typo and joined guids for copying by new lines
data-team-uhn · Oct 20, 2020 · 05ceab4 · 05ceab4
1 parent e1d554a
commit 05ceab4
Showing 1 changed file with 25 additions and 6 deletions.
diff --git a/guids-generator.html b/guids-generator.html
@@ -82,6 +82,16 @@
         table: {
             padding: "0",
         },
+        copyButton: {
+            float: "right",
+        },
+        copyButtonSuccess: {
+            float: "right",
+            backgroundColor: theme.palette.success.main,
+            "&:hover,&:focus,&:visited,&": {
+                backgroundColor: theme.palette.success.dark,
+            }
+        },
     }));
 
     const StyledTableCell = withStyles((theme) => ({
@@ -405,6 +415,13 @@
             })
         }
 
+        let onCopyButtonClick = () => {
+            setCopied(true);
+            setTimeout(function() {
+                setCopied(false);
+            }, 3000);
+        }
+
         return (
             <div className={classes.main}>
                 <Typography variant="h3">GUID generator</Typography>
@@ -493,13 +510,15 @@
                                 <StyledTableCell>Health card #</StyledTableCell>
                                 <StyledTableCell>Province</StyledTableCell>
                                 <StyledTableCell>Date of birth</StyledTableCell>
-                                <StyledTableCell>GUID
-                                  <CopyToClipboard text={validatedData.map(item => item.isError ? '' : bhashes[item.index].value).join('\t')} onCopy={() => setCopied(true)}>
-                                    <IconButton title="Copy GGUIDs to clipboard" >
-                                      <Icon>file_copy</Icon>
-                                    </IconButton>
+                                <StyledTableCell><span>GUID</span>
+                                  <CopyToClipboard text={validatedData.map(item => item.isError ? '' : bhashes[item.index].value).join('\n\r')} onCopy={() => onCopyButtonClick()}>
+                                    <Button variant="contained"
+                                            color="primary"
+                                            className={copied ? classes.copyButtonSuccess : classes.copyButton}
+                                            startIcon=<Icon>{copied ? "check" : "file_copy"}</Icon>>
+                                            {copied ? "Copied" : "Copy GUIDs"}
+                                    </Button>
                                   </CopyToClipboard>
-                                  { copied ? <span style={{color: 'green'}}>Copied</span> : null }
                                 </StyledTableCell>
                               </TableRow>
                             </TableHead>