fix(mobile): progress styles (#9001)

fix AF-1875, fix AF-1878, fix AF-1879
2026-02-27 02:42:25 +08:00 · 2024-12-04 06:56:33 +00:00
parent 82d133d64d
commit e4f94c7e3f
8 changed files with 64 additions and 112 deletions
--- 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({
--- 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 (
    <Menu
      items={
-        <IconsSelectorPanel
-          selectedIcon={propertyInfo.icon}
-          onSelectedChange={onSelectedChange}
-        />
+        <div
+          style={{
+            padding: BUILD_CONFIG.isMobileEdition ? '0 20px' : undefined,
+          }}
+        >
+          <IconsSelectorPanel
+            selectedIcon={propertyInfo.icon}
+            onSelectedChange={onSelectedChange}
+          />
+        </div>
      }
    >
      <div className={styles.iconSelectorButton}>
--- 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) => {
    </PropertyValue>
  );
 };
-
-const MobileNumberValue = ({
-  value,
-  onChange,
-  propertyInfo,
-}: PropertyValueProps) => {
-  const parsedValue = isNaN(Number(value)) ? null : value;
-  const [tempValue, setTempValue] = useState(parsedValue);
-  const handleBlur = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      onChange(e.target.value.trim());
-    },
-    [onChange]
-  );
-  const handleOnChange: ChangeEventHandler<HTMLInputElement> = 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 (
-    <>
-      <PropertyValue
-        className={styles.numberPropertyValueContainer}
-        isEmpty={!parsedValue}
-        onClick={() => {
-          setOpen(true);
-        }}
-      >
-        <div className={styles.mobileNumberPropertyValueInput}>
-          {value ||
-            t['com.affine.page-properties.property-value-placeholder']()}
-        </div>
-      </PropertyValue>
-      <ConfigModal
-        open={open}
-        variant="popup"
-        onDone={onClose}
-        onOpenChange={setOpen}
-        title={
-          <>
-            <NumberIcon className={styles.numberIcon} />
-            {propertyInfo?.name}
-          </>
-        }
-      >
-        <input
-          className={styles.mobileNumberPropertyValueInput}
-          type="number"
-          inputMode="decimal"
-          value={tempValue || ''}
-          onChange={handleOnChange}
-          onBlur={handleBlur}
-          data-empty={!tempValue}
-          placeholder={t[
-            'com.affine.page-properties.property-value-placeholder'
-          ]()}
-        />
-      </ConfigModal>
-    </>
-  );
-};
-
-export const NumberValue = BUILD_CONFIG.isMobileEdition
-  ? MobileNumberValue
-  : DesktopNumberValue;
--- 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 ? (
-          <Button
-            variant="primary"
-            className={styles.bottomDoneButton}
-            onClick={onDone}
-          >
-            {t['Done']()}
-          </Button>
+          <div className={styles.bottomDoneButtonContainer}>
+            <Button
+              variant="primary"
+              className={styles.bottomDoneButton}
+              onClick={onDone}
+            >
+              {t['Done']()}
+            </Button>
+          </div>
        ) : null}
      </div>
    </Modal>
--- 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({
--- 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
@@ -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,
+});
--- 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<number>);
-  const isEmpty = value === undefined;
-  const [localValue, setLocalValue] = useState(value);
+  const [localValue, setLocalValue] = useState(value || 0);

  useEffect(() => {
-    setLocalValue(value);
+    setLocalValue(value || 0);
  }, [value]);

  return (
-    <PropertyValue isEmpty={isEmpty} hoverable={false}>
+    <PropertyValue hoverable={false}>
      <Progress
        value={localValue}
        onChange={v => {
@@ -44,11 +44,10 @@ const MobileProgressCell = ({
  onChange,
 }: DatabaseCellRendererProps) => {
  const value = useLiveData(cell.value$ as LiveData<number>);
-  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 (
    <>
-      <PropertyValue
-        isEmpty={isEmpty}
-        hoverable={false}
-        onClick={() => setOpen(true)}
-      >
-        <Progress value={value} />
+      <PropertyValue hoverable={false} onClick={() => setOpen(true)}>
+        <Progress value={value || 0} />
      </PropertyValue>

      <ConfigModal
@@ -77,7 +72,7 @@ const MobileProgressCell = ({
        onDone={commitChange}
        title={
          <>
-            <ProgressIcon />
+            <ProgressIcon className={styles.progressIcon} />
            {name}
          </>
        }
--- 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'];