Commit Graph

31 Commits

Author SHA1 Message Date
L-Sun 067469aa98 fix(component): prevent auto focus in mobile modal (#9247)
Continue [BS-2169](https://linear.app/affine-design/issue/BS-2169/新的-menu-不支持移动端)
2024-12-23 09:56:58 +00:00
CatsJuice 84df2a1d16 fix(mobile): disable navigation gesture for swipe-dialog (#8993) 2024-12-12 06:55:16 +00:00
CatsJuice 71ab75e30e feat(mobile): mobile experimental feature setting (#8922)
close AF-1802

![CleanShot 2024-11-26 at 10.02.27.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/09d24e35-a524-497d-b5aa-840bf74f128f.gif)
2024-11-28 07:25:06 +00:00
CatsJuice b369ee0cca feat(mobile): disable swipe back gesture when there is no back in header (#8876)
close AF-1663, AF-1756

- new global `ModalConfigContext`
- new logic to judge whether inside modal
- render `✕` for PageHeader back if inside modal
- only enable `NavigationGesture` when there is `<` in PageHeader
2024-11-25 03:12:21 +00:00
EYHN 902635e60f refactor(core): desktop project struct (#8334) 2024-11-05 11:00:33 +08:00
CatsJuice cdaac5602c feat(mobile): manage docs/tags/collections in explorer (#8649)
close AF-1564, AF-1542
2024-11-04 05:28:06 +00:00
forehalo a387e4ac07 refactor: migrate environment to BUILD_CONFIG (#8206) 2024-09-13 07:58:20 +00:00
CatsJuice 81ab8ac8b3 feat(mobile): pwa and browser theme-color optimization (#8168)
[AF-1325](https://linear.app/affine-design/issue/AF-1325/优化-pwa-体验), [AF-1317](https://linear.app/affine-design/issue/AF-1317/优化:-pwa-的顶部-status-bar-颜色应与背景保持一致), [AF-1318](https://linear.app/affine-design/issue/AF-1318/优化:pwa-的底部应当有符合设备安全高度的padding), [AF-1321](https://linear.app/affine-design/issue/AF-1321/更新一下-fail-的-pwa-icon)

- New `<SafeArea />` ui component
- New `useThemeColorV1` / `useThemeColorV2` hook:
    - to modify `<meta name="theme-color" />` with given theme key
2024-09-11 02:20:59 +00:00
pengx17 fb76fdfca3 fix(core): menu not scrollable when opening in modal (#8179)
fix AF-1360

When menu (with modal = false) is rendered in Modal, the [RemoveScroll utility wrapped by Modal](https://github.com/radix-ui/primitives/blob/660060a765634e9cc7bf4513f41e8dabc9824d74/packages/react/dialog/src/Dialog.tsx#L203) will prevent menu from scrolling.

The reason why menu is scrollable within a dialog is because it is also wrapped a RemoveScroll [when modal is on. ](https://github.com/radix-ui/primitives/blob/660060a765634e9cc7bf4513f41e8dabc9824d74/packages/react/menu/src/Menu.tsx#L305)

In this fix, added a `useWithinModal` utility hook so that menu will automatically assign noportal mode for menu when it is rendered inside of a modal.
2024-09-10 06:09:00 +00:00
CatsJuice 03c2051926 feat(component): startScopedViewTranstion func to support scoped view transition (#8093)
AF-1293
2024-09-05 06:45:29 +00:00
EYHN 2524491bd1 fix(env): is mobile flag (#8005)
only 'mobile' entry has isMobile = true flag
2024-09-04 09:21:36 +00:00
CatsJuice 0d6f468385 fix(component): nested modal view-transition support (#8073)
<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/LakojjjzZNf6ogjOVwKE/b8033923-8f08-4c72-96b6-d790fc0ff703.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/LakojjjzZNf6ogjOVwKE/b8033923-8f08-4c72-96b6-d790fc0ff703.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/b8033923-8f08-4c72-96b6-d790fc0ff703.mp4">CleanShot 2024-09-03 at 18.36.17.mp4</video>
2024-09-04 01:29:22 +00:00
pengx17 d00f86c3ce fix(core): handle modal overlay click event correctly (#8063)
1. overlay click + hide is brought back. this is because modal (ormobile menu)'s `onPointerDownOutside` is bound to document.body. Code in https://github.com/toeverything/AFFiNE/blob/e58af08f6325c7c2c6cbd3325e954fd7d2ab6859/packages/frontend/core/src/modules/explorer/views/tree/node.tsx#L353-L356 will stop the event from bubbling to the document element.
2. when Menu's set to modal=true, the parent is set to pointer-events: none as well. changed menu to modal false instead.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/3e50281f-839d-4463-af00-dff2fce8202b.png)
2024-09-03 12:00:00 +00:00
CatsJuice ad110078ac feat(mobile): setting page ui (#8048)
AF-1275
2024-09-03 03:27:18 +00:00
pengx17 697f2c6520 fix(core): remove modal default overlay onclick (#8035)
fix AF-1300

overlay click is already handled in `handlePointerDownOutSide`. adding onclick to overlay will cause issues on closing nested menus.
2024-09-02 02:59:18 +00:00
pengx17 f544e69d02 fix(mobile): modal styles on mobile (#8023)
<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/92c0cc55-1f75-42b7-a83f-4ffa6cf205ad.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/92c0cc55-1f75-42b7-a83f-4ffa6cf205ad.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/92c0cc55-1f75-42b7-a83f-4ffa6cf205ad.mp4">20240829-1420-07.7370936.mp4</video>
2024-08-29 16:45:23 +00:00
EYHN b96ad57568 feat(core): import template (#8000) 2024-08-29 04:01:35 +00:00
Cats Juice 23b0db36b9 feat(component): mobile menu support (#7892) 2024-08-21 09:05:05 +00:00
CatsJuice 3d855647c7 refactor(component): refactor the implementation of Button and IconButton (#7716)
## Button
- Remove props withoutHoverStyle
   refactor hover impl with independent layer, so that hover-color won't affect the background even if is overridden outside
- Update `type` (renamed to `variant`):
  - remove `processing` and `warning`
  - rename `default` with `secondary`
- Remove `shape` props
- Remove `icon` and `iconPosition`, replaced with `prefix: ReactNode` and `suffix: ReactNode`
- Integrate tooltip for more convenient usage
- New Storybook document
- Focus style

## IconButton
- A Wrapper base on `<Button />`
- Override Button size and variant
  - size: `'12' | '14' | '16' | '20' | '24' | number`
     These presets size are referenced from the design system.
  - variant:  `'plain' | 'solid' | 'danger' | 'custom'`
- Inset icon via Button 's prefix

## Fix
- fix some button related issues
- close AF-1159, AF-1160, AF-1161, AF-1162, AF-1163, AF-1158, AF-1157

## Storybook

![CleanShot 2024-08-03 at 14.57.20@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/f5a76110-35d0-4082-a940-efc12bed87b0.png)
2024-08-05 02:57:23 +00:00
EYHN bb767a6cdc fix(component): modal overlap issue (#7691) 2024-08-01 08:03:21 +00:00
EYHN 6bc5337307 refactor(core): adjust modal animation (#7606)
<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/g3jz87HxbjOJpXV3FPT7/529d6c3f-4b23-43ac-84cc-171713d3dc72.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/g3jz87HxbjOJpXV3FPT7/529d6c3f-4b23-43ac-84cc-171713d3dc72.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/g3jz87HxbjOJpXV3FPT7/529d6c3f-4b23-43ac-84cc-171713d3dc72.mp4">CleanShot 2024-07-25 at 20.04.01.mp4</video>

When a modal is closed, sometimes its components are completely unmounted from the component tree, making it difficult to animate. This pr defining a custom element as the container of ReactDOM.portal, rewriting the `removeChild` function, and use `startViewTransition` when ReactDOM calls it to implement the animation.

# Save Input

Some inputs use blur event to save data, but when they are unmounted, blur event will not be triggered at all. This pr changes blur event to native addEventListener, which will be called after the DOM element is unmounted, so as to save data in time.
2024-07-26 08:39:34 +00:00
JimmFly 55db9f9719 feat(component): add animations to modal (#7474)
Add opening and closing animations to modal.

The usage of conditional rendering as shown below is not recommended:
```
open ? (
      <Modal
        open={open}
        ...
      />
    ) : null,
```

When the modal is closed, it gets removed from the DOM instantly without running any exit animations that might be defined in the Modal component.
2024-07-22 03:22:42 +00:00
CatsJuice d6ad7d566f chore(core): adjust ai onboarding dismiss logic, persist dialog and dismiss once closed (#7417) 2024-07-04 07:00:17 +00:00
Cats Juice fa2305b0e2 feat(core): replace all radio-button-group usage (#7352) 2024-06-27 17:54:30 +08:00
L-Sun 09201d42a0 chore: bump up @blocksuite/icons version (#7233) 2024-06-18 17:07:11 +08:00
pengx17 2ca77d9170 refactor: find in page (#7086)
- refactor rxjs data flow
- use canvas text to mitigate searchable search box input text issue
2024-05-28 06:19:53 +00:00
pengx17 5e1528b50b fix: export then add test case (#7024) 2024-05-24 04:49:08 +00:00
EYHN f2adbdaba4 style: enable import-x/no-duplicates (#6279) 2024-03-25 03:55:33 +00:00
Peng Xiao bb8e601f82 feat(core): tags inline editor (#5748)
tags inline editor and some refactor

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/439da1e3-30a9-462a-b7b4-c8e7c3b5ef17.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/439da1e3-30a9-462a-b7b4-c8e7c3b5ef17.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/439da1e3-30a9-462a-b7b4-c8e7c3b5ef17.mp4">Kapture 2024-01-31 at 23.29.11.mp4</video>

fix AFF-467
fix AFF-468
fix AFF-472
fix AFF-466
2024-02-22 09:37:50 +00:00
Peng Xiao 1e01ed0b0f fix(component): modal blurness (#5177)
moved https://github.com/toeverything/design/pull/108

Do not use transform to center the modal. It has know issue to cause modal to have blurred texts.

https://github.com/radix-ui/website/issues/383

fix https://github.com/toeverything/AFFiNE/issues/5176
2023-12-05 09:18:49 +00:00
Cats Juice 0abadbe7bb refactor(component): migrate design components (#5000)
```[tasklist]
### Tasks
- [x] Migrate components from [design](https://github.com/toeverything/design)
- [x] Replace all imports from `@toeverything/components`
- [x] Clean up `@toeverything/components` dependencies
- [x] Storybook
```

### Influence

Here are all the components that are influenced by `@toeverything/components`

- `@affine/component`
    - App update `Button` `Tooltip`
    - App sidebar header `IconButton`, `Tooltip`
    - Back `Button`
    - Auth
      - Change email page save `Button`
      - Change password page all `Button`s (Save, Later, Open)
      - Confirm change email `Button`
      - Set password page `Button`
      - Sign in success page `Button`
      - Sign up page `Button`
      - Auth `Modal`
    - Workspace card `Avatar`, `Divider`, `Tooltip`, `IconButton`
    - Share
      - Disable shared public link `Modal`
    - Import page `IconButton`, `Tooltip`
    - Accept invite page `Avatar`, `Button`
    - Invite member `Modal`
    - 404 Page `Avatar`, `Button`, `IconButton`, `Tooltip`
    - Notification center `IconButton`
    - Page list
      - operation cell `IconButton`, `Menu`, `ConfirmModal`, `Tooltip`
      - tags more `Menu`
      - favorite `IconButton`, `Tooltip`
      - new page dropdown `Menu`
      - filter `Menu`, `Button`, `IconButton`
    - Page operation `Menu`
      - export `MenuItem`
      - move to trash `MenuItem`, `ConfirmModal`
    - Workspace header filter `Menu`, `Button`
    - Collection bar `Button`, `Tooltip` (*⚠️ seems not used*)
    - Collection operation `Menu`, `MenuItem`
      - Create collection `Modal`, `Button`
      - Edit collection `Modal`, `Button`
      - Page mode filter `Menu`
      - Page mode `Button`, `Menu`
    - Setting modal
      - storage usage progress `Button`, `Tooltip`
    - On boarding tour `Modal`
- `@affine/core`
  - Bookmark `Menu`
  - Affine error boundary `Button`
  - After sign in send email `Button`
  - After sign up send email `Button`
  - Send email `Button`
  - Sign in `Button`
  - Subscription redirect `Loading`, `Button`
  - Setting `Modal`
    - User plan button `Tooltip`
    - Members `Avatar`, `Button`, `IconButton`, `Loading`, `Tooltip`, `Menu`
    - Profile `Button`, `Avatar`
    - Workspace
      - publish panel `Button`, `Tooltip`
      - export panel `Button`
      - storage panel `Button`, `Tooltip`
      - delete `ConfirmModal`
    - Language `Menu`
    - Account setting `Avatar`, `Button`
    - Date format setting `Menu`
    - Billing `Button`, `IconButton`, `Loading`
    - Payment plans `Button`, `ConfirmModal`, `Modal`, `Tooltip`
  - Create workspace `Modal`, `ConfirmModal`, `Button`
  - Payment disabled `ConfirmModal`
  - Share/Export `Menu`, `Button`, `Divider`
  - Sign out `ConfirmModal`
  - Temp disable affine cloud `Modal`
  - Page detail operation `Menu`
  - Blocksuite mode switch `Tooltip`
  - Login card `Avatar`
  - Help island `Tooltip`
- `plugin`
  - copilot
  - hello world
  - image preview
  - outline
2023-12-04 08:32:12 +00:00