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

@@ -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": "",

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 && <EditorSwitch />}
           {showActions && (
             <ToolbarItems
               state={state}
@@ -206,6 +205,7 @@ const Toolbar = memo(function Toolbar() {
             className="ol-cm-toolbar-button-group ol-cm-toolbar-end"
             ref={handleButtons}
           >
+            {!visualPreviewEnabled && <EditorSwitch />}
             {sourceEditorToolbarEndButtons.map(
               ({ import: { default: Component }, path }) => (
                 <Component key={path} />

services/web/frontend/js/features/source-editor/components/editor-switch.tsx

@@ -57,7 +57,7 @@ function EditorSwitch() {
             onChange={handleChange}
           />
           <label htmlFor={inputId} className="toggle-switch-label">
-            <span>{t('code_editor')}</span>
+            <span>{t('code')}</span>
           </label>
 
           <RichTextToggle
@@ -92,7 +92,7 @@ const RichTextToggle: FC<{
         disabled={disabled}
       />
       <label htmlFor={inputId} className="toggle-switch-label">
-        <span>{t('visual_editor')}</span>
+        <span>{t('visual')}</span>
       </label>
     </span>
   )

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',

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 {

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__</0>",
-  "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.",