Commit Graph

22 Commits

Author SHA1 Message Date
pengx17
fa82842cd7 fix(mobile): doc property styles (#8760)
fix AF-1582
fix AF-1671

- mobile doc info dialog styles
- added ConfigModal for editing property values in modal, including:
  - workspace properties: text, number, tags
  - db properties: text, number, label, link
2024-11-12 07:11:00 +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
Cats Juice
c87a392f29 fix(component): confirm modal should not clip content (#8325) 2024-09-20 07:38:15 +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
CatsJuice
03c2051926 feat(component): startScopedViewTranstion func to support scoped view transition (#8093)
AF-1293
2024-09-05 06:45:29 +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
CatsJuice
ad110078ac feat(mobile): setting page ui (#8048)
AF-1275
2024-09-03 03:27: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
Cats Juice
23b0db36b9 feat(component): mobile menu support (#7892) 2024-08-21 09:05:05 +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
JimmFly
6b47c6beda fix(core): unexpected text overflow style in dialog (#7345)
close AF-967
before:
<img width="502" alt="image" src="https://github.com/toeverything/AFFiNE/assets/102217452/839096b2-62b1-4ca3-b410-99c478eeac53">

after:
<img width="496" alt="image" src="https://github.com/toeverything/AFFiNE/assets/102217452/9f02c305-e122-4c6c-a3c6-32647fa9e4c5">
2024-06-26 13:21:28 +00:00
pengx17
fa4e4c738a chore: bump blocksuite (#7152)
## Features
- https://github.com/toeverything/BlockSuite/pull/7208 @pengx17
- https://github.com/toeverything/BlockSuite/pull/7207 @pengx17
- https://github.com/toeverything/BlockSuite/pull/7206 @regischen
- https://github.com/toeverything/BlockSuite/pull/7194 @akumatus
- https://github.com/toeverything/BlockSuite/pull/7209 @Saul-Mirone

## Bugfix
- https://github.com/toeverything/BlockSuite/pull/7205 @fundon
- https://github.com/toeverything/BlockSuite/pull/7211 @L-Sun
- https://github.com/toeverything/BlockSuite/pull/7210 @fundon

## Refactor

## Misc
- https://github.com/toeverything/BlockSuite/pull/7203 @fundon

Also added prompt implementation to fix type change issue

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/2c0efce1-c50f-4a8f-892c-bf8e2d99bef2.png)
2024-06-05 09:33:18 +00: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
CatsJuice
d412635f6b feat(component): new hook to open confirm modal (#6342)
new exports from `@affine/component`:
```ts
import { ConfirmModalProvider, useConfirmModal } from "@affine/component"
```

Open confirm modal with hook:

```ts
const Component = () => {
  const { openConfirmModal } = useConformModal();

  const open = () => {
    openConfirmModal({
      // props of ConfirmModal
      /**
       * will show loading state when confirm clicked, and close after onConfirm finished
       */
      onConfirm: async () => {
        await new Promise((r) => setTimeout(r, 2000));
      },
    });
  }
  return <Button onClick={open}>Open</Button>
}
```
2024-03-27 13:30:30 +00:00
Peng Xiao
e116a82c24 fix(component): an input display issue in confirm dialog (#6102)
fix the following issue of `input`

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/8a439fd1-3f96-46c3-9e8d-0449779b5c36.png)
2024-03-13 11:40:34 +00:00
tzyoo
ee54e00a03 fix(core): upgrade dialog close button layout level (#6004) 2024-03-04 11:30:25 +00:00
JimmFly
4ea4a2d25f feat(core): support create cloud workspace (#5771)
close TOV-475

has not logged:

https://github.com/toeverything/AFFiNE/assets/102217452/b9aa2806-7dbd-4235-895d-5b27effb5831

 has logged :

https://github.com/toeverything/AFFiNE/assets/102217452/259a1c35-c6ab-4a52-9e03-4438ca64e620

client has not logged:

https://github.com/toeverything/AFFiNE/assets/102217452/af6ef528-6fb8-4a27-842f-00c9669afcb2
2024-02-23 06:18:25 +00:00
Peng Xiao
7d951a975f fix(core): replace most --affine with cssVar (#5728)
using a [babel plugin](https://gist.github.com/pengx17/49e24ae8a5a609bdaff122ee8c679d1c) to transform all var(--affine-xxx) to cssVar

Some issues:
- tried ast-grep but it seems to be not easy to add imports conditionally
- current work does not work well with ts with types because babel will strip them out
2024-02-01 09:33:11 +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