agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-05-23 17:19:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Tearing down of Error Logs and pdf preview in editor (#31267)

Browse Source 
GitOrigin-RevId: 05b2c980d874de801ffcdadb57dd9da9d983225c
This commit is contained in:
Davinder Singh
2026-02-10 15:02:43 +00:00
committed by Copybot
parent 72f8dff76d
commit 84cdbfc12f
19 changed files with 92 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
services/web/frontend/extracted-translations.json
View File

@@ -291,7 +291,6 @@
"close_dialog": "",
"clsi_maintenance": "",
"clsi_unavailable": "",
"code_check_failed": "",
"code_check_failed_explanation": "",
"code_editor": "",
"collaborate_online_and_offline": "",
@@ -1465,7 +1464,6 @@
"recovering": "",
"recurly_email_update_needed": "",
"recurly_email_updated": "",
"redirect_to_editor": "",
"redirect_url": "",
"redo": "",
"reduce_costs_group_licenses": "",
@@ -1861,8 +1859,6 @@
"synctex_failed": "",
"syntax_checks": "",
"syntax_validation": "",
"tab_connecting": "",
"tab_no_longer_connected": "",
"table": "",
"tag_color": "",
"tag_name_cannot_exceed_characters": "",

33
services/web/frontend/js/features/ide-redesign/components/error-logs/rolling-build-selected-reminder.tsx
View File

@@ -1,33 +0,0 @@
import OLNotification from '@/shared/components/ol/ol-notification'
import { useTranslation, Trans } from 'react-i18next'
import { useProjectContext } from '@/shared/context/project-context'
import { onRollingBuild } from '@/shared/utils/rolling-build'
const RollingBuildSelectedReminder = () => {
const { t } = useTranslation()
const { project } = useProjectContext()
if (!onRollingBuild(project?.imageName)) {
return null
}
const content = (
<Trans
i18nKey="if_you_find_any_issues_with_texlive"
components={[
<a href="https://forms.gle/yD8CVm4Kop9KwShx9" />, // eslint-disable-line react/jsx-key, jsx-a11y/anchor-has-content
<a href="https://docs.overleaf.com/getting-started/recompiling-your-project/selecting-a-tex-live-version-and-latex-compiler" />, // eslint-disable-line react/jsx-key, jsx-a11y/anchor-has-content
]}
/>
)
return (
<OLNotification
title={t('this_project_is_compiled_using_untested_version')}
content={content}
type="info"
className="mb-0"
/>
)
}
export default RollingBuildSelectedReminder

19
services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-logs-viewer.tsx
View File

@@ -1,19 +0,0 @@
import classnames from 'classnames'
import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
import ErrorLogs from '../error-logs/error-logs'
import { usePdfPreviewContext } from '@/features/pdf-preview/components/pdf-preview-provider'
export default function PdfLogsViewer() {
const { showLogs } = useCompileContext()
const { loadingError } = usePdfPreviewContext()
return (
<div
className={classnames('new-logs-pane', {
hidden: !showLogs && !loadingError,
})}
>
<ErrorLogs includeActionButtons />
</div>
)
}

43
services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-preview-hybrid-toolbar.tsx
View File

@@ -1,43 +0,0 @@
import { memo, useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import OLButtonToolbar from '@/shared/components/ol/ol-button-toolbar'
import PdfCompileButton from '@/features/pdf-preview/components/pdf-compile-button'
import PdfHybridDownloadButton from '@/features/pdf-preview/components/pdf-hybrid-download-button'
import { DetachedSynctexControl } from '@/features/pdf-preview/components/detach-synctex-control'
import SwitchToEditorButton from '@/features/pdf-preview/components/switch-to-editor-button'
import PdfHybridLogsButton from '@/features/pdf-preview/components/pdf-hybrid-logs-button'
import EditorTourLogsTooltip from '../editor-tour/editor-tour-logs-tooltip'
function PdfPreviewHybridToolbar() {
const { t } = useTranslation()
const [logsButtonElt, setLogsButtonElt] = useState<HTMLElement | null>(null)
const logsButtonRef = useCallback((node: HTMLButtonElement) => {
if (node !== null) {
setLogsButtonElt(node)
}
}, [])
// TODO: add detached pdf logic
return (
<OLButtonToolbar
className="toolbar toolbar-pdf toolbar-pdf-hybrid"
aria-label={t('pdf')}
>
<div className="toolbar-pdf-left">
<PdfCompileButton />
<PdfHybridLogsButton ref={logsButtonRef} />
<PdfHybridDownloadButton />
<EditorTourLogsTooltip target={logsButtonElt} />
</div>
<div className="toolbar-pdf-right">
<div className="toolbar-pdf-controls" id="toolbar-pdf-controls" />
<SwitchToEditorButton />
<DetachedSynctexControl />
{/* TODO: should we have code check? */}
</div>
</OLButtonToolbar>
)
}
export default memo(PdfPreviewHybridToolbar)

2
services/web/frontend/js/features/ide-redesign/components/error-logs/error-logs.tsx → services/web/frontend/js/features/pdf-preview/components/error-logs.tsx
View File

@@ -11,7 +11,7 @@ import { useDetachCompileContext as useCompileContext } from '@/shared/context/d
import { Nav, NavLink, TabContainer, TabContent } from 'react-bootstrap'
import { LogEntry as LogEntryData } from '@/features/pdf-preview/util/types'
import LogEntry from './log-entry'
import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
import TimeoutUpgradePromptNew from '@/features/pdf-preview/components/timeout-upgrade-prompt-new'
import getMeta from '@/utils/meta'
import PdfClearCacheButton from '@/features/pdf-preview/components/pdf-clear-cache-button'

2
services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry-header.tsx → services/web/frontend/js/features/pdf-preview/components/log-entry-header.tsx
View File

@@ -17,7 +17,7 @@ import {
} from '@/features/pdf-preview/util/types'
import useResizeObserver from '@/features/preview/hooks/use-resize-observer'
import OLIconButton from '@/shared/components/ol/ol-icon-button'
import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
import MaterialIcon from '@/shared/components/material-icon'
import { useFileTreePathContext } from '@/features/file-tree/contexts/file-tree-path'
import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-open-context'

2
services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry.tsx → services/web/frontend/js/features/pdf-preview/components/log-entry.tsx
View File

@@ -5,7 +5,7 @@ import {
SetStateAction,
useState,
} from 'react'
import HumanReadableLogsHints from '../../../../ide/human-readable-logs/HumanReadableLogsHints'
import HumanReadableLogsHints from '../../../ide/human-readable-logs/HumanReadableLogsHints'
import {
ErrorLevel,
LogEntry as LogEntryData,

0
services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-code-check-failed-banner.tsx → services/web/frontend/js/features/pdf-preview/components/pdf-code-check-failed-banner.tsx
View File

16
services/web/frontend/js/features/pdf-preview/components/pdf-code-check-failed-notice.tsx
View File

@@ -1,16 +0,0 @@
import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import OLNotification from '@/shared/components/ol/ol-notification'
function PdfCodeCheckFailedNotice() {
const { t } = useTranslation()
return (
<OLNotification
type="error"
content={t('code_check_failed_explanation')}
className="m-0"
/>
)
}
export default memo(PdfCodeCheckFailedNotice)

34
services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-code-check-button.tsx
View File

@@ -1,34 +0,0 @@
import { memo, useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
import OLButton from '@/shared/components/ol/ol-button'
import MaterialIcon from '@/shared/components/material-icon'
function PdfHybridCodeCheckButton() {
const { codeCheckFailed, error, toggleLogs } = useCompileContext()
const { t } = useTranslation()
const handleClick = useCallback(() => {
toggleLogs()
}, [toggleLogs])
if (!codeCheckFailed) {
return null
}
return (
<OLButton
variant="danger"
size="sm"
disabled={Boolean(error)}
className="btn-toggle-logs toolbar-item"
onClick={handleClick}
>
<MaterialIcon type="warning" />
<span className="toolbar-text">{t('code_check_failed')}</span>
</OLButton>
)
}
export default memo(PdfHybridCodeCheckButton)

2
services/web/frontend/js/features/pdf-preview/components/pdf-log-entry.tsx
View File

@@ -4,7 +4,7 @@ import PdfLogEntryContent from './pdf-log-entry-content'
import HumanReadableLogsHints from '../../../ide/human-readable-logs/HumanReadableLogsHints'
import getMeta from '@/utils/meta'
import { ErrorLevel, LogEntry, SourceLocation } from '../util/types'
import NewLogEntry from '@/features/ide-redesign/components/error-logs/log-entry'
import NewLogEntry from '@/features/pdf-preview/components/log-entry'
import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
import useHandleLogEntryClick from '../hooks/use-handle-log-entry-click'

86
services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.tsx
View File

@@ -1,91 +1,19 @@
import { useTranslation } from 'react-i18next'
import { memo } from 'react'
import classnames from 'classnames'
import RollingBuildSelectedReminder from './rolling-build-selected-reminder'
import PdfValidationIssue from './pdf-validation-issue'
import StopOnFirstErrorPrompt from './stop-on-first-error-prompt'
import TimeoutUpgradePromptNew from './timeout-upgrade-prompt-new'
import PdfPreviewError from './pdf-preview-error'
import PdfClearCacheButton from './pdf-clear-cache-button'
import PdfDownloadFilesButton from './pdf-download-files-button'
import PdfLogsEntries from './pdf-logs-entries'
import withErrorBoundary from '../../../infrastructure/error-boundary'
import PdfPreviewErrorBoundaryFallback from './pdf-preview-error-boundary-fallback'
import PdfCodeCheckFailedNotice from './pdf-code-check-failed-notice'
import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
import PdfLogEntry from './pdf-log-entry'
import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
import ErrorLogs from './error-logs'
import { usePdfPreviewContext } from '@/features/pdf-preview/components/pdf-preview-provider'
import getMeta from '@/utils/meta'
function PdfLogsViewer({ alwaysVisible = false }: { alwaysVisible?: boolean }) {
const {
codeCheckFailed,
error,
logEntries,
rawLog,
validationIssues,
showLogs,
stoppedOnFirstError,
} = useCompileContext()
export default function PdfLogsViewer() {
const { showLogs } = useCompileContext()
const { loadingError } = usePdfPreviewContext()
const { compileTimeout } = getMeta('ol-compileSettings')
const { t } = useTranslation()
return (
<div
className={classnames('logs-pane', {
hidden: !showLogs && !alwaysVisible && !loadingError,
className={classnames('new-logs-pane', {
hidden: !showLogs && !loadingError,
})}
data-testid="logs-pane"
>
<div className="logs-pane-content">
<RollingBuildSelectedReminder />
{codeCheckFailed && <PdfCodeCheckFailedNotice />}
{stoppedOnFirstError && <StopOnFirstErrorPrompt />}
{loadingError && <PdfPreviewError error="pdf-viewer-loading-error" />}
{compileTimeout < 60 && error === 'timedout' ? (
<TimeoutUpgradePromptNew />
) : (
<>{error && <PdfPreviewError error={error} />}</>
)}
{validationIssues &&
Object.entries(validationIssues).map(([name, issue]) => (
<PdfValidationIssue key={name} name={name} issue={issue} />
))}
{logEntries?.all && (
<PdfLogsEntries
entries={logEntries.all}
hasErrors={logEntries.errors.length > 0}
/>
)}
{rawLog && (
<PdfLogEntry
headerTitle={t('raw_logs')}
rawContent={rawLog}
entryAriaLabel={t('raw_logs_description')}
level="raw"
/>
)}
<div className="logs-pane-actions">
<PdfClearCacheButton />
<PdfDownloadFilesButton />
</div>
</div>
<ErrorLogs includeActionButtons />
</div>
)
}
export default withErrorBoundary(memo(PdfLogsViewer), () => (
<PdfPreviewErrorBoundaryFallback type="logs" />
))

22
services/web/frontend/js/features/pdf-preview/components/pdf-orphan-refresh-button.tsx
View File

@@ -1,22 +0,0 @@
import { useTranslation } from 'react-i18next'
import { memo, useCallback } from 'react'
import { buildUrlWithDetachRole } from '@/shared/utils/url-helper'
import { useLocation } from '@/shared/hooks/use-location'
import OLButton from '@/shared/components/ol/ol-button'
function PdfOrphanRefreshButton() {
const { t } = useTranslation()
const location = useLocation()
const redirect = useCallback(() => {
location.assign(buildUrlWithDetachRole(null).toString())
}, [location])
return (
<OLButton variant="primary" size="sm" onClick={redirect}>
{t('redirect_to_editor')}
</OLButton>
)
}
export default memo(PdfOrphanRefreshButton)

107
services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.tsx
View File

@@ -1,100 +1,43 @@
import { memo, useState, useEffect, useRef } from 'react'
import { memo, useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import OLButtonToolbar from '@/shared/components/ol/ol-button-toolbar'
import { useLayoutContext } from '@/shared/context/layout-context'
import PdfCompileButton from './pdf-compile-button'
import SwitchToEditorButton from './switch-to-editor-button'
import PdfHybridLogsButton from './pdf-hybrid-logs-button'
import PdfHybridDownloadButton from './pdf-hybrid-download-button'
import PdfHybridCodeCheckButton from './pdf-hybrid-code-check-button'
import PdfOrphanRefreshButton from './pdf-orphan-refresh-button'
import { DetachedSynctexControl } from './detach-synctex-control'
import LoadingSpinner from '@/shared/components/loading-spinner'
const ORPHAN_UI_TIMEOUT_MS = 5000
import PdfCompileButton from '@/features/pdf-preview/components/pdf-compile-button'
import PdfHybridDownloadButton from '@/features/pdf-preview/components/pdf-hybrid-download-button'
import { DetachedSynctexControl } from '@/features/pdf-preview/components/detach-synctex-control'
import SwitchToEditorButton from '@/features/pdf-preview/components/switch-to-editor-button'
import PdfHybridLogsButton from '@/features/pdf-preview/components/pdf-hybrid-logs-button'
import EditorTourLogsTooltip from '../../ide-redesign/components/editor-tour/editor-tour-logs-tooltip'
function PdfPreviewHybridToolbar() {
const { detachRole, detachIsLinked } = useLayoutContext()
const { t } = useTranslation()
const uiTimeoutRef = useRef<number>()
const [orphanPdfTabAfterDelay, setOrphanPdfTabAfterDelay] = useState(false)
const orphanPdfTab = !detachIsLinked && detachRole === 'detached'
useEffect(() => {
if (uiTimeoutRef.current) {
window.clearTimeout(uiTimeoutRef.current)
const [logsButtonElt, setLogsButtonElt] = useState<HTMLElement | null>(null)
const logsButtonRef = useCallback((node: HTMLButtonElement) => {
if (node !== null) {
setLogsButtonElt(node)
}
}, [])
if (orphanPdfTab) {
uiTimeoutRef.current = window.setTimeout(() => {
setOrphanPdfTabAfterDelay(true)
}, ORPHAN_UI_TIMEOUT_MS)
} else {
setOrphanPdfTabAfterDelay(false)
}
}, [orphanPdfTab])
let ToolbarInner = null
if (orphanPdfTabAfterDelay) {
// when the detached tab has been orphan for a while
ToolbarInner = <PdfPreviewHybridToolbarOrphanInner />
} else if (orphanPdfTab) {
ToolbarInner = <PdfPreviewHybridToolbarConnectingInner />
} else {
// tab is not detached or not orphan
ToolbarInner = <PdfPreviewHybridToolbarInner />
}
// TODO: add detached pdf logic
return (
<OLButtonToolbar
className="toolbar toolbar-pdf toolbar-pdf-hybrid"
aria-label={t('pdf')}
>
{ToolbarInner}
<div className="toolbar-pdf-left">
<PdfCompileButton />
<PdfHybridLogsButton ref={logsButtonRef} />
<PdfHybridDownloadButton />
<EditorTourLogsTooltip target={logsButtonElt} />
</div>
<div className="toolbar-pdf-right">
<div className="toolbar-pdf-controls" id="toolbar-pdf-controls" />
<SwitchToEditorButton />
<DetachedSynctexControl />
{/* TODO: should we have code check? */}
</div>
</OLButtonToolbar>
)
}
function PdfPreviewHybridToolbarInner() {
return (
<>
<div className="toolbar-pdf-left">
<PdfCompileButton />
<PdfHybridLogsButton />
<PdfHybridDownloadButton />
</div>
<div className="toolbar-pdf-right">
<div className="toolbar-pdf-controls" id="toolbar-pdf-controls" />
<PdfHybridCodeCheckButton />
<SwitchToEditorButton />
<DetachedSynctexControl />
</div>
</>
)
}
function PdfPreviewHybridToolbarOrphanInner() {
const { t } = useTranslation()
return (
<>
<div className="toolbar-pdf-orphan">
{t('tab_no_longer_connected')}
<PdfOrphanRefreshButton />
</div>
</>
)
}
function PdfPreviewHybridToolbarConnectingInner() {
const { t } = useTranslation()
return (
<>
<div className="toolbar-pdf-orphan">
<LoadingSpinner size="sm" loadingText={`${t('tab_connecting')}…`} />
</div>
</>
)
}
export default memo(PdfPreviewHybridToolbar)

19
services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx
View File

@@ -1,19 +1,17 @@
import { ElementType, memo, Suspense } from 'react'
import classNames from 'classnames'
import PdfLogsViewer from './pdf-logs-viewer'
import PdfViewer from './pdf-viewer'
import { FullSizeLoadingSpinner } from '../../../shared/components/loading-spinner'
import PdfHybridPreviewToolbar from './pdf-preview-hybrid-toolbar'
import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
import { PdfPreviewMessages } from './pdf-preview-messages'
import CompileTimeWarningUpgradePrompt from './compile-time-warning-upgrade-prompt'
import { PdfPreviewProvider } from './pdf-preview-provider'
import PdfPreviewHybridToolbarNew from '@/features/ide-redesign/components/pdf-preview/pdf-preview-hybrid-toolbar'
import PdfPreviewHybridToolbar from '@/features/pdf-preview/components/pdf-preview-hybrid-toolbar'
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'
import PdfCodeCheckFailedBanner from '@/features/pdf-preview/components/pdf-code-check-failed-banner'
import getMeta from '@/utils/meta'
import NewPdfLogsViewer from '@/features/ide-redesign/components/pdf-preview/pdf-logs-viewer'
import PdfLogsViewer from '@/features/pdf-preview/components/pdf-logs-viewer'
function PdfPreviewPane() {
const {
@@ -34,7 +32,6 @@ function PdfPreviewPane() {
'pdf-empty': !pdfUrl,
'pdf-dark-mode': darkModePdf,
})
const newEditor = useIsNewEditorEnabled()
const pdfPromotions = importOverleafModules('pdfPreviewPromotions') as {
import: { default: ElementType }
@@ -44,12 +41,8 @@ function PdfPreviewPane() {
return (
<div className={classes}>
<PdfPreviewProvider>
{newEditor ? (
<PdfPreviewHybridToolbarNew />
) : (
<PdfHybridPreviewToolbar />
)}
{newEditor && <PdfCodeCheckFailedBanner />}
<PdfPreviewHybridToolbar />
<PdfCodeCheckFailedBanner />
<PdfPreviewMessages>
{compileTimeout < 60 && <CompileTimeWarningUpgradePrompt />}
</PdfPreviewMessages>
@@ -58,7 +51,7 @@ function PdfPreviewPane() {
<PdfViewer />
</div>
</Suspense>
{newEditor ? <NewPdfLogsViewer /> : <PdfLogsViewer />}
<PdfLogsViewer />
{pdfPromotions.map(({ import: { default: Component }, path }) => (
<Component key={path} />
))}

2
services/web/frontend/js/features/pdf-preview/components/rolling-build-selected-reminder.tsx
View File

@@ -6,7 +6,6 @@ import { onRollingBuild } from '@/shared/utils/rolling-build'
const RollingBuildSelectedReminder = () => {
const { t } = useTranslation()
const { project } = useProjectContext()
if (!onRollingBuild(project?.imageName)) {
return null
}
@@ -26,6 +25,7 @@ const RollingBuildSelectedReminder = () => {
title={t('this_project_is_compiled_using_untested_version')}
content={content}
type="info"
className="mb-0"
/>
)
}

129
services/web/frontend/stylesheets/pages/editor/pdf.scss
View File

@@ -1,79 +1,36 @@
:root {
--pdf-bg: var(--neutral-10);
--pdf-bg: var(--bg-dark-secondary);
--pdf-toolbar-btn-hover-color: rgb(125 125 125 / 20%);
--synctex-control-size: 24px;
}
@include theme('light') {
--pdf-toolbar-btn-hover-color: var(--neutral-10);
.ide-redesign-main {
--pdf-bg: var(--neutral-10);
}
--pdf-bg: var(--neutral-10);
}
.ide-redesign-main {
--pdf-bg: var(--bg-dark-secondary);
.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-viewer {
.pdfjs-viewer {
.page {
box-shadow:
0 5px 5px 0 #23282f0d,
0 3px 14px 0 #23282f08,
0 8px 10px 0 #23282f14;
}
}
}
.toolbar-pdf-left {
.compile-button-group {
height: 24px;
border-radius: 12px;
margin-left: var(--spacing-02);
}
.dropdown > .compile-button {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
font-size: var(--font-size-02);
}
.dropdown > .compile-dropdown-toggle {
width: 26px;
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;
}
.synctex-control {
.synctex-control-icon {
font-weight: normal;
}
}
.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 {
@@ -95,10 +52,10 @@
gap: var(--spacing-02);
.compile-button-group {
height: 28px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
height: 24px;
background-color: var(--bg-accent-01);
border-radius: 12px;
margin-left: var(--spacing-02);
.btn-primary:hover {
z-index: auto; // prevents border from being hidden
@@ -118,9 +75,19 @@
cursor: not-allowed;
}
}
.dropdown > .compile-button {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
font-size: var(--font-size-02);
}
.dropdown > .compile-dropdown-toggle {
width: 26px;
padding: var(--spacing-01);
}
}
.toolbar-pdf-orphan,
.toolbar-pdf-left,
.toolbar-pdf-right,
.toolbar-pdf-controls {
@@ -129,14 +96,10 @@
align-self: stretch;
}
.toolbar-pdf-orphan,
.toolbar-pdf-controls {
flex: 1 1 100%;
}
.toolbar-pdf-controls {
margin-right: var(--spacing-02);
justify-content: flex-end;
flex: 1 1 100%;
}
.toolbar-pdf-right {
@@ -144,15 +107,6 @@
justify-content: flex-end;
}
.toolbar-pdf-orphan {
justify-content: center;
color: var(--toolbar-btn-color);
.btn {
margin-left: var(--spacing-03);
}
}
.btn.pdf-toolbar-btn {
display: inline-block;
color: var(--toolbar-btn-color);
@@ -294,7 +248,10 @@
.page {
box-sizing: content-box;
margin: var(--spacing-05) auto;
box-shadow: 0 0 8px #bbb;
box-shadow:
0 5px 5px 0 #23282f0d,
0 3px 14px 0 #23282f08,
0 8px 10px 0 #23282f14;
border: none;
}
@@ -497,8 +454,8 @@
.synctex-control {
.synctex-control-icon {
font-weight: 700;
font-size: var(--font-size-06);
font-weight: normal;
}
}

4
services/web/locales/en.json
View File

@@ -369,7 +369,6 @@
"clsi_maintenance": "The compile servers are down for maintenance, and will be back shortly.",
"clsi_unavailable": "Sorry, the compile server for your project was temporarily unavailable. Please try again in a few moments.",
"cn": "Chinese (Simplified)",
"code_check_failed": "Code check failed",
"code_check_failed_explanation": "Your code has errors that need to be fixed before the auto-compile can run",
"code_editor": "Code Editor",
"collaborate_easily_on_your_projects": "Collaborate easily on your projects. Work on longer or more complex docs.",
@@ -1887,7 +1886,6 @@
"reconnecting_in_x_secs": "Reconnecting in __seconds__ secs",
"recurly_email_update_needed": "Your billing email address is currently <0>__recurlyEmail__</0>. If needed you can update your billing address to <1>__userEmail__</1>.",
"recurly_email_updated": "Your billing email address was successfully updated",
"redirect_to_editor": "Redirect to editor",
"redirect_url": "Redirect URL",
"redirecting": "Redirecting",
"redo": "Redo",
@@ -2362,8 +2360,6 @@
"synctex_failed": "Couldn’t find the corresponding source file",
"syntax_checks": "Syntax checks",
"syntax_validation": "Code check",
"tab_connecting": "Connecting with the editor",
"tab_no_longer_connected": "This tab is no longer connected with the editor",
"table": "Table",
"table_generator": "Table Generator",
"tag_color": "Tag color",

9
services/web/test/frontend/components/pdf-preview/pdf-preview-hybrid-toolbar.spec.tsx
View File

@@ -19,7 +19,8 @@ describe('<PdfPreviewHybridToolbar/>', function () {
})
describe('orphan mode', function () {
it('shows connecting message on load', function () {
// eslint-disable-next-line mocha/no-skipped-tests
it.skip('shows connecting message on load', function () {
cy.window().then(win => {
win.metaAttributesCache.set('ol-detachRole', 'detached')
})
@@ -54,7 +55,8 @@ describe('<PdfPreviewHybridToolbar/>', function () {
cy.findByRole('button', { name: 'Recompile' })
})
it('shows connecting message when disconnected', function () {
// eslint-disable-next-line mocha/no-skipped-tests
it.skip('shows connecting message when disconnected', function () {
cy.window().then(win => {
win.metaAttributesCache.set('ol-detachRole', 'detached')
})
@@ -79,7 +81,8 @@ describe('<PdfPreviewHybridToolbar/>', function () {
cy.contains('Connecting with the editor')
})
it('shows redirect button after timeout', function () {
// eslint-disable-next-line mocha/no-skipped-tests
it.skip('shows redirect button after timeout', function () {
cy.window().then(win => {
win.metaAttributesCache.set('ol-detachRole', 'detached')
})