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

Migrate the editor resizer and SyncTeX button styles to CSS

GitOrigin-RevId: 94aec89f6f7b9e14d74d1c52111c13075e82ddaa
This commit is contained in:
Rebeka Dekany 2024-10-11 11:50:26 +02:00 committed by Copybot
parent c817c5ed98
commit f590d6d9a2
8 changed files with 166 additions and 103 deletions

View file

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

View file

@ -57,7 +57,12 @@ function GoToCodeButton({
buttonIcon = ( buttonIcon = (
<BootstrapVersionSwitcher <BootstrapVersionSwitcher
bs3={<Icon type="arrow-left" className="synctex-control-icon" />} 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 = ( buttonIcon = (
<BootstrapVersionSwitcher <BootstrapVersionSwitcher
bs3={<Icon type="arrow-right" className="synctex-control-icon" />} 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"
/>
}
/> />
) )
} }

View file

@ -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 { .editor-dark {
.pdf-logs { .pdf-logs {
background-color: lighten(@editor-dark-background-color, 10%); background-color: lighten(@editor-dark-background-color, 10%);

View file

@ -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 { #ide-root {
height: 100vh; /* for backwards compatibility */ height: 100vh; /* for backwards compatibility */
height: 100dvh; /* needed for mobile devices */ height: 100dvh; /* needed for mobile devices */
@ -128,11 +145,14 @@
// Enable ::before and ::after pseudo-elements to position themselves correctly // Enable ::before and ::after pseudo-elements to position themselves correctly
position: relative; position: relative;
background-color: var(--bg-dark-secondary); background-color: var(--editor-resizer-bg-color);
.custom-toggler { .custom-toggler {
padding: 0; padding: 0;
border-width: 0; border-width: 0;
// Override react-resizable-panels which sets a global * { cursor: ew-resize }
cursor: pointer !important;
} }
&.horizontal-resize-handle-enabled { &.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 { .vertical-resize-handle {
height: 6px; height: 6px;
background-color: var(--bg-dark-secondary); background-color: var(--editor-resizer-bg-color);
&.vertical-resize-handle-enabled { &.vertical-resize-handle-enabled {
&:hover { &: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 { .full-size {
position: absolute; position: absolute;
inset: 0; inset: 0;

View file

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

View file

@ -1,6 +1,7 @@
:root { :root {
--pdf-bg: var(--neutral-10); --pdf-bg: var(--neutral-10);
--pdf-toolbar-btn-hover-color: rgb(125 125 125 / 20%); --pdf-toolbar-btn-hover-color: rgb(125 125 125 / 20%);
--synctex-control-size: 24px;
} }
@include theme('light') { @include theme('light') {
@ -333,20 +334,42 @@
} }
} }
.synctex-control { .synctex-controls {
> .synctex-control-icon { margin-right: calc(var(--spacing-04) * -1);
display: inline-block; position: absolute;
font: z-index: 6;
normal normal normal 14px/1 FontAwesome, padding: 0;
sans-serif; top: 68px;
font-size: inherit; }
text-rendering: auto;
-webkit-font-smoothing: antialiased; .synctex-control:not(.detach-synctex-control) {
-moz-osx-font-smoothing: grayscale; 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 { &:active {
margin-top: var(--spacing-01); 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);
} }
} }

View file

@ -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;
}
}

View file

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