Merge pull request #423 from simularium/feature/version-info

Feature/version info
simularium · Oct 11, 2023 · 244e726 · 244e726
2 parents 60326cf + 836510a
commit 244e726
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 0 deletions.
diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
@@ -13,6 +13,8 @@ import {
 
 import styles from "./style.css";
 
+import VersionModal from "../VersionModal";
+
 const HelpMenu = (): JSX.Element => {
     const location = useLocation();
     const tutorialLink =
@@ -27,8 +29,14 @@ const HelpMenu = (): JSX.Element => {
         ) : (
             <Link to={TUTORIAL_PATHNAME}>Quick start</Link>
         );
+
+    const [modalVisible, setModalVisible] = React.useState(false);
+
     const menu = (
         <Menu theme="dark" className={styles.menu}>
+            {modalVisible && (
+                <VersionModal setModalVisible={setModalVisible} />
+            )}
             <Menu.Item key="tutorial">{tutorialLink}</Menu.Item>
             <Menu.Item key="forum">
                 <a href={FORUM_URL} target="_blank" rel="noopener noreferrer">
@@ -65,6 +73,14 @@ const HelpMenu = (): JSX.Element => {
                     </a>
                 </Menu.Item>
             </Menu.SubMenu>
+            <Menu.Item
+                key="version"
+                onClick={() => {
+                    setModalVisible(!modalVisible);
+                }}
+            >
+                <>Version info</>
+            </Menu.Item>
         </Menu>
     );
 

diff --git a/src/components/HelpMenu/style.css b/src/components/HelpMenu/style.css
@@ -13,4 +13,8 @@
     width: fit-content;
     right: 160px !important;
     left: auto !important;
+}
+
+.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);
+}