github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-01-27 16:12:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #14690 from overleaf/mj-table-gen-toolbar-wrap

Browse source 
[visual] Wrap table generator toolbar on overflow

GitOrigin-RevId: ef4d5b7f8fe79eefb6d2ad2f89c8ae198e2c701d
This commit is contained in:
Mathias Jakobsen 2023-09-06 15:05:42 +01:00 committed by Copybot
parent 73d3537f32
commit 6cde5e2e90
2 changed files with 81 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar.tsx
View file

@ -63,6 +63,7 @@ export const Toolbar = memo(function Toolbar() {
return (
<div className="table-generator-floating-toolbar">
<div className="table-generator-button-group">
<ToolbarDropdown
id="table-generator-caption-dropdown"
label={captionLabel}
@ -134,6 +135,7 @@ export const Toolbar = memo(function Toolbar() {
More options for border settings coming soon.
</div>
</ToolbarDropdown>
</div>
<div className="table-generator-button-group">
<ToolbarButtonMenu
label="Alignment"

17
services/web/frontend/js/features/source-editor/extensions/visual/table-generator.ts
View file

@ -191,18 +191,22 @@ export const tableGeneratorTheme = EditorView.baseTheme({
'.table-generator-floating-toolbar': {
position: 'absolute',
top: '-36px',
top: '0',
transform: 'translateY(-100%)',
left: '0',
right: '0',
margin: '0 auto',
'z-index': '1',
'border-radius': '4px',
width: 'max-content',
'justify-content': 'start',
maxWidth: '100%',
'background-color': 'var(--table-generator-toolbar-background)',
'box-shadow': '0px 2px 4px 0px var(--table-generator-toolbar-shadow-color)',
padding: '4px',
height: '40px',
display: 'flex',
flexWrap: 'wrap',
rowGap: '8px',
},
'.table-generator-toolbar-button': {
@ -262,10 +266,10 @@ export const tableGeneratorTheme = EditorView.baseTheme({
'justify-content': 'center',
'line-height': '1',
overflow: 'hidden',
'&:not(:first-child)': {
'border-left': '1px solid var(--table-generator-divider-color)',
'padding-left': '8px',
'margin-left': '8px',
'&:not(:last-child)': {
'border-right': '1px solid var(--table-generator-divider-color)',
'padding-right': '8px',
'margin-right': '8px',
},
},
@ -332,6 +336,7 @@ export const tableGeneratorTheme = EditorView.baseTheme({
'align-items': 'center',
'justify-content': 'space-between',
'font-family': 'Lato',
height: '36px',
'&:not(:first-child)': {
'margin-left': '8px',