github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-01-27 16:32:19 +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

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

@ -63,77 +63,79 @@ export const Toolbar = memo(function Toolbar() {
return ( return (
<div className="table-generator-floating-toolbar"> <div className="table-generator-floating-toolbar">
<ToolbarDropdown <div className="table-generator-button-group">
id="table-generator-caption-dropdown" <ToolbarDropdown
label={captionLabel} id="table-generator-caption-dropdown"
disabled={!tableEnvironment} label={captionLabel}
> disabled={!tableEnvironment}
<ToolbarDropdownItem
id="table-generator-caption-none"
command={() => {
removeCaption(view, tableEnvironment)
}}
> >
No caption <ToolbarDropdownItem
</ToolbarDropdownItem> id="table-generator-caption-none"
<ToolbarDropdownItem command={() => {
id="table-generator-caption-above" removeCaption(view, tableEnvironment)
command={() => { }}
moveCaption(view, positions, 'above', tableEnvironment) >
}} No caption
</ToolbarDropdownItem>
<ToolbarDropdownItem
id="table-generator-caption-above"
command={() => {
moveCaption(view, positions, 'above', tableEnvironment)
}}
>
Caption above
</ToolbarDropdownItem>
<ToolbarDropdownItem
id="table-generator-caption-below"
command={() => {
moveCaption(view, positions, 'below', tableEnvironment)
}}
>
Caption below
</ToolbarDropdownItem>
</ToolbarDropdown>
<ToolbarDropdown
id="table-generator-borders-dropdown"
label={borderDropdownLabel}
> >
Caption above <ToolbarDropdownItem
</ToolbarDropdownItem> id="table-generator-borders-fully-bordered"
<ToolbarDropdownItem command={() => {
id="table-generator-caption-below" setBorders(
command={() => { view,
moveCaption(view, positions, 'below', tableEnvironment) BorderTheme.FULLY_BORDERED,
}} positions,
> rowSeparators,
Caption below table
</ToolbarDropdownItem> )
</ToolbarDropdown> }}
<ToolbarDropdown >
id="table-generator-borders-dropdown" <MaterialIcon type="border_all" />
label={borderDropdownLabel} <span className="table-generator-button-label">All borders</span>
> </ToolbarDropdownItem>
<ToolbarDropdownItem <ToolbarDropdownItem
id="table-generator-borders-fully-bordered" id="table-generator-borders-no-borders"
command={() => { command={() => {
setBorders( setBorders(
view, view,
BorderTheme.FULLY_BORDERED, BorderTheme.NO_BORDERS,
positions, positions,
rowSeparators, rowSeparators,
table table
) )
}} }}
> >
<MaterialIcon type="border_all" /> <MaterialIcon type="border_clear" />
<span className="table-generator-button-label">All borders</span> <span className="table-generator-button-label">No borders</span>
</ToolbarDropdownItem> </ToolbarDropdownItem>
<ToolbarDropdownItem <div className="table-generator-border-options-coming-soon">
id="table-generator-borders-no-borders" <div className="info-icon">
command={() => { <MaterialIcon type="info" />
setBorders( </div>
view, More options for border settings coming soon.
BorderTheme.NO_BORDERS,
positions,
rowSeparators,
table
)
}}
>
<MaterialIcon type="border_clear" />
<span className="table-generator-button-label">No borders</span>
</ToolbarDropdownItem>
<div className="table-generator-border-options-coming-soon">
<div className="info-icon">
<MaterialIcon type="info" />
</div> </div>
More options for border settings coming soon. </ToolbarDropdown>
</div> </div>
</ToolbarDropdown>
<div className="table-generator-button-group"> <div className="table-generator-button-group">
<ToolbarButtonMenu <ToolbarButtonMenu
label="Alignment" 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': { '.table-generator-floating-toolbar': {
position: 'absolute', position: 'absolute',
top: '-36px', top: '0',
transform: 'translateY(-100%)',
left: '0', left: '0',
right: '0', right: '0',
margin: '0 auto', margin: '0 auto',
'z-index': '1', 'z-index': '1',
'border-radius': '4px', 'border-radius': '4px',
width: 'max-content', width: 'max-content',
'justify-content': 'start',
maxWidth: '100%',
'background-color': 'var(--table-generator-toolbar-background)', 'background-color': 'var(--table-generator-toolbar-background)',
'box-shadow': '0px 2px 4px 0px var(--table-generator-toolbar-shadow-color)', 'box-shadow': '0px 2px 4px 0px var(--table-generator-toolbar-shadow-color)',
padding: '4px', padding: '4px',
height: '40px',
display: 'flex', display: 'flex',
flexWrap: 'wrap',
rowGap: '8px',
}, },
'.table-generator-toolbar-button': { '.table-generator-toolbar-button': {
@ -262,10 +266,10 @@ export const tableGeneratorTheme = EditorView.baseTheme({
'justify-content': 'center', 'justify-content': 'center',
'line-height': '1', 'line-height': '1',
overflow: 'hidden', overflow: 'hidden',
'&:not(:first-child)': { '&:not(:last-child)': {
'border-left': '1px solid var(--table-generator-divider-color)', 'border-right': '1px solid var(--table-generator-divider-color)',
'padding-left': '8px', 'padding-right': '8px',
'margin-left': '8px', 'margin-right': '8px',
}, },
}, },
@ -332,6 +336,7 @@ export const tableGeneratorTheme = EditorView.baseTheme({
'align-items': 'center', 'align-items': 'center',
'justify-content': 'space-between', 'justify-content': 'space-between',
'font-family': 'Lato', 'font-family': 'Lato',
height: '36px',
'&:not(:first-child)': { '&:not(:first-child)': {
'margin-left': '8px', 'margin-left': '8px',