Merge pull request #20807 from overleaf/rd-ide-resizer

Migrate the editor resizer and SyncTeX button styles to CSS

GitOrigin-RevId: 94aec89f6f7b9e14d74d1c52111c13075e82ddaa

services/web/frontend/js/features/ide-react/components/resize/horizontal-toggler.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import Tooltip from '@/shared/components/tooltip'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 
 type HorizontalTogglerType = 'west' | 'east'
 
@@ -23,7 +23,7 @@ export function HorizontalToggler({
   const description = isOpen ? tooltipWhenOpen : tooltipWhenClosed
 
   return (
-    <Tooltip
+    <OLTooltip
       id={id}
       description={description}
       overlayProps={{
@@ -43,6 +43,6 @@ export function HorizontalToggler({
         title=""
         onClick={() => setIsOpen(!isOpen)}
       />
-    </Tooltip>
+    </OLTooltip>
   )
 }

services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.jsx

@@ -57,7 +57,12 @@ function GoToCodeButton({
     buttonIcon = (
       <BootstrapVersionSwitcher
         bs3={<Icon type="arrow-left" className="synctex-control-icon" />}
-        bs5={<MaterialIcon type="arrow_left_alt" />}
+        bs5={
+          <MaterialIcon
+            type="arrow_left_alt"
+            className="synctex-control-icon"
+          />
+        }
       />
     )
   }
@@ -130,7 +135,12 @@ function GoToPdfButton({
     buttonIcon = (
       <BootstrapVersionSwitcher
         bs3={<Icon type="arrow-right" className="synctex-control-icon" />}
-        bs5={<MaterialIcon type="arrow_right_alt" />}
+        bs5={
+          <MaterialIcon
+            type="arrow_right_alt"
+            className="synctex-control-icon"
+          />
+        }
       />
     )
   }

services/web/frontend/stylesheets/app/editor/pdf.less

@@ -442,19 +442,6 @@
   }
 }
 
-.synctex-control-goto-pdf > .synctex-control-icon {
-  text-indent: 1px; // "Optical" adjustment.
-  &::before {
-    content: '\f061';
-  }
-}
-.synctex-control-goto-code > .synctex-control-icon {
-  text-indent: -1px; // "Optical" adjustment.
-  &::before {
-    content: '\f060';
-  }
-}
-
 .editor-dark {
   .pdf-logs {
     background-color: lighten(@editor-dark-background-color, 10%);

services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss

@@ -1,3 +1,20 @@
+@use 'sass:color';
+
+$editor-toggler-bg-dark-color: color.adjust(
+  $content-disabled,
+  $lightness: -15%
+);
+
+:root {
+  --editor-toggler-bg-color: #{$editor-toggler-bg-dark-color};
+  --editor-resizer-bg-color: var(--bg-dark-secondary);
+}
+
+@include theme('light') {
+  --editor-toggler-bg-color: var(--content-disabled);
+  --editor-resizer-bg-color: var(--bg-light-tertiary);
+}
+
 #ide-root {
   height: 100vh; /* for backwards compatibility */
   height: 100dvh; /* needed for mobile devices */
@@ -128,11 +145,14 @@
 
   // Enable ::before and ::after pseudo-elements to position themselves correctly
   position: relative;
-  background-color: var(--bg-dark-secondary);
+  background-color: var(--editor-resizer-bg-color);
 
   .custom-toggler {
     padding: 0;
     border-width: 0;
+
+    // Override react-resizable-panels which sets a global * { cursor: ew-resize }
+    cursor: pointer !important;
   }
 
   &.horizontal-resize-handle-enabled {
@@ -171,13 +191,69 @@
   }
 }
 
+.custom-toggler {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 7px !important;
+  height: 50px;
+  margin-top: calc(var(--spacing-08) * -1);
+  top: 50%;
+  background-color: var(--editor-toggler-bg-color);
+
+  &:hover,
+  &:focus {
+    outline: none;
+    text-decoration: none;
+  }
+
+  // Increase hit area
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: 0 -3px;
+  }
+
+  &::after {
+    font-family: FontAwesome; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 65%;
+    font-weight: bold;
+    color: var(--white);
+    user-select: none;
+    pointer-events: none;
+  }
+
+  &:hover {
+    background-color: var(--bg-accent-01);
+  }
+}
+
+.custom-toggler-east::after {
+  content: '\f105';
+}
+
+.custom-toggler-west::after {
+  content: '\f104';
+}
+
+.custom-toggler-closed.custom-toggler-east::after {
+  content: '\f104';
+}
+
+.custom-toggler-closed.custom-toggler-west::after {
+  content: '\f105';
+}
+
 .vertical-resize-handle {
   height: 6px;
-  background-color: var(--bg-dark-secondary);
+  background-color: var(--editor-resizer-bg-color);
 
   &.vertical-resize-handle-enabled {
     &:hover {
-      background-color: var(--bg-dark-primary);
+      background-color: var(--editor-resizer-bg-color);
     }
   }
 
@@ -196,33 +272,6 @@
   }
 }
 
-.vertical-resizable-resizer {
-  background-color: var(--bg-dark-secondary);
-
-  &:hover {
-    background-color: var(--bg-dark-primary);
-  }
-
-  &::after {
-    @include heading-sm;
-
-    content: '\00b7\00b7\00b7\00b7';
-    display: block;
-    color: var(--content-disabled);
-    text-align: center;
-    pointer-events: none;
-  }
-}
-
-.vertical-resizable-resizer-disabled {
-  pointer-events: none;
-  opacity: 0.5;
-
-  &::after {
-    opacity: 0.5;
-  }
-}
-
 .full-size {
   position: absolute;
   inset: 0;

services/web/frontend/stylesheets/bootstrap-5/pages/editor/outline.scss

@@ -1,7 +1,27 @@
+:root {
+  --outline-bg-color: var(--bg-dark-secondary);
+  --outline-border-color: var(--border-disabled-dark);
+  --outline-header-hover-bg: var(--bg-dark-primary);
+  --outline-item-hover-bg: var(--bg-dark-secondary);
+  --outline-line-guide-color: var(--border-primary);
+  --outline-container-color-bg: var(--bg-dark-tertiary);
+  --outline-content-color: var(--content-primary-dark);
+}
+
+@include theme('light') {
+  --outline-bg-color: var(--bg-light-primary);
+  --outline-border-color: var(--border-disabled);
+  --outline-item-hover-bg: var(--bg-light-tertiary);
+  --outline-header-hover-bg: var(--bg-light-tertiary);
+  --outline-line-guide-color: var(--border-disabled);
+  --outline-container-color-bg: var(--bg-light-primary);
+  --outline-content-color: var(--content-secondary);
+}
+
 .outline-container {
   width: 100%;
   height: 100%;
-  background-color: var(--bg-dark-tertiary);
+  background-color: var(--outline-container-color-bg);
 }
 
 .outline-pane {
@@ -19,8 +39,8 @@
 
 .documentation-btn-container {
   @include toolbar-sm-height;
-  @include toolbar-alt-bg;
 
+  background-color: var(--outline-bg-color);
   display: flex;
   align-items: center;
   box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
@@ -42,16 +62,16 @@
 
 .outline-header {
   @include toolbar-sm-height;
-  @include toolbar-alt-bg;
 
+  background-color: var(--outline-bg-color);
   display: flex;
   flex-shrink: 0;
-  border-bottom: 1px solid var(--border-disabled-dark);
-  border-top: 1px solid var(--border-disabled-dark);
+  border-bottom: 1px solid var(--outline-border-color);
+  border-top: 1px solid var(--outline-border-color);
 }
 
 .outline-header-expand-collapse-btn {
-  color: var(--file-tree-item-color);
+  color: var(--outline-content-color);
   display: flex;
   align-items: center;
   background-color: transparent;
@@ -70,7 +90,7 @@
   }
 
   &:hover {
-    background-color: var(--bg-dark-primary);
+    background-color: var(--outline-header-hover-bg);
   }
 
   &:hover[disabled] {
@@ -81,7 +101,7 @@
 .outline-header-name {
   @include body-sm;
 
-  color: var(--file-tree-item-color);
+  color: var(--outline-content-color);
   display: inline-block;
   font-weight: 700;
   margin: 0;
@@ -92,13 +112,13 @@
 }
 
 .outline-body {
-  background-color: var(--file-tree-bg);
+  background-color: var(--outline-container-color-bg);
   overflow-y: auto;
   padding-right: var(--spacing-03);
 }
 
 .outline-body-no-elements {
-  color: var(--file-tree-item-color);
+  color: var(--outline-content-color);
   text-align: center;
   padding: var(--spacing-08) var(--spacing-08) var(--spacing-11)
     var(--spacing-08);
@@ -106,13 +126,13 @@
 }
 
 .outline-body-link {
-  color: var(--file-tree-item-color);
+  color: var(--outline-content-color);
   display: block;
   text-decoration: underline;
 
   &:hover,
   &:focus {
-    color: var(--file-tree-item-color);
+    color: var(--outline-content-color);
     text-decoration: underline;
   }
 }
@@ -124,7 +144,7 @@
 
   &::before {
     content: '';
-    background-color: var(--neutral-60);
+    background-color: var(--outline-line-guide-color);
     top: var(--spacing-03);
     bottom: var(--spacing-03);
     width: 1px;
@@ -152,7 +172,7 @@
 }
 
 .outline-item-expand-collapse-btn {
-  background-color: var(--file-tree-bg);
+  background-color: var(--outline-container-color-bg);
   display: inline;
   border: 0;
   padding: 0;
@@ -170,14 +190,14 @@
   }
 
   &:hover {
-    background-color: var(--file-tree-item-hover-bg);
+    background-color: var(--outline-item-hover-bg);
   }
 }
 
 .outline-item-link {
   @include text-truncate;
 
-  color: var(--file-tree-item-color);
+  color: var(--outline-content-color);
   display: inline;
   background-color: transparent;
   border: 0;
@@ -190,7 +210,7 @@
 
   &:hover,
   &:focus {
-    background-color: var(--file-tree-item-hover-bg);
+    background-color: var(--outline-item-hover-bg);
     outline: 0;
   }
 }

services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf.scss

@@ -1,6 +1,7 @@
 :root {
   --pdf-bg: var(--neutral-10);
   --pdf-toolbar-btn-hover-color: rgb(125 125 125 / 20%);
+  --synctex-control-size: 24px;
 }
 
 @include theme('light') {
@@ -333,20 +334,42 @@
   }
 }
 
-.synctex-control {
-  > .synctex-control-icon {
-    display: inline-block;
-    font:
-      normal normal normal 14px/1 FontAwesome,
-      sans-serif;
-    font-size: inherit;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+.synctex-controls {
+  margin-right: calc(var(--spacing-04) * -1);
+  position: absolute;
+  z-index: 6;
+  padding: 0;
+  top: 68px;
+}
+
+.synctex-control:not(.detach-synctex-control) {
+  align-items: center;
+  background-color: rgba($bg-dark-tertiary, 0.8);
+  border-color: transparent;
+  border-radius: var(--border-radius-full);
+  color: var(--content-primary-dark);
+  display: flex !important;
+  height: var(--synctex-control-size);
+  justify-content: center;
+  margin-bottom: var(--spacing-05);
+  padding: 0;
+  transition: background 0.15s ease;
+  width: var(--synctex-control-size);
+
+  &:focus:not(:focus-visible) {
+    outline: none;
   }
 
-  > .synctex-spin-icon {
-    margin-top: var(--spacing-01);
+  &:active {
+    background-color: rgba($bg-dark-tertiary, 0.8);
+    color: var(--content-primary-dark);
+  }
+}
+
+.synctex-control {
+  .synctex-control-icon {
+    font-weight: 700;
+    font-size: var(--font-size-06);
   }
 }
 

services/web/frontend/stylesheets/components/vertical-resizable-panes.less

@@ -1,25 +0,0 @@
-.vertical-resizable-resizer {
-  background-color: @vertical-resizable-resizer-bg;
-
-  &:hover {
-    background-color: @vertical-resizable-resizer-hover-bg;
-  }
-
-  &::after {
-    content: '\00b7\00b7\00b7\00b7';
-    display: block;
-    color: @ol-blue-gray-2;
-    text-align: center;
-    font-size: 20px;
-    line-height: 3px;
-    pointer-events: none;
-  }
-}
-
-.vertical-resizable-resizer-disabled {
-  pointer-events: none;
-  opacity: 0.5;
-  &::after {
-    opacity: 0.5;
-  }
-}

services/web/frontend/stylesheets/main-style.less

@@ -82,7 +82,6 @@
 @import 'components/tooltip.less';
 @import 'components/popovers.less';
 @import 'components/daterange-picker';
-@import 'components/vertical-resizable-panes.less';
 @import 'components/lists.less';
 @import 'components/overbox.less';
 @import 'components/embed-responsive.less';