github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05: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 (
<div className="table-generator-floating-toolbar">
<ToolbarDropdown
id="table-generator-caption-dropdown"
label={captionLabel}
disabled={!tableEnvironment}
>
<ToolbarDropdownItem
id="table-generator-caption-none"
command={() => {
removeCaption(view, tableEnvironment)
}}
<div className="table-generator-button-group">
<ToolbarDropdown
id="table-generator-caption-dropdown"
label={captionLabel}
disabled={!tableEnvironment}
>
No caption
</ToolbarDropdownItem>
<ToolbarDropdownItem
id="table-generator-caption-above"
command={() => {
moveCaption(view, positions, 'above', tableEnvironment)
}}
<ToolbarDropdownItem
id="table-generator-caption-none"
command={() => {
removeCaption(view, 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-caption-below"
command={() => {
moveCaption(view, positions, 'below', tableEnvironment)
}}
>
Caption below
</ToolbarDropdownItem>
</ToolbarDropdown>
<ToolbarDropdown
id="table-generator-borders-dropdown"
label={borderDropdownLabel}
>
<ToolbarDropdownItem
id="table-generator-borders-fully-bordered"
command={() => {
setBorders(
view,
BorderTheme.FULLY_BORDERED,
positions,
rowSeparators,
table
)
}}
>
<MaterialIcon type="border_all" />
<span className="table-generator-button-label">All borders</span>
</ToolbarDropdownItem>
<ToolbarDropdownItem
id="table-generator-borders-no-borders"
command={() => {
setBorders(
view,
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" />
<ToolbarDropdownItem
id="table-generator-borders-fully-bordered"
command={() => {
setBorders(
view,
BorderTheme.FULLY_BORDERED,
positions,
rowSeparators,
table
)
}}
>
<MaterialIcon type="border_all" />
<span className="table-generator-button-label">All borders</span>
</ToolbarDropdownItem>
<ToolbarDropdownItem
id="table-generator-borders-no-borders"
command={() => {
setBorders(
view,
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>
More options for border settings coming soon.
</div>
More options for border settings coming soon.
</div>
</ToolbarDropdown>
</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',