From 509104debdf16c9489304cccf56c50f663044d16 Mon Sep 17 00:00:00 2001 From: CatsJuice Date: Thu, 7 Nov 2024 08:53:40 +0000 Subject: [PATCH] fix(mobile): adjust mobile UI (#8719) - fix(mobile): add close button for login, close AF-1581 - fix(mobile): adjust explorer title font, close AF-1575 - fix(mobile): disable user-select globally, close AF-1626 - fix(mobile): usage loading ui in setting, close AF-1422 - fix(mobile): adjust header height, close AF-1574 --- .../src/ui/modal/confirm-modal.css.ts | 61 +++++++++---------- .../component/src/ui/modal/confirm-modal.tsx | 4 +- .../layouts/collapsible-section.css.ts | 4 +- .../dialogs/setting/user-usage/index.tsx | 49 ++++++++++----- .../core/src/mobile/styles/mobile.css.ts | 1 + .../src/mobile/views/all-docs/style.css.ts | 4 +- .../core/src/mobile/views/sign-in/modal.tsx | 16 ++++- 7 files changed, 86 insertions(+), 53 deletions(-) diff --git a/packages/frontend/component/src/ui/modal/confirm-modal.css.ts b/packages/frontend/component/src/ui/modal/confirm-modal.css.ts index 3c070f245a6b8..df56bd3f270d0 100644 --- a/packages/frontend/component/src/ui/modal/confirm-modal.css.ts +++ b/packages/frontend/component/src/ui/modal/confirm-modal.css.ts @@ -1,3 +1,4 @@ +import { bodyEmphasized, bodyRegular } from '@toeverything/theme/typography'; import { style } from '@vanilla-extract/css'; // desktop @@ -41,28 +42,25 @@ export const mobileStyles = { padding: '12px 0 !important', borderRadius: 22, }), - description: style({ - padding: '11px 22px', - fontSize: 17, - fontWeight: 400, - letterSpacing: -0.43, - lineHeight: '22px', - }), - header: style({ - padding: '10px 16px', - marginBottom: '0px !important', - fontSize: 17, - fontWeight: 600, - letterSpacing: -0.43, - lineHeight: '22px', - }), - content: style({ - padding: '11px 22px', - fontSize: 17, - fontWeight: 400, - letterSpacing: -0.43, - lineHeight: '22px', - }), + description: style([ + bodyRegular, + { + padding: '11px 22px', + }, + ]), + header: style([ + bodyEmphasized, + { + padding: '10px 16px', + marginBottom: '0px !important', + }, + ]), + content: style([ + bodyRegular, + { + padding: '11px 22px', + }, + ]), footer: style({ padding: '8px 16px', display: 'flex', @@ -74,13 +72,14 @@ export const mobileStyles = { }, }, }), - action: style({ - width: '100%', - height: 44, - borderRadius: 8, - fontSize: 17, - fontWeight: 400, - letterSpacing: -0.43, - lineHeight: '22px', - }), + action: style([ + bodyRegular, + { + width: '100%', + height: 44, + borderRadius: 8, + fontSize: 17, + fontWeight: 400, + }, + ]), }; diff --git a/packages/frontend/component/src/ui/modal/confirm-modal.tsx b/packages/frontend/component/src/ui/modal/confirm-modal.tsx index 299ed53386346..f69f064570704 100644 --- a/packages/frontend/component/src/ui/modal/confirm-modal.tsx +++ b/packages/frontend/component/src/ui/modal/confirm-modal.tsx @@ -40,6 +40,7 @@ export const ConfirmModal = ({ autoFocusConfirm = true, headerClassName, descriptionClassName, + contentOptions, ...props }: ConfirmModalProps) => { const onConfirmClick = useCallback(() => { @@ -50,7 +51,8 @@ export const ConfirmModal = ({ return ( { e.stopPropagation(); onCancel?.(); diff --git a/packages/frontend/core/src/mobile/components/explorer/layouts/collapsible-section.css.ts b/packages/frontend/core/src/mobile/components/explorer/layouts/collapsible-section.css.ts index 40b82dbe5f941..a7a97549fe84c 100644 --- a/packages/frontend/core/src/mobile/components/explorer/layouts/collapsible-section.css.ts +++ b/packages/frontend/core/src/mobile/components/explorer/layouts/collapsible-section.css.ts @@ -1,5 +1,5 @@ import { cssVar } from '@toeverything/theme'; -import { title3Regular } from '@toeverything/theme/typography'; +import { headlineRegular } from '@toeverything/theme/typography'; import { cssVarV2 } from '@toeverything/theme/v2'; import { style } from '@vanilla-extract/css'; @@ -21,7 +21,7 @@ export const triggerRoot = style({ borderRadius: 4, }); export const triggerLabel = style([ - title3Regular, + headlineRegular, { flexGrow: '0', display: 'flex', diff --git a/packages/frontend/core/src/mobile/dialogs/setting/user-usage/index.tsx b/packages/frontend/core/src/mobile/dialogs/setting/user-usage/index.tsx index 50074f0dcb607..19a660a026754 100644 --- a/packages/frontend/core/src/mobile/dialogs/setting/user-usage/index.tsx +++ b/packages/frontend/core/src/mobile/dialogs/setting/user-usage/index.tsx @@ -1,3 +1,4 @@ +import { Skeleton } from '@affine/component'; import { AuthService, ServerConfigService, @@ -7,7 +8,7 @@ import { import { useLiveData, useService } from '@toeverything/infra'; import { cssVar } from '@toeverything/theme'; import { cssVarV2 } from '@toeverything/theme/v2'; -import { useEffect } from 'react'; +import { type ReactNode, useEffect } from 'react'; import { SettingGroup } from '../group'; import * as styles from './style.css'; @@ -28,11 +29,13 @@ const Progress = ({ percent, desc, color, + children, }: { - name: string; - percent: number; - desc: string; - color: string | null; + name: ReactNode; + desc: ReactNode; + percent?: number; + color?: string | null; + children?: React.ReactNode; }) => { return (
@@ -40,19 +43,33 @@ const Progress = ({ {name} {desc}
-
-
-
+ {children ?? ( +
+
+
+ )}
); }; +const skeletonProps = { style: { margin: 0 }, animation: 'wave' } as const; +const Loading = () => { + return ( + } + desc={} + > + + + ); +}; + const UsagePanel = () => { const serverConfigService = useService(ServerConfigService); const serverFeatures = useLiveData( @@ -82,7 +99,7 @@ const CloudUsage = () => { const loading = percent === null; - if (loading) return null; + if (loading) return ; return ( { }, [copilotQuotaService]); if (loading || loadError) { - return null; + return ; } if (copilotActionLimit === 'unlimited') { diff --git a/packages/frontend/core/src/mobile/styles/mobile.css.ts b/packages/frontend/core/src/mobile/styles/mobile.css.ts index ba96a4c36947b..394dac3019e9e 100644 --- a/packages/frontend/core/src/mobile/styles/mobile.css.ts +++ b/packages/frontend/core/src/mobile/styles/mobile.css.ts @@ -9,6 +9,7 @@ globalStyle(':root', { vars: { [globalVars.appTabHeight]: BUILD_CONFIG.isIOS ? '49px' : '62px', }, + userSelect: 'none', }); globalStyle('body', { diff --git a/packages/frontend/core/src/mobile/views/all-docs/style.css.ts b/packages/frontend/core/src/mobile/views/all-docs/style.css.ts index 90ecc5775ca7d..cb9a27851fd20 100644 --- a/packages/frontend/core/src/mobile/views/all-docs/style.css.ts +++ b/packages/frontend/core/src/mobile/views/all-docs/style.css.ts @@ -3,7 +3,7 @@ import { style } from '@vanilla-extract/css'; const basicHeader = style({ width: '100%', - height: 56, + height: 44, }); export const header = style({ width: '100%', @@ -25,7 +25,7 @@ export const headerContent = style([ ]); export const tabs = style({ - height: 56, + height: 44, gap: 16, display: 'flex', alignItems: 'center', diff --git a/packages/frontend/core/src/mobile/views/sign-in/modal.tsx b/packages/frontend/core/src/mobile/views/sign-in/modal.tsx index 6336884226afc..c9c4f4c098bab 100644 --- a/packages/frontend/core/src/mobile/views/sign-in/modal.tsx +++ b/packages/frontend/core/src/mobile/views/sign-in/modal.tsx @@ -1,5 +1,6 @@ -import { Modal } from '@affine/component'; +import { IconButton, Modal, SafeArea } from '@affine/component'; import { authAtom } from '@affine/core/components/atoms'; +import { CloseIcon } from '@blocksuite/icons/rc'; import { cssVarV2 } from '@toeverything/theme/v2'; import { useAtom } from 'jotai'; import { useCallback } from 'react'; @@ -35,6 +36,19 @@ export const MobileSignInModal = () => { withoutCloseButton > + + } + style={{ borderRadius: 8, padding: 4 }} + onClick={closeModal} + /> + ); };