From 37527416f2b7df64bda550d4391847022f2c559c Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Fri, 19 Dec 2025 17:10:05 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20small=20ui=20improveme?= =?UTF-8?q?nt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - center initial loader before app load - add name on input to remove warning - fix hover on interlinking link --- .../__tests__/app-impress/doc-editor.spec.ts | 23 +++++++++---------- .../__tests__/app-impress/doc-export.spec.ts | 22 ++++++++---------- .../InterlinkingLinkInlineContent.tsx | 8 +++++-- .../Interlinking/SearchPage.tsx | 1 + .../apps/impress/src/pages/globals.css | 6 +++++ 5 files changed, 34 insertions(+), 26 deletions(-) diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts index 4c355861..ef4936c9 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts @@ -880,14 +880,15 @@ test.describe('Doc Editor', () => { // Wait for the interlink to be created and rendered const editor = await getEditor({ page }); - const interlinkChild2 = editor.getByRole('button', { - name: docChild2, - }); + const interlinkChild = editor + .locator('.--docs--interlinking-link-inline-content') + .first(); - await expect(interlinkChild2).toBeVisible({ timeout: 10000 }); - await expect(interlinkChild2).toContainText('😀'); - await expect(interlinkChild2.locator('svg').first()).toBeHidden(); - await interlinkChild2.click(); + await expect(interlinkChild).toBeVisible({ timeout: 10000 }); + await expect(interlinkChild).toContainText('😀'); + await expect(interlinkChild).toContainText(docChild2); + await expect(interlinkChild.locator('svg').first()).toBeHidden(); + await interlinkChild.click(); await verifyDocName(page, docChild2); @@ -897,11 +898,9 @@ test.describe('Doc Editor', () => { await input.fill(docChild1); await searchContainer.getByText(docChild1).click(); - const interlinkChild1 = editor.getByRole('button', { - name: docChild1, - }); - await expect(interlinkChild1).toBeVisible({ timeout: 10000 }); - await expect(interlinkChild1.locator('svg').first()).toBeVisible(); + await expect(interlinkChild).toContainText(docChild1); + await expect(interlinkChild).toBeVisible({ timeout: 10000 }); + await expect(interlinkChild.locator('svg').first()).toBeVisible(); await page.keyboard.press('@'); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts index 54f1acf6..943ec3de 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts @@ -527,7 +527,7 @@ test.describe('Doc Export', () => { await verifyDocName(page, docChild); - await page.locator('.bn-block-outer').last().fill('/'); + const editor = await openSuggestionMenu({ page }); await page.getByText('Link a doc').first().click(); const input = page.locator( @@ -544,12 +544,11 @@ test.describe('Doc Export', () => { await searchContainer.getByText(randomDoc).click(); // Search the interlinking link in the editor (not in the document tree) - const editor = page.locator('.ProseMirror.bn-editor'); - const interlink = editor.getByRole('button', { - name: randomDoc, - }); + const interlink = editor + .locator('.--docs--interlinking-link-inline-content') + .first(); - await expect(interlink).toBeVisible(); + await expect(interlink).toContainText(randomDoc); const downloadPromise = page.waitForEvent('download', (download) => { return download.suggestedFilename().includes(`${docChild}.pdf`); @@ -593,7 +592,7 @@ test.describe('Doc Export', () => { await verifyDocName(page, docChild); - await page.locator('.bn-block-outer').last().fill('/'); + const editor = await openSuggestionMenu({ page }); await page.getByText('Link a doc').first().click(); const input = page.locator( @@ -610,12 +609,11 @@ test.describe('Doc Export', () => { await searchContainer.getByText(randomDoc).click(); // Search the interlinking link in the editor (not in the document tree) - const editor = page.locator('.ProseMirror.bn-editor'); - const interlink = editor.getByRole('button', { - name: randomDoc, - }); + const interlink = editor + .locator('.--docs--interlinking-link-inline-content') + .first(); - await expect(interlink).toBeVisible(); + await expect(interlink).toContainText(randomDoc); await page .getByRole('button', { diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx index 1860dd3a..5dc9a2be 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx @@ -79,10 +79,12 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => { return ( { margin-right: 0.2rem; } &:hover { - background-color: ${colorsTokens['gray-100']}; + background-color: var( + --c--contextuals--background--semantic--contextual--primary + ); } transition: background-color var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out); diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx index 1d88be88..5ef163cf 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx @@ -171,6 +171,7 @@ export const SearchPage = ({ {trigger} #__next > .c__app > div:has(> .c__loader) { + min-height: 100vh; + width: 100vw; +} + * { box-sizing: border-box; }