feat(mobile): a basic swipeable dialog for setting

toeverything · Nov 26, 2024 · 0b55270 · 0b55270
1 parent e2882bc
commit 0b55270
Show file tree

Hide file tree

Showing 7 changed files with 320 additions and 57 deletions.
diff --git a/packages/frontend/core/src/mobile/components/app-tabs/index.tsx b/packages/frontend/core/src/mobile/components/app-tabs/index.tsx
@@ -7,6 +7,7 @@ import { AllDocsIcon, MobileHomeIcon, SearchIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import React from 'react';
+import { createPortal } from 'react-dom';
 import type { Location } from 'react-router-dom';
 
 import { VirtualKeyboardService } from '../../modules/virtual-keyboard/services/virtual-keyboard';
@@ -58,7 +59,7 @@ export const AppTabs = ({ background }: { background?: string }) => {
   const virtualKeyboardService = useService(VirtualKeyboardService);
   const virtualKeyboardVisible = useLiveData(virtualKeyboardService.show$);
 
-  return (
+  return createPortal(
     <SafeArea
       bottom
       className={styles.appTabs}
@@ -81,7 +82,8 @@ export const AppTabs = ({ background }: { background?: string }) => {
           }
         })}
       </ul>
-    </SafeArea>
+    </SafeArea>,
+    document.body
   );
 };
 

diff --git a/packages/frontend/core/src/mobile/dialogs/setting/experimental/index.tsx b/packages/frontend/core/src/mobile/dialogs/setting/experimental/index.tsx
@@ -1,5 +1,4 @@
-import { Modal, Scrollable, Switch } from '@affine/component';
-import { PageHeader } from '@affine/core/mobile/components';
+import { Switch } from '@affine/component';
 import { useI18n } from '@affine/i18n';
 import { ArrowRightSmallIcon } from '@blocksuite/icons/rc';
 import {
@@ -13,6 +12,7 @@ import { useCallback, useState } from 'react';
 
 import { SettingGroup } from '../group';
 import { RowLayout } from '../row.layout';
+import { SwipeDialog } from '../swipe-dialog';
 import * as styles from './styles.css';
 
 export const ExperimentalFeatureSetting = () => {
@@ -28,42 +28,29 @@ export const ExperimentalFeatureSetting = () => {
           <ArrowRightSmallIcon fontSize={22} />
         </RowLayout>
       </SettingGroup>
-      <Modal
-        animation="slideRight"
+      <SwipeDialog
         open={open}
         onOpenChange={setOpen}
-        fullScreen
-        contentOptions={{ className: styles.dialog }}
-        withoutCloseButton
+        title="Experimental Features"
       >
-        <ExperimentalFeatureList onBack={() => setOpen(false)} />
-      </Modal>
+        <ExperimentalFeatureList />
+      </SwipeDialog>
     </>
   );
 };
 
-const ExperimentalFeatureList = ({ onBack }: { onBack: () => void }) => {
+const ExperimentalFeatureList = () => {
   const featureFlagService = useService(FeatureFlagService);
 
   return (
-    <div className={styles.root}>
-      <PageHeader back={!!onBack} backAction={onBack} className={styles.header}>
-        <span className={styles.dialogTitle}>Experimental Features</span>
-      </PageHeader>
-      <Scrollable.Root className={styles.scrollArea}>
-        <Scrollable.Viewport>
-          <ul className={styles.content}>
-            {Object.keys(AFFINE_FLAGS).map(key => (
-              <ExperimentalFeaturesItem
-                key={key}
-                flag={featureFlagService.flags[key as keyof AFFINE_FLAGS]}
-              />
-            ))}
-          </ul>
-        </Scrollable.Viewport>
-        <Scrollable.Scrollbar orientation="vertical" />
-      </Scrollable.Root>
-    </div>
+    <ul className={styles.content}>
+      {Object.keys(AFFINE_FLAGS).map(key => (
+        <ExperimentalFeaturesItem
+          key={key}
+          flag={featureFlagService.flags[key as keyof AFFINE_FLAGS]}
+        />
+      ))}
+    </ul>
   );
 };
 

diff --git a/packages/frontend/core/src/mobile/dialogs/setting/experimental/styles.css.ts b/packages/frontend/core/src/mobile/dialogs/setting/experimental/styles.css.ts
@@ -1,29 +1,7 @@
-import {
-  bodyEmphasized,
-  bodyRegular,
-  footnoteRegular,
-} from '@toeverything/theme/typography';
+import { bodyRegular, footnoteRegular } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
-export const dialog = style({
-  padding: '0 !important',
-  background: cssVarV2('layer/background/mobile/primary'),
-});
-export const root = style({
-  display: 'flex',
-  flexDirection: 'column',
-  height: '100dvh',
-});
-export const header = style({
-  background: `${cssVarV2('layer/background/mobile/primary')} !important`,
-});
-export const dialogTitle = style([bodyEmphasized, {}]);
-export const scrollArea = style({
-  height: 0,
-  flex: 1,
-});
-
 export const content = style({
   padding: '24px 16px',
   display: 'flex',

diff --git a/packages/frontend/core/src/mobile/dialogs/setting/index.tsx b/packages/frontend/core/src/mobile/dialogs/setting/index.tsx
@@ -1,4 +1,3 @@
-import { ConfigModal } from '@affine/core/components/mobile';
 import { AuthService } from '@affine/core/modules/cloud';
 import type {
   DialogComponentProps,
@@ -13,6 +12,7 @@ import { AppearanceGroup } from './appearance';
 import { ExperimentalFeatureSetting } from './experimental';
 import { OthersGroup } from './others';
 import * as styles from './style.css';
+import { SwipeDialog } from './swipe-dialog';
 import { UserProfile } from './user-profile';
 import { UserUsage } from './user-usage';
 
@@ -38,13 +38,23 @@ export const SettingDialog = ({
   const t = useI18n();
 
   return (
-    <ConfigModal
+    <SwipeDialog
       title={t['com.affine.mobile.setting.header-title']()}
       open
       onOpenChange={() => close()}
-      onBack={close}
     >
       <MobileSetting />
-    </ConfigModal>
+    </SwipeDialog>
   );
+
+  // return (
+  //   <ConfigModal
+  //     title={t['com.affine.mobile.setting.header-title']()}
+  //     open
+  //     onOpenChange={() => close()}
+  //     onBack={close}
+  //   >
+  //     <MobileSetting />
+  //   </ConfigModal>
+  // );
 };
diff --git a/packages/frontend/core/src/mobile/dialogs/setting/style.css.ts b/packages/frontend/core/src/mobile/dialogs/setting/style.css.ts
@@ -8,6 +8,7 @@ export const root = style({
   display: 'flex',
   flexDirection: 'column',
   gap: 16,
+  padding: '24px 16px',
 });
 
 export const baseSettingItem = style({

diff --git a/packages/frontend/core/src/mobile/dialogs/setting/swipe-dialog.css.ts b/packages/frontend/core/src/mobile/dialogs/setting/swipe-dialog.css.ts
@@ -0,0 +1,56 @@
+import { cssVar } from '@toeverything/theme';
+import { bodyEmphasized } from '@toeverything/theme/typography';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const root = style({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  zIndex: cssVar('zIndexModal'),
+  width: '100dvw',
+  height: '100dvh',
+});
+export const overlay = style({
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  left: 0,
+  top: 0,
+  background: 'transparent',
+});
+export const dialog = style([
+  overlay,
+  {
+    padding: 0,
+    background: cssVarV2('layer/background/mobile/primary'),
+    // initial state,
+    transform: 'translateX(100%)',
+  },
+]);
+
+export const content = style({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100dvh',
+});
+
+export const header = style({
+  background: `${cssVarV2('layer/background/mobile/primary')} !important`,
+});
+
+export const dialogTitle = style([bodyEmphasized, {}]);
+export const scrollArea = style({
+  height: 0,
+  flex: 1,
+});
+
+export const swipeBackTrigger = style({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: 10,
+  height: '100%',
+  zIndex: 1,
+});