Merge pull request #424 from simularium/feature/share-time-url

Feature/share time url

.github/workflows/test-coverage.yml

@@ -5,10 +5,11 @@ on:
             - main
 jobs:
     coverage:
-        runs-on: ubuntu-latest
+        runs-on: macos-latest
         if: "!contains(github.event.head_commit.message, '[skip ci]')"
         steps:
             - uses: actions/checkout@v3
-            - uses: ArtiomTr/jest-coverage-report-action@v2.1.2
+            - uses: ArtiomTr/jest-coverage-report-action@v2.2.4
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
+                  annotations: coverage

src/components/CustomModal/style.css

@@ -1,28 +1,54 @@
 /* Default and primary button colors differ within modals */
-.modal :global(.ant-btn-default) {
-    background-color: transparent;
-    border-color: var(--light-theme-modal-btn-default-color);
-    color: var(--light-theme-modal-btn-default-color);
+.modal :global(.ant-modal-content) {
+    /* prevents modal body color rendering under header/footer at corners */
+    border-radius: 3px;
 }
 
-.modal :global(.ant-btn-primary) {
-    background-color: var(--light-theme-modal-btn-default-color);
-    border: none;
-    color: #d8d8d8;
+.modal :global(.ant-modal-title) {
+    text-align: center;
+    font-weight: bold;
+    font-size: 14px;
 }
 
-.modal :global(.ant-btn-primary[disabled]) {
-    background: var(--light-theme-btn-default-disabled-bg);
-    border: none;
-    color: #d8d8d8;
+.modal :global(.ant-modal-footer) {
+    padding: 12px 16px 20px;
+    background-color: var(--modal-content-bg);
+    max-height: 56px;
 }
 
-.modal :global(.ant-modal-content) {
-    /* prevents modal body color rendering under header/footer at corners */
+.modal :global(.ant-modal-body) {
+    padding: 24px 24px 0px 24px;
+    font-size: 16px;
+    color: var(--dark);
+}
+
+.modal :global(.ant-modal-header) {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal :global(.ant-modal-close-x) {
+    height: 40px;
+    display: flex;
+    align-items: center;
+}
+
+.modal :global(.ant-checkbox-inner) {
+    background-color: transparent;
+    border: 1px solid var(--dark-three) !important;
+}
+
+.modal :global(.ant-input) {
+    border: 1px solid var(--heather);
     border-radius: 3px;
+    text-align: right;
 }
 
-.modal :global(.ant-modal-title) {
-    text-align: center;
-    font-weight: bold;
+.modal :global(.ant-divider) {
+    margin: 0px;
+    position: absolute;
+    left: 0;
+    background-color: var(--heather);
 }

src/components/FileUploadModal/upload-local-files.ts

@@ -13,7 +13,7 @@ import {
 import { LocalSimFile } from "../../state/trajectory/types";
 import { VIEWER_ERROR } from "../../state/viewer/constants";
 import { ViewerError, ViewerStatus } from "../../state/viewer/types";
-import { clearUrlParams } from "../../util";
+import { clearBrowserUrlParams } from "../../util";
 
 let numRequests = 0;
 
@@ -126,7 +126,7 @@ export default async (
         setError({ level, message, htmlData: "" });
         setViewerStatus({ status: VIEWER_ERROR });
         clearSimulariumFile({ newFile: false });
-        clearUrlParams();
+        clearBrowserUrlParams();
         if (rcRequest?.onError) {
             rcRequest.onError(error as UploadRequestError);
         }

src/components/Icons/index.tsx

@@ -9,6 +9,9 @@ import {
     PlusOutlined,
     MinusOutlined,
     HomeOutlined,
+    ShareAltOutlined,
+    WarningOutlined,
+    LinkOutlined,
     DownloadOutlined,
     RetweetOutlined,
 } from "@ant-design/icons";
@@ -29,6 +32,9 @@ export const GoBack = <ArrowLeftOutlined />;
 export const Reset = <HomeOutlined />;
 export const ZoomIn = <PlusOutlined />;
 export const ZoomOut = <MinusOutlined />;
+export const Share = <ShareAltOutlined />;
+export const Warn = <WarningOutlined />;
+export const Link = <LinkOutlined />;
 export const Download = <DownloadOutlined size={32} />;
 export const LoopOutlined = <RetweetOutlined />;
 
@@ -54,7 +60,10 @@ export default {
     Reset,
     ZoomIn,
     ZoomOut,
+    Share,
+    Warn,
     BetaTag,
+    Link,
     Download,
     LoopOutlined,
 };

src/components/ShareTrajectoryButton/index.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Button, Tooltip } from "antd";
+
+import { TOOLTIP_COLOR } from "../../constants";
+import {
+    NetworkedSimFile,
+    LocalSimFile,
+    isLocalFileInterface,
+} from "../../state/trajectory/types";
+import { Share } from "../Icons";
+import ShareTrajectoryModal from "../ShareTrajectoryModal";
+
+import styles from "./style.css";
+
+interface ShareTrajectoryButtonProps {
+    simulariumFile: LocalSimFile | NetworkedSimFile;
+}
+
+const ShareTrajectoryButton = ({
+    simulariumFile,
+}: ShareTrajectoryButtonProps): JSX.Element => {
+    const [isSharing, setIsSharing] = React.useState(false);
+
+    const isLocalFile = isLocalFileInterface(simulariumFile);
+
+    const handleShare = () => {
+        setIsSharing(!isSharing);
+    };
+
+    const handleTooltipOpen = () => {
+        if (isSharing || !simulariumFile.name) return false;
+    };
+
+    return (
+        <div className={styles.container}>
+            <Tooltip
+                title={"Share this trajectory"}
+                placement="bottomLeft"
+                color={TOOLTIP_COLOR}
+                open={handleTooltipOpen()}
+            >
+                {isSharing ? (
+                    <div className={styles.overlay}>
+                        <ShareTrajectoryModal
+                            isLocalFile={isLocalFile}
+                            closeModal={handleShare}
+                        />
+                    </div>
+                ) : null}
+                <Button
+                    className={styles.shareButton}
+                    onClick={handleShare}
+                    type="primary"
+                    disabled={!simulariumFile.name || isSharing}
+                >
+                    Share {Share}
+                </Button>
+            </Tooltip>
+        </div>
+    );
+};
+
+export default ShareTrajectoryButton;

src/components/ShareTrajectoryButton/style.css

@@ -0,0 +1,21 @@
+.container :global(.ant-btn){
+    color: var(--dark-theme-primary-color);
+    background-color: var(--dark-theme-header-bg);
+    border: none;
+}
+
+.container :global(.ant-btn:hover){
+    color: var(--dark-theme-primary-color);
+    background-color: var(--dark-theme-header-bg);
+}
+
+.overlay {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    width: 100%;
+    height: calc(100vh - var(--header-height));
+    background-color: var(--black);
+    opacity: .7;
+}