From 4e4e32792a4407876f02d10a4601fc04e0556667 Mon Sep 17 00:00:00 2001 From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com> Date: Fri, 11 Oct 2024 11:50:26 +0200 Subject: [PATCH] Merge pull request #20807 from overleaf/rd-ide-resizer Migrate the editor resizer and SyncTeX button styles to CSS GitOrigin-RevId: 94aec89f6f7b9e14d74d1c52111c13075e82ddaa --- .../components/resize/horizontal-toggler.tsx | 6 +- .../components/pdf-synctex-controls.jsx | 14 ++- .../frontend/stylesheets/app/editor/pdf.less | 13 --- .../bootstrap-5/pages/editor/ide.scss | 109 +++++++++++++----- .../bootstrap-5/pages/editor/outline.scss | 54 ++++++--- .../bootstrap-5/pages/editor/pdf.scss | 47 ++++++-- .../components/vertical-resizable-panes.less | 25 ---- .../web/frontend/stylesheets/main-style.less | 1 - 8 files changed, 166 insertions(+), 103 deletions(-) delete mode 100644 services/web/frontend/stylesheets/components/vertical-resizable-panes.less diff --git a/services/web/frontend/js/features/ide-react/components/resize/horizontal-toggler.tsx b/services/web/frontend/js/features/ide-react/components/resize/horizontal-toggler.tsx index ae718e0ae3..fba41ee8d8 100644 --- a/services/web/frontend/js/features/ide-react/components/resize/horizontal-toggler.tsx +++ b/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 ( - setIsOpen(!isOpen)} /> - + ) } diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.jsx b/services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.jsx index 214ca0f4f8..7ecb66a9a2 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.jsx +++ b/services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.jsx @@ -57,7 +57,12 @@ function GoToCodeButton({ buttonIcon = ( } - bs5={} + bs5={ + + } /> ) } @@ -130,7 +135,12 @@ function GoToPdfButton({ buttonIcon = ( } - bs5={} + bs5={ + + } /> ) } diff --git a/services/web/frontend/stylesheets/app/editor/pdf.less b/services/web/frontend/stylesheets/app/editor/pdf.less index cd4eeb8288..5bd72b00fe 100644 --- a/services/web/frontend/stylesheets/app/editor/pdf.less +++ b/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%); diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss index 697156c8cf..74cc4cb72e 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss +++ b/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; diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/outline.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/outline.scss index b03e87b0de..d3530be78c 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/outline.scss +++ b/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; } } diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf.scss index dd41048115..50416dcd95 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf.scss +++ b/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); } } diff --git a/services/web/frontend/stylesheets/components/vertical-resizable-panes.less b/services/web/frontend/stylesheets/components/vertical-resizable-panes.less deleted file mode 100644 index 9932b0352c..0000000000 --- a/services/web/frontend/stylesheets/components/vertical-resizable-panes.less +++ /dev/null @@ -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; - } -} diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less index a0db92f0a2..6b2db59ca8 100644 --- a/services/web/frontend/stylesheets/main-style.less +++ b/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';