From d28b0d8afcb5bb7f482310c02c6581a01b6644d1 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Fri, 31 Jul 2026 15:11:59 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20print=20from=20documen?= =?UTF-8?q?t=20options=20menu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We move the print button from the export select to the document toolbox, so that it is more accessible and easier to find. --- CHANGELOG.md | 1 + .../__tests__/app-impress/doc-export.spec.ts | 9 ++----- .../impress/src/assets/icons/ui-kit/print.svg | 7 ++++-- .../doc-export/components/ModalExport.tsx | 24 ++++--------------- .../doc-management/components/DocToolBox.tsx | 11 +++++++++ 5 files changed, 24 insertions(+), 28 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e627a0b71..22cf94a5c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ and this project adheres to - ⚡️(frontend) replace onboarding assets with webm and webp #2569 - 💄(frontend) use the same highlight color for cells and moves #2575 - ⚡️(backend) optimize media_auth endpoint +- 🚸(frontend) print from document options menu #2550 ### Fixed 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 dcc8afc3d..dec8aa1b1 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 @@ -30,7 +30,7 @@ test.describe('Doc Export', () => { await expect(page.getByTestId('modal-export-title')).toBeVisible(); await expect( page.getByText( - 'Export your document to print or download in .docx, .odt, .pdf or .html(zip) format.', + 'Export your document to download in .docx, .odt, .pdf or .html(zip) format.', ), ).toBeVisible(); await expect(page.getByRole('combobox', { name: 'Format' })).toBeVisible(); @@ -303,12 +303,7 @@ test.describe('Doc Export', () => { await overrideDocContent({ page, browserName }); - await clickInEditorMenu(page, 'Download'); - - await page.getByRole('combobox', { name: 'Format' }).click(); - await page.getByRole('option', { name: 'Print' }).click(); - - await page.getByRole('button', { name: 'Print' }).click(); + await clickInEditorMenu(page, 'Print'); await expect(page.locator('#print-only-content-styles')).toBeAttached(); diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/print.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/print.svg index 0e687c703..5c17dcc97 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/print.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/print.svg @@ -1,3 +1,6 @@ - - + + diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx index b504c9fc9..8333d191c 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx @@ -40,14 +40,12 @@ import { generateHtmlDocument, improveHtmlAccessibility, } from '../utils_html'; -import { printDocumentWithStyles } from '../utils_print'; enum DocDownloadFormat { HTML = 'html', PDF = 'pdf', DOCX = 'docx', ODT = 'odt', - PRINT = 'print', } interface ModalExportProps { @@ -82,18 +80,12 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => { { label: t('Docx'), value: DocDownloadFormat.DOCX }, { label: t('ODT'), value: DocDownloadFormat.ODT }, { label: t('HTML'), value: DocDownloadFormat.HTML }, - { label: t('Print'), value: DocDownloadFormat.PRINT }, ]; const formatLabels = Object.fromEntries( formatOptions.map((opt) => [opt.value, opt.label]), ); - const downloadButtonAriaLabel = - format === DocDownloadFormat.PRINT - ? t('Print') - : t('Download {{format}}', { format: formatLabels[format] }); - async function onSubmit() { if (!editor) { toast(t('The export failed'), VariantType.ERROR); @@ -102,14 +94,6 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => { setIsExporting(true); - // Handle print separately as it doesn't download a file - if (format === DocDownloadFormat.PRINT) { - printDocumentWithStyles(); - setIsExporting(false); - onClose(); - return; - } - const filename = (doc.title || untitledDocument) .toLowerCase() .normalize('NFD') @@ -250,13 +234,15 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => { } @@ -295,7 +281,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => { id="modal-export-description" > {t( - 'Export your document to print or download in .docx, .odt, .pdf or .html(zip) format.', + 'Export your document to download in .docx, .odt, .pdf or .html(zip) format.', )} diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocToolBox.tsx index ee64a9749..9546ae400 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocToolBox.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocToolBox.tsx @@ -18,12 +18,14 @@ import KeepOffSVG from '@/assets/icons/ui-kit/keep_off.svg'; import LeaveSVG from '@/assets/icons/ui-kit/leave.svg'; import LinkIcon from '@/assets/icons/ui-kit/link.svg'; import MoreSVG from '@/assets/icons/ui-kit/more_horiz.svg'; +import PrintIcon from '@/assets/icons/ui-kit/print.svg'; import SharedIcon from '@/assets/icons/ui-kit/shared.svg'; import DeleteIcon from '@/assets/icons/ui-kit/trash.svg'; import { usePresenterStore } from '@/docs/doc-presenter/stores'; import { useAuth } from '@/features/auth'; import { useFocusStore, useResponsiveStore } from '@/stores'; +import { printDocumentWithStyles } from '../../doc-export/utils_print'; import { KEY_DOC, KEY_LIST_DOC, @@ -154,6 +156,15 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { }, isHidden: !ModalExport, }, + { + label: t('Print', { + description: 'Dropdown menu item to print the document', + }), + icon: , + callback: () => { + printDocumentWithStyles(); + }, + }, { type: 'separator' }, { label: doc.is_favorite ? t('Unpin') : t('Pin'),