refactor(core): image preview toolbar UI (#7207)

Closes: [AFF-1257](https://linear.app/affine-design/issue/AFF-1257/image-preview-toolbar)

* refactor logic
* update UI style

<img width="617" alt="Screenshot 2024-06-13 at 07 21 52" src="https://github.com/toeverything/AFFiNE/assets/27926/1edc6476-0103-4214-8ef2-41b37d95287b">
<img width="760" alt="Screenshot 2024-06-13 at 07 21 33" src="https://github.com/toeverything/AFFiNE/assets/27926/83d27ab2-143f-4bdd-a932-396289c598ec">
This commit is contained in:
fundon
2024-06-14 02:02:46 +00:00
parent 33762423bb
commit 729631ea72
4 changed files with 155 additions and 146 deletions

View File

@@ -582,6 +582,9 @@ 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('affine-page-image').first().click();
await page.keyboard.press('Enter');
await importImage(page, 'http://localhost:8081/large-image.png');
await page.locator('affine-page-image').first().dblclick();
await page.waitForTimeout(500);
blobId = (await page
@@ -593,13 +596,8 @@ test('tooltips for all buttons should be visible when hovering', async ({
}
const locator = page.getByTestId('image-preview-modal');
await page.waitForTimeout(500);
await locator.getByTestId('previous-image-button').hover();
await locator.getByTestId('previous-image-button').isDisabled();
await page.waitForTimeout(1000);
{
const element = page.getByRole('tooltip');
const previousImageTooltip = await element.getByText('Previous').count();
expect(previousImageTooltip).toBe(1);
}
await locator.getByTestId('next-image-button').hover();
await page.waitForTimeout(1000);
@@ -609,6 +607,18 @@ test('tooltips for all buttons should be visible when hovering', async ({
expect(nextImageTooltip).toBe(1);
}
await locator.getByTestId('next-image-button').click();
await locator.getByTestId('next-image-button').isDisabled();
await page.waitForTimeout(1000);
await locator.getByTestId('previous-image-button').hover();
await page.waitForTimeout(1000);
{
const element = page.getByRole('tooltip');
const previousImageTooltip = await element.getByText('Previous').count();
expect(previousImageTooltip).toBe(1);
}
await locator.getByTestId('fit-to-screen-button').hover();
await page.waitForTimeout(1000);
{