agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-12 21:23:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

[WEB] Toolbar overflow: drop one button at a time (#34171)

Browse Source 
* adding individual hiding logic for the toolbar icons

* using css for logic

GitOrigin-RevId: 87e9f72c1dab888e2701ef108ecaa0b190e366ff
This commit is contained in:
Davinder Singh
2026-06-17 08:06:11 +00:00
committed by Copybot
parent f40cebf60b
commit e1881a7645
2 changed files with 72 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx
+60 -38
View File
@@ -136,47 +136,69 @@ export const ToolbarItems: FC<{
)}
</div>
)}
{showGroup('group-misc') && (
<div
className="ol-cm-toolbar-button-group"
data-overflow="group-misc"
aria-label={t('toolbar_insert_misc')}
>
<ToolbarButton
id="toolbar-href"
label={t('toolbar_insert_link')}
command={commands.wrapInHref}
icon="add_link"
/>
{features.trackChangesVisible && permissions.comment && (
<div
className="ol-cm-toolbar-button-group"
data-overflow="group-misc"
aria-label={t('toolbar_insert_misc')}
>
{showGroup('misc-href') && (
<div data-overflow="misc-href">
<ToolbarButton
id="toolbar-add-comment"
label={t('add_comment')}
disabled={isCursorOnEmptyLine(state)}
command={addCommentFromToolbar}
icon="add_comment"
id="toolbar-href"
label={t('toolbar_insert_link')}
command={commands.wrapInHref}
icon="add_link"
/>
</div>
)}
{features.trackChangesVisible &&
permissions.comment &&
showGroup('misc-comment') && (
<div data-overflow="misc-comment">
<ToolbarButton
id="toolbar-add-comment"
label={t('add_comment')}
disabled={isCursorOnEmptyLine(state)}
command={addCommentFromToolbar}
icon="add_comment"
/>
</div>
)}
<ToolbarButton
id="toolbar-ref"
label={t('toolbar_insert_cross_reference')}
command={commands.insertRef}
icon="sell"
/>
<ToolbarButton
id="toolbar-cite"
label={t('toolbar_insert_citation')}
command={commands.insertCite}
icon="book_5"
/>
<InsertFigureDropdown />
{writefullInstance || showAiFeaturesDisabled ? (
<TableDropdown />
) : (
<LegacyTableDropdown />
)}
</div>
)}
{showGroup('misc-ref') && (
<div data-overflow="misc-ref">
<ToolbarButton
id="toolbar-ref"
label={t('toolbar_insert_cross_reference')}
command={commands.insertRef}
icon="sell"
/>
</div>
)}
{showGroup('misc-cite') && (
<div data-overflow="misc-cite">
<ToolbarButton
id="toolbar-cite"
label={t('toolbar_insert_citation')}
command={commands.insertCite}
icon="book_5"
/>
</div>
)}
{showGroup('misc-figure') && (
<div data-overflow="misc-figure">
<InsertFigureDropdown />
</div>
)}
{showGroup('misc-table') && (
<div data-overflow="misc-table">
{writefullInstance || showAiFeaturesDisabled ? (
<TableDropdown />
) : (
<LegacyTableDropdown />
)}
</div>
)}
</div>
{showGroup('group-list') && (
<div
className="ol-cm-toolbar-button-group"
services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
+12
View File
@@ -140,6 +140,14 @@ const toolbarTheme = EditorView.theme({
'&:not(:first-child)': {
borderLeft: '1px solid rgba(125, 125, 125, 0.3)',
},
'&:has(> [data-overflow]):not(:has(> [data-overflow]:not(.overflow-hidden)))':
{
borderLeft: 'none',
padding: 0,
},
'&:empty': {
display: 'none',
},
'&.ol-cm-toolbar-end': {
borderLeft: 'none',
},
@@ -151,6 +159,10 @@ const toolbarTheme = EditorView.theme({
width: 0,
padding: 0,
},
'& > [data-overflow].overflow-hidden': {
width: 0,
overflow: 'hidden',
},
},
'.ol-cm-toolbar-wrapper-needs-border .ol-cm-toolbar-button-group:first-child':
{