feat(flat-pages): add applications and oauth page (#1715)

* wip: i18n * wip: i18n * wip: fix code icon * wip: spinner style * Update packages/flat-i18n/locales/en.json Co-authored-by: Black-Hole <158blackhole@gmail.com> * Apply suggestions from code review Co-authored-by: Black-Hole <158blackhole@gmail.com> * add comments Co-authored-by: Black-Hole <158blackhole@gmail.com>
netless-io · Oct 11, 2022 · 2a85aeb · 2a85aeb
1 parent 848dd2c
commit 2a85aeb
Show file tree

Hide file tree

Showing 34 changed files with 2,032 additions and 54 deletions.
diff --git a/packages/flat-components/src/components/FlatIcons/FlatIcon.stories.tsx b/packages/flat-components/src/components/FlatIcons/FlatIcon.stories.tsx
@@ -219,6 +219,7 @@ export const InteractiveIcons: Story = ({ active }) => (
             "TestFilled",
             "Github",
             "Copy",
+            "Code",
             "HandUp",
             "Delete",
             "Reset",

diff --git a/packages/flat-components/src/components/FlatIcons/icons/SVGCode.tsx b/packages/flat-components/src/components/FlatIcons/icons/SVGCode.tsx
@@ -0,0 +1,41 @@
+import "../style.less";
+import React from "react";
+import { FlatIconProps } from "../types";
+
+export const SVGCode: React.FC<FlatIconProps> = ({ active, className = "", ...restProps }) => {
+    return (
+        <svg
+            className={`${className} flat-icon ${active ? "is-active" : ""}`}
+            fill="none"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+            {...restProps}
+        >
+            <path
+                className="flat-icon-stroke-color"
+                d="M10 7L5 12L10 17"
+                stroke="#5D6066"
+                strokeLinejoin="round"
+                strokeWidth="1.25"
+            />
+            <path
+                className="flat-icon-stroke-color"
+                d="M15 7L20 12L15 17"
+                stroke="#5D6066"
+                strokeLinejoin="round"
+                strokeWidth="1.25"
+            />
+            <path
+                className="flat-icon-stroke-color"
+                d="M11 18L14 6"
+                stroke="#5D6066"
+                strokeLinejoin="round"
+                strokeWidth="1.25"
+            />
+        </svg>
+    );
+};
+
+export default SVGCode;
diff --git a/packages/flat-components/src/components/FlatIcons/index.ts b/packages/flat-components/src/components/FlatIcons/index.ts
@@ -41,6 +41,7 @@ export * from "./icons/SVGClose";
 export * from "./icons/SVGCloud";
 export * from "./icons/SVGCloudFilled";
 export * from "./icons/SVGCloudOutlined";
+export * from "./icons/SVGCode";
 export * from "./icons/SVGCopy";
 export * from "./icons/SVGDelete";
 export * from "./icons/SVGDoubleDown";

diff --git a/packages/flat-components/src/components/MainPageLayout/MainPageSubMenu/index.tsx b/packages/flat-components/src/components/MainPageLayout/MainPageSubMenu/index.tsx
@@ -1,18 +1,102 @@
 import "./style.less";
 
-import React from "react";
+import React, { useCallback } from "react";
 import classNames from "classnames";
-import { MainPageLayoutItem } from "../types";
+import { MainPageLayoutItem, MainPageLayoutTreeItem } from "../types";
+import { useState } from "react";
+import { SVGDown, SVGUp } from "../../FlatIcons";
 
 export interface MainPageSubMenuProps {
     /** when an item is clicked */
     onClick: (mainPageLayoutItem: MainPageLayoutItem) => void;
     /** a list of keys to highlight the items */
     activeKeys: string[];
     /** inside sub menu in MainPageLayout */
-    subMenu: MainPageLayoutItem[];
+    subMenu: MainPageLayoutTreeItem[];
 }
 
+export interface MainPageSubMenuItemProps {
+    onClick: (mainPageLayoutItem: MainPageLayoutItem) => void;
+    activeKeys: string[];
+    menuItem: MainPageLayoutTreeItem;
+}
+
+const renderNormalItem = ({
+    menuItem,
+    onClick,
+    activeKeys,
+}: MainPageSubMenuItemProps): React.ReactNode => {
+    return (
+        <a
+            className={classNames("main-layout-sub-menu-item", {
+                "is-active": activeKeys.includes(menuItem.key),
+            })}
+            onClick={e => {
+                e.preventDefault();
+                onClick(menuItem);
+            }}
+        >
+            <span className="main-layout-sub-menu-item-icon">
+                {menuItem.icon(activeKeys.includes(menuItem.key))}
+            </span>
+            {menuItem.title}
+        </a>
+    );
+};
+
+const renderFolderItem = (
+    { menuItem, activeKeys }: MainPageSubMenuItemProps,
+    expanded: boolean,
+    toggleExpanded: () => void,
+): React.ReactNode => {
+    return (
+        <a
+            className={classNames("main-layout-sub-menu-item", "is-folder")}
+            onClick={toggleExpanded}
+        >
+            <span className="main-layout-sub-menu-item-icon">
+                {menuItem.icon(activeKeys.includes(menuItem.key))}
+            </span>
+            {menuItem.title}
+            <span className="main-layout-sub-menu-item-expand">
+                {expanded ? <SVGUp /> : <SVGDown />}
+            </span>
+        </a>
+    );
+};
+
+const MainPageSubMenuItem: React.FC<MainPageSubMenuItemProps> = props => {
+    const { menuItem, onClick, activeKeys } = props;
+    const [expanded, setExpanded] = useState(() => {
+        if (menuItem.children) {
+            return menuItem.children.some(item => activeKeys.includes(item.key));
+        }
+        return false;
+    });
+
+    const toggleExpanded = useCallback(() => setExpanded(collapsed => !collapsed), []);
+
+    return (
+        <li className={classNames({ expanded })}>
+            {menuItem.children
+                ? renderFolderItem(props, expanded, toggleExpanded)
+                : renderNormalItem(props)}
+            {menuItem.children && (
+                <ul>
+                    {menuItem.children.map(child => (
+                        <MainPageSubMenuItem
+                            key={child.key}
+                            activeKeys={activeKeys}
+                            menuItem={child}
+                            onClick={onClick}
+                        />
+                    ))}
+                </ul>
+            )}
+        </li>
+    );
+};
+
 export const MainPageSubMenu: React.FC<MainPageSubMenuProps> = ({
     subMenu,
     onClick,
@@ -21,26 +105,14 @@ export const MainPageSubMenu: React.FC<MainPageSubMenuProps> = ({
     return (
         <div className="main-layout-sub-menu">
             <ul>
-                {subMenu.map(menuItem => {
-                    return (
-                        <li key={menuItem.key}>
-                            <a
-                                className={classNames("main-layout-sub-menu-item", {
-                                    "is-active": activeKeys.includes(menuItem.key),
-                                })}
-                                onClick={e => {
-                                    e.preventDefault();
-                                    onClick(menuItem);
-                                }}
-                            >
-                                <span className="main-layout-sub-menu-item-icon">
-                                    {menuItem.icon(activeKeys.includes(menuItem.key))}
-                                </span>
-                                {menuItem.title}
-                            </a>
-                        </li>
-                    );
-                })}
+                {subMenu.map(menuItem => (
+                    <MainPageSubMenuItem
+                        key={menuItem.key}
+                        activeKeys={activeKeys}
+                        menuItem={menuItem}
+                        onClick={onClick}
+                    />
+                ))}
             </ul>
         </div>
     );

diff --git a/packages/flat-components/src/components/MainPageLayout/MainPageSubMenu/style.less b/packages/flat-components/src/components/MainPageLayout/MainPageSubMenu/style.less
@@ -3,17 +3,35 @@
     border-right: solid 1px #dbe1ea;
     background-color: #fff;
 
-    > ul {
+    ul {
+        display: none;
         list-style-type: none;
         padding-inline-start: 0px;
     }
+
+    > ul {
+        display: block;
+    }
+
+    .expanded > ul {
+        display: block;
+    }
 }
 
 .main-layout-sub-menu-item-icon {
+    width: 24px;
+    height: 24px;
     margin-right: 8px;
+
+    svg {
+        width: 22px;
+        height: 22px;
+        vertical-align: text-top;
+    }
 }
 
 .main-layout-sub-menu-item {
+    position: relative;
     display: flex;
     padding: 9px 0px 9px 16px;
     transition: background-color 0.4s;
@@ -32,6 +50,17 @@
     }
 }
 
+.main-layout-sub-menu-item-expand {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    position: absolute;
+    right: 8px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+}
+
 .flat-color-scheme-dark {
     .main-layout-sub-menu {
         background-color: var(--grey-10);

diff --git a/packages/flat-components/src/components/MainPageLayout/index.tsx b/packages/flat-components/src/components/MainPageLayout/index.tsx
@@ -7,7 +7,7 @@ import { MainPageTopBar, MainPageTopBarProps } from "./MainPageTopBar";
 import { MainPageHeader, MainPageHeaderProps } from "./MainPageHeader";
 
 export * from "./MainPageHeader";
-export type { MainPageLayoutItem, MainPageTopBarMenuItem, WindowsSystemBtnItem } from "./types";
+export * from "./types";
 
 export interface MainPageLayoutProps
     extends MainPageNavProps,

diff --git a/packages/flat-components/src/components/MainPageLayout/types.ts b/packages/flat-components/src/components/MainPageLayout/types.ts
@@ -7,6 +7,10 @@ export interface MainPageLayoutItem {
     route: string;
 }
 
+export interface MainPageLayoutTreeItem extends MainPageLayoutItem {
+    children?: MainPageLayoutTreeItem[];
+}
+
 export interface MainPageTopBarMenuItem {
     key: string;
     route: string;

diff --git a/packages/flat-components/src/theme/antd.mod.less b/packages/flat-components/src/theme/antd.mod.less
@@ -580,6 +580,15 @@
             }
         }
     }
+
+    .ant-dropdown-menu-item:hover,
+    .ant-dropdown-menu-submenu-title:hover,
+    .ant-dropdown-menu-item.ant-dropdown-menu-item-active,
+    .ant-dropdown-menu-item.ant-dropdown-menu-submenu-title-active,
+    .ant-dropdown-menu-submenu-title.ant-dropdown-menu-item-active,
+    .ant-dropdown-menu-submenu-title.ant-dropdown-menu-submenu-title-active {
+        background-color: var(--grey-11);
+    }
 }
 
 /* ------------------------ *\
@@ -628,10 +637,15 @@
     .ant-table-tbody > tr.ant-table-row:hover > td {
         background: var(--grey-1);
     }
+
+    .ant-table-thead > tr > th {
+        background: #fff;
+    }
 }
 
 .flat-color-scheme-dark {
     .ant-table {
+        color: var(--text);
         background: var(--grey-10);
 
         .ant-table-row {
@@ -653,6 +667,32 @@
             background-color: var(--grey-11);
         }
     }
+
+    .ant-table-thead > tr > th {
+        color: var(--text-strong);
+        background: var(--grey-10);
+        border-bottom: 1px solid var(--grey-9);
+    }
+
+    .ant-table-tbody > tr > td {
+        color: var(--text);
+        border-bottom: 1px solid var(--grey-9);
+    }
+
+    .ant-table-tbody > tr.ant-table-row-selected > td {
+        background-color: var(--grey-11);
+    }
+
+    .ant-pagination-disabled .ant-pagination-item-link,
+    .ant-pagination-disabled:hover .ant-pagination-item-link {
+        color: var(--text);
+        border-color: var(--grey-9);
+        background-color: transparent;
+    }
+
+    .ant-pagination-item-active {
+        background-color: transparent;
+    }
 }
 
 /* ------------------------ *\
@@ -896,3 +936,12 @@
         }
     }
 }
+
+/* ------------------------ *\
+ * Spin
+\* ------------------------ */
+.flat-color-scheme-dark {
+    .ant-spin-container::after {
+        background: var(--grey-10);
+    }
+}