-
-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(mobile): mobile experimental feature setting (#8922)
close AF-1802 
- Loading branch information
Showing
10 changed files
with
236 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 96 additions & 0 deletions
96
packages/frontend/core/src/mobile/dialogs/setting/experimental/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { Modal, Scrollable, Switch } from '@affine/component'; | ||
| import { PageHeader } from '@affine/core/mobile/components'; | ||
| import { useI18n } from '@affine/i18n'; | ||
| import { ArrowRightSmallIcon } from '@blocksuite/icons/rc'; | ||
| import { | ||
| AFFINE_FLAGS, | ||
| FeatureFlagService, | ||
| type Flag, | ||
| useLiveData, | ||
| useService, | ||
| } from '@toeverything/infra'; | ||
| import { useCallback, useState } from 'react'; | ||
|
|
||
| import { SettingGroup } from '../group'; | ||
| import { RowLayout } from '../row.layout'; | ||
| import * as styles from './styles.css'; | ||
|
|
||
| export const ExperimentalFeatureSetting = () => { | ||
| const [open, setOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <> | ||
| <SettingGroup title="Experimental"> | ||
| <RowLayout | ||
| label={'Experimental Features'} | ||
| onClick={() => setOpen(true)} | ||
| > | ||
| <ArrowRightSmallIcon fontSize={22} /> | ||
| </RowLayout> | ||
| </SettingGroup> | ||
| <Modal | ||
| animation="slideRight" | ||
| open={open} | ||
| onOpenChange={setOpen} | ||
| fullScreen | ||
| contentOptions={{ className: styles.dialog }} | ||
| withoutCloseButton | ||
| > | ||
| <ExperimentalFeatureList onBack={() => setOpen(false)} /> | ||
| </Modal> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const ExperimentalFeatureList = ({ onBack }: { onBack: () => void }) => { | ||
| 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> | ||
| ); | ||
| }; | ||
|
|
||
| const ExperimentalFeaturesItem = ({ flag }: { flag: Flag }) => { | ||
| const t = useI18n(); | ||
| const value = useLiveData(flag.$); | ||
|
|
||
| const onChange = useCallback( | ||
| (checked: boolean) => { | ||
| flag.set(checked); | ||
| }, | ||
| [flag] | ||
| ); | ||
|
|
||
| if (flag.configurable === false || flag.hide) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <li> | ||
| <div className={styles.itemBlock}> | ||
| {t[flag.displayName]()} | ||
| <Switch checked={value} onChange={onChange} /> | ||
| </div> | ||
| {flag.description ? ( | ||
| <div className={styles.itemDescription}>{t[flag.description]()}</div> | ||
| ) : null} | ||
| </li> | ||
| ); | ||
| }; |
52 changes: 52 additions & 0 deletions
52
packages/frontend/core/src/mobile/dialogs/setting/experimental/styles.css.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { | ||
| bodyEmphasized, | ||
| 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', | ||
| flexDirection: 'column', | ||
| gap: 16, | ||
| }); | ||
|
|
||
| // item | ||
| export const itemBlock = style([ | ||
| bodyRegular, | ||
| { | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'space-between', | ||
| padding: '19px 12px', | ||
| background: cssVarV2('layer/background/mobile/secondary'), | ||
| borderRadius: 12, | ||
| }, | ||
| ]); | ||
| export const itemDescription = style([ | ||
| footnoteRegular, | ||
| { | ||
| marginTop: 4, | ||
| color: cssVarV2('text/tertiary'), | ||
| }, | ||
| ]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters