From e4f94c7e3f6e67ddb31a815e701d49c6190edc6a Mon Sep 17 00:00:00 2001 From: pengx17 Date: Wed, 4 Dec 2024 06:56:33 +0000 Subject: [PATCH] fix(mobile): progress styles (#9001) fix AF-1875, fix AF-1878, fix AF-1879 --- .../component/src/ui/progress/progress.css.ts | 13 +-- .../doc-properties/icons/icons-selector.tsx | 14 +++- .../doc-properties/types/number.tsx | 81 +------------------ .../components/mobile/config-modal/index.tsx | 16 ++-- .../mobile/config-modal/styles.css.ts | 15 +++- .../database-properties/cells/progress.css.ts | 8 ++ .../database-properties/cells/progress.tsx | 23 +++--- packages/frontend/graphql/src/schema.ts | 6 ++ 8 files changed, 64 insertions(+), 112 deletions(-) create mode 100644 packages/frontend/core/src/modules/doc-info/views/database-properties/cells/progress.css.ts diff --git a/packages/frontend/component/src/ui/progress/progress.css.ts b/packages/frontend/component/src/ui/progress/progress.css.ts index 5124601dc0..15d88ca141 100644 --- a/packages/frontend/component/src/ui/progress/progress.css.ts +++ b/packages/frontend/component/src/ui/progress/progress.css.ts @@ -33,13 +33,15 @@ export const sliderRoot = style({ }); export const thumb = style({ - width: '4px', - height: `calc(${progressHeight} + 2px)`, - transform: 'translateY(-1px)', - borderRadius: '2px', + width: 28, + height: 28, + transform: 'translate(1px, -9px)', + borderRadius: '50%', display: 'block', - background: cssVarV2('layer/insideBorder/primaryBorder'), + background: cssVarV2('layer/background/primary'), + boxShadow: cssVar('overlayPanelShadow'), opacity: 0, + transition: 'opacity 0.1s ease-in-out', selectors: { [`${root}:hover &, &:is(:focus-visible, :focus-within)`]: { opacity: 1, @@ -50,6 +52,7 @@ export const thumb = style({ export const label = style({ width: '40px', fontSize: cssVar('fontSm'), + textAlign: 'right', }); export const indicator = style({ diff --git a/packages/frontend/core/src/components/doc-properties/icons/icons-selector.tsx b/packages/frontend/core/src/components/doc-properties/icons/icons-selector.tsx index 6e02a826be..d8c2416b72 100644 --- a/packages/frontend/core/src/components/doc-properties/icons/icons-selector.tsx +++ b/packages/frontend/core/src/components/doc-properties/icons/icons-selector.tsx @@ -63,10 +63,16 @@ export const DocPropertyIconSelector = ({ return ( +
+ +
} >
diff --git a/packages/frontend/core/src/components/doc-properties/types/number.tsx b/packages/frontend/core/src/components/doc-properties/types/number.tsx index cd7b36c26d..9662ee11b9 100644 --- a/packages/frontend/core/src/components/doc-properties/types/number.tsx +++ b/packages/frontend/core/src/components/doc-properties/types/number.tsx @@ -1,6 +1,5 @@ import { PropertyValue } from '@affine/component'; import { useI18n } from '@affine/i18n'; -import { NumberIcon } from '@blocksuite/icons/rc'; import { type ChangeEventHandler, useCallback, @@ -8,11 +7,10 @@ import { useState, } from 'react'; -import { ConfigModal } from '../../mobile'; import * as styles from './number.css'; import type { PropertyValueProps } from './types'; -const DesktopNumberValue = ({ value, onChange }: PropertyValueProps) => { +export const NumberValue = ({ value, onChange }: PropertyValueProps) => { const parsedValue = isNaN(Number(value)) ? null : value; const [tempValue, setTempValue] = useState(parsedValue); const handleBlur = useCallback( @@ -51,80 +49,3 @@ const DesktopNumberValue = ({ value, onChange }: PropertyValueProps) => { ); }; - -const MobileNumberValue = ({ - value, - onChange, - propertyInfo, -}: PropertyValueProps) => { - const parsedValue = isNaN(Number(value)) ? null : value; - const [tempValue, setTempValue] = useState(parsedValue); - const handleBlur = useCallback( - (e: React.ChangeEvent) => { - onChange(e.target.value.trim()); - }, - [onChange] - ); - const handleOnChange: ChangeEventHandler = useCallback( - e => { - setTempValue(e.target.value.trim()); - }, - [] - ); - const t = useI18n(); - useEffect(() => { - setTempValue(parsedValue); - }, [parsedValue]); - - const [open, setOpen] = useState(false); - const onClose = useCallback(() => { - setOpen(false); - onChange(tempValue); - }, [onChange, tempValue]); - - return ( - <> - { - setOpen(true); - }} - > -
- {value || - t['com.affine.page-properties.property-value-placeholder']()} -
- - - - {propertyInfo?.name} - - } - > - - - - ); -}; - -export const NumberValue = BUILD_CONFIG.isMobileEdition - ? MobileNumberValue - : DesktopNumberValue; diff --git a/packages/frontend/core/src/components/mobile/config-modal/index.tsx b/packages/frontend/core/src/components/mobile/config-modal/index.tsx index 7a4d080eb4..32caaefdf8 100644 --- a/packages/frontend/core/src/components/mobile/config-modal/index.tsx +++ b/packages/frontend/core/src/components/mobile/config-modal/index.tsx @@ -83,13 +83,15 @@ export const ConfigModal = ({ )} {children} {variant === 'popup' && onDone ? ( - +
+ +
) : null}
diff --git a/packages/frontend/core/src/components/mobile/config-modal/styles.css.ts b/packages/frontend/core/src/components/mobile/config-modal/styles.css.ts index 71d8c385ba..d54423212a 100644 --- a/packages/frontend/core/src/components/mobile/config-modal/styles.css.ts +++ b/packages/frontend/core/src/components/mobile/config-modal/styles.css.ts @@ -11,7 +11,9 @@ export const pageModalContent = style({ backgroundColor: cssVarV2('layer/background/secondary'), }); -export const popupModalContent = style({}); +export const popupModalContent = style({ + padding: '12px', +}); export const pageTitle = style([ bodyEmphasized, @@ -30,6 +32,8 @@ export const popupTitle = style([ alignItems: 'center', gap: 8, color: cssVarV2('text/primary'), + padding: '0 8px', + height: 44, }, ]); @@ -43,7 +47,7 @@ export const pageContent = style({ export const popupContent = style({ display: 'flex', flexDirection: 'column', - gap: 16, + gap: 24, }); export const doneButton = style([ @@ -53,8 +57,15 @@ export const doneButton = style([ }, ]); +export const bottomDoneButtonContainer = style({ + padding: '4px', +}); + export const bottomDoneButton = style({ width: '100%', + height: 44, + fontSize: 17, + alignSelf: 'center', }); export const group = style({ diff --git a/packages/frontend/core/src/modules/doc-info/views/database-properties/cells/progress.css.ts b/packages/frontend/core/src/modules/doc-info/views/database-properties/cells/progress.css.ts new file mode 100644 index 0000000000..51190fc854 --- /dev/null +++ b/packages/frontend/core/src/modules/doc-info/views/database-properties/cells/progress.css.ts @@ -0,0 +1,8 @@ +import { cssVarV2 } from '@toeverything/theme/v2'; +import { style } from '@vanilla-extract/css'; + +export const progressIcon = style({ + color: cssVarV2('icon/primary'), + width: 20, + height: 20, +}); diff --git a/packages/frontend/core/src/modules/doc-info/views/database-properties/cells/progress.tsx b/packages/frontend/core/src/modules/doc-info/views/database-properties/cells/progress.tsx index 3310e59505..5615ab5314 100644 --- a/packages/frontend/core/src/modules/doc-info/views/database-properties/cells/progress.tsx +++ b/packages/frontend/core/src/modules/doc-info/views/database-properties/cells/progress.tsx @@ -6,6 +6,7 @@ import { useLiveData } from '@toeverything/infra'; import { useEffect, useState } from 'react'; import type { DatabaseCellRendererProps } from '../../../types'; +import * as styles from './progress.css'; const DesktopProgressCell = ({ cell, @@ -14,15 +15,14 @@ const DesktopProgressCell = ({ onChange, }: DatabaseCellRendererProps) => { const value = useLiveData(cell.value$ as LiveData); - const isEmpty = value === undefined; - const [localValue, setLocalValue] = useState(value); + const [localValue, setLocalValue] = useState(value || 0); useEffect(() => { - setLocalValue(value); + setLocalValue(value || 0); }, [value]); return ( - + { @@ -44,11 +44,10 @@ const MobileProgressCell = ({ onChange, }: DatabaseCellRendererProps) => { const value = useLiveData(cell.value$ as LiveData); - const isEmpty = value === undefined; - const [localValue, setLocalValue] = useState(value); + const [localValue, setLocalValue] = useState(value || 0); useEffect(() => { - setLocalValue(value); + setLocalValue(value || 0); }, [value]); const [open, setOpen] = useState(false); @@ -62,12 +61,8 @@ const MobileProgressCell = ({ return ( <> - setOpen(true)} - > - + setOpen(true)}> + - + {name} } diff --git a/packages/frontend/graphql/src/schema.ts b/packages/frontend/graphql/src/schema.ts index 2ff409632e..1c9f70cc5a 100644 --- a/packages/frontend/graphql/src/schema.ts +++ b/packages/frontend/graphql/src/schema.ts @@ -268,6 +268,7 @@ export type ErrorDataUnion = | DocAccessDeniedDataType | DocHistoryNotFoundDataType | DocNotFoundDataType + | InvalidEmailDataType | InvalidHistoryTimestampDataType | InvalidPasswordLengthDataType | InvalidRuntimeConfigTypeDataType @@ -387,6 +388,11 @@ export interface HumanReadableQuotaType { storageQuota: Scalars['String']['output']; } +export interface InvalidEmailDataType { + __typename?: 'InvalidEmailDataType'; + email: Scalars['String']['output']; +} + export interface InvalidHistoryTimestampDataType { __typename?: 'InvalidHistoryTimestampDataType'; timestamp: Scalars['String']['output'];