fix(MainPageLayout): fix popMenu item styles (#537)

netless-io · Apr 15, 2021 · d96c337 · d96c337
1 parent 0a93d9c
commit d96c337
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 56 deletions.
diff --git a/desktop/renderer-app/src/assets/image/logout.svg b/desktop/renderer-app/src/assets/image/logout.svg
diff --git a/desktop/renderer-app/src/components/MainPageLayoutContainer.tsx b/desktop/renderer-app/src/components/MainPageLayoutContainer.tsx
@@ -61,19 +61,19 @@ export const MainPageLayoutContainer: React.FC<MainPageLayoutContainerProps> = (
         {
             key: "userConfig",
             icon: (): React.ReactNode => <img src={settingSVG} />,
-            title: "userConfig",
+            title: "个人设置",
             route: "/userConfig",
         },
         {
             key: "getGitHubCode",
             icon: (): React.ReactNode => <img src={gitHubSVG} />,
-            title: "getGitHubCode",
+            title: "获取源码",
             route: "/getGitHubCode",
         },
         {
             key: "logout",
             icon: (): React.ReactNode => <img src={logoutSVG} />,
-            title: "logout",
+            title: <span className="logout-title">退出登录</span>,
             route: "/logout",
         },
     ];

diff --git a/packages/flat-components/src/components/MainPageLayout/MainPageLayout.stories.tsx b/packages/flat-components/src/components/MainPageLayout/MainPageLayout.stories.tsx
@@ -10,6 +10,7 @@ import {
     ToolFilled,
     ToolOutlined,
 } from "@ant-design/icons";
+import faker from "faker";
 
 const storyMeta: Meta = {
     title: "Components/MainPageLayout",
@@ -76,6 +77,12 @@ Overview.args = {
             title: "获取源码",
             route: "/github",
         },
+        {
+            key: "logout",
+            icon: () => <CloudOutlined className="red" />,
+            title: <span className="red">退出登录</span>,
+            route: "/logout",
+        },
     ],
     activeKeys: ["home"],
     avatarSrc: "http://placekitten.com/200/200",
@@ -126,3 +133,45 @@ WithSubMenu.args = {
     ],
     activeKeys: ["systemTesting"],
 };
+
+export const LongContent: Story<MainPageLayoutProps> = args => (
+    <div className="vh-75 mw8-ns">
+        <MainPageLayout {...args}>
+            {Array(300)
+                .fill(0)
+                .map(() => (
+                    <p>{faker.random.words()}</p>
+                ))}
+        </MainPageLayout>
+    </div>
+);
+LongContent.args = {
+    ...Overview.args,
+    subMenu: [
+        {
+            key: "systemTesting",
+            icon: () => <ToolOutlined />,
+            title: "系统检测",
+            route: "/device/system",
+        },
+        {
+            key: "cameraTesting",
+            icon: () => <CloudOutlined />,
+            title: "摄像头检测",
+            route: "/device/camera",
+        },
+        {
+            key: "speakerTesting",
+            icon: () => <CloudOutlined />,
+            title: "扬声器检测",
+            route: "/device/speaker",
+        },
+        {
+            key: "microphoneTesting",
+            icon: () => <CloudOutlined />,
+            title: "麦克风检测",
+            route: "/device/microphone",
+        },
+    ],
+    activeKeys: ["systemTesting"],
+};
diff --git a/packages/flat-components/src/components/MainPageLayout/index.tsx b/packages/flat-components/src/components/MainPageLayout/index.tsx
@@ -1,13 +1,12 @@
 import "./style.less";
-import { CloudOutlined } from "@ant-design/icons";
 import { Avatar, Divider, Popover } from "antd";
 import React, { useState } from "react";
 import classNames from "classnames";
 
 export interface MainPageLayoutItem {
     key: string;
     icon: (active: boolean) => React.ReactNode;
-    title: string;
+    title: React.ReactNode;
     route: string;
 }
 
@@ -61,15 +60,13 @@ export const MainPageLayout: React.FC<MainPageLayoutProps> = ({
                                 onClick(menuItem);
                             }}
                         >
-                            {menuItem.icon(activeKeys.includes(menuItem.key))}
+                            <span className="popmenu-item-icon">
+                                {menuItem.icon(activeKeys.includes(menuItem.key))}
+                            </span>
                             {menuItem.title}
                         </a>
                     );
                 })}
-                <a className="popmenu-item-logout main-layout-menu-link">
-                    <CloudOutlined />
-                    退出登录
-                </a>
             </div>
         );
     }
@@ -155,16 +152,18 @@ export const MainPageLayout: React.FC<MainPageLayoutProps> = ({
                                             onClick(menuItem);
                                         }}
                                     >
-                                        {menuItem.icon(activeKeys.includes(menuItem.key))}
-                                        <span>{menuItem.title}</span>
+                                        <span className="sub-menu-item-icon">
+                                            {menuItem.icon(activeKeys.includes(menuItem.key))}
+                                        </span>
+                                        {menuItem.title}
                                     </a>
                                 </li>
                             );
                         })}
                     </ul>
                 </div>
             )}
-            <div className="main-layout-container-content">{children}</div>
+            <div className="main-layout-container-content fancy-scrollbar">{children}</div>
         </div>
     );
 };
diff --git a/packages/flat-components/src/components/MainPageLayout/style.less b/packages/flat-components/src/components/MainPageLayout/style.less
@@ -26,6 +26,7 @@
 }
 
 .main-layout-container-content {
+    overflow: auto;
     flex: 1;
     background-color: #f4f6f9;
 }
@@ -81,14 +82,14 @@
     background-color: #fff;
     border-right: solid 1px #dbe1ea;
 
-    ul {
+    > ul {
         list-style-type: none;
         padding-inline-start: 0px;
     }
+}
 
-    span {
-        margin-left: 8px;
-    }
+.sub-menu-item-icon {
+    margin-right: 8px;
 }
 
 .main-layout-container-popover {
@@ -104,6 +105,14 @@
     &.ant-popover-placement-bottomLeft {
         padding-top: 0;
     }
+
+    .ant-popover-arrow {
+        border-top-color: transparent !important;
+        border-right-color: transparent !important;
+        border-bottom-color: transparent !important;
+        border-left-color: transparent !important;
+        box-shadow: none !important;
+    }
 }
 
 .popmenu-title {
@@ -133,27 +142,8 @@
     height: 40px;
     line-height: 40px;
     color: #444e60;
-
-    span {
-        padding-right: 8px;
-    }
 }
 
-.popmenu-item-logout {
-    display: flex;
-    align-items: center;
-    padding-left: 16px;
-    width: 100%;
-    height: 40px;
-    line-height: 40px;
-    color: #f45454;
-
-    &:hover,
-    &:active {
-        color: #f45454;
-    }
-
-    span {
-        padding-right: 8px;
-    }
+.popmenu-item-icon {
+    margin-right: 8px;
 }