github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-27 14:42:43 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #23656 from overleaf/mj-ide-toolbar-buttons

Browse source 
[web] Reduce toolbar and rail size in editor redesign

GitOrigin-RevId: 9e9670c37664355f4bc287a5561b427768bb4436
This commit is contained in:
Mathias Jakobsen 2025-02-18 13:17:23 +00:00 • committed by Copybot
parent 46e9c69d8e
commit fb12a1bc8e
6 changed files with 24 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
services/web/frontend/js/features/ide-redesign/components/rail.tsx
View file

@ -112,10 +112,7 @@ export const RailLayout = () => {
id="ide-rail-tabs"
>
<div className="ide-rail">
<Nav
activeKey={selectedTab}
className="d-flex flex-column ide-rail-tabs-nav"
>
<Nav activeKey={selectedTab} className="ide-rail-tabs-nav">
{RAIL_TABS.filter(({ hide }) => !hide).map(
({ icon, key, indicator }) => (
<RailTab

2
services/web/frontend/js/features/ide-redesign/components/toolbar/project-title.tsx
View file

@ -16,7 +16,7 @@ export const ToolbarProjectTitle = () => {
<Dropdown align="start">
<DropdownToggle
id="project-title-options"
className="ide-redesign-toolbar-dropdown-toggle-subdued"
className="ide-redesign-toolbar-dropdown-toggle-subdued fw-bold"
variant="secondary"
>
{name}

1
services/web/frontend/js/features/ide-redesign/components/toolbar/share-project-button.tsx
View file

@ -23,6 +23,7 @@ export default function ShareProjectButton() {
<>
<div className="ide-redesign-toolbar-button-container">
<OLButton
size="sm"
variant="primary"
leadingIcon={<MaterialIcon type="person_add" />}
onClick={handleOpenShareModal}

3
services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx
View file

@ -52,7 +52,8 @@ const ToolbarButtons = () => {
<OnlineUsers />
<div className="ide-redesign-toolbar-button-container">
<OLButton
variant="link"
size="sm"
variant="ghost"
className="ide-redesign-toolbar-button-subdued"
leadingIcon={<MaterialIcon type="history" />}
/>

21
services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
View file

@ -12,10 +12,11 @@
}
.ide-rail-tab-link {
border-radius: 12px;
border-radius: var(--border-radius-base);
display: block;
height: 48px;
width: 48px;
margin: 0 auto;
height: 32px;
width: 32px;
text-align: center;
padding: 0;
color: var(--ide-rail-color);
@ -24,7 +25,7 @@
overflow-y: hidden;
.ide-rail-tab-link-icon {
line-height: 48px;
line-height: 32px;
font-size: 20px;
}
@ -39,9 +40,9 @@
content: '';
position: absolute;
bottom: -$indicator-height;
left: 25%;
left: 4px;
box-sizing: border-box;
width: 50%;
width: 24px;
height: $indicator-height * 2;
border: $indicator-height solid
var(--ide-rail-link-active-indicator-background);
@ -51,8 +52,8 @@
.badge {
position: absolute;
top: var(--spacing-02);
right: var(--spacing-02);
top: 0;
right: 0;
}
}
@ -83,4 +84,8 @@
.ide-rail-tabs-nav {
height: 100%;
display: flex;
flex-direction: column;
gap: var(--spacing-02);
width: 40px;
}

12
services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss
View file

@ -5,8 +5,8 @@
}
.ide-redesign-toolbar {
$toolbar-height: 48px;
$home-button-size: 36px;
$toolbar-height: 40px;
$home-button-size: 32px;
$ol-icon-height: 24px;
$home-icon-font-size: 24px;
@ -62,14 +62,14 @@
}
.ide-redesign-toolbar-dropdown-toggle-subdued {
$height: 32px;
$height: 28px;
border: none;
border-radius: var(--border-radius-base);
padding: var(--spacing-02);
height: $height;
font-size: var(--font-size-03);
line-height: var(--line-height-03);
font-size: var(--font-size-02);
line-height: var(--line-height-02);
font-weight: 400;
box-sizing: border-box;
margin: math.div($toolbar-height - $height, 2) 0;
@ -93,7 +93,7 @@
.ide-redesign-toolbar-actions {
display: flex;
gap: var(--spacing-06);
gap: var(--spacing-04);
padding: 0 var(--spacing-05);
}