Skip to content

Commit

Permalink
feat(flat-web): add nav right menus (#810)
Browse files Browse the repository at this point in the history
  • Loading branch information
@crimx
crimx committed Jul 22, 2021
1 parent a94a305 commit d1d98ed
Show file tree
Hide file tree
Showing 8 changed files with 94 additions and 72 deletions.
38 changes: 17 additions & 21 deletions ...nts/src/components/MainPageLayout/MainPageNavHorizontal/MainPageNavHorizontal.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import {
CloudOutlined,
HomeFilled,
HomeOutlined,
ToolFilled,
ToolOutlined,
DownloadOutlined,
SettingOutlined,
} from "@ant-design/icons";

const storyMeta: Meta = {
Expand All @@ -21,6 +21,7 @@ const storyMeta: Meta = {

export default storyMeta;

const rightMenuStyles: React.CSSProperties = { fontSize: 22 };
const sideMenuStyles: React.CSSProperties = { fontSize: 25 };

export const Overview: Story<PropsWithChildren<MainPageNavHorizontalProps>> = args => (
Expand Down Expand Up @@ -55,30 +56,25 @@ Overview.args = {
],
rightMenu: [
{
key: "deviceCheck",
icon: active =>
active ? (
<ToolFilled style={sideMenuStyles} />
) : (
<ToolOutlined style={sideMenuStyles} />
),
title: "deviceCheck",
route: "/deviceCheck",
key: "download",
icon: () => <DownloadOutlined style={rightMenuStyles} />,
title: "下载",
route: "/download",
},
],
popMenu: [
{
key: "userConfig",
icon: () => <CloudOutlined />,
title: "个人设置",
route: "/config",
key: "source-code",
icon: () => <CloudOutlined style={rightMenuStyles} />,
title: "源码",
route: "/github",
},
{
key: "getGitHubCode",
icon: () => <CloudOutlined />,
title: "获取源码",
route: "/github",
key: "userConfig",
icon: () => <SettingOutlined style={rightMenuStyles} />,
title: "设置",
route: "/config",
},
],
popMenu: [
{
key: "logout",
icon: () => <CloudOutlined className="red" />,
Expand Down
39 changes: 21 additions & 18 deletions packages/flat-components/src/components/MainPageLayout/MainPageNavHorizontal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,25 +63,28 @@ export const MainPageNavHorizontal: React.FC<MainPageNavHorizontalProps> = ({
)}
</div>
<div className="main-page-nav-horizontal-right">
<div className="main-page-nav-horizontal-right-item">
{rightMenu.map(menuItem => {
return (
<a
key={menuItem.key}
className={classNames({
"is-active": activeKeys.includes(menuItem.key),
})}
href={menuItem.route}
onClick={e => {
e.preventDefault();
onClick(menuItem);
}}
>
{rightMenu.map(menuItem => {
return (
<a
key={menuItem.key}
className={classNames("main-page-nav-horizontal-right-item", {
"is-active": activeKeys.includes(menuItem.key),
})}
href={menuItem.route}
onClick={e => {
e.preventDefault();
onClick(menuItem);
}}
>
<span className="main-page-nav-horizontal-right-item-img">
{menuItem.icon(activeKeys.includes(menuItem.key))}
</a>
);
})}
</div>
</span>
<span className="main-page-nav-horizontal-right-item-title">
{menuItem.title}
</span>
</a>
);
})}
<div className="main-page-nav-horizontal-right-header">
<MainPageNavAvatar
avatarSrc={avatarSrc}
Expand Down
19 changes: 18 additions & 1 deletion packages/flat-components/src/components/MainPageLayout/MainPageNavHorizontal/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,5 +33,22 @@
}

.main-page-nav-horizontal-right-item {
margin-right: 32px;
display: inline-flex;
align-items: center;
height: 22px;
margin-right: 24px;
color: currentColor;
}

.main-page-nav-horizontal-right-item-img {
display: inline-block;
height: 22px;
width: 22px;
overflow: hidden;
}

.main-page-nav-horizontal-right-item-title {
margin-left: 4px;
font-size: 14px;
font-weight: 400;
}
16 changes: 2 additions & 14 deletions ...t-components/src/components/MainPageLayoutHorizontal/MainPageLayoutHorizontal.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
CloudOutlined,
HomeFilled,
HomeOutlined,
ToolFilled,
ToolOutlined,
} from "@ant-design/icons";
import faker from "faker";
Expand Down Expand Up @@ -52,19 +51,6 @@ Overview.args = {
},
],
rightMenu: [
{
key: "deviceCheck",
icon: active =>
active ? (
<ToolFilled style={sideMenuStyles} />
) : (
<ToolOutlined style={sideMenuStyles} />
),
title: "deviceCheck",
route: "/deviceCheck",
},
],
popMenu: [
{
key: "userConfig",
icon: () => <CloudOutlined />,
Expand All @@ -77,6 +63,8 @@ Overview.args = {
title: "获取源码",
route: "/github",
},
],
popMenu: [
{
key: "logout",
icon: () => <CloudOutlined className="red" />,
Expand Down
5 changes: 4 additions & 1 deletion packages/flat-i18n/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,5 +343,8 @@
"region-us-sv": "United States",
"region-sg": "Singapore",
"region-in-mum": "India",
"region-gb-lon": "United Kingdom"
"region-gb-lon": "United Kingdom",
"nav-download": "Download",
"nav-source-code": "Source Code",
"nav-settings": "Settings"
}
5 changes: 4 additions & 1 deletion packages/flat-i18n/locales/zh-CN.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,5 +343,8 @@
"region-us-sv": "美国",
"region-sg": "新加坡",
"region-in-mum": "印度",
"region-gb-lon": "英国"
"region-gb-lon": "英国",
"nav-download": "下载",
"nav-source-code": "源码",
"nav-settings": "设置"
}
13 changes: 13 additions & 0 deletions web/flat-web/src/components/MainPageLayoutHorizontalContainer/icons/download.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 15 additions & 16 deletions web/flat-web/src/components/MainPageLayoutHorizontalContainer/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* eslint-disable react/display-name */
// import deviceSVG from "./icons/device.svg";
// import deviceActiveSVG from "./icons/device-active.svg";
import downloadSVG from "./icons/download.svg";
import settingSVG from "./icons/setting.svg";
import gitHubSVG from "./icons/github.svg";
import feedbackSVG from "./icons/feedback.svg";
Expand Down Expand Up @@ -40,29 +41,27 @@ export const MainPageLayoutHorizontalContainer: React.FC<MainPageLayoutHorizonta
];

const rightMenu: MainPageLayoutItem[] = [
// {
// key: "deviceCheck",
// icon: (active: boolean): React.ReactNode => (
// <img src={active ? deviceActiveSVG : deviceSVG} />
// ),
// title: "deviceCheck",
// route: routeConfig[RouteNameType.SystemCheckPage].path,
// },
];

const popMenu = [
{
key: routeConfig[RouteNameType.GeneralSettingPage].path,
icon: (): React.ReactNode => <img src={settingSVG} />,
title: t("settings"),
route: routeConfig[RouteNameType.GeneralSettingPage].path,
key: "download",
icon: (): React.ReactNode => <img src={downloadSVG} />,
title: t("nav-download"),
route: "https://flat.whiteboard.agora.io/#download",
},
{
key: "getGitHubCode",
icon: (): React.ReactNode => <img src={gitHubSVG} />,
title: t("source-code"),
title: t("nav-source-code"),
route: "https://github.com/netless-io/flat/",
},
{
key: routeConfig[RouteNameType.GeneralSettingPage].path,
icon: (): React.ReactNode => <img src={settingSVG} />,
title: t("nav-settings"),
route: routeConfig[RouteNameType.GeneralSettingPage].path,
},
];

const popMenu = [
{
key: "feedback",
icon: (): React.ReactNode => <img src={feedbackSVG} />,
Expand Down

0 comments on commit d1d98ed

Please sign in to comment.