From ac83bc520c8e6c49cc28d4c9142ec29e39a0961e Mon Sep 17 00:00:00 2001 From: Davinder Singh Date: Mon, 1 Jun 2026 09:34:44 +0100 Subject: [PATCH] Merge pull request #34065 from overleaf/ds-move-toggle-to-right [WEB] Move Code/Visual toggle to right-hand side and redesign GitOrigin-RevId: efc1aa062fd44e20fdf719a6d4ecba9d8bb0e5e8 --- services/web/frontend/extracted-translations.json | 4 ++-- .../source-editor/components/codemirror-toolbar.tsx | 2 +- .../features/source-editor/components/editor-switch.tsx | 4 ++-- .../source-editor/extensions/toolbar/toolbar-panel.ts | 3 --- .../web/frontend/stylesheets/pages/editor/toolbar.scss | 9 +++++++-- services/web/locales/en.json | 4 ++-- 6 files changed, 14 insertions(+), 12 deletions(-) diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 4099a28fa7..39287bccea 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -315,8 +315,8 @@ "close_tab": "", "clsi_maintenance": "", "clsi_unavailable": "", + "code": "", "code_check_failed_explanation": "", - "code_editor": "", "collaborate_online_and_offline": "", "collaborator_chat": "", "collabs_per_proj": "", @@ -2345,7 +2345,7 @@ "viewer": "", "viewing": "", "viewing_x": "", - "visual_editor": "", + "visual": "", "visual_editor_is_only_available_for_tex_files": "", "want_change_to_apply_before_plan_end": "", "warnings": "", diff --git a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx b/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx index e296c589df..6c3b8f4194 100644 --- a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx +++ b/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx @@ -173,7 +173,6 @@ const Toolbar = memo(function Toolbar() { className="ol-cm-toolbar toolbar-editor" ref={elementRef} > - {!visualPreviewEnabled && } {showActions && ( + {!visualPreviewEnabled && } {sourceEditorToolbarEndButtons.map( ({ import: { default: Component }, path }) => ( diff --git a/services/web/frontend/js/features/source-editor/components/editor-switch.tsx b/services/web/frontend/js/features/source-editor/components/editor-switch.tsx index 092e4563a9..5fa3dd0c6a 100644 --- a/services/web/frontend/js/features/source-editor/components/editor-switch.tsx +++ b/services/web/frontend/js/features/source-editor/components/editor-switch.tsx @@ -57,7 +57,7 @@ function EditorSwitch() { onChange={handleChange} /> ) diff --git a/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts b/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts index d703d63683..ed9af028c7 100644 --- a/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts +++ b/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts @@ -143,9 +143,6 @@ const toolbarTheme = EditorView.theme({ }, '&.ol-cm-toolbar-stretch': { flex: 1, - '.editor-toggle-switch + &': { - borderLeft: 'none', // avoid a left border when no toolbar buttons are shown - }, }, '&.overflow-hidden': { borderLeft: 'none', diff --git a/services/web/frontend/stylesheets/pages/editor/toolbar.scss b/services/web/frontend/stylesheets/pages/editor/toolbar.scss index d2d79d8388..780de74d4d 100644 --- a/services/web/frontend/stylesheets/pages/editor/toolbar.scss +++ b/services/web/frontend/stylesheets/pages/editor/toolbar.scss @@ -375,8 +375,13 @@ align-items: center; white-space: nowrap; - .toggle-switch { - margin-left: var(--spacing-03); + &::before { + content: ''; + display: block; + width: 1px; + height: 16px; + background-color: var(--toolbar-dropdown-divider-color); + margin-right: var(--spacing-02); } .toggle-switch-label span { diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 5beccc2194..b95c707f77 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -413,8 +413,8 @@ "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": "Code", "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.", "collaborate_online_and_offline": "Collaborate online and offline, using your own workflow", "collaboration": "Collaboration", @@ -2993,7 +2993,7 @@ "viewer": "Viewer", "viewing": "Viewing", "viewing_x": "Viewing <0>__endTime__", - "visual_editor": "Visual Editor", + "visual": "Visual", "visual_editor_is_only_available_for_tex_files": "Visual Editor is only available for TeX files", "want_access_to_overleaf_premium_features_through_your_university": "Want access to __appName__ premium features through your university?", "want_change_to_apply_before_plan_end": "If you wish this change to apply before the end of your current billing period, please contact us.",