OHIF-332: Users should be able to see all available hotkeys and language settings in one place (#1895)

* OHIF-330: Update Modal Styles * feat/ohif-332: finish raw ui * feat/ohif-332: update mode configuration strategy * feat/ohif-332: fix hotkey errors * feat/ohif-332: update hotkey logic with recent merged changes * feat/ohif-322: wrap * feat/ohif-322: add disable state * ohif-332: cr updates * ohif-332: disable * ohif-332: cr updates * ohif-332: extract header component * ohif-332: cr update to fix merge conflicts and design issue Co-authored-by: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
2020-08-19 15:02:59 -04:00
1 parent ae3d05ebf7
commit 3e944780dc
@@ -0,0 +1,101 @@
+import React from 'react';
+import { Typography, Icon } from '../../components';
+import detect from 'browser-detect';
+
+const Link = ({ href, children, showIcon = false }) => {
+  return (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      <Typography
+        variant="subtitle"
+        component="p"
+        className="flex items-center text-primary-active"
+      >
+        {children}
+        {!!showIcon && (
+          <Icon name="external-link" className="w-5 text-white ml-2" />
+        )}
+      </Typography>
+    </a>
+  );
+};
+
+const Row = ({ title, value, link }) => {
+  return (
+    <div className="flex mb-4">
+      <Typography variant="subtitle" component="p" className="text-white w-48">
+        {title}
+      </Typography>
+
+      {link ? (
+        <Link href={link}>{value}</Link>
+      ) : (
+          <Typography
+            variant="subtitle"
+            component="p"
+            className="text-white w-48"
+          >
+            {value}
+          </Typography>
+        )}
+    </div>
+  );
+};
+
+const AboutModal = () => {
+  const { os, version, name } = detect();
+  const browser = `${name[0].toUpperCase()}${name.substr(1)} ${version}`;
+
+  const renderRowTitle = title => (
+    <div className="border-b-2 border-black pb-3 mb-3">
+      <Typography variant="h6" className="text-primary-light">
+        {title}
+      </Typography>
+    </div>
+  );
+  return (
+    <div>
+      {renderRowTitle('Important Links')}
+      <div className="flex mb-8">
+        <Link
+          href="https://groups.google.com/forum/#!forum/cornerstone-platform"
+          showIcon={true}
+        >
+          Visit the forum
+        </Link>
+        <span className="ml-4">
+          <Link
+            href="https://github.com/OHIF/Viewers/issues/new/choose"
+            showIcon={true}
+          >
+            Report an issue
+          </Link>
+        </span>
+        <span className="ml-4">
+          <Link href="http://ohif.org/" showIcon={true}>
+            More details
+          </Link>
+        </span>
+      </div>
+
+      {renderRowTitle('Version Information')}
+      <div className="flex flex-col">
+        <Row
+          title="Repository URL"
+          value="https://github.com/OHIF/Viewers/"
+          link="https://github.com/OHIF/Viewers/"
+        />
+        <Row
+          title="Last Master Commits"
+          value="https://github.com/OHIF/Viewers/commits/master"
+          link="https://github.com/OHIF/Viewers/commits/master"
+        />
+        <Row title="Version Number" value={process.env.VERSION_NUMBER} />
+        <Row title="Build number" value={process.env.BUILD_NUM} />
+        <Row title="Browser" value={browser} />
+        <Row title="OS" value={os} />
+      </div>
+    </div>
+  );
+};
+
+export default AboutModal;
@@ -0,0 +1,30 @@
+---
+name: AboutModal
+menu: General
+route: components/aboutModal
+---
+
+import { Playground, Props } from 'docz';
+import { AboutModal } from '@ohif/ui';
+
+# AboutModal
+
+AboutModal are used to show application version information.
+
+## Import
+
+```javascript
+import { AboutModal } from '@ohif/ui';
+```
+
+## Usage
+
+<Playground>
+  <div className="p-4">
+    <AboutModal />
+  </div>
+</Playground>
+
+## Properties
+
+<Props of={AboutModal} />
@@ -0,0 +1,2 @@
+import AboutModal from './AboutModal';
+export default AboutModal;