fix(mobile): progress styles (#9001)

fix AF-1875, fix AF-1878, fix AF-1879

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}>

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;

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>

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({

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,
+});

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}
           </>
         }