diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index eaf18b62b8..f1cb2880bc 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -312,6 +312,7 @@ "pdf_compile_in_progress_error": "", "pdf_compile_rate_limit_hit": "", "pdf_compile_try_again": "", + "pdf_detach_safari_issues": "", "pdf_in_separate_tab": "", "pdf_only_hide_editor": "", "pdf_preview_error": "", diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-safari-warning.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-safari-warning.tsx new file mode 100644 index 0000000000..505c72dd12 --- /dev/null +++ b/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-safari-warning.tsx @@ -0,0 +1,38 @@ +import { useTranslation } from 'react-i18next' +import { Button } from 'react-bootstrap' +import Tooltip from '../../../shared/components/tooltip' +import Icon from '../../../shared/components/icon' +import { useLayoutContext } from '../../../shared/context/layout-context' + +const BROWSER_IS_SAFARI = + navigator.userAgent && + /.*Safari\/.*/.test(navigator.userAgent) && + !/.*Chrome\/.*/.test(navigator.userAgent) && + !/.*Chromium\/.*/.test(navigator.userAgent) + +function PdfHybridSafariWarning() { + const { t } = useTranslation() + const { detachRole } = useLayoutContext() + + if (!BROWSER_IS_SAFARI) { + return null + } + + if (detachRole !== 'detached') { + return null + } + + return ( + + + + ) +} + +export default PdfHybridSafariWarning diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root-safari-warning.js b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root-safari-warning.js new file mode 100644 index 0000000000..62c6a3b170 --- /dev/null +++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root-safari-warning.js @@ -0,0 +1,38 @@ +import { Alert } from 'react-bootstrap' +import { useTranslation } from 'react-i18next' +import usePersistedState from '../../../shared/hooks/use-persisted-state' + +const BROWSER_IS_SAFARI = + navigator.userAgent && + /.*Safari\/.*/.test(navigator.userAgent) && + !/.*Chrome\/.*/.test(navigator.userAgent) && + !/.*Chromium\/.*/.test(navigator.userAgent) + +function PdfPreviewDetachedRootSafariWarning() { + const { t } = useTranslation() + + const [hidePdfDetachSafariAlert, setHidePdfDetachSafariAlert] = + usePersistedState('hide-pdf-detach-safari-alert', false, true) + + function handleDismiss() { + setHidePdfDetachSafariAlert(true) + } + + if (!BROWSER_IS_SAFARI) { + return null + } + + if (hidePdfDetachSafariAlert) { + return null + } + + return ( +
+ + {t('pdf_detach_safari_issues')} + +
+ ) +} + +export default PdfPreviewDetachedRootSafariWarning diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.js b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.js index 9e0a28b581..1a34c6a41d 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.js +++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.js @@ -2,11 +2,13 @@ import ReactDOM from 'react-dom' import PdfPreview from './pdf-preview' import { ContextRoot } from '../../../shared/context/root-context' import { Shortcuts } from './shortcuts' +import PdfPreviewDetachedRootSafariWarning from './pdf-preview-detached-root-safari-warning' function PdfPreviewDetachedRoot() { return ( + diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js index 7e0a17b30f..0b2c7c91f3 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js +++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js @@ -6,6 +6,7 @@ import PdfCompileButton from './pdf-compile-button' import PdfExpandButton from './pdf-expand-button' import PdfHybridLogsButton from './pdf-hybrid-logs-button' import PdfHybridDownloadButton from './pdf-hybrid-download-button' +import PdfHybridSafariWarning from './pdf-hybrid-safari-warning' import PdfHybridCodeCheckButton from './pdf-hybrid-code-check-button' import PdfOrphanRefreshButton from './pdf-orphan-refresh-button' import { DetachedSynctexControl } from './detach-synctex-control' @@ -60,6 +61,7 @@ function PdfPreviewHybridToolbarInner() { +
diff --git a/services/web/frontend/stylesheets/app/editor.less b/services/web/frontend/stylesheets/app/editor.less index 13741f120b..83e173b80f 100644 --- a/services/web/frontend/stylesheets/app/editor.less +++ b/services/web/frontend/stylesheets/app/editor.less @@ -63,12 +63,20 @@ display: inline-block; text-align: left; min-width: 400px; - padding: @global-alerts-padding; font-size: 14px; margin-bottom: (@line-height-computed / 4); position: relative; z-index: 20; } + + .alert&:not(.alert-dismissable) { + padding: @global-alerts-padding; + } +} + +.global-alerts-detached { + margin-top: 0; + padding-top: @margin-sm; } #try-reconnect-now-button { diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 4fbde9f6ea..4d6b97f72a 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -1653,6 +1653,7 @@ "redirect_to_editor": "Redirect to editor", "layout_processing": "Layout processing", "your_browser_does_not_support_this_feature": "Sorry, your browser doesn’t support this feature. Please update your browser to its latest version.", + "pdf_detach_safari_issues": "Safari users reported experiencing problems with opening PDF in a new tab. If you are also experiencing problems, we recommend trying a different browser.", "show_in_code": "Show in code", "show_in_pdf": "Show in PDF", "fold_line": "Fold line",