Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(flat-components): update sidebar style and icons #1892

Merged
merged 1 commit into from
Apr 17, 2023
Merged

refactor(flat-components): update sidebar style and icons #1892

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion desktop/renderer-app/src/components/MainPageLayoutContainer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
SVGLogout,
SVGSun,
SVGMoon,
SVGSettingFilled,
} from "flat-components";
import { observer } from "mobx-react-lite";
import { useTranslate } from "@netless/flat-i18n";
Expand All @@ -30,6 +31,7 @@ import { generateAvatar } from "../../utils/generate-avatar";
import {
GlobalStoreContext,
PreferencesStoreContext,
RuntimeContext,
WindowsSystemBtnContext,
} from "@netless/flat-pages/src/components/StoreProvider";

Expand All @@ -53,6 +55,7 @@ export const MainPageLayoutContainer = observer<MainPageLayoutContainerProps>(
onBackPreviousPage,
}) {
const t = useTranslate();
const runtime = useContext(RuntimeContext);
const preferenceStore = useContext(PreferencesStoreContext);
const windowsBtnContext = useContext(WindowsSystemBtnContext);
const prefersDark = useMedia("(prefers-color-scheme: dark)");
Expand Down Expand Up @@ -91,7 +94,9 @@ export const MainPageLayoutContainer = observer<MainPageLayoutContainerProps>(
},
{
key: routeConfig[RouteNameType.GeneralSettingPage].path,
icon: (): React.ReactNode => <SVGSetting />,
icon: (active: boolean): React.ReactNode => {
return active ? <SVGSettingFilled /> : <SVGSetting />;
},
title: t("settings"),
route: routeConfig[RouteNameType.GeneralSettingPage].path,
},
Expand Down Expand Up @@ -173,6 +178,7 @@ export const MainPageLayoutContainer = observer<MainPageLayoutContainerProps>(
activeKeys={activeKeys}
avatarSrc={globalStore.userInfo?.avatar ?? ""}
generateAvatar={generateAvatar}
isMac={runtime?.isMac}
popMenu={popMenu}
showMainPageHeader={showMainPageHeader}
showWindowsSystemBtn={windowsBtnContext?.showWindowsBtn}
Expand Down
27 changes: 27 additions & 0 deletions packages/flat-components/src/components/FlatIcons/icons/SVGLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import "../style.less";
import React from "react";
import { FlatIconProps } from "../types";

export const SVGLogo: React.FC<FlatIconProps> = ({ active, className = "", ...restProps }) => {
return (
<svg
className={`${className} flat-icon ${active ? "is-active" : ""}`}
fill="none"
height="64"
viewBox="0 0 64 64"
width="64"
xmlns="http://www.w3.org/2000/svg"
{...restProps}
>
<path
className="flat-icon-fill-color"
clipRule="evenodd"
d="M19.7 22.56a2.4 2.4 0 0 1 2.4-2.4h2.4v2.4h-4.8Zm0 .6h3.6v1.8h1.2v2.4h-1.2v8.4h-3.6v-8.4h-1.2v-2.4h1.2v-1.8Zm6-3h1.2a2.4 2.4 0 0 1 2.4 2.4v13.2h-3.6v-15.6Zm10.2 4.8h-3.6v2.4h3.6v6h-1.8v-2.4h1.2v-2.4h-2.4a2.4 2.4 0 0 0-2.4 2.4v2.4a2.4 2.4 0 0 0 2.4 2.4h6.6v-8.4a2.4 2.4 0 0 0-2.4-2.4h-1.2Zm4.8 8.4a2.4 2.4 0 0 0 2.4 2.4h2.4v-2.4h-1.2v-6h1.2v-2.4h-1.2v-2.4a2.4 2.4 0 0 0-2.4-2.4h-1.2v13.2Zm-23.1 6h9.6l4.8 1.2 4.8-1.2h9.6v1.2h-9.6l-4.8 1.2-4.8-1.2h-9.6v-1.2Zm4.8 2.4h4.8l4.8 1.2 4.8-1.2h14.4v1.2H36.8l-4.8 1.2-4.8-1.2H12.8v-1.2h9.6Z"
fill="#B7BBC1"
fillRule="evenodd"
/>
</svg>
);
};

export default SVGLogo;
36 changes: 36 additions & 0 deletions packages/flat-components/src/components/FlatIcons/icons/SVGSettingFilled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import "../style.less";
import React from "react";
import { FlatIconProps } from "../types";

export const SVGSettingFilled: 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-fill-color"
clipRule="evenodd"
d="M12.5 4.289a1 1 0 0 0-1 0L5.573 7.71a1 1 0 0 0-.5.866v6.846a1 1 0 0 0 .5.866l5.929 3.422a1 1 0 0 0 1 0l5.928-3.422a1 1 0 0 0 .5-.866V8.577a1 1 0 0 0-.5-.866L12.5 4.29ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
fill="#3381FF"
fillRule="evenodd"
/>
<path
className="flat-icon-fill-color"
d="m11.5 4.289.313.541-.313-.541Zm1 0 .313-.542-.313.542ZM5.573 7.71l.313.542-.313-.542Zm0 8.578.313-.542-.313.542Zm5.929 3.422-.313.542.313-.542Zm1 0 .312.542-.313-.542Zm5.928-3.422.312.541-.312-.541Zm0-8.578.312-.54-.312.54Zm-6.617-2.88a.375.375 0 0 1 .375 0l.625-1.083a1.625 1.625 0 0 0-1.625 0l.625 1.083ZM5.885 8.253l5.928-3.423-.625-1.083L5.26 7.17l.625 1.083Zm-.188.324c0-.134.072-.257.188-.324L5.26 7.17c-.503.29-.813.827-.813 1.407h1.25Zm0 6.846V8.577h-1.25v6.846h1.25Zm.188.325a.375.375 0 0 1-.188-.325h-1.25c0 .58.31 1.117.813 1.407l.625-1.082Zm5.928 3.422-5.928-3.423-.625 1.083 5.928 3.423.625-1.083Zm.375 0a.375.375 0 0 1-.375 0l-.625 1.083c.503.29 1.122.29 1.625 0l-.625-1.083Zm5.928-3.423-5.928 3.423.625 1.083 5.928-3.423-.625-1.082Zm.188-.324a.375.375 0 0 1-.188.325l.625 1.082c.503-.29.813-.827.813-1.407h-1.25Zm0-6.846v6.846h1.25V8.577h-1.25Zm-.188-.324c.116.067.188.19.188.324h1.25c0-.58-.31-1.117-.813-1.407l-.625 1.083ZM12.188 4.83l5.928 3.423.625-1.083-5.928-3.423-.625 1.083ZM14.376 12A2.375 2.375 0 0 1 12 14.375v1.25A3.625 3.625 0 0 0 15.626 12h-1.25ZM12 9.625A2.375 2.375 0 0 1 14.376 12h1.25A3.625 3.625 0 0 0 12 8.375v1.25ZM9.625 12a2.375 2.375 0 0 1 2.376-2.375v-1.25A3.625 3.625 0 0 0 8.375 12h1.25Zm2.376 2.375A2.375 2.375 0 0 1 9.625 12h-1.25a3.625 3.625 0 0 0 3.626 3.625v-1.25Z"
fill="#3381FF"
/>
</svg>
);
};

export default SVGSettingFilled;
41 changes: 41 additions & 0 deletions packages/flat-components/src/components/FlatIcons/icons/SVGShare.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import "../style.less";
import React from "react";
import { FlatIconProps } from "../types";

export const SVGShare: 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="M19 13.364V17a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5"
stroke="#5D6066"
strokeLinejoin="round"
strokeWidth="1.25"
/>
<path
className="flat-icon-stroke-color"
d="m16 6 3 3-3 3"
stroke="#5D6066"
strokeLinejoin="round"
strokeWidth="1.25"
/>
<path
className="flat-icon-stroke-color"
d="M19 9h-5a2 2 0 0 0-2 2v3"
stroke="#5D6066"
strokeLinejoin="round"
strokeWidth="1.25"
/>
</svg>
);
};

export default SVGShare;
3 changes: 3 additions & 0 deletions packages/flat-components/src/components/FlatIcons/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ export * from "./icons/SVGRight";
export * from "./icons/SVGScreenSharing";
export * from "./icons/SVGSend";
export * from "./icons/SVGSetting";
export * from "./icons/SVGSettingFilled";
export * from "./icons/SVGShortcut";
export * from "./icons/SVGSortHorizontal";
export * from "./icons/SVGSortVertical";
Expand Down Expand Up @@ -133,3 +134,5 @@ export * from "./icons/SVGWhiteboardAdd";
export * from "./icons/SVGWeb";
export * from "./icons/SVGSun";
export * from "./icons/SVGMoon";
export * from "./icons/SVGLogo";
export * from "./icons/SVGShare";
43 changes: 38 additions & 5 deletions packages/flat-components/src/components/HomePage/HomePageHeroButton/icons/SVGBegin/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,44 @@ import "./style.less";
import React from "react";

export const SVGBegin: React.FC = () => (
<svg className="svg-begin" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<circle className="svg-begin-background" cx="20" cy="20" fill="#3381FF" r="20" />
<path d="M8 8h24v24H8z" fill="#FFF" opacity=".01" />
<path d="M11 20h18m-9-9v18" stroke="#FFF" strokeLinejoin="round" strokeWidth="1.25" />
<svg className="svg-begin" fill="none" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#a)">
<rect fill="url(#b)" height="40" rx="12" width="40" />
</g>
<path
clipRule="evenodd"
d="M19.709 15.83A4 4 0 0 0 15.712 12H10v11.667a3 3 0 0 0 3 3h4.5V27a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-.333H27a3 3 0 0 0 3-3V12h-5.712a4 4 0 0 0-3.997 3.83L20 22.667l-.291-6.837Z"
stroke="#fff"
strokeLinejoin="round"
strokeWidth="2"
/>
<defs>
<linearGradient gradientUnits="userSpaceOnUse" id="b" x1="20" x2="20" y1="0" y2="40">
<stop stopColor="#3381FF" />
<stop offset="1" stopColor="#3733FF" />
</linearGradient>
<filter
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
height="40"
id="a"
width="40"
x="0"
y="0"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feColorMatrix
in="SourceAlpha"
result="hardAlpha"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feOffset />
<feGaussianBlur stdDeviation="4" />
<feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
<feBlend in2="shape" result="effect1_innerShadow_4562_763" />
</filter>
</defs>
</svg>
);
50 changes: 38 additions & 12 deletions packages/flat-components/src/components/HomePage/HomePageHeroButton/icons/SVGJoin/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,44 @@ import "./style.less";
import React from "react";

export const SVGJoin: React.FC = () => (
<svg className="svg-join" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<circle className="svg-join-background" cx="20" cy="20" fill="#3381FF" r="20" />
<path d="M8 8h24v24H8z" fill="#FFF" opacity=".01" />
<path
d="m20 13 6-2v16l-6 2z"
fill="#FFF"
stroke="#FFF"
strokeLinejoin="round"
strokeWidth="1.25"
/>
<path d="M18 27h-4V11h12v16" stroke="#FFF" strokeLinejoin="round" strokeWidth="1.25" />
<svg className="svg-join" fill="none" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#a)">
<rect fill="url(#b)" height="40" rx="12" width="40" />
</g>
<path
d="M10 20h20M20 10v20"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<defs>
<linearGradient gradientUnits="userSpaceOnUse" id="b" x1="20" x2="20" y1="0" y2="40">
<stop stopColor="#3381FF" />
<stop offset="1" stopColor="#3733FF" />
</linearGradient>
<filter
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
height="40"
id="a"
width="40"
x="0"
y="0"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feColorMatrix
in="SourceAlpha"
result="hardAlpha"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feOffset />
<feGaussianBlur stdDeviation="4" />
<feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
<feBlend in2="shape" result="effect1_innerShadow_4562_757" />
</filter>
</defs>
</svg>
);
76 changes: 59 additions & 17 deletions ...es/flat-components/src/components/HomePage/HomePageHeroButton/icons/SVGSchedule/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,65 @@ import "./style.less";
import React from "react";

export const SVGSchedule: React.FC = () => (
<svg className="svg-schedule" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<circle className="svg-schedule-background" cx="20" cy="20" fill="#3381FF" r="20" />
<path d="M8 8h24v24H8z" fill="#FFF" opacity=".01" />
<path
d="M12 14h16v14H12zm4-2v2m8-2v4"
stroke="#FFF"
strokeLinejoin="round"
strokeWidth="1.25"
/>
<path
d="M12 18h16v-3a1 1 0 0 0-1-1H13a1 1 0 0 0-1 1v3Z"
fill="#FFF"
stroke="#FFF"
strokeLinejoin="round"
strokeWidth="1.25"
/>
<svg
className="svg-schedule"
fill="none"
viewBox="0 0 40 40"
xmlns="http://www.w3.org/2000/svg"
>
<g filter="url(#a)">
<rect fill="url(#b)" height="40" rx="12" width="40" />
</g>
<rect
height="16"
rx="3"
stroke="#fff"
strokeLinejoin="round"
strokeWidth="2"
width="18"
x="11"
y="12"
/>
<path
d="M11 15a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v3H11v-3Z"
stroke="#fff"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
d="M16 10v3m8-3v3"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<defs>
<linearGradient gradientUnits="userSpaceOnUse" id="b" x1="20" x2="20" y1="0" y2="40">
<stop stopColor="#3381FF" />
<stop offset="1" stopColor="#3733FF" />
</linearGradient>
<filter
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
height="40"
id="a"
width="40"
x="0"
y="0"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feColorMatrix
in="SourceAlpha"
result="hardAlpha"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feOffset />
<feGaussianBlur stdDeviation="4" />
<feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
<feBlend in2="shape" result="effect1_innerShadow_4562_770" />
</filter>
</defs>
</svg>
);
6 changes: 3 additions & 3 deletions packages/flat-components/src/components/HomePage/HomePageHeroButton/style.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@

.home-page-hero-button-icon {
display: inline-block;
width: 44px;
height: 44px;
width: 40px;
height: 40px;

> img {
>img {
width: 100%;
height: 100%;
}
Expand Down
6 changes: 6 additions & 0 deletions packages/flat-components/src/components/MainPageLayout/MainPageNav/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import "./style.less";

import React from "react";
import classNames from "classnames";
import { MainPageLayoutItem } from "../types";
import { SVGLogo } from "../../FlatIcons";

export interface MainPageNavProps {
/** when an item is clicked */
Expand All @@ -12,17 +14,21 @@ export interface MainPageNavProps {
sideMenu: MainPageLayoutItem[];
/** outside footer menu in MainPageLayout */
sideMenuFooter: MainPageLayoutItem[];
/** add extra padding top to the logo */
isMac?: boolean;
}

export const MainPageNav: React.FC<MainPageNavProps> = ({
onClick,
activeKeys,
sideMenu,
sideMenuFooter,
isMac,
}) => {
return (
<div className="main-page-nav-container">
<div className="main-page-nav-content">
<SVGLogo className={classNames("main-page-nav-logo", { isMac })} />
{sideMenu.map(menuItem => {
return (
<a
Expand Down
Loading