From 97c050875e86894cc77a8c4bd5e844b1ffc5bb6b Mon Sep 17 00:00:00 2001 From: Pionxzh Date: Sat, 3 Dec 2022 16:48:15 +0800 Subject: [PATCH 1/5] feat: turn left banner into a foldable drawer --- ui/src/App.tsx | 13 +--- ui/src/components/Header.tsx | 21 ++++- ui/src/components/Sidebar.tsx | 140 ++++++++++++++++++++++++---------- ui/src/pages/repo.tsx | 82 ++++++++------------ 4 files changed, 152 insertions(+), 104 deletions(-) diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 42a2c9e6..6e15b030 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -63,17 +63,8 @@ const router = createBrowserRouter([ { path: "repo/:id", element: ( - -
- - - + + ), }, diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx index 5746b90c..e90ad492 100644 --- a/ui/src/components/Header.tsx +++ b/ui/src/components/Header.tsx @@ -24,7 +24,15 @@ import { useAuth } from "../lib/auth"; import useMe from "../lib/me"; -export function Header() { +type HeaderProps = { + open?: boolean; + drawerWidth?: number; +}; + +export const Header: React.FC = ({ + open = false, + drawerWidth = 0, +}) => { const [anchorElNav, setAnchorElNav] = useState(null); const [anchorElUser, setAnchorElUser] = useState(null); @@ -48,7 +56,14 @@ export function Header() { const { me } = useMe(); return ( - + ); -} +}; const MyMenuItem = ({ children, to = "/" }) => { return ( diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx index 99db145f..4f1fb600 100644 --- a/ui/src/components/Sidebar.tsx +++ b/ui/src/components/Sidebar.tsx @@ -1,22 +1,20 @@ -import { useEffect, useState, useContext } from "react"; - +import { useEffect, useContext } from "react"; import { useParams } from "react-router-dom"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; import Divider from "@mui/material/Divider"; import Tooltip from "@mui/material/Tooltip"; import IconButton from "@mui/material/IconButton"; - -import { grey } from "@mui/material/colors"; - -import { useSnackbar, VariantType } from "notistack"; - -import { gql, useQuery, useMutation, useApolloClient } from "@apollo/client"; - import StopIcon from "@mui/icons-material/Stop"; import RefreshIcon from "@mui/icons-material/Refresh"; import CloudUploadIcon from "@mui/icons-material/CloudUpload"; +import Drawer from "@mui/material/Drawer"; +import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; +import Grid from "@mui/material/Grid"; +import ChevronRightIcon from "@mui/icons-material/ChevronRight"; +import { useSnackbar, VariantType } from "notistack"; +import { gql, useQuery, useMutation, useApolloClient } from "@apollo/client"; import { useStore } from "zustand"; import { usePrompt } from "../lib/prompt"; @@ -24,7 +22,6 @@ import { usePrompt } from "../lib/prompt"; import { RepoContext, selectNumDirty, RoleType } from "../lib/store"; import useMe from "../lib/me"; -import { Grid } from "@mui/material"; function Flex(props) { return ( @@ -270,40 +267,105 @@ function ToastError() { return ; } -export function Sidebar() { +type SidebarProps = { + width: number; + open: boolean; + onOpen: () => void; + onClose: () => void; +}; + +export const Sidebar: React.FC = ({ + width, + open, + onOpen, + onClose, +}) => { // never render saving status / runtime module for a guest // FIXME: improve the implementation logic const store = useContext(RepoContext); if (!store) throw new Error("Missing BearContext.Provider in the tree"); const role = useStore(store, (state) => state.role); return ( - - {role === RoleType.GUEST ? ( - <> - - Read-only Mode: You are a guest. - - - {" "} - - - - ) : ( - <> - - - - - {" "} - - - - - + <> + + + + + + + + + + + + + + + + {role === RoleType.GUEST ? ( + <> + + Read-only Mode: You are a guest. + + + {" "} + + + + ) : ( + <> + + + + + {" "} + + + + + + + + + )} - - - )} - + + + ); -} +}; diff --git a/ui/src/pages/repo.tsx b/ui/src/pages/repo.tsx index bb25826c..6f24da82 100644 --- a/ui/src/pages/repo.tsx +++ b/ui/src/pages/repo.tsx @@ -2,9 +2,9 @@ import { useParams, useNavigate } from "react-router-dom"; import { Link as ReactLink } from "react-router-dom"; import Box from "@mui/material/Box"; import Link from "@mui/material/Link"; -import Button from "@mui/material/Button"; import Alert from "@mui/material/Alert"; import AlertTitle from "@mui/material/AlertTitle"; +import { useApolloClient } from "@apollo/client"; import { useEffect, useState, useRef, useContext } from "react"; @@ -14,71 +14,51 @@ import { createRepoStore, RepoContext } from "../lib/store"; import useMe from "../lib/me"; import { Canvas } from "../components/Canvas"; +import { Header } from "../components/Header"; import { Sidebar } from "../components/Sidebar"; -import { useApolloClient } from "@apollo/client"; function RepoWrapper({ children }) { - // this component is used to provide foldable sidebar - const [show, setShow] = useState(true); - let sidebar_width = 0.12; + // this component is used to provide a foldable layout + const [open, setOpen] = useState(true); + const DrawerWidth = 240; + return ( - - - - {/* */} - - - - - - + + setOpen(true)} + onClose={() => setOpen(false)} + /> +
- + {children} - {children} ); From 3e435bb2c715a2df83181b68ca819673f61d7541 Mon Sep 17 00:00:00 2001 From: Pionxzh Date: Sat, 3 Dec 2022 17:52:50 +0800 Subject: [PATCH 2/5] feat: add breadcrumbs to the header --- ui/src/App.tsx | 16 ++++++--- ui/src/components/Header.tsx | 64 +++++++++++++++++++++--------------- ui/src/pages/repo.tsx | 6 +++- 3 files changed, 54 insertions(+), 32 deletions(-) diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 6e15b030..d093a12b 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -33,15 +33,23 @@ const theme = createTheme({ }, }); -function NormalLayout({ children }: any) { +type NormalLayoutProps = { + currentPage?: string | null; + children: React.ReactNode; +}; + +const NormalLayout: React.FC = ({ + currentPage, + children, +}) => { return ( -
+
{children} {/*