diff --git a/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-code-check-failed-banner.tsx b/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-code-check-failed-banner.tsx new file mode 100644 index 0000000000..ea7c9894d7 --- /dev/null +++ b/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-code-check-failed-banner.tsx @@ -0,0 +1,22 @@ +import MaterialIcon from '@/shared/components/material-icon' +import { useTranslation } from 'react-i18next' +import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context' + +export default function PdfCodeCheckFailedBanner() { + const { t } = useTranslation() + + const { codeCheckFailed } = useCompileContext() + + if (!codeCheckFailed) { + return null + } + + return ( +
+
+ + {t('code_check_failed_explanation')} +
+
+ ) +} diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx index 7bbecbc327..ff043c965e 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx +++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx @@ -12,6 +12,7 @@ import PdfPreviewHybridToolbarNew from '@/features/ide-redesign/components/pdf-p import PdfErrorState from '@/features/ide-redesign/components/pdf-preview/pdf-error-state' import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils' import importOverleafModules from '../../../../macros/import-overleaf-module.macro' +import PdfCodeCheckFailedBanner from '@/features/ide-redesign/components/pdf-preview/pdf-code-check-failed-banner' function PdfPreviewPane() { const { pdfUrl, hasShortCompileTimeout } = useCompileContext() @@ -32,6 +33,7 @@ function PdfPreviewPane() { ) : ( )} + {newEditor && } {hasShortCompileTimeout && } diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf.scss index 31000b0478..4c59352df3 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf.scss @@ -44,6 +44,30 @@ padding: var(--spacing-01); } } + + .pdf-code-check-failed-banner-container { + position: absolute; + top: calc(var(--toolbar-small-height) + var(--spacing-04)); + left: 0; + right: 0; + z-index: 1; + display: flex; + justify-content: center; + padding: 0 var(--spacing-06); + } + + .pdf-code-check-failed-banner { + display: flex; + align-items: center; + gap: var(--spacing-02); + background-color: var(--bg-light-primary); + color: var(--content-primary); + border: 1px solid var(--border-divider); + padding: var(--spacing-02) var(--spacing-03) var(--spacing-02) + var(--spacing-02); + border-radius: var(--border-radius-full); + box-shadow: 0 2px 4px 0 #1e253029; + } } .pdf .toolbar.toolbar-pdf {