Increase Layout Room (#635)

* Testing New Layout * Improve Header; Light Mode * Scrollbar on Text Editor Always Available * Fix Theme Tab Scrolling * Add spacing between doc and graph * Mobile working * Dark Mode * Adding Secondary Elements * Remove unused * Fix fullscreen page * Link Icon
tone-row · Jan 9, 2024 · bf65a6f · bf65a6f
1 parent af6b2f9
commit bf65a6f
Show file tree

Hide file tree

Showing 32 changed files with 424 additions and 372 deletions.
diff --git a/app/src/components/Actions.tsx b/app/src/components/Actions.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+
+import { useIsProUser } from "../lib/hooks";
+import { ImportDataDialog } from "./ImportDataDialog";
+import { ImportDataUnauthenticatedDialog } from "./ImportDataUnauthenticatedDialog";
+import { LearnSyntaxDialog } from "./LearnSyntaxDialog";
+import { LoadTemplateDialog } from "./LoadTemplateDialog";
+import { LoadFileButton } from "./LoadFileButton";
+import { useLocation } from "react-router-dom";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { Sliders } from "phosphor-react";
+
+export function Actions() {
+  const isProUser = useIsProUser();
+  const isSandbox = useLocation().pathname === "/";
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    // when open, bind a listener to the window that catches clicks which bubble up from the editor-options dropdown
+    if (!open) return;
+    const listener = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.closest("#editor-options")) {
+        // debugger;
+        // setOpen(false);
+      }
+    };
+
+    window.addEventListener("click", listener);
+
+    return () => {
+      window.removeEventListener("click", listener);
+    };
+  }, [setOpen, open]);
+  return (
+    <>
+      <div className="hidden md:flex justify-start w-full gap-x-2 items-center whitespace-nowrap flex-wrap py-2">
+        <LoadTemplateDialog />
+        <LearnSyntaxDialog />
+        {isSandbox ? <LoadFileButton /> : null}
+        {isProUser ? <ImportDataDialog /> : <ImportDataUnauthenticatedDialog />}
+      </div>
+      <DropdownMenu.Root open={open} onOpenChange={setOpen}>
+        <DropdownMenu.Trigger asChild>
+          <button className="md:hidden mr-1 rounded flex self-center items-center justify-center w-8 h-8 bg-neutral-300 hover:bg-neutral-400 focus:outline-none">
+            <Sliders size={24} />
+          </button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          align="end"
+          className="min-w-[220px] bg-white rounded-md shadow-xl select-none p-2"
+          id="editor-options"
+        >
+          <LoadTemplateDialog />
+          <LearnSyntaxDialog />
+          {isSandbox ? <LoadFileButton /> : null}
+          {isProUser ? (
+            <ImportDataDialog />
+          ) : (
+            <ImportDataUnauthenticatedDialog />
+          )}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </>
+  );
+}
diff --git a/app/src/components/CloneButton.tsx b/app/src/components/CloneButton.tsx
@@ -6,11 +6,12 @@ import { useContext } from "react";
 import { AppContext } from "./AppContextProvider";
 import { getFunFlowchartName } from "../lib/getFunFlowchartName";
 import { languages } from "../locales/i18n";
-import { useUserId } from "../lib/hooks";
+import { useIsProUser, useUserId } from "../lib/hooks";
 import { makeChart, queryClient } from "../lib/queries";
 import { useMutation } from "react-query";
 
 export function CloneButton() {
+  const isProUser = useIsProUser();
   const language = useContext(AppContext).language;
   const userId = useUserId();
   const makeChartMutation = useMutation(
@@ -34,6 +35,7 @@ export function CloneButton() {
       },
     }
   );
+  if (!isProUser) return null;
   return (
     <Button2
       color="blue"

diff --git a/app/src/components/EditorOptions.tsx b/app/src/components/EditorOptions.tsx
diff --git a/app/src/components/EditorWrapper.module.css b/app/src/components/EditorWrapper.module.css
diff --git a/app/src/components/FlowchartHeader.module.css b/app/src/components/FlowchartHeader.module.css
@@ -0,0 +1,6 @@
+.HeaderTitle button:first-child h1 {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  overflow: hidden;
+}
diff --git a/app/src/components/EditorWrapper.tsx → app/src/components/FlowchartHeader.tsx b/app/src/components/EditorWrapper.tsx → app/src/components/FlowchartHeader.tsx
@@ -1,12 +1,11 @@
 import { Trans } from "@lingui/macro";
-import { Suspense, useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { useIsLoggedIn, useIsProUser, useIsReadOnly } from "../lib/hooks";
 import { docToString, useDoc, useDocDetails } from "../lib/useDoc";
 import { Button2, Input } from "../ui/Shared";
 import { AppContext } from "./AppContextProvider";
 import { CloneButton } from "./CloneButton";
-import styles from "./EditorWrapper.module.css";
-import Loading from "./Loading";
+import styles from "./FlowchartHeader.module.css";
 import { RenameButton } from "./RenameButton";
 import ShareDialog from "./ShareDialog";
 import { Cloud, DownloadSimple, Export, File } from "phosphor-react";
@@ -23,60 +22,51 @@ import { useMutation } from "react-query";
 import { makeChart } from "../lib/queries";
 import { saveAs } from "file-saver";
 
-/**
- * Adds title and export button to the editor
- */
-export function EditorWrapper({ children }: { children: React.ReactNode }) {
+export function FlowchartHeader() {
   const title = useDocDetails("title", "flowchart.fun");
   const { setShareModal } = useContext(AppContext);
   const isReadOnly = useIsReadOnly();
   const isPro = useIsProUser();
   const pageTitle = title || "flowchart.fun";
   const isSandbox = useLocation().pathname === "/";
-
   return (
-    <div className={styles.EditorWrapper}>
-      <header
-        className={classNames(
-          styles.HeaderTitle,
-          "flex items-start gap-2 justify-between p-2 pl-6 pt-6 flex-wrap"
-        )}
-      >
-        {isSandbox ? (
+    <header
+      className={classNames(
+        styles.HeaderTitle,
+        "flex items-center gap-2 justify-between flex-wrap p-4 md:p-2"
+      )}
+    >
+      {isSandbox ? (
+        <FlowchartTitle title={title}>{pageTitle}</FlowchartTitle>
+      ) : (
+        <RenameButton key={pageTitle}>
           <FlowchartTitle title={title}>{pageTitle}</FlowchartTitle>
-        ) : (
-          <RenameButton key={pageTitle}>
-            <FlowchartTitle title={title}>{pageTitle}</FlowchartTitle>
-          </RenameButton>
+        </RenameButton>
+      )}
+      <div className="flex items-center gap-2">
+        {isReadOnly && (
+          <span className="text-xs text-neutral-400 dark:text-neutral-600 font-extrabold uppercase tracking-tight">
+            <Trans>Read-only</Trans>
+          </span>
         )}
-        <div className="flex items-center gap-2">
-          {isReadOnly && (
-            <span className="text-xs text-neutral-400 dark:text-neutral-600 font-extrabold uppercase tracking-tight">
-              <Trans>Read-only</Trans>
-            </span>
-          )}
-          {isReadOnly && isPro ? <CloneButton /> : null}
-          {!isReadOnly ? (
-            <>
-              {isSandbox ? <SaveButton /> : null}
-              <ShareDialog>
-                <Button2
-                  color="blue"
-                  onClick={() => setShareModal(true)}
-                  leftIcon={<Export weight="bold" className="w-5 h-5" />}
-                  aria-label="Export"
-                >
-                  <Trans>Share</Trans>
-                </Button2>
-              </ShareDialog>
-            </>
-          ) : null}
-        </div>
-      </header>
-      <Suspense fallback={<Loading />}>
-        <main>{children}</main>
-      </Suspense>
-    </div>
+        {isReadOnly && isPro ? <CloneButton /> : null}
+        {!isReadOnly ? (
+          <>
+            {isSandbox ? <SaveButton /> : null}
+            <ShareDialog>
+              <Button2
+                color="blue"
+                onClick={() => setShareModal(true)}
+                leftIcon={<Export weight="bold" className="w-5 h-5" />}
+                aria-label="Export"
+              >
+                <Trans>Share</Trans>
+              </Button2>
+            </ShareDialog>
+          </>
+        ) : null}
+      </div>
+    </header>
   );
 }
 
@@ -98,6 +88,8 @@ function LogInToSaveButton() {
   const navigate = useNavigate();
   return (
     <Button2
+      leftIcon={<DownloadSimple weight="bold" className="w-5 h-5" />}
+      color="zinc"
       onClick={() => {
         navigate("/l");
       }}
@@ -137,6 +129,7 @@ function CanSaveButton() {
       <Dialog.Trigger asChild>
         <Button2
           leftIcon={<DownloadSimple weight="bold" className="w-5 h-5" />}
+          color="zinc"
           onClick={() => {
             setOpen(true);
           }}
@@ -252,7 +245,7 @@ function FlowchartTitle({
   return (
     <h1
       className={classNames(
-        "text-xl md:text-2xl font-bold -translate-y-[2px]",
+        "text-lg sm:text-xl md:text-2xl font-bold -translate-y-[2px]",
         className
       )}
       {...props}

diff --git a/app/src/components/FlowchartLayout.tsx b/app/src/components/FlowchartLayout.tsx
@@ -0,0 +1,7 @@
+export function FlowchartLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="h-full w-full md:px-8 md:pt-4 lg:pt-6 bg-[#f6f5f6] grid grid-rows-[auto_minmax(0,1fr)] 2xl:px-16 dark:bg-[#0c0c0c]">
+      {children}
+    </div>
+  );
+}
diff --git a/app/src/components/Graph.tsx b/app/src/components/Graph.tsx
@@ -91,9 +91,13 @@ const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) {
   // then we set autoungrabify to true
   const canEdit = useCanEdit();
   useEffect(() => {
-    if (cy.current && !canEdit) {
+    if (!cy.current) return;
+    if (!canEdit) {
       cy.current.autoungrabify(true);
       cy.current.autounselectify(true);
+    } else {
+      cy.current.autoungrabify(false);
+      cy.current.autounselectify(false);
     }
   }, [canEdit]);
 

diff --git a/app/src/components/GraphWrapper.module.css b/app/src/components/GraphWrapper.module.css
@@ -15,7 +15,7 @@
     z-index: -1;
   }
 
-  [data-mobile-tab="graph"] .GraphWrapper {
+  [data-selected-tab="Graph"] .GraphWrapper {
     z-index: 1;
   }
 }