enhance(ui): use rounded menu item in drawer

cloudreve · Oct 31, 2022 · 963ac5b · 963ac5b
1 parent 5ff53fe
commit 963ac5b
Show file tree

Hide file tree

Showing 4 changed files with 278 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -102,6 +102,7 @@
     "semver": "6.3.0",
     "streamsaver": "^2.0.6",
     "style-loader": "1.0.0",
+    "styled-components": "^5.3.6",
     "terser-webpack-plugin": "1.4.1",
     "timeago-react": "^3.0.0",
     "ts-pnp": "1.1.4",

diff --git a/src/component/Navbar/FileTags.js b/src/component/Navbar/FileTags.js
@@ -2,7 +2,6 @@ import React, { Suspense, useCallback, useState } from "react";
 import {
     Divider,
     List,
-    ListItem,
     ListItemIcon,
     ListItemText,
     makeStyles,
@@ -21,6 +20,7 @@ import pathHelper from "../../utils/page";
 import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
 import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
 import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import MuiListItem from "@material-ui/core/ListItem";
 import { useDispatch } from "react-redux";
 import Auth from "../../middleware/Auth";
 import {
@@ -47,6 +47,12 @@ import API from "../../middleware/Api";
 import { navigateTo, searchMyFile, toggleSnackbar } from "../../redux/explorer";
 import { useTranslation } from "react-i18next";
 
+const ListItem = withStyles((theme) => ({
+    root: {
+        borderRadius:theme.shape.borderRadius,
+    },
+}))(MuiListItem);
+
 const ExpansionPanel = withStyles({
     root: {
         maxWidth: "100%",
@@ -62,11 +68,10 @@ const ExpansionPanel = withStyles({
     expanded: {},
 })(MuiExpansionPanel);
 
-const ExpansionPanelSummary = withStyles({
+const ExpansionPanelSummary = withStyles((theme) =>({
     root: {
         minHeight: 0,
         padding: 0,
-
         "&$expanded": {
             minHeight: 0,
         },
@@ -80,7 +85,7 @@ const ExpansionPanelSummary = withStyles({
         },
     },
     expanded: {},
-})(MuiExpansionPanelSummary);
+}))(MuiExpansionPanelSummary);
 
 const ExpansionPanelDetails = withStyles((theme) => ({
     root: {
@@ -112,6 +117,13 @@ const useStyles = makeStyles((theme) => ({
         overflow: "hidden",
         textOverflow: "ellipsis",
     },
+    paddingList:{
+        padding:theme.spacing(1),
+    },
+    paddingSummary:{
+        paddingLeft:theme.spacing(1),
+        paddingRight:theme.spacing(1),
+    }
 }));
 
 const icons = {
@@ -223,35 +235,38 @@ export default function FileTag() {
                     aria-controls="panel1d-content"
                     id="panel1d-header"
                 >
-                    <ListItem
-                        button
-                        key="我的文件"
-                        onClick={() =>
-                            !isHomePage && history.push("/home?path=%2F")
-                        }
-                    >
-                        <ListItemIcon>
-                            <KeyboardArrowRight
-                                className={classNames(
-                                    {
-                                        [classes.expanded]:
+                    <div className={classes.paddingSummary}>
+                        <ListItem
+                            button
+                            key="我的文件"
+                            onClick={() =>
+                                !isHomePage && history.push("/home?path=%2F")
+                            }
+                        >
+                            <ListItemIcon>
+                                <KeyboardArrowRight
+                                    className={classNames(
+                                        {
+                                            [classes.expanded]:
                                             tagOpen && isHomePage,
-                                        [classes.iconFix]: true,
-                                    },
-                                    classes.expand
+                                            [classes.iconFix]: true,
+                                        },
+                                        classes.expand
+                                    )}
+                                />
+                                {!(tagOpen && isHomePage) && (
+                                    <FolderShared className={classes.iconFix} />
                                 )}
-                            />
-                            {!(tagOpen && isHomePage) && (
-                                <FolderShared className={classes.iconFix} />
-                            )}
-                        </ListItemIcon>
-                        <ListItemText primary={t("navbar.myFiles")} />
-                    </ListItem>
+                            </ListItemIcon>
+                            <ListItemText primary={t("navbar.myFiles")} />
+                        </ListItem>
+                    </div>
+
                     <Divider />
                 </ExpansionPanelSummary>
 
                 <ExpansionPanelDetails>
-                    <List onMouseLeave={() => setTagHover(null)}>
+                    <List className={classes.paddingList} onMouseLeave={() => setTagHover(null)}>
                         <ListItem
                             button
                             id="pickfiles"

diff --git a/src/component/Navbar/Navbar.js b/src/component/Navbar/Navbar.js
@@ -33,15 +33,14 @@ import {
     Hidden,
     IconButton,
     List,
-    ListItem,
     ListItemIcon,
     ListItemText,
     SwipeableDrawer,
     Toolbar,
     Tooltip,
     Typography,
     withStyles,
-    withTheme,
+    withTheme
 } from "@material-ui/core";
 import Auth from "../../middleware/Auth";
 import API from "../../middleware/Api";
@@ -74,11 +73,18 @@ import {
     startDownload,
 } from "../../redux/explorer/action";
 import { withTranslation } from "react-i18next";
+import MuiListItem from "@material-ui/core/ListItem";
 
 vhCheck();
 const drawerWidth = 240;
 const drawerWidthMobile = 270;
 
+const ListItem = withStyles((theme) => ({
+    root: {
+        borderRadius:theme.shape.borderRadius,
+    },
+}))(MuiListItem);
+
 const mapStateToProps = (state) => {
     return {
         desktopOpen: state.viewUpdate.open,
@@ -295,6 +301,9 @@ const styles = (theme) => ({
     minStickDrawer: {
         overflowY: "auto",
     },
+    paddingList:{
+        padding:theme.spacing(1),
+    }
 });
 class NavbarCompoment extends Component {
     constructor(props) {
@@ -396,7 +405,7 @@ class NavbarCompoment extends Component {
                     <>
                         <div className={classes.minStickDrawer}>
                             <FileTag />
-                            <List>
+                            <List className={classes.paddingList}>
                                 <ListItem
                                     button
                                     key="我的分享"