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 c26ed973..6e62d3ad 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 @@ -10,6 +10,37 @@ test.beforeEach(async ({ page }) => { }); test.describe('Doc Export', () => { + test('it check if all elements are visible', async ({ + page, + browserName, + }) => { + await createDoc(page, 'doc-editor', browserName, 1); + await page + .getByRole('button', { + name: 'download', + }) + .click(); + + await expect( + page + .locator('div') + .filter({ hasText: /^Download$/ }) + .first(), + ).toBeVisible(); + await expect( + page.getByText( + 'Upload your docs to a Microsoft Word, Open Office or PDF document', + ), + ).toBeVisible(); + await expect( + page.getByRole('combobox', { name: 'Template' }), + ).toBeVisible(); + await expect(page.getByRole('combobox', { name: 'Format' })).toBeVisible(); + await expect( + page.getByRole('button', { name: 'Close the modal' }), + ).toBeVisible(); + await expect(page.getByRole('button', { name: 'Download' })).toBeVisible(); + }); test('it converts the doc to pdf with a template integrated', async ({ page, browserName, @@ -25,10 +56,9 @@ test.describe('Doc Export', () => { await page.locator('.ProseMirror.bn-editor').click(); await page.locator('.ProseMirror.bn-editor').fill('Hello World'); - await page.getByLabel('Open the document options').click(); await page .getByRole('button', { - name: 'Export', + name: 'download', }) .click(); @@ -62,14 +92,14 @@ test.describe('Doc Export', () => { await page.locator('.ProseMirror.bn-editor').click(); await page.locator('.ProseMirror.bn-editor').fill('Hello World'); - await page.getByLabel('Open the document options').click(); await page .getByRole('button', { - name: 'Export', + name: 'download', }) .click(); - await page.getByText('Docx').click(); + await page.getByRole('combobox', { name: 'Format' }).click(); + await page.getByRole('option', { name: 'Word / Open Office' }).click(); await page .getByRole('button', { @@ -190,10 +220,9 @@ test.describe('Doc Export', () => { .click(); // Download - await page.getByLabel('Open the document options').click(); await page .getByRole('button', { - name: 'Export', + name: 'download', }) .click(); diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css index 4765ad48..c51a16d0 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css @@ -532,6 +532,12 @@ input:-webkit-autofill:focus { overflow-y: auto; } +.c__modal__title { + padding: 0; + font-size: 1.125rem; + margin-bottom: var(--c--theme--spacings--sm); +} + @media screen and (width <= 420px) { .c__modal__scroller { padding: 0.7rem; diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx index 240ca6a5..c808482c 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx @@ -1,11 +1,8 @@ import { - Alert, Button, Loader, Modal, ModalSize, - Radio, - RadioGroup, Select, VariantType, useToastProvider, @@ -21,6 +18,11 @@ import { useExport } from '../api/useExport'; import { TemplatesOrdering, useTemplates } from '../api/useTemplates'; import { adaptBlockNoteHTML, downloadFile } from '../utils'; +export enum DocDownloadFormat { + PDF = 'pdf', + DOCX = 'docx', +} + interface ModalPDFProps { onClose: () => void; doc: Doc; @@ -41,7 +43,9 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => { error, } = useExport(); const [templateIdSelected, setTemplateIdSelected] = useState(); - const [format, setFormat] = useState<'pdf' | 'docx'>('pdf'); + const [format, setFormat] = useState( + DocDownloadFormat.PDF, + ); const templateOptions = useMemo(() => { if (!templates?.pages) { @@ -123,46 +127,37 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => { return ( onClose()} - > - {t('Cancel')} - - } onClose={() => onClose()} rightActions={ - + <> + + + } size={ModalSize.MEDIUM} title={ - - - picture_as_pdf - - - {t('Export')} - - + + {t('Download')} + } > { aria-label={t('Content modal to export the document')} $gap="1.5rem" > - - - {t( - 'Export your document, it will be inserted in the selected template.', - )} - - - + + {t( + 'Upload your docs to a Microsoft Word, Open Office or PDF document.', + )} + + setFormat(options.target.value as DocDownloadFormat) + } + /> {isPending && (