Merge branch 'main' of https://github.com/simularium/simularium-website…

… into fix/dropdown
simularium · Oct 12, 2023 · 48bd7d3 · 48bd7d3
2 parents 897cbf6 + 244e726
commit 48bd7d3
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 5 deletions.
diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
@@ -13,7 +13,11 @@ import {
 
 import styles from "./style.css";
 
+import VersionModal from "../VersionModal";
+
 const HelpMenu = (): JSX.Element => {
+    const [modalVisible, setModalVisible] = React.useState(false);
+
     const location = useLocation();
     const tutorialLink =
         location.pathname === "/viewer" ? (
@@ -79,16 +83,31 @@ const HelpMenu = (): JSX.Element => {
                         </a>
                     ),
                 },
+                {
+                    key: "version",
+                    label: (
+                        <a
+                            onClick={() => {
+                                setModalVisible(!modalVisible);
+                            }}
+                        >
+                            Version inf
+                        </a>
+                    ),
+                },
             ],
         },
     ];
 
     return (
-        <Dropdown menu={{ items, theme: "dark", className: styles.menu }}>
-            <Button onClick={(e) => e.preventDefault()} type="ghost">
-                Help {DownArrow}
-            </Button>
-        </Dropdown>
+        <>
+            <Dropdown menu={{ items, theme: "dark", className: styles.menu }}>
+                <Button onClick={(e) => e.preventDefault()} type="ghost">
+                    Help {DownArrow}
+                </Button>
+            </Dropdown>
+            {modalVisible && <VersionModal setModalVisible={setModalVisible} />}
+        </>
     );
 };
 

diff --git a/src/components/HelpMenu/style.css b/src/components/HelpMenu/style.css
@@ -11,4 +11,8 @@
     box-shadow: 0 1px 3px black;
     padding: 0;
     width: fit-content;
+}
+
+.menu :global(.ant-dropdown-menu-item-active){
+    background-color: transparent !important;
 }
diff --git a/src/components/VersionModal/index.tsx b/src/components/VersionModal/index.tsx
@@ -0,0 +1,53 @@
+import { Button } from "antd";
+import React from "react";
+
+import CustomModal from "../CustomModal";
+
+import styles from "./style.css";
+
+interface VersionModalProps {
+    setModalVisible: (isModalVisible: boolean) => void;
+}
+
+const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
+    const closeModal = () => {
+        setModalVisible(false);
+    };
+
+    const footerButton = (
+        <Button type="primary" onClick={closeModal}>
+            Close
+        </Button>
+    );
+
+    return (
+        <CustomModal
+            className={styles.container}
+            onCancel={closeModal}
+            open
+            footer={footerButton}
+            centered
+            title="Version Information"
+            width={425}
+        >
+            <div>
+                {" "}
+                Application:{" "}
+                <span className={styles.blueText}>
+                    {" "}
+                    simularium-website v{SIMULARIUM_WEBSITE_VERSION}{" "}
+                </span>
+            </div>
+            <div>
+                {" "}
+                Viewer:{" "}
+                <span className={styles.blueText}>
+                    {" "}
+                    simularium-viewer v{SIMULARIUM_VIEWER_VERSION}{" "}
+                </span>
+            </div>
+        </CustomModal>
+    );
+};
+
+export default VersionModal;
diff --git a/src/components/VersionModal/style.css b/src/components/VersionModal/style.css
@@ -0,0 +1,18 @@
+.container .blue-text {
+    color: var(--blue);
+}
+
+.container :global(.ant-modal-header) {
+    padding: 12px 24px;
+}
+.container :global(.ant-modal-title) {
+    font-weight: 400;
+}
+
+.container :global(.ant-modal-body) {
+    padding: 12px 12px 0px 12px;
+}
+
+.container :global(.ant-modal-footer) {
+    background-color: var(--modal-content-bg);
+}