Add "Share" and "Learn More" toolbar items.

rocicorp · Apr 28, 2021 · 1268bcb · 1268bcb
1 parent 53f2902
commit 1268bcb
Show file tree

Hide file tree

Showing 7 changed files with 560 additions and 64 deletions.
diff --git a/frontend/designer.tsx b/frontend/designer.tsx
@@ -54,7 +54,6 @@ export function Designer({ data }: { data: Data }) {
         <div
           {...{
             ref,
-            className: "container",
             style: {
               position: "relative",
               display: "flex",

diff --git a/frontend/nav.module.css b/frontend/nav.module.css
@@ -8,18 +8,33 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
+  min-width: 40px;
   height: 40px;
   opacity: "0.8";
   fill: "white";
   stroke-width: 0;
+  color: white;
+  font-size: 13px;
+  font-weight: 400;
+  padding: 0 10px;
 }
 
 .button:hover {
   background-color: rgb(75, 158, 244);
   opacity: 1;
 }
 
+.spacer {
+  flex: 1;
+}
+
+.about {
+  display: flex;
+  margin: auto 12px 0 auto;
+  width: auto;
+  align-items: center;
+}
+
 .user {
   color: white;
   display: flex;

diff --git a/frontend/nav.tsx b/frontend/nav.tsx
@@ -1,10 +1,22 @@
+import { useEffect, useRef, useState } from "react";
 import styles from "./nav.module.css";
 import { Data } from "./data";
 import { randomShape } from "../shared/shape";
+import Modal from "react-bootstrap/Modal";
+import Button from "react-bootstrap/Button";
+import Form from "react-bootstrap/Form";
 
-export function Nav({ data }: { data: Data | null }) {
-  const userInfo = data?.useUserInfo(data?.clientID);
-  console.log({ userInfo });
+export function Nav({ data }: { data: Data }) {
+  const [aboutVisible, showAbout] = useState(false);
+  const [shareVisible, showShare] = useState(false);
+  const urlBox = useRef<HTMLInputElement>(null);
+  const userInfo = data.useUserInfo(data.clientID);
+
+  useEffect(() => {
+    if (shareVisible) {
+      urlBox.current && urlBox.current.select();
+    }
+  });
 
   const onRectangle = () => {
     if (!data) {
@@ -14,56 +26,120 @@ export function Nav({ data }: { data: Data | null }) {
   };
 
   return (
-    <div className={styles.nav} style={{}}>
-      <div
-        onClick={() => onRectangle()}
-        className={styles.button}
-        title="Square"
-      >
-        <svg
-          width="18"
-          height="18"
-          viewBox="0 0 18 18"
-          xmlns="http://www.w3.org/2000/svg"
+    <>
+      <div className={styles.nav} style={{}}>
+        <div
+          onClick={() => onRectangle()}
+          className={styles.button}
+          title="Square"
         >
-          <path
-            d="M1 1h16v16H1V1zm1 1h14v14H2V2z"
-            fillRule="evenodd"
-            fill="white"
-          ></path>
-        </svg>
-      </div>
-      <div
-        className={styles.button}
-        title="Clear All"
-        onClick={() => data?.deleteAllShapes()}
-      >
-        <svg
-          width="18"
-          height="18"
-          viewBox="1 1 14 14"
-          xmlns="http://www.w3.org/2000/svg"
-          style={{ transform: "rotate(45deg)" }}
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M1 1h16v16H1V1zm1 1h14v14H2V2z"
+              fillRule="evenodd"
+              fill="white"
+            ></path>
+          </svg>
+        </div>
+        <div
+          className={styles.button}
+          title="Clear All"
+          onClick={() => data?.deleteAllShapes()}
         >
-          <path
-            d="M15 8V7H9V1H8v6H2v1h6v6h1V8h6z"
-            fillRule="nonzero"
-            fillOpacity="1"
-            fill="white"
-            stroke="none"
-          ></path>
-        </svg>
-      </div>
-      {userInfo && (
+          <svg
+            width="18"
+            height="18"
+            viewBox="1 1 14 14"
+            xmlns="http://www.w3.org/2000/svg"
+            style={{ transform: "rotate(45deg)" }}
+          >
+            <path
+              d="M15 8V7H9V1H8v6H2v1h6v6h1V8h6z"
+              fillRule="nonzero"
+              fillOpacity="1"
+              fill="white"
+              stroke="none"
+            ></path>
+          </svg>
+        </div>
+        <div className={`${styles.button}`} onClick={() => showShare(true)}>
+          Share
+        </div>
         <div
-          className={styles.user}
-          style={{
-            backgroundColor: userInfo.color,
-          }}
+          className={`${styles.button} ${styles.about}`}
+          onClick={() => showAbout(true)}
         >
-          {userInfo.avatar} {userInfo.name}
+          Learn More
         </div>
-      )}
-    </div>
+        <div className={styles.spacer}></div>
+        {userInfo && (
+          <div
+            className={styles.user}
+            style={{
+              backgroundColor: userInfo.color,
+            }}
+          >
+            {userInfo.avatar} {userInfo.name}
+          </div>
+        )}
+      </div>
+      <Modal show={aboutVisible} onHide={() => showAbout(false)} centered>
+        <Modal.Header closeButton>
+          <Modal.Title>About</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <p>
+            This is a demonstration of{" "}
+            <a href="https://replicache.dev">
+              <u>Replicache</u>
+            </a>{" "}
+            — a JavaScript library that enables realtime, collaborative web apps
+            for any backend stack.
+          </p>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            variant="secondary"
+            href="https://github.com/rocicorp/replidraw"
+            target="_blank"
+          >
+            Demo Source
+          </Button>
+          <Button
+            variant="primary"
+            href="https://replicache.dev/"
+            target="_blank"
+          >
+            Replicache Homepage
+          </Button>
+        </Modal.Footer>
+      </Modal>
+      <Modal show={shareVisible} onHide={() => showShare(false)} centered>
+        <Modal.Header closeButton>
+          <Modal.Title>Share Drawing</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form>
+            <Form.Text>Copy this URL and send to anyone:</Form.Text>
+            <Form.Control
+              ref={urlBox}
+              type="url"
+              value={location.href}
+              readOnly
+            />
+          </Form>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="primary" onClick={() => showShare(false)}>
+            OK
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
   );
 }