Add styling changes, resizable sidebar

thomasgauvin · May 19, 2024 · c2b1407 · c2b1407
1 parent ac21a04
commit c2b1407
Show file tree

Hide file tree

Showing 10 changed files with 225 additions and 91 deletions.
diff --git a/src/components/FileSystemAdapters/FileSystem/FileSystemItem.tsx b/src/components/FileSystemAdapters/FileSystem/FileSystemItem.tsx
@@ -49,7 +49,7 @@ export function FileSystemItem({
             <div className="flex">
               <div className="flex items-center py-1 px-0.5 ml-0.5 hover:bg-zinc-300 text-zinc-400 hover:text-zinc-600 rounded">
                 <FilePlus
-                  size={15}
+                  size={16}
                   className="cursor-pointer"
                   onClick={(e) => {
                     handleCreateFile(node);
@@ -59,7 +59,7 @@ export function FileSystemItem({
               </div>
               <div className="flex items-center py-1 px-0.5 ml-0.5 hover:bg-zinc-300 text-zinc-400 hover:text-zinc-600 rounded">
                 <FolderPlus
-                  size={15}
+                  size={16}
                   className="cursor-pointer  "
                   onClick={(e) => {
                     handleCreateFolder(node);

diff --git a/src/components/FileSystemAdapters/FileSystem/LocalFileSystem.tsx b/src/components/FileSystemAdapters/FileSystem/LocalFileSystem.tsx
@@ -7,21 +7,27 @@ import DirectoryNode, {
   createDirectoryNode,
 } from "../../../models/DirectoryNode";
 import { FileSystemItem } from "./FileSystemItem";
-import { FilePlus, FolderPlus } from "lucide-react";
+import { FilePlus, FolderPlus, X } from "lucide-react";
 
 //sample react function
 export const LocalFileSystem = ({
   selectedDirectory, //rootDirectory
   setSelectedDirectory,
   selectedFile,
   setSelectedFile,
-  hidden
+  hidden,
+  style,
+  setPanelIsOpen,
+  panelIsOpen,
 }: {
   selectedDirectory: DirectoryNode | null;
   setSelectedDirectory: (directory: DirectoryNode | null) => void;
   selectedFile: DirectoryNode | null;
   setSelectedFile: (node: DirectoryNode | null) => Promise<void>;
-  hidden: boolean;
+  hidden: boolean | null;
+  style?: object | null;
+  setPanelIsOpen: (isOpen: boolean) => void;
+  panelIsOpen: boolean;
 }) => {
   useEffect(() => {
     const fetchEntries = async () => {
@@ -48,25 +54,32 @@ export const LocalFileSystem = ({
     }
   };
 
+  const isMobile = () => { return window.innerWidth < 768 };
+
   const handleFileSelect = async (node: DirectoryNode) => {
     setSelectedFile(node);
+    //if on mobile, close panel
+    if (isMobile()){
+      setPanelIsOpen(false);
+    }
   };
 
   const handleDeleteFile = async (node: DirectoryNode) => {
     console.log("deleting file");
     await node.delete();
 
     //determine if the selected file still exists, if it does, set the selected file to it (leave as is), otherwise set it to null
-    if(selectedFile){
+    if (selectedFile) {
       const selectedFileAsFoundInCurrentDirectory =
         selectedDirectory?.findChildByPath(selectedFile?.getFullPath());
-      if(selectedFileAsFoundInCurrentDirectory){
-        setSelectedFile(selectedFileAsFoundInCurrentDirectory.getCopy() || null);
+      if (selectedFileAsFoundInCurrentDirectory) {
+        setSelectedFile(
+          selectedFileAsFoundInCurrentDirectory.getCopy() || null
+        );
       } else {
         setSelectedFile(null);
       }
-    }
-    else{
+    } else {
       setSelectedFile(null);
     }
   };
@@ -138,15 +151,18 @@ export const LocalFileSystem = ({
       await node.renameFolder(newName);
       setSelectedFile(selectedFile?.getCopy() || null);
     }
-  }
+  };
 
   const handleRenameFile = async (node: DirectoryNode) => {
-    const newName = prompt("Enter new name for file", node.getName() || node.name);
+    const newName = prompt(
+      "Enter new name for file",
+      node.getName() || node.name
+    );
     if (newName) {
       await node.renameFile(newName);
       setSelectedFile(selectedFile?.getCopy() || null);
     }
-  }
+  };
 
   const getClosestParentsFirstFile = (
     node: DirectoryNode | null
@@ -169,36 +185,49 @@ export const LocalFileSystem = ({
 
   return (
     <div
-      className={`min-w-16 bg-zinc-50 overflow-y-scroll max-w-80 ${
+      className={`min-w-16 bg-zinc-50 overflow-y-scroll ${
         hidden ? "hidden" : ""
       }
-       scrollbar scrollbar-thumb-zinc-200 scrollbar-track-zinc-100 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full 
-    `}
+        h-full scrollbar scrollbar-thumb-zinc-200 scrollbar-track-zinc-100 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full 
+      `}
+      style={style}
     >
       {selectedDirectory && (
         <div className="divide-y font-semibold text-base">
-          <div className="text-sm p-2 text-zinc-500 flex flex-row justify-between">
-            <div>{selectedDirectory.getName()}</div>
+          <div className="text-sm p-2 text-zinc-500 flex flex-row justify-between items-center min-w-0 overflow-ellipsis">
+            <div className="flex items-center shrink min-w-0">
+              {panelIsOpen && selectedFile?.isFile() && (
+                <>
+                  <div className="pr-1 sticky top-0 cursor-pointer md:hidden">
+                    <div className="w-fit p-1 hover:bg-zinc-200 rounded  text-zinc-400 hover:text-zinc-500 ">
+                      <X onClick={() => setPanelIsOpen(false)} size={18} />
+                    </div>
+                  </div>
+                </>
+              )}
+              <div className="overflow-hidden whitespace-nowrap overflow-ellipsis min-w-0">
+                {selectedDirectory.getName()}
+              </div>
+            </div>
+
             <div className="flex flex-row">
-              <div className="flex items-center py-1 px-0.5 ml-0.5 hover:bg-zinc-300 text-zinc-400 hover:text-zinc-600 rounded">
-                <FilePlus
-                  size={15}
-                  className="cursor-pointer"
-                  onClick={(e) => {
-                    handleCreateFile(selectedDirectory);
-                    e.stopPropagation();
-                  }}
-                />
+              <div
+                className="flex items-center w-fit p-1  ml-0.5 hover:bg-zinc-300 text-zinc-400 hover:text-zinc-600 rounded cursor-pointer"
+                onClick={(e) => {
+                  handleCreateFile(selectedDirectory);
+                  e.stopPropagation();
+                }}
+              >
+                <FilePlus size={18} />
               </div>
-              <div className="flex items-center py-1 px-0.5 ml-0.5 hover:bg-zinc-300 text-zinc-400 hover:text-zinc-600 rounded">
-                <FolderPlus
-                  size={15}
-                  className="cursor-pointer  "
-                  onClick={(e) => {
-                    handleCreateFolder(selectedDirectory);
-                    e.stopPropagation();
-                  }}
-                />
+              <div
+                className="flex items-center w-fit p-1 ml-0.5 hover:bg-zinc-300 text-zinc-400 hover:text-zinc-600 rounded cursor-pointer"
+                onClick={(e) => {
+                  handleCreateFolder(selectedDirectory);
+                  e.stopPropagation();
+                }}
+              >
+                <FolderPlus size={18} />
               </div>
             </div>
           </div>

diff --git a/src/components/FileSystemAdapters/FileSystem/WorkspaceSelector.tsx b/src/components/FileSystemAdapters/FileSystem/WorkspaceSelector.tsx
@@ -43,7 +43,7 @@ export function WorkspaceSelector({
     }, []);
 
     return (
-      <div className="fixed inset-0 z-50 flex items-center justify-center bg-zinc-300 bg-opacity-75">
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-zinc-300">
         <div className="bg-white rounded shadow-md flex flex-col max-w-96">
           <div className="mx-8 mt-8 mb-4">
             <div className="flex flex-col space-y-1.5 ">

diff --git a/src/components/MarkdownEditor/FileEditor.tsx b/src/components/MarkdownEditor/FileEditor.tsx
@@ -59,7 +59,7 @@ export const FileEditor = ({
         value={title}
         onChange={handleOnChangeFileName}
         onKeyDown={handleOnKeyDown}
-        className="text-5xl font-bold w-full bg-transparent focus:outline-none pb-4 resize-none"
+        className="text-3xl md:text-4xl font-bold w-full bg-transparent focus:outline-none pb-4 resize-none"
       />
       <RemirrorComponent
         selectedFile={selectedFile}

diff --git a/src/components/MarkdownEditor/RemirrorCustomToolbar/RemirrorCustomToolbar.tsx b/src/components/MarkdownEditor/RemirrorCustomToolbar/RemirrorCustomToolbar.tsx
@@ -24,7 +24,7 @@ import * as Menubar from "@radix-ui/react-menubar";
 
 export const RemirrorCustomToolbar = ({}: {}) => {
   return (
-    <div className="fixed bottom-0 z-50 my-4 justify-center items-center w-[36rem] lg:w-[48rem]">
+    <div className="fixed bottom-0 z-30 my-4 justify-center items-center w-[36rem] lg:w-[48rem]">
       <div className="flex justify-center items-center ">
         <Menubar.Root className="border overflow-hidden inline-flex flex-shrink-0 bg-white rounded-full shadow-lg">
           <Menubar.Menu>

diff --git a/src/components/MarkdownEditor/RemirrorCustomToolbar/RemirrorCustomToolbarCustomButtons.tsx b/src/components/MarkdownEditor/RemirrorCustomToolbar/RemirrorCustomToolbarCustomButtons.tsx
@@ -36,7 +36,7 @@ const RemirrorCustomToolbarCustomButton = ({
         </TooltipTrigger>
         <TooltipContent
           side="bottom"
-          className="mb-1 bg-zinc-800 text-white opacity-80 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs text-primary-foreground"
+          className="mb-1 bg-zinc-800 text-white opacity-80 z-30 overflow-hidden rounded-md px-3 py-1.5 text-xs text-primary-foreground"
         >
           <p>{description} 
             {

diff --git a/src/components/MarkdownEditor/RemirrorCustomToolbar/RemirrorCustomToolbarHeadingButton.tsx b/src/components/MarkdownEditor/RemirrorCustomToolbar/RemirrorCustomToolbarHeadingButton.tsx
@@ -41,7 +41,7 @@ export const RemirrorCustomToolbarHeadingButton = () => {
         <TooltipContent
           side="bottom"
           className={`mb-1 bg-zinc-800 text-white 
-            opacity-80 z-50 overflow-hidden rounded-md px-3 py-1.5 
+            opacity-80 z-30 overflow-hidden rounded-md px-3 py-1.5 
             text-xs text-primary-foreground
           `}
         >

diff --git a/src/components/MarkdownEditor/RemirrorMarkdownEditor.tsx b/src/components/MarkdownEditor/RemirrorMarkdownEditor.tsx
@@ -120,7 +120,25 @@ export const RemirrorMarkdownEditor: FC<
     <Remirror
       manager={manager}
       {...rest}
-      classNames={["overflow-hidden", "outline-none", "prose", "prose-zinc"]}
+      classNames={[
+        "overflow-hidden",
+        "outline-none",
+        "prose",
+        "md:prose-base",
+        "prose-sm",
+        "prose-zinc",
+        "prose-p:m-0",
+        "prose-li:m-0",
+        "prose-ul:m-0",
+        "prose-ol:m-0",
+        "prose-headings:mt-6",
+        "prose-headings:mb-2",
+        "prose-headings:font-semibold",
+        "prose-p:leading-6",
+        "[&>p]:mt-4",
+        "[&>ul]:mt-4",
+        "[&>ol]:mt-4",
+      ]}
     >
       {/* <MarkdownToolbar /> */}
       <RemirrorCustomToolbar />

diff --git a/src/components/ui/ResizableSidebar.tsx b/src/components/ui/ResizableSidebar.tsx
@@ -0,0 +1,59 @@
+import React, { useRef, useEffect } from "react";
+
+const MyComponent = ({
+  children,
+  minWidth,
+  maxWidth,
+  setWidth,
+  hidden
+} : {
+  children: React.ReactNode,
+  minWidth: number,
+  maxWidth: number,
+  setWidth: (fn: any) => void,
+  hidden?: boolean
+}) => {
+  //resizing sidebar
+  const isResized = useRef(false);
+
+  useEffect(() => {
+    window.addEventListener("mousemove", (e) => {
+      if (!isResized.current) {
+        return;
+      }
+
+      setWidth((previousWidth: number) => {
+        const newWidth = previousWidth + e.movementX / 2;
+
+        const isWidthInRange = newWidth >= minWidth && newWidth <= maxWidth;
+
+        return isWidthInRange ? newWidth : previousWidth;
+      });
+    });
+
+    window.addEventListener("mouseup", () => {
+      isResized.current = false;
+    });
+  }, []);
+
+
+  return (
+    <div
+      className={`md:static fixed z-40 h-full flex ${
+        hidden ? "hidden" : ""
+      }`}
+    >
+      {children}
+      <div
+        //draggable divider
+        onMouseDown={() => {
+          console.log("mousedown")
+          isResized.current = true;
+        }}
+        className="w-0 pl-[3px] bg-zinc-50 cursor-col-resize "
+      ></div>
+    </div>
+  );
+};
+
+export default MyComponent;