Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-24 05:48:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): refactor sidebar header (#6251)

Browse Source 
- Add user avatar
- Move sign-out/user settings link from workspace-modal to user avatar modal
- Modify the style of workspace list items
- Modify gap of navigation buttons
- Animate Syncing/Offline/...

![CleanShot 2024-03-22 at 10.22.38.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/7305f561-a85b-4ec6-89c2-27e2f1b63c85.gif)
This commit is contained in:
CatsJuice
2024-03-26 06:10:38 +00:00
parent d8a3cd5ce2
commit 0731872347
20 changed files with 528 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/affine-cloud/e2e/login.spec.ts
+5 -5
View File
@@ -11,6 +11,7 @@ import {
clickSideBarAllPageButton,
clickSideBarCurrentWorkspaceBanner,
clickSideBarSettingButton,
clickSideBarUseAvatar,
} from '@affine-test/kit/utils/sidebar';
import { createLocalWorkspace } from '@affine-test/kit/utils/workspace';
import { expect } from '@playwright/test';
@@ -69,14 +70,13 @@ test.describe('login first', () => {
);
await clickSideBarAllPageButton(page);
const currentUrl = page.url();
await clickSideBarCurrentWorkspaceBanner(page);
await page.getByTestId('workspace-modal-account-option').click();
await clickSideBarUseAvatar(page);
await page.getByTestId('workspace-modal-sign-out-option').click();
await page.getByTestId('confirm-sign-out-button').click();
await page.reload();
await clickSideBarCurrentWorkspaceBanner(page);
const signInButton = page.getByTestId('cloud-signin-button');
await expect(signInButton).toBeVisible();
await clickSideBarUseAvatar(page);
const authModal = page.getByTestId('auth-modal');
await expect(authModal).toBeVisible();
expect(page.url()).toBe(currentUrl);
});
tests/affine-local/e2e/image-preview.spec.ts
+50 -36
View File
@@ -33,7 +33,8 @@ async function importImage(page: Page, url: string) {
},
[url]
);
await page.waitForTimeout(500);
// TODO: wait for image to be loaded more reliably
await page.waitForTimeout(1000);
}
async function closeImagePreviewModal(page: Page) {
@@ -53,7 +54,7 @@ test('image preview should be shown', async ({ page }) => {
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
const locator = page.getByTestId('image-preview-modal');
await expect(locator).toBeVisible();
await closeImagePreviewModal(page);
@@ -70,11 +71,12 @@ test('image go left and right', async ({ page }) => {
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
await page.waitForTimeout(500);
blobId = (await page
.getByTestId('image-preview-modal')
.locator('img')
.nth(1)
.first()
.getAttribute('data-blob-id')) as string;
expect(blobId).toBeTruthy();
await closeImagePreviewModal(page);
@@ -87,11 +89,12 @@ test('image go left and right', async ({ page }) => {
}
const locator = page.getByTestId('image-preview-modal');
await expect(locator).toBeHidden();
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
await page.waitForTimeout(1000);
{
const newBlobId = (await locator
.locator('img[data-blob-id]')
const newBlobId = (await page
.getByTestId('image-preview-modal')
.locator('img')
.first()
.getAttribute('data-blob-id')) as string;
expect(newBlobId).not.toBe(blobId);
@@ -99,8 +102,9 @@ test('image go left and right', async ({ page }) => {
await page.keyboard.press('ArrowRight');
await page.waitForTimeout(1000);
{
const newBlobId = (await locator
.locator('img[data-blob-id]')
const newBlobId = (await page
.getByTestId('image-preview-modal')
.locator('img')
.first()
.getAttribute('data-blob-id')) as string;
expect(newBlobId).toBe(blobId);
@@ -117,11 +121,12 @@ test('image able to zoom in and out with mouse scroll', async ({ page }) => {
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
await page.waitForTimeout(500);
blobId = (await page
.getByTestId('image-preview-modal')
.locator('img')
.nth(1)
.first()
.getAttribute('data-blob-id')) as string;
expect(blobId).toBeTruthy();
}
@@ -170,11 +175,12 @@ test('image able to zoom in and out with button click', async ({ page }) => {
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
await page.waitForTimeout(500);
blobId = (await page
.getByTestId('image-preview-modal')
.locator('img')
.nth(1)
.first()
.getAttribute('data-blob-id')) as string;
expect(blobId).toBeTruthy();
}
@@ -216,11 +222,12 @@ test('image should able to go left and right by buttons', async ({ page }) => {
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
await page.waitForTimeout(500);
blobId = (await page
.getByTestId('image-preview-modal')
.locator('img')
.nth(1)
.first()
.getAttribute('data-blob-id')) as string;
expect(blobId).toBeTruthy();
await closeImagePreviewModal(page);
@@ -232,7 +239,7 @@ test('image should able to go left and right by buttons', async ({ page }) => {
await importImage(page, 'http://localhost:8081/affine-preview.png');
}
const locator = page.getByTestId('image-preview-modal');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
await expect(locator).toBeVisible();
{
const newBlobId = (await locator
@@ -268,11 +275,12 @@ test('image able to fit to screen by button', async ({ page }) => {
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
await page.waitForTimeout(500);
blobId = (await page
.getByTestId('image-preview-modal')
.locator('img')
.nth(1)
.first()
.getAttribute('data-blob-id')) as string;
expect(blobId).toBeTruthy();
}
@@ -325,11 +333,12 @@ test('image able to reset zoom to 100%', async ({ page }) => {
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
await page.waitForTimeout(500);
blobId = (await page
.getByTestId('image-preview-modal')
.locator('img')
.nth(1)
.first()
.getAttribute('data-blob-id')) as string;
expect(blobId).toBeTruthy();
}
@@ -378,11 +387,12 @@ test('image able to copy to clipboard', async ({ page }) => {
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
await page.waitForTimeout(500);
blobId = (await page
.getByTestId('image-preview-modal')
.locator('img')
.nth(1)
.first()
.getAttribute('data-blob-id')) as string;
expect(blobId).toBeTruthy();
}
@@ -407,11 +417,12 @@ test('image able to download', async ({ page }) => {
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
await page.waitForTimeout(500);
blobId = (await page
.getByTestId('image-preview-modal')
.locator('img')
.nth(1)
.first()
.getAttribute('data-blob-id')) as string;
expect(blobId).toBeTruthy();
}
@@ -437,11 +448,12 @@ test('image should only able to move when image is larger than viewport', async
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
await page.waitForTimeout(500);
blobId = (await page
.getByTestId('image-preview-modal')
.locator('img')
.nth(1)
.first()
.getAttribute('data-blob-id')) as string;
expect(blobId).toBeTruthy();
}
@@ -494,11 +506,12 @@ test('image should able to delete and when delete, it will move to previous/next
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
await page.waitForTimeout(500);
blobId = (await page
.getByTestId('image-preview-modal')
.locator('img')
.nth(1)
.first()
.getAttribute('data-blob-id')) as string;
expect(blobId).toBeTruthy();
await closeImagePreviewModal(page);
@@ -510,7 +523,7 @@ test('image should able to delete and when delete, it will move to previous/next
await importImage(page, 'http://localhost:8081/affine-preview.png');
}
const locator = page.getByTestId('image-preview-modal');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
await expect(locator).toBeVisible();
// ensure the new image was imported
await page.waitForTimeout(1000);
@@ -533,7 +546,7 @@ test('image should able to delete and when delete, it will move to previous/next
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/affine-preview.png');
}
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
await locator.getByTestId('next-image-button').click();
await page.waitForTimeout(1000);
{
@@ -569,11 +582,12 @@ test('tooltips for all buttons should be visible when hovering', async ({
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
await page.waitForTimeout(500);
blobId = (await page
.getByTestId('image-preview-modal')
.locator('img')
.nth(1)
.first()
.getAttribute('data-blob-id')) as string;
expect(blobId).toBeTruthy();
}
@@ -662,7 +676,7 @@ test('keypress esc should close the modal', async ({ page }) => {
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
const locator = page.getByTestId('image-preview-modal');
await expect(locator).toBeVisible();
await page.keyboard.press('Escape');
@@ -680,7 +694,7 @@ test('when mouse moves outside, the modal should be closed', async ({
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
const locator = page.getByTestId('image-preview-modal');
await expect(locator).toBeVisible();
// animation delay
@@ -701,14 +715,14 @@ test('caption should be visible and different styles were applied if image zoome
await title.click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('img').first().hover();
await page.locator('affine-page-image').first().hover();
await page
.locator('.embed-editing-state')
.locator('icon-button')
.nth(1)
.click();
await page.getByPlaceholder('Write a caption').fill(sampleCaption);
await page.locator('img').first().dblclick();
await page.locator('affine-page-image').first().dblclick();
const locator = page.getByTestId('image-preview-modal');
await expect(locator).toBeVisible();
await page.waitForTimeout(1000);
tests/kit/utils/sidebar.ts
+4
View File
@@ -12,6 +12,10 @@ export async function clickSideBarCurrentWorkspaceBanner(page: Page) {
return page.getByTestId('current-workspace').click();
}
export async function clickSideBarUseAvatar(page: Page) {
return page.getByTestId('sidebar-user-avatar').click();
}
export async function clickNewPageButton(page: Page) {
return page.getByTestId('sidebar-new-page-button').click();
}