Merge pull request #2573 from magda-io/2558-size-tooltip

Size tooltip
magda-io · Nov 7, 2019 · 29ab0f7 · 29ab0f7
2 parents 214a5d6 + 220a5ec
commit 29ab0f7
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 0 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -123,6 +123,7 @@ UI:
 -   Made the default name of a dataset blank
 -   Added a tooltip for dataset names
 -   Rename "Spatial area" to "Spatial extent"
+-   Add tooltip to explain the difference between MB and MiB, KB and KiB, etc.
 -   Fixed `validateDOMNesting` warning
 
 Gateway:

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: 190px;
+            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,31 @@ 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"
+                                    >
+                                        {() => {
+                                            return (
+                                                <div>
+                                                    <div>
+                                                        Note: 1 KiB = 1024 Bytes
+                                                    </div>
+                                                    <div>1 MiB = 1024 KiB</div>
+                                                </div>
+                                            );
+                                        }}
+                                    </PurpleToolTip>
+                                </span>
                             </div>
                             <div>
                                 <b>Last Modified:</b>{" "}