mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-14 20:40:17 -05:00
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
Copybot
parent
c817c5ed98
commit
f590d6d9a2
8 changed files with 166 additions and 103 deletions
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in a new issue