Add mouse-over purple tooltip to explain sizes; closes #2558

magda-io · Nov 4, 2019 · d886779 · d886779
1 parent b456694
commit d886779
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/magda-web-client/src/Components/Dataset/Add/DatasetFile.scss b/magda-web-client/src/Components/Dataset/Add/DatasetFile.scss
@@ -96,6 +96,22 @@
             }
         }
     }
+    .tooltip-container {
+        position: relative;
+        .tooltip {
+            position: absolute;
+            padding-left: 4px;
+            top: -4px;
+        }
+        .inner {
+            a:hover {
+                color: #fff;
+            }
+            width: 200px;
+            text-align: left;
+            left: 15px;
+        }
+    }
 }
 .complete-processing.dataset-file-root {
     background-image: url("../../../assets/purple-box.svg");

diff --git a/magda-web-client/src/Components/Dataset/Add/DatasetFile.tsx b/magda-web-client/src/Components/Dataset/Add/DatasetFile.tsx
@@ -14,6 +14,9 @@ import { FileState, File, fileStateToText } from "./DatasetAddCommon";
 import editIcon from "../../../assets/edit.svg";
 import dismissIcon from "../../../assets/dismiss.svg";
 
+import PurpleToolTip from "Components/Common/TooltipWrapper";
+import helpIcon from "assets/help.svg";
+
 import "./DatasetFile.scss";
 
 function FileInProgress({
@@ -158,6 +161,24 @@ export default function DatasetFile({
                             <div>
                                 <b>Size:</b>{" "}
                                 {humanFileSize(file.byteSize, false)}
+                                <span className="tooltip-container">
+                                    <PurpleToolTip
+                                        className="tooltip tooltip-human-file-size"
+                                        launcher={() => (
+                                            <div className="tooltip-launcher-icon help-icon">
+                                                <img
+                                                    src={helpIcon}
+                                                    alt="Note: 1 KiB = 1024 Bytes, 1 MiB = 1024 KiB"
+                                                />
+                                            </div>
+                                        )}
+                                        innerElementClassName="inner"
+                                    >
+                                        {() =>
+                                            "Note: 1 KiB = 1024 Bytes, 1 MiB = 1024 KiB"
+                                        }
+                                    </PurpleToolTip>
+                                </span>
                             </div>
                             <div>
                                 <b>Last Modified:</b>{" "}