Add SidebarContainer with resizable tabs.

y-scope · Sep 17, 2024 · c6ab307 · c6ab307
1 parent 96de362
commit c6ab307
Show file tree

Hide file tree

Showing 16 changed files with 402 additions and 53 deletions.
diff --git a/new-log-viewer/src/components/CustomListItem.tsx b/new-log-viewer/src/components/CustomListItem.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+
+import {
+    ListItem,
+    ListItemContent,
+    ListItemDecorator,
+    Typography,
+} from "@mui/joy";
+
+
+interface CustomListItemProps {
+    content: string,
+    icon: React.ReactNode,
+    title: string
+}
+
+/**
+ * Renders a custom list item with an icon, a title and a context text.
+ *
+ * @param props
+ * @param props.content
+ * @param props.icon
+ * @param props.title
+ * @return
+ */
+const CustomListItem = ({content, icon, title}: CustomListItemProps) => (
+    <ListItem>
+        <ListItemDecorator>
+            {icon}
+        </ListItemDecorator>
+        <ListItemContent>
+            <Typography level={"title-sm"}>
+                {title}
+            </Typography>
+            <Typography
+                level={"body-sm"}
+            >
+                {content}
+            </Typography>
+        </ListItemContent>
+    </ListItem>
+);
+
+export default CustomListItem;
diff --git a/new-log-viewer/src/components/DropFileContainer/index.css b/new-log-viewer/src/components/DropFileContainer/index.css
@@ -2,11 +2,6 @@
     position: relative;
 }
 
-.drop-file-children {
-    width: 100%;
-    height: 100%;
-}
-
 .hover-mask {
     position: absolute;
     top: 0;

diff --git a/new-log-viewer/src/components/DropFileContainer/index.tsx b/new-log-viewer/src/components/DropFileContainer/index.tsx
@@ -70,10 +70,7 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
             onDragOver={handleDrag}
             onDrop={handleDrop}
         >
-            <div
-                className={"drop-file-children"}
-                onDrop={handleDrop}
-            >
+            <div onDrop={handleDrop}>
                 {children}
                 {isFileHovering && (
                     <div

diff --git a/new-log-viewer/src/components/Layout.tsx b/new-log-viewer/src/components/Layout.tsx
@@ -5,6 +5,7 @@ import {CONFIG_DEFAULT} from "../utils/config";
 import DropFileContainer from "./DropFileContainer";
 import Editor from "./Editor";
 import MenuBar from "./MenuBar";
+import SidebarContainer from "./SidebarContainer";
 import StatusBar from "./StatusBar";
 import APP_THEME from "./theme";
 
@@ -22,9 +23,11 @@ const Layout = () => {
             theme={APP_THEME}
         >
             <MenuBar/>
-            <DropFileContainer>
-                <Editor/>
-            </DropFileContainer>
+            <SidebarContainer>
+                <DropFileContainer>
+                    <Editor/>
+                </DropFileContainer>
+            </SidebarContainer>
             <StatusBar/>
         </CssVarsProvider>
     );

diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -1,7 +1,4 @@
-import {
-    useContext,
-    useState,
-} from "react";
+import {useContext} from "react";
 
 import {
     Divider,
@@ -11,15 +8,9 @@ import {
 } from "@mui/joy";
 
 import Description from "@mui/icons-material/Description";
-import FileOpenIcon from "@mui/icons-material/FileOpen";
-import Settings from "@mui/icons-material/Settings";
 
 import {StateContext} from "../../contexts/StateContextProvider";
-import {CURSOR_CODE} from "../../typings/worker";
-import {openFile} from "../../utils/file";
-import SettingsModal from "../modals/SettingsModal";
 import NavigationBar from "./NavigationBar";
-import SmallIconButton from "./SmallIconButton";
 
 import "./index.css";
 
@@ -30,23 +21,7 @@ import "./index.css";
  * @return
  */
 const MenuBar = () => {
-    const {fileName, loadFile} = useContext(StateContext);
-
-    const [isSettingsModalOpen, setIsSettingsModalOpen] = useState<boolean>(false);
-
-    const handleOpenFileButtonClick = () => {
-        openFile((file) => {
-            loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null});
-        });
-    };
-
-    const handleSettingsModalClose = () => {
-        setIsSettingsModalOpen(false);
-    };
-
-    const handleSettingsModalOpen = () => {
-        setIsSettingsModalOpen(true);
-    };
+    const {fileName} = useContext(StateContext);
 
     return (
         <>
@@ -66,20 +41,7 @@ const MenuBar = () => {
 
                 <Divider orientation={"vertical"}/>
                 <NavigationBar/>
-                <Divider orientation={"vertical"}/>
-                <SmallIconButton onClick={handleOpenFileButtonClick}>
-                    <FileOpenIcon/>
-                </SmallIconButton>
-                <Divider orientation={"vertical"}/>
-                <SmallIconButton
-                    onClick={handleSettingsModalOpen}
-                >
-                    <Settings/>
-                </SmallIconButton>
             </Sheet>
-            <SettingsModal
-                isOpen={isSettingsModalOpen}
-                onClose={handleSettingsModalClose}/>
         </>
     );
 };

diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx
@@ -0,0 +1,51 @@
+import {useContext} from "react";
+
+import {
+    DialogContent,
+    DialogTitle,
+    Divider,
+    List,
+    TabPanel,
+} from "@mui/joy";
+
+import AbcIcon from "@mui/icons-material/Abc";
+import StorageIcon from "@mui/icons-material/Storage";
+
+import {StateContext} from "../../../contexts/StateContextProvider";
+import {formatSizeInBytes} from "../../../utils/units";
+import CustomListItem from "../../CustomListItem";
+import {TAB_NAME} from "./index";
+
+import "./index.css";
+
+
+/**
+ * Display the file name and original size of the selected file.
+ *
+ * @return
+ */
+const FileInfoTab = () => {
+    const {fileName, originalFileSizeInBytes} = useContext(StateContext);
+
+    return (
+        <TabPanel value={TAB_NAME.FILE_INFO}>
+            <DialogTitle>File Info</DialogTitle>
+            <DialogContent>
+                <List>
+                    <CustomListItem
+                        content={fileName}
+                        icon={<AbcIcon/>}
+                        title={"File Info"}/>
+                    <Divider/>
+                    <CustomListItem
+                        content={formatSizeInBytes(originalFileSizeInBytes)}
+                        icon={<StorageIcon/>}
+                        title={"Original Size"}/>
+                </List>
+            </DialogContent>
+        </TabPanel>
+    );
+};
+
+
+export default FileInfoTab;
diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css
@@ -0,0 +1,9 @@
+.sidebar-tabs {
+    height: 100%;
+    flex-grow: 1;
+    width: calc(100% - var(--ylv-panel-resize-handle-width));
+}
+
+.sidebar-tab-list-spacing {
+    flex-grow: 1;
+}
diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx
@@ -0,0 +1,109 @@
+import React, {
+    forwardRef,
+    useContext,
+    useState,
+} from "react";
+
+import {
+    Tab,
+    TabList,
+    Tabs,
+} from "@mui/joy";
+
+import FileOpenIcon from "@mui/icons-material/FileOpen";
+import InfoIcon from "@mui/icons-material/Info";
+import SettingsIcon from "@mui/icons-material/Settings";
+
+import {StateContext} from "../../../contexts/StateContextProvider";
+import {CURSOR_CODE} from "../../../typings/worker";
+import {openFile} from "../../../utils/file";
+import SettingsModal from "../../modals/SettingsModal";
+import FileInfoTab from "./FileInfoTab";
+
+
+enum TAB_NAME {
+    OPEN_FILE = "openFile",
+    FILE_INFO = "fileInfo",
+    SETTINGS = "settings",
+}
+
+/**
+ * Displays a set of tabs in a vertical orientation.
+ *
+ * @param tabListRef Reference object used to access the TabList DOM element.
+ * @return
+ */
+const PanelTabs = forwardRef<HTMLDivElement>((_, tabListRef) => {
+    const {loadFile} = useContext(StateContext);
+
+    const [activeTabName, setActiveTabName] = useState<TAB_NAME>(TAB_NAME.FILE_INFO);
+    const [isSettingsModalOpen, setIsSettingsModalOpen] = useState<boolean>(false);
+
+    const handleOpenFile = () => {
+        openFile((file) => {
+            loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null});
+        });
+    };
+
+    const handleSettingsModalClose = () => {
+        setIsSettingsModalOpen(false);
+    };
+
+    const handleTabChange = (__: React.SyntheticEvent | null, value: number | string | null) => {
+        switch (value) {
+            case TAB_NAME.OPEN_FILE:
+                handleOpenFile();
+                break;
+            case TAB_NAME.SETTINGS:
+                setIsSettingsModalOpen(true);
+                break;
+            default:
+                setActiveTabName(value as TAB_NAME);
+        }
+    };
+
+    return (
+        <>
+            <Tabs
+                className={"sidebar-tabs"}
+                orientation={"vertical"}
+                value={activeTabName}
+                variant={"plain"}
+                onChange={handleTabChange}
+            >
+                <TabList
+                    ref={tabListRef}
+                    size={"lg"}
+                >
+                    {[
+                        {tabName: TAB_NAME.OPEN_FILE, icon: <FileOpenIcon/>},
+                        {tabName: TAB_NAME.FILE_INFO, icon: <InfoIcon/>},
+                    ].map(({tabName, icon}) => (
+                        <Tab
+                            color={"neutral"}
+                            key={tabName}
+                            value={tabName}
+                        >
+                            {icon}
+                        </Tab>
+                    ))}
+                    <div className={"sidebar-tab-list-spacing"}/>
+                    <Tab
+                        color={"neutral"}
+                        value={TAB_NAME.SETTINGS}
+                    >
+                        <SettingsIcon/>
+                    </Tab>
+                </TabList>
+                <FileInfoTab/>
+            </Tabs>
+            <SettingsModal
+                isOpen={isSettingsModalOpen}
+                onClose={handleSettingsModalClose}/>
+        </>
+    );
+});
+
+PanelTabs.displayName = "PanelTabs";
+export default PanelTabs;
+export {TAB_NAME};
diff --git a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css
@@ -0,0 +1,11 @@
+.resize-handle {
+    cursor: ew-resize;
+    width: 3px;
+    height: 100%;
+    background-color: var(--joy-palette-neutral-outlinedBorder, #cdd7e1);
+    z-index: 1;
+}
+
+.resize-handle:hover {
+    background-color: var(--joy-palette-primary-solidHoverBg, #0258a8);
+}