mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-25 18:26:05 +08:00
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
This commit is contained in:
@@ -1,3 +1,4 @@
|
|||||||
|
import { bodyEmphasized, bodyRegular } from '@toeverything/theme/typography';
|
||||||
import { style } from '@vanilla-extract/css';
|
import { style } from '@vanilla-extract/css';
|
||||||
|
|
||||||
// desktop
|
// desktop
|
||||||
@@ -41,28 +42,25 @@ export const mobileStyles = {
|
|||||||
padding: '12px 0 !important',
|
padding: '12px 0 !important',
|
||||||
borderRadius: 22,
|
borderRadius: 22,
|
||||||
}),
|
}),
|
||||||
description: style({
|
description: style([
|
||||||
padding: '11px 22px',
|
bodyRegular,
|
||||||
fontSize: 17,
|
{
|
||||||
fontWeight: 400,
|
padding: '11px 22px',
|
||||||
letterSpacing: -0.43,
|
},
|
||||||
lineHeight: '22px',
|
]),
|
||||||
}),
|
header: style([
|
||||||
header: style({
|
bodyEmphasized,
|
||||||
padding: '10px 16px',
|
{
|
||||||
marginBottom: '0px !important',
|
padding: '10px 16px',
|
||||||
fontSize: 17,
|
marginBottom: '0px !important',
|
||||||
fontWeight: 600,
|
},
|
||||||
letterSpacing: -0.43,
|
]),
|
||||||
lineHeight: '22px',
|
content: style([
|
||||||
}),
|
bodyRegular,
|
||||||
content: style({
|
{
|
||||||
padding: '11px 22px',
|
padding: '11px 22px',
|
||||||
fontSize: 17,
|
},
|
||||||
fontWeight: 400,
|
]),
|
||||||
letterSpacing: -0.43,
|
|
||||||
lineHeight: '22px',
|
|
||||||
}),
|
|
||||||
footer: style({
|
footer: style({
|
||||||
padding: '8px 16px',
|
padding: '8px 16px',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
@@ -74,13 +72,14 @@ export const mobileStyles = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
action: style({
|
action: style([
|
||||||
width: '100%',
|
bodyRegular,
|
||||||
height: 44,
|
{
|
||||||
borderRadius: 8,
|
width: '100%',
|
||||||
fontSize: 17,
|
height: 44,
|
||||||
fontWeight: 400,
|
borderRadius: 8,
|
||||||
letterSpacing: -0.43,
|
fontSize: 17,
|
||||||
lineHeight: '22px',
|
fontWeight: 400,
|
||||||
}),
|
},
|
||||||
|
]),
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -40,6 +40,7 @@ export const ConfirmModal = ({
|
|||||||
autoFocusConfirm = true,
|
autoFocusConfirm = true,
|
||||||
headerClassName,
|
headerClassName,
|
||||||
descriptionClassName,
|
descriptionClassName,
|
||||||
|
contentOptions,
|
||||||
...props
|
...props
|
||||||
}: ConfirmModalProps) => {
|
}: ConfirmModalProps) => {
|
||||||
const onConfirmClick = useCallback(() => {
|
const onConfirmClick = useCallback(() => {
|
||||||
@@ -50,7 +51,8 @@ export const ConfirmModal = ({
|
|||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
contentOptions={{
|
contentOptions={{
|
||||||
className: styles.container,
|
...contentOptions,
|
||||||
|
className: clsx(styles.container, contentOptions?.className),
|
||||||
onPointerDownOutside: e => {
|
onPointerDownOutside: e => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
onCancel?.();
|
onCancel?.();
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { cssVar } from '@toeverything/theme';
|
import { cssVar } from '@toeverything/theme';
|
||||||
import { title3Regular } from '@toeverything/theme/typography';
|
import { headlineRegular } from '@toeverything/theme/typography';
|
||||||
import { cssVarV2 } from '@toeverything/theme/v2';
|
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||||
import { style } from '@vanilla-extract/css';
|
import { style } from '@vanilla-extract/css';
|
||||||
|
|
||||||
@@ -21,7 +21,7 @@ export const triggerRoot = style({
|
|||||||
borderRadius: 4,
|
borderRadius: 4,
|
||||||
});
|
});
|
||||||
export const triggerLabel = style([
|
export const triggerLabel = style([
|
||||||
title3Regular,
|
headlineRegular,
|
||||||
{
|
{
|
||||||
flexGrow: '0',
|
flexGrow: '0',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { Skeleton } from '@affine/component';
|
||||||
import {
|
import {
|
||||||
AuthService,
|
AuthService,
|
||||||
ServerConfigService,
|
ServerConfigService,
|
||||||
@@ -7,7 +8,7 @@ import {
|
|||||||
import { useLiveData, useService } from '@toeverything/infra';
|
import { useLiveData, useService } from '@toeverything/infra';
|
||||||
import { cssVar } from '@toeverything/theme';
|
import { cssVar } from '@toeverything/theme';
|
||||||
import { cssVarV2 } from '@toeverything/theme/v2';
|
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||||
import { useEffect } from 'react';
|
import { type ReactNode, useEffect } from 'react';
|
||||||
|
|
||||||
import { SettingGroup } from '../group';
|
import { SettingGroup } from '../group';
|
||||||
import * as styles from './style.css';
|
import * as styles from './style.css';
|
||||||
@@ -28,11 +29,13 @@ const Progress = ({
|
|||||||
percent,
|
percent,
|
||||||
desc,
|
desc,
|
||||||
color,
|
color,
|
||||||
|
children,
|
||||||
}: {
|
}: {
|
||||||
name: string;
|
name: ReactNode;
|
||||||
percent: number;
|
desc: ReactNode;
|
||||||
desc: string;
|
percent?: number;
|
||||||
color: string | null;
|
color?: string | null;
|
||||||
|
children?: React.ReactNode;
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.progressRoot}>
|
<div className={styles.progressRoot}>
|
||||||
@@ -40,19 +43,33 @@ const Progress = ({
|
|||||||
<span className={styles.progressName}>{name}</span>
|
<span className={styles.progressName}>{name}</span>
|
||||||
<span className={styles.progressDesc}>{desc}</span>
|
<span className={styles.progressDesc}>{desc}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.progressTrack}>
|
{children ?? (
|
||||||
<div
|
<div className={styles.progressTrack}>
|
||||||
className={styles.progressBar}
|
<div
|
||||||
style={{
|
className={styles.progressBar}
|
||||||
width: `${percent}%`,
|
style={{
|
||||||
backgroundColor: color ?? cssVarV2('button/primary'),
|
width: `${percent}%`,
|
||||||
}}
|
backgroundColor: color ?? cssVarV2('button/primary'),
|
||||||
/>
|
}}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const skeletonProps = { style: { margin: 0 }, animation: 'wave' } as const;
|
||||||
|
const Loading = () => {
|
||||||
|
return (
|
||||||
|
<Progress
|
||||||
|
name={<Skeleton height={22} width="60" {...skeletonProps} />}
|
||||||
|
desc={<Skeleton height={16} width="80" {...skeletonProps} />}
|
||||||
|
>
|
||||||
|
<Skeleton height={10} {...skeletonProps} />
|
||||||
|
</Progress>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const UsagePanel = () => {
|
const UsagePanel = () => {
|
||||||
const serverConfigService = useService(ServerConfigService);
|
const serverConfigService = useService(ServerConfigService);
|
||||||
const serverFeatures = useLiveData(
|
const serverFeatures = useLiveData(
|
||||||
@@ -82,7 +99,7 @@ const CloudUsage = () => {
|
|||||||
|
|
||||||
const loading = percent === null;
|
const loading = percent === null;
|
||||||
|
|
||||||
if (loading) return null;
|
if (loading) return <Loading />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Progress
|
<Progress
|
||||||
@@ -110,7 +127,7 @@ const AiUsage = () => {
|
|||||||
}, [copilotQuotaService]);
|
}, [copilotQuotaService]);
|
||||||
|
|
||||||
if (loading || loadError) {
|
if (loading || loadError) {
|
||||||
return null;
|
return <Loading />;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (copilotActionLimit === 'unlimited') {
|
if (copilotActionLimit === 'unlimited') {
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ globalStyle(':root', {
|
|||||||
vars: {
|
vars: {
|
||||||
[globalVars.appTabHeight]: BUILD_CONFIG.isIOS ? '49px' : '62px',
|
[globalVars.appTabHeight]: BUILD_CONFIG.isIOS ? '49px' : '62px',
|
||||||
},
|
},
|
||||||
|
userSelect: 'none',
|
||||||
});
|
});
|
||||||
|
|
||||||
globalStyle('body', {
|
globalStyle('body', {
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { style } from '@vanilla-extract/css';
|
|||||||
|
|
||||||
const basicHeader = style({
|
const basicHeader = style({
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: 56,
|
height: 44,
|
||||||
});
|
});
|
||||||
export const header = style({
|
export const header = style({
|
||||||
width: '100%',
|
width: '100%',
|
||||||
@@ -25,7 +25,7 @@ export const headerContent = style([
|
|||||||
]);
|
]);
|
||||||
|
|
||||||
export const tabs = style({
|
export const tabs = style({
|
||||||
height: 56,
|
height: 44,
|
||||||
gap: 16,
|
gap: 16,
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { Modal } from '@affine/component';
|
import { IconButton, Modal, SafeArea } from '@affine/component';
|
||||||
import { authAtom } from '@affine/core/components/atoms';
|
import { authAtom } from '@affine/core/components/atoms';
|
||||||
|
import { CloseIcon } from '@blocksuite/icons/rc';
|
||||||
import { cssVarV2 } from '@toeverything/theme/v2';
|
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||||
import { useAtom } from 'jotai';
|
import { useAtom } from 'jotai';
|
||||||
import { useCallback } from 'react';
|
import { useCallback } from 'react';
|
||||||
@@ -35,6 +36,19 @@ export const MobileSignInModal = () => {
|
|||||||
withoutCloseButton
|
withoutCloseButton
|
||||||
>
|
>
|
||||||
<MobileSignIn onSkip={closeModal} />
|
<MobileSignIn onSkip={closeModal} />
|
||||||
|
<SafeArea
|
||||||
|
top
|
||||||
|
style={{ position: 'absolute', top: 0, right: 0, paddingRight: 16 }}
|
||||||
|
topOffset={8}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
size="24"
|
||||||
|
variant="solid"
|
||||||
|
icon={<CloseIcon />}
|
||||||
|
style={{ borderRadius: 8, padding: 4 }}
|
||||||
|
onClick={closeModal}
|
||||||
|
/>
|
||||||
|
</SafeArea>
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user