From 0ff6e468c83198b071e0c7c6e0df3c60b238e877 Mon Sep 17 00:00:00 2001 From: billy Date: Thu, 9 Dec 2021 14:53:24 +0800 Subject: [PATCH 1/5] feat: add dashboard footer --- .../src/components/DashboardFrame/index.tsx | 6 ++++++ .../NavigationVersionFooter/index.tsx | 20 +++++++++++++++++++ .../src/components/PageFrame/index.tsx | 6 ++++++ 3 files changed, 32 insertions(+) create mode 100644 packages/dashboard/src/components/NavigationVersionFooter/index.tsx diff --git a/packages/dashboard/src/components/DashboardFrame/index.tsx b/packages/dashboard/src/components/DashboardFrame/index.tsx index 46563fe39159..c6c00436510b 100644 --- a/packages/dashboard/src/components/DashboardFrame/index.tsx +++ b/packages/dashboard/src/components/DashboardFrame/index.tsx @@ -6,6 +6,7 @@ import { MaskColorVar } from '@masknet/theme' import { ErrorBoundary } from '@masknet/shared' import { DashboardContext } from './context' import { Navigation } from './Navigation' +import { NavigationVersionFoorter } from '../NavigationVersionFooter' const Root = styled(Grid)(({ theme }) => ({ backgroundColor: MaskColorVar.primaryBackground, @@ -17,6 +18,10 @@ const LeftContainer = styled(Grid)(({ theme }) => ({ // Just meet the design size minWidth: 232, }, + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + paddingBottom: '22px', })) export interface DashboardFrameProps extends React.PropsWithChildren<{}> {} @@ -44,6 +49,7 @@ export const DashboardFrame = memo((props: DashboardFrameProps) => { {isLargeScreen && ( + )} diff --git a/packages/dashboard/src/components/NavigationVersionFooter/index.tsx b/packages/dashboard/src/components/NavigationVersionFooter/index.tsx new file mode 100644 index 000000000000..eb09ad288249 --- /dev/null +++ b/packages/dashboard/src/components/NavigationVersionFooter/index.tsx @@ -0,0 +1,20 @@ +import { MaskColorVar } from '@masknet/theme' +import { styled } from '@mui/system' +import { memo } from 'react' +import { useDashboardI18N } from '../../locales' + +const VersionContainer = styled('div')(() => ({ + color: MaskColorVar.textSecondary, + textAlign: 'center', + fontSize: '12px', +})) + +interface NavigationVersionFoorterProps extends React.PropsWithChildren<{}> { + version?: string +} + +export const NavigationVersionFoorter = memo((props: NavigationVersionFoorterProps) => { + const t = useDashboardI18N() + const version = props.version ?? '2.2.0' + return {t.version_of_stable({ version })} +}) diff --git a/packages/dashboard/src/components/PageFrame/index.tsx b/packages/dashboard/src/components/PageFrame/index.tsx index fb688ea411bf..e4ca9d64418e 100644 --- a/packages/dashboard/src/components/PageFrame/index.tsx +++ b/packages/dashboard/src/components/PageFrame/index.tsx @@ -25,6 +25,7 @@ import { Navigation } from '../DashboardFrame/Navigation' import { MaskBannerIcon, MaskNotSquareIcon } from '@masknet/icons' import { FeaturePromotions } from './FeaturePromotions' import { RoutePaths } from '../../type' +import { NavigationVersionFoorter } from '../NavigationVersionFooter' const featurePromotionsEnabled = [RoutePaths.Wallets, RoutePaths.WalletsTransfer, RoutePaths.WalletsHistory] @@ -69,6 +70,10 @@ const NavigationDrawer = styled(Drawer)(({ theme }) => ({ paddingTop: theme.spacing(7.5), background: new Color(theme.palette.background.paper).alpha(0.8).toString(), backdropFilter: 'blur(4px)', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + paddingBottom: `calc( 22px + ${theme.mixins.toolbar.minHeight}px)`, }, })) @@ -164,6 +169,7 @@ export const PageFrame = memo((props: PageFrameProps) => { variant="temporary" elevation={0}> + )} From 2a6ff6aecf296106f6c38fc0ac582f88c0870f56 Mon Sep 17 00:00:00 2001 From: billy Date: Thu, 9 Dec 2021 15:31:35 +0800 Subject: [PATCH 2/5] fix: typo --- packages/dashboard/src/components/DashboardFrame/index.tsx | 4 ++-- .../src/components/NavigationVersionFooter/index.tsx | 4 ++-- packages/dashboard/src/components/PageFrame/index.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/dashboard/src/components/DashboardFrame/index.tsx b/packages/dashboard/src/components/DashboardFrame/index.tsx index c6c00436510b..76b8fc5d3e2d 100644 --- a/packages/dashboard/src/components/DashboardFrame/index.tsx +++ b/packages/dashboard/src/components/DashboardFrame/index.tsx @@ -6,7 +6,7 @@ import { MaskColorVar } from '@masknet/theme' import { ErrorBoundary } from '@masknet/shared' import { DashboardContext } from './context' import { Navigation } from './Navigation' -import { NavigationVersionFoorter } from '../NavigationVersionFooter' +import { NavigationVersionFooter } from '../NavigationVersionFooter' const Root = styled(Grid)(({ theme }) => ({ backgroundColor: MaskColorVar.primaryBackground, @@ -49,7 +49,7 @@ export const DashboardFrame = memo((props: DashboardFrameProps) => { {isLargeScreen && ( - + )} diff --git a/packages/dashboard/src/components/NavigationVersionFooter/index.tsx b/packages/dashboard/src/components/NavigationVersionFooter/index.tsx index eb09ad288249..654a66f5c083 100644 --- a/packages/dashboard/src/components/NavigationVersionFooter/index.tsx +++ b/packages/dashboard/src/components/NavigationVersionFooter/index.tsx @@ -9,11 +9,11 @@ const VersionContainer = styled('div')(() => ({ fontSize: '12px', })) -interface NavigationVersionFoorterProps extends React.PropsWithChildren<{}> { +interface NavigationVersionFooterProps extends React.PropsWithChildren<{}> { version?: string } -export const NavigationVersionFoorter = memo((props: NavigationVersionFoorterProps) => { +export const NavigationVersionFooter = memo((props: NavigationVersionFooterProps) => { const t = useDashboardI18N() const version = props.version ?? '2.2.0' return {t.version_of_stable({ version })} diff --git a/packages/dashboard/src/components/PageFrame/index.tsx b/packages/dashboard/src/components/PageFrame/index.tsx index e4ca9d64418e..4f6335d763b3 100644 --- a/packages/dashboard/src/components/PageFrame/index.tsx +++ b/packages/dashboard/src/components/PageFrame/index.tsx @@ -25,7 +25,7 @@ import { Navigation } from '../DashboardFrame/Navigation' import { MaskBannerIcon, MaskNotSquareIcon } from '@masknet/icons' import { FeaturePromotions } from './FeaturePromotions' import { RoutePaths } from '../../type' -import { NavigationVersionFoorter } from '../NavigationVersionFooter' +import { NavigationVersionFooter } from '../NavigationVersionFooter' const featurePromotionsEnabled = [RoutePaths.Wallets, RoutePaths.WalletsTransfer, RoutePaths.WalletsHistory] @@ -169,7 +169,7 @@ export const PageFrame = memo((props: PageFrameProps) => { variant="temporary" elevation={0}> - + )} From e4257cbd58f14661bf88f0ba8c219d69221d9f3a Mon Sep 17 00:00:00 2001 From: billy Date: Fri, 10 Dec 2021 16:50:21 +0800 Subject: [PATCH 3/5] fix: menu drawer padding-top change --- packages/dashboard/src/components/PageFrame/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dashboard/src/components/PageFrame/index.tsx b/packages/dashboard/src/components/PageFrame/index.tsx index 4f6335d763b3..f0a7acd6b593 100644 --- a/packages/dashboard/src/components/PageFrame/index.tsx +++ b/packages/dashboard/src/components/PageFrame/index.tsx @@ -67,7 +67,7 @@ const NavigationDrawer = styled(Drawer)(({ theme }) => ({ [`& > .${paperClasses.root}`]: { width: 232, top: theme.mixins.toolbar.minHeight, - paddingTop: theme.spacing(7.5), + paddingTop: '28px', background: new Color(theme.palette.background.paper).alpha(0.8).toString(), backdropFilter: 'blur(4px)', display: 'flex', From 0b895d1766771ce5fef0270a79ddcc3c9ebe1e30 Mon Sep 17 00:00:00 2001 From: billy Date: Fri, 10 Dec 2021 17:34:42 +0800 Subject: [PATCH 4/5] fix: kill dead code version --- .../src/components/NavigationVersionFooter/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/dashboard/src/components/NavigationVersionFooter/index.tsx b/packages/dashboard/src/components/NavigationVersionFooter/index.tsx index 654a66f5c083..0d41c97af786 100644 --- a/packages/dashboard/src/components/NavigationVersionFooter/index.tsx +++ b/packages/dashboard/src/components/NavigationVersionFooter/index.tsx @@ -15,6 +15,6 @@ interface NavigationVersionFooterProps extends React.PropsWithChildren<{}> { export const NavigationVersionFooter = memo((props: NavigationVersionFooterProps) => { const t = useDashboardI18N() - const version = props.version ?? '2.2.0' - return {t.version_of_stable({ version })} + const version = props.version ?? globalThis.browser?.runtime.getManifest()?.version ?? process.env.TAG_NAME.slice(1) + return {version && t.version_of_stable({ version })} }) From b19339cb31598b6bbb8dda139c7e129eaf2e6e56 Mon Sep 17 00:00:00 2001 From: billy Date: Fri, 10 Dec 2021 17:37:04 +0800 Subject: [PATCH 5/5] fix: kill props --- .../src/components/NavigationVersionFooter/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/dashboard/src/components/NavigationVersionFooter/index.tsx b/packages/dashboard/src/components/NavigationVersionFooter/index.tsx index 0d41c97af786..298af0747b8d 100644 --- a/packages/dashboard/src/components/NavigationVersionFooter/index.tsx +++ b/packages/dashboard/src/components/NavigationVersionFooter/index.tsx @@ -9,12 +9,8 @@ const VersionContainer = styled('div')(() => ({ fontSize: '12px', })) -interface NavigationVersionFooterProps extends React.PropsWithChildren<{}> { - version?: string -} - -export const NavigationVersionFooter = memo((props: NavigationVersionFooterProps) => { +export const NavigationVersionFooter = memo(() => { const t = useDashboardI18N() - const version = props.version ?? globalThis.browser?.runtime.getManifest()?.version ?? process.env.TAG_NAME.slice(1) + const version = globalThis.browser?.runtime.getManifest()?.version ?? process.env.TAG_NAME.slice(1) return {version && t.version_of_stable({ version })} })