feat: about 'NMRium wrapper' modal

NFDI4Chem · Sep 2, 2023 · 57e9934 · 57e9934
1 parent c8252b3
commit 57e9934
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 10 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1 @@
+{}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "filelist-utils": "^1.10.2",
     "nmr-load-save": "^0.17.3",
     "nmrium": "^0.43.1-pre.1692874523",
+    "react-science": "^0.26.2",
     "vite-plugin-pwa": "^0.16.4"
   },
   "scripts": {
@@ -25,7 +26,7 @@
     "build": "cross-env NODE_OPTIONS=--max_old_space_size=4096 vite build --outDir build",
     "build-no-minify": "cross-env NO_MINIFY=true npm run build",
     "test": "jest --coverage",
-    "eslint": "eslint src/* ",
+    "eslint": "eslint . --cache",
     "eslint-fix": "npm run eslint -- --fix",
     "compile": "tsc --project tsconfig.esm.json && tsc --project tsconfig.cjs.json",
     "check-types": "tsc --project tsconfig.esm.json",
@@ -59,4 +60,4 @@
     "typescript": "^5.1.6",
     "vite": "^4.4.9"
   }
-}
+}
diff --git a/src/NMRiumWrapper.tsx b/src/NMRiumWrapper.tsx
@@ -5,11 +5,14 @@ import events from './events';
 import { useLoadSpectra } from './hooks/useLoadSpectra';
 import { usePreferences } from './hooks/usePreferences';
 import { useWhiteList } from './hooks/useWhiteList';
+import { RootLayout } from 'react-science/ui';
+import AboutUsModal from './modal/AboutUsModal';
 
 const styles: Record<'container' | 'loadingContainer', CSSProperties> = {
   container: {
     height: '100%',
     width: '100%',
+    position: 'relative',
   },
 
   loadingContainer: {
@@ -102,13 +105,13 @@ export default function NMRiumWrapper() {
   });
 
   return (
-    <div style={styles.container}>
-      {isLoading ||
-        (isFetchAllowedOriginsPending && (
-          <div style={styles.loadingContainer}>
-            <span>Loading .... </span>
-          </div>
-        ))}
+    <RootLayout style={styles.container}>
+      {' '}
+      {isFetchAllowedOriginsPending && (
+        <div style={styles.loadingContainer}>
+          <span>Loading .... </span>
+        </div>
+      )}
       <NMRium
         ref={nmriumRef}
         data={data}
@@ -117,7 +120,8 @@ export default function NMRiumWrapper() {
         workspace={workspace}
         emptyText={defaultEmptyMessage}
       />
-    </div>
+      <AboutUsModal />
+    </RootLayout>
   );
 }
 

diff --git a/src/modal/AboutUsModal.tsx b/src/modal/AboutUsModal.tsx
@@ -0,0 +1,145 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { Modal, useOnOff } from 'react-science/ui';
+import versionInfo from '../versionInfo';
+
+const styles = css`
+  width: 30vw;
+  min-width: 400px;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+
+  button:focus {
+    outline: none;
+  }
+
+  .container {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  span.title {
+    font-weight: bold;
+    color: #ea580c;
+    font-size: 2em;
+  }
+
+  a {
+    color: #969696;
+  }
+
+  a:hover,
+  a:focus {
+    color: #00bcd4;
+  }
+
+  .header {
+    span {
+      color: #464646;
+      font-size: 15px;
+      flex: 1;
+      user-select: none;
+    }
+  }
+`;
+
+function AboutUsModal() {
+  const [isOpenDialog, openDialog, closeDialog] = useOnOff(false);
+  return (
+    <>
+      <InfoButton onClick={openDialog} />
+      <Modal
+        hasCloseButton
+        isOpen={isOpenDialog}
+        onRequestClose={closeDialog}
+        maxWidth={1000}
+      >
+        <div css={styles}>
+          <Modal.Header>
+            <div className="header">
+              <span>About NMRium react wrapper</span>
+            </div>
+          </Modal.Header>
+          <div className="container">
+            <span className="title"> NMRium react wrapper</span>
+            <Separator />
+            Version <VersionInfo />
+            <Separator />
+            <a href="https://git.nmrium.org" target="_blank" rel="noreferrer">
+              GitHub ( https://git.nmrium.org )
+            </a>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+export default AboutUsModal;
+
+function VersionInfo() {
+  const { version } = versionInfo;
+  if (version === 'HEAD') {
+    return <>HEAD</>;
+  } else if (version.startsWith('git-')) {
+    return (
+      <a
+        href={`https://github.com/NFDI4Chem/nmrium-react-wrapper/tree/${version.slice(
+          4,
+        )}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        git-{version.slice(4, 14)}
+      </a>
+    );
+  } else {
+    return (
+      <a
+        href={`https://github.com/NFDI4Chem/nmrium-react-wrapper/tree/${version}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        {version}
+      </a>
+    );
+  }
+}
+
+function InfoButton({ onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      type="button"
+      style={{
+        fontSize: '13px',
+        textAlign: 'center',
+        width: '25px',
+        height: '25px',
+        borderRadius: '25px',
+        border: '0.55px solid #ea580c',
+        left: '5px',
+        bottom: '10px',
+        position: 'absolute',
+      }}
+    >
+      &#9432;
+    </button>
+  );
+}
+
+function Separator() {
+  return (
+    <span
+      style={{
+        borderBottom: '1px solid gray',
+        width: '15px',
+        height: '1px',
+        margin: '10px 0',
+      }}
+    />
+  );
+}
diff --git a/src/versionInfo.ts b/src/versionInfo.ts
@@ -0,0 +1 @@
+export default { version: 'HEAD' };