github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-14 20:40:17 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #21135 from overleaf/rd-dev-toolbar

Browse source 
Migrate the Dev Toolbar to Bootstrap 5

GitOrigin-RevId: c102883171e5e40c6b9a2f808f305ab1d4fb553f
This commit is contained in:
Rebeka Dekany 2024-11-01 14:36:02 +01:00 committed by Copybot
parent ccb639bcea
commit e2d63a778b
4 changed files with 152 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/frontend/js/features/ui/components/ol/ol-tooltip.tsx
View file

@ -18,6 +18,8 @@ function OLTooltip(props: OLTooltipProps) {
tooltipProps: bs5Props.tooltipProps as BS3TooltipProps, tooltipProps: bs5Props.tooltipProps as BS3TooltipProps,
overlayProps: { overlayProps: {
placement: bs5Props.overlayProps?.placement, placement: bs5Props.overlayProps?.placement,
rootClose: bs5Props.overlayProps?.rootClose,
trigger: bs5Props.overlayProps?.trigger,
}, },
...bs3Props, ...bs3Props,
} }

1
services/web/frontend/stylesheets/bootstrap-5/components/all.scss
View file

@ -31,3 +31,4 @@
@import 'gallery-search'; @import 'gallery-search';
@import 'error-boundary'; @import 'error-boundary';
@import 'close-button'; @import 'close-button';
@import 'dev-toolbar';

136
services/web/frontend/stylesheets/bootstrap-5/components/dev-toolbar.scss Normal file
View file

@ -0,0 +1,136 @@
.dev-toolbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
height: 40px;
background-color: var(--bg-dark-primary);
padding: var(--spacing-02) var(--spacing-05);
button.widget {
color: var(--neutral-10);
margin: 0 var(--spacing-02);
padding: 0 var(--spacing-02);
border: none;
text-decoration: none;
.badge {
font-size: var(--font-size-03);
}
}
.collapse-button {
position: absolute;
padding: 0;
margin-top: calc(var(--spacing-01) * -1);
color: var(--neutral-50);
border-color: transparent;
span {
font-size: var(--font-size-07);
}
&:hover {
color: var(--border-primary-dark);
}
}
}
.dev-tool-bar-open-button {
position: fixed;
bottom: -2px;
left: 6px;
color: var(--neutral-70);
span {
font-size: var(--font-size-07);
}
&:hover {
color: var(--border-primary-dark);
}
}
.dev-toolbar-tooltip {
opacity: 1 !important;
a {
color: var(--blue-20) !important;
text-decoration: none;
&.btn {
color: var(--neutral-10);
}
}
&.tooltip.top {
margin-top: calc(var(--spacing-04) * -1);
opacity: 1;
}
.tooltip-inner {
padding: var(--spacing-01) var(--spacing-04) var(--spacing-04)
var(--spacing-04);
text-align: left;
min-width: 300px;
max-height: 800px;
overflow-y: auto;
}
.title {
margin-top: var(--spacing-02);
}
.test-card {
text-align: left;
color: var(--neutral-10);
padding: var(--spacing-03);
border: var(--spacing-01) solid var(--neutral-70);
background-color: var(--bg-dark-secondary);
border-radius: var(--border-radius-base);
margin-top: var(--spacing-04);
&.override {
border-color: var(--blue-40);
}
.test-name {
font-family: monospace;
font-size: var(--font-size-01);
font-weight: bold;
}
ul {
li.variant-row {
line-height: var(--line-height-03);
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-01) 0;
.btn-inline-link {
color: var(--content-primary-dark) !important;
opacity: 1;
font-weight: 400;
text-decoration: none;
.material-symbols {
vertical-align: sub;
font-weight: 400;
font-size: var(--font-size-03);
}
}
}
}
}
.actions {
margin-top: var(--spacing-04);
text-align: right;
}
ul {
margin-bottom: 0;
}
}

13
services/web/frontend/stylesheets/components/dev-toolbar.less
View file

@ -93,6 +93,19 @@
ul { ul {
li.variant-row { li.variant-row {
line-height: 24px; line-height: 24px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 0;
.btn {
color: @white;
}
.material-symbols {
vertical-align: text-top;
font-weight: 400;
}
} }
} }
} }