yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-12-12 07:34:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: set table to page width (#6956)

Browse Source 
* feat: set table to page width

* feat: expand the table based on the widht percentage

* test: set to page width

* feat: distribute columns evenly

* test: distribute columns evenly

* fix: border width
This commit is contained in:
Lucas 2024-12-11 16:37:28 +08:00 committed by GitHub
parent 8b672a159f
commit 62d5d66d20
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
25 changed files with 577 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/appflowy_flutter/integration_test/desktop/document/document_with_simple_table_test.dart
View File

@ -332,6 +332,81 @@ void main() {
expect(tableNode.columnLength, 2);
});
});
testWidgets('set column width to page width (1)', (tester) async {
await tester.initializeAppFlowy();
await tester.tapAnonymousSignInButton();
await tester.createNewPageWithNameUnderParent(
name: 'simple_table_test',
);
await tester.editor.tapLineOfEditorAt(0);
await tester.insertTableInDocument();
final tableNode = tester.editor.getNodeAtPath([0]);
final beforeWidth = tableNode.width;
// set the column width to page width
await tester.clickMoreActionItemInTableMenu(
type: SimpleTableMoreActionType.column,
index: 0,
action: SimpleTableMoreAction.setToPageWidth,
);
await tester.pumpAndSettle();
final afterWidth = tableNode.width;
expect(afterWidth, greaterThan(beforeWidth));
});
testWidgets('set column width to page width (2)', (tester) async {
await tester.initializeAppFlowy();
await tester.tapAnonymousSignInButton();
await tester.createNewPageWithNameUnderParent(
name: 'simple_table_test',
);
await tester.editor.tapLineOfEditorAt(0);
await tester.insertTableInDocument();
final tableNode = tester.editor.getNodeAtPath([0]);
final beforeWidth = tableNode.width;
// set the column width to page width
await tester.clickMoreActionItemInTableMenu(
type: SimpleTableMoreActionType.row,
index: 0,
action: SimpleTableMoreAction.setToPageWidth,
);
await tester.pumpAndSettle();
final afterWidth = tableNode.width;
expect(afterWidth, greaterThan(beforeWidth));
});
testWidgets('distribute columns evenly (1)', (tester) async {
await tester.initializeAppFlowy();
await tester.tapAnonymousSignInButton();
await tester.createNewPageWithNameUnderParent(
name: 'simple_table_test',
);
await tester.editor.tapLineOfEditorAt(0);
await tester.insertTableInDocument();
final tableNode = tester.editor.getNodeAtPath([0]);
final beforeWidth = tableNode.width;
// set the column width to page width
await tester.clickMoreActionItemInTableMenu(
type: SimpleTableMoreActionType.row,
index: 0,
action: SimpleTableMoreAction.distributeColumnsEvenly,
);
await tester.pumpAndSettle();
final afterWidth = tableNode.width;
expect(afterWidth, equals(beforeWidth));
});
}
extension on WidgetTester {

251
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/_shared_widget.dart
View File

@ -1,251 +0,0 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class SimpleTableRowDivider extends StatelessWidget {
const SimpleTableRowDivider({
super.key,
});
@override
Widget build(BuildContext context) {
return VerticalDivider(
color: context.simpleTableBorderColor,
width: 1.0,
);
}
}
class SimpleTableColumnDivider extends StatelessWidget {
const SimpleTableColumnDivider({super.key});
@override
Widget build(BuildContext context) {
return Divider(
color: context.simpleTableBorderColor,
height: 1.0,
);
}
}
class SimpleTableAlignMenu extends StatefulWidget {
const SimpleTableAlignMenu({
super.key,
required this.type,
required this.tableCellNode,
this.mutex,
});
final SimpleTableMoreActionType type;
final Node tableCellNode;
final PopoverMutex? mutex;
@override
State<SimpleTableAlignMenu> createState() => _SimpleTableAlignMenuState();
}
class _SimpleTableAlignMenuState extends State<SimpleTableAlignMenu> {
@override
Widget build(BuildContext context) {
final align = switch (widget.type) {
SimpleTableMoreActionType.column => widget.tableCellNode.columnAlign,
SimpleTableMoreActionType.row => widget.tableCellNode.rowAlign,
};
return AppFlowyPopover(
mutex: widget.mutex,
child: SimpleTableBasicButton(
leftIconSvg: align.leftIconSvg,
text: LocaleKeys.document_plugins_simpleTable_moreActions_align.tr(),
onTap: () {},
),
popupBuilder: (popoverContext) {
void onClose() => PopoverContainer.of(popoverContext).closeAll();
return Column(
mainAxisSize: MainAxisSize.min,
children: [
_buildAlignButton(context, TableAlign.left, onClose),
_buildAlignButton(context, TableAlign.center, onClose),
_buildAlignButton(context, TableAlign.right, onClose),
],
);
},
);
}
Widget _buildAlignButton(
BuildContext context,
TableAlign align,
VoidCallback onClose,
) {
return SimpleTableBasicButton(
leftIconSvg: align.leftIconSvg,
text: align.name,
onTap: () {
switch (widget.type) {
case SimpleTableMoreActionType.column:
context.read<EditorState>().updateColumnAlign(
tableCellNode: widget.tableCellNode,
align: align,
);
break;
case SimpleTableMoreActionType.row:
context.read<EditorState>().updateRowAlign(
tableCellNode: widget.tableCellNode,
align: align,
);
break;
}
onClose();
},
);
}
}
class SimpleTableBasicButton extends StatelessWidget {
const SimpleTableBasicButton({
super.key,
required this.text,
required this.onTap,
this.leftIconSvg,
this.leftIconBuilder,
this.rightIcon,
});
final FlowySvgData? leftIconSvg;
final String text;
final VoidCallback onTap;
final Widget Function(bool onHover)? leftIconBuilder;
final Widget? rightIcon;
@override
Widget build(BuildContext context) {
return Container(
height: SimpleTableConstants.moreActionHeight,
padding: SimpleTableConstants.moreActionPadding,
child: FlowyIconTextButton(
margin: SimpleTableConstants.moreActionHorizontalMargin,
leftIconBuilder: _buildLeftIcon,
iconPadding: 10.0,
textBuilder: (onHover) => FlowyText.regular(
text,
fontSize: 14.0,
figmaLineHeight: 18.0,
),
onTap: onTap,
rightIconBuilder: (onHover) => rightIcon ?? const SizedBox.shrink(),
),
);
}
Widget _buildLeftIcon(bool onHover) {
if (leftIconBuilder != null) {
return leftIconBuilder!(onHover);
}
return leftIconSvg != null
? FlowySvg(leftIconSvg!)
: const SizedBox.shrink();
}
}
class SimpleTableBackgroundColorMenu extends StatefulWidget {
const SimpleTableBackgroundColorMenu({
super.key,
required this.type,
required this.tableCellNode,
this.mutex,
});
final SimpleTableMoreActionType type;
final Node tableCellNode;
final PopoverMutex? mutex;
@override
State<SimpleTableBackgroundColorMenu> createState() =>
_SimpleTableBackgroundColorMenuState();
}
class _SimpleTableBackgroundColorMenuState
extends State<SimpleTableBackgroundColorMenu> {
@override
Widget build(BuildContext context) {
final theme = AFThemeExtension.of(context);
final backgroundColor = switch (widget.type) {
SimpleTableMoreActionType.row =>
widget.tableCellNode.buildRowColor(context),
SimpleTableMoreActionType.column =>
widget.tableCellNode.buildColumnColor(context),
};
return AppFlowyPopover(
mutex: widget.mutex,
popupBuilder: (popoverContext) {
return _buildColorOptionMenu(
context,
theme: theme,
onClose: () => PopoverContainer.of(popoverContext).closeAll(),
);
},
direction: PopoverDirection.rightWithCenterAligned,
child: SimpleTableBasicButton(
leftIconBuilder: (onHover) => ColorOptionIcon(
color: backgroundColor ?? Colors.transparent,
),
text: LocaleKeys.document_plugins_simpleTable_moreActions_color.tr(),
onTap: () {},
),
);
}
Widget _buildColorOptionMenu(
BuildContext context, {
required AFThemeExtension theme,
required VoidCallback onClose,
}) {
final colors = [
// reset to default background color
FlowyColorOption(
color: Colors.transparent,
i18n: LocaleKeys.document_plugins_optionAction_defaultColor.tr(),
id: optionActionColorDefaultColor,
),
...FlowyTint.values.map(
(e) => FlowyColorOption(
color: e.color(context, theme: theme),
i18n: e.tintName(AppFlowyEditorL10n.current),
id: e.id,
),
),
];
return FlowyColorPicker(
colors: colors,
border: Border.all(
color: theme.onBackground,
),
onTap: (option, index) {
switch (widget.type) {
case SimpleTableMoreActionType.column:
context.read<EditorState>().updateColumnBackgroundColor(
tableCellNode: widget.tableCellNode,
color: option.id,
);
break;
case SimpleTableMoreActionType.row:
context.read<EditorState>().updateRowBackgroundColor(
tableCellNode: widget.tableCellNode,
color: option.id,
);
break;
}
onClose();
},
);
}
}

4
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/simple_table.dart
View File

@ -5,6 +5,4 @@ export 'simple_table_more_action.dart';
export 'simple_table_operations/simple_table_operations.dart';
export 'simple_table_row_block_component.dart';
export 'simple_table_shortcuts/simple_table_commands.dart';
export 'simple_table_widgets/simple_table_add_column_and_row_button.dart';
export 'simple_table_widgets/simple_table_add_column_button.dart';
export 'simple_table_widgets/simple_table_add_row_button.dart';
export 'simple_table_widgets/widgets.dart';

2
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_cell_block_component.dart
View File

@ -1,6 +1,4 @@
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table_widgets/simple_table_border_builder.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table_widgets/simple_table_column_resize_handle.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

4
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_constants.dart
View File

@ -1,4 +1,5 @@
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table.dart';
import 'package:appflowy/plugins/document/presentation/editor_style.dart';
import 'package:appflowy/util/theme_extension.dart';
import 'package:appflowy_backend/log.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
@ -190,6 +191,9 @@ class SimpleTableConstants {
right: tableRightPadding,
);
static double get tablePageOffset =>
EditorStyleCustomizer.optionMenuWidth + 12;
// Add row button
static const addRowButtonHeight = 16.0;
static const addRowButtonPadding = 4.0;

110
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_more_action.dart
View File

@ -1,10 +1,6 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/_shared_widget.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table_block_component.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table_constants.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table_operations/simple_table_operations.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table_widgets/simple_table_reorder_button.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table.dart';
import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:easy_localization/easy_localization.dart';
@ -16,29 +12,45 @@ enum SimpleTableMoreActionType {
column,
row;
List<SimpleTableMoreAction> get actions {
List<SimpleTableMoreAction> buildActions({
required int index,
required int columnLength,
required int rowLength,
}) {
// there're two special cases:
// 1. if the table only contains one row or one column, remove the delete action
// 2. if the index is 0, add the enable header action
switch (this) {
case SimpleTableMoreActionType.row:
return [
SimpleTableMoreAction.insertAbove,
SimpleTableMoreAction.insertBelow,
SimpleTableMoreAction.divider,
if (index == 0) SimpleTableMoreAction.enableHeaderRow,
SimpleTableMoreAction.backgroundColor,
SimpleTableMoreAction.align,
SimpleTableMoreAction.divider,
SimpleTableMoreAction.setToPageWidth,
SimpleTableMoreAction.distributeColumnsEvenly,
SimpleTableMoreAction.divider,
SimpleTableMoreAction.duplicate,
SimpleTableMoreAction.clearContents,
SimpleTableMoreAction.delete,
SimpleTableMoreAction.divider,
SimpleTableMoreAction.align,
SimpleTableMoreAction.backgroundColor,
if (rowLength > 1) SimpleTableMoreAction.delete,
];
case SimpleTableMoreActionType.column:
return [
SimpleTableMoreAction.insertLeft,
SimpleTableMoreAction.insertRight,
SimpleTableMoreAction.divider,
if (index == 0) SimpleTableMoreAction.enableHeaderColumn,
SimpleTableMoreAction.backgroundColor,
SimpleTableMoreAction.align,
SimpleTableMoreAction.divider,
SimpleTableMoreAction.setToPageWidth,
SimpleTableMoreAction.divider,
SimpleTableMoreAction.duplicate,
SimpleTableMoreAction.clearContents,
SimpleTableMoreAction.delete,
SimpleTableMoreAction.divider,
SimpleTableMoreAction.align,
SimpleTableMoreAction.backgroundColor,
if (columnLength > 1) SimpleTableMoreAction.delete,
];
}
}
@ -73,6 +85,8 @@ enum SimpleTableMoreAction {
backgroundColor,
enableHeaderColumn,
enableHeaderRow,
setToPageWidth,
distributeColumnsEvenly,
divider;
String get name {
@ -99,6 +113,11 @@ enum SimpleTableMoreAction {
LocaleKeys.document_plugins_simpleTable_moreActions_delete.tr(),
SimpleTableMoreAction.duplicate =>
LocaleKeys.document_plugins_simpleTable_moreActions_duplicate.tr(),
SimpleTableMoreAction.setToPageWidth =>
LocaleKeys.document_plugins_simpleTable_moreActions_setToPageWidth.tr(),
SimpleTableMoreAction.distributeColumnsEvenly => LocaleKeys
.document_plugins_simpleTable_moreActions_distributeColumnsWidth
.tr(),
SimpleTableMoreAction.divider => throw UnimplementedError(),
};
}
@ -112,6 +131,10 @@ enum SimpleTableMoreAction {
SimpleTableMoreAction.duplicate => FlowySvgs.duplicate_s,
SimpleTableMoreAction.clearContents => FlowySvgs.table_clear_content_s,
SimpleTableMoreAction.delete => FlowySvgs.trash_s,
SimpleTableMoreAction.setToPageWidth =>
FlowySvgs.table_set_to_page_width_s,
SimpleTableMoreAction.distributeColumnsEvenly =>
FlowySvgs.table_distribute_columns_evenly_s,
SimpleTableMoreAction.enableHeaderColumn =>
FlowySvgs.table_header_column_s,
SimpleTableMoreAction.enableHeaderRow => FlowySvgs.table_header_row_s,
@ -375,7 +398,12 @@ class _SimpleTableMoreActionListState extends State<SimpleTableMoreActionList> {
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: _buildActions()
children: widget.type
.buildActions(
index: widget.index,
columnLength: widget.tableCellNode.columnLength,
rowLength: widget.tableCellNode.rowLength,
)
.map(
(action) => SimpleTableMoreActionItem(
type: widget.type,
@ -387,34 +415,6 @@ class _SimpleTableMoreActionListState extends State<SimpleTableMoreActionList> {
.toList(),
);
}
List<SimpleTableMoreAction> _buildActions() {
final actions = widget.type.actions;
// if the index is 0, add the divider and enable header action
if (widget.index == 0) {
actions.addAll([
SimpleTableMoreAction.divider,
if (widget.type == SimpleTableMoreActionType.column)
SimpleTableMoreAction.enableHeaderColumn,
if (widget.type == SimpleTableMoreActionType.row)
SimpleTableMoreAction.enableHeaderRow,
]);
}
// if the table only contains one row or one column, remove the delete action
if (widget.tableCellNode.rowLength == 1 &&
widget.type == SimpleTableMoreActionType.row) {
actions.remove(SimpleTableMoreAction.delete);
}
if (widget.tableCellNode.columnLength == 1 &&
widget.type == SimpleTableMoreActionType.column) {
actions.remove(SimpleTableMoreAction.delete);
}
return actions;
}
}
class SimpleTableMoreActionItem extends StatefulWidget {
@ -568,6 +568,10 @@ class _SimpleTableMoreActionItemState extends State<SimpleTableMoreActionItem> {
_duplicateRow();
break;
}
case SimpleTableMoreAction.setToPageWidth:
_setToPageWidth();
case SimpleTableMoreAction.distributeColumnsEvenly:
_distributeColumnsEvenly();
default:
break;
}
@ -575,6 +579,26 @@ class _SimpleTableMoreActionItemState extends State<SimpleTableMoreActionItem> {
PopoverContainer.of(context).close();
}
void _setToPageWidth() {
final value = _getTableAndTableCellAndCellPosition();
if (value == null) {
return;
}
final (table, _, _) = value;
final editorState = context.read<EditorState>();
editorState.setColumnWidthToPageWidth(tableNode: table);
}
void _distributeColumnsEvenly() {
final value = _getTableAndTableCellAndCellPosition();
if (value == null) {
return;
}
final (table, _, _) = value;
final editorState = context.read<EditorState>();
editorState.distributeColumnWidthToPageWidth(tableNode: table);
}
void _duplicateRow() {
final value = _getTableAndTableCellAndCellPosition();
if (value == null) {

10
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_operations/simple_table_node_extension.dart
View File

@ -366,6 +366,16 @@ extension TableNodeExtension on Node {
}
}
double get width {
double currentColumnWidth = 0;
for (var i = 0; i < columnLength; i++) {
final columnWidth =
columnWidths[i.toString()] ?? SimpleTableConstants.defaultColumnWidth;
currentColumnWidth += columnWidth;
}
return currentColumnWidth;
}
/// Get the previous cell in the same column. If the row index is 0, it will return the same cell.
Node? getPreviousCellInSameColumn() {
assert(type == SimpleTableCellBlockKeys.type);

85
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_operations/simple_table_style_operation.dart
View File

@ -233,4 +233,89 @@ extension TableOptionOperation on EditorState {
transaction.updateNode(parentTableNode, attributes);
await apply(transaction);
}
/// Set the column width of the table to the page width.
///
/// Example:
///
/// Before:
/// | 0 | 1 |
/// | 3 | 4 |
///
/// After:
/// | 0 | 1 | <- the column's width will be expanded based on the percentage of the page width
/// | 3 | 4 |
///
/// This function will update the table width.
Future<void> setColumnWidthToPageWidth({
required Node tableNode,
}) async {
// Disable in mobile
if (UniversalPlatform.isMobile) {
return;
}
final columnLength = tableNode.columnLength;
double? pageWidth = tableNode.renderBox?.size.width;
if (pageWidth == null) {
Log.warn('table node render box is null');
return;
}
pageWidth -= SimpleTableConstants.tablePageOffset;
final transaction = this.transaction;
final columnWidths = tableNode.columnWidths;
final ratio = pageWidth / tableNode.width;
for (var i = 0; i < columnLength; i++) {
final columnWidth =
columnWidths[i.toString()] ?? SimpleTableConstants.defaultColumnWidth;
columnWidths[i.toString()] = (columnWidth * ratio).clamp(
SimpleTableConstants.minimumColumnWidth,
double.infinity,
);
}
transaction.updateNode(tableNode, {
SimpleTableBlockKeys.columnWidths: columnWidths,
});
await apply(transaction);
}
/// Distribute the column width of the table to the page width.
///
/// Example:
///
/// Before:
/// Before:
/// | 0 | 1 |
/// | 3 | 4 |
///
/// After:
/// | 0 | 1 | <- the column's width will be expanded based on the percentage of the page width
/// | 3 | 4 |
///
/// This function will not update table width.
Future<void> distributeColumnWidthToPageWidth({
required Node tableNode,
}) async {
// Disable in mobile
if (UniversalPlatform.isMobile) {
return;
}
final columnLength = tableNode.columnLength;
final tableWidth = tableNode.width;
final columnWidth = (tableWidth / columnLength).clamp(
SimpleTableConstants.minimumColumnWidth,
double.infinity,
);
final transaction = this.transaction;
final columnWidths = tableNode.columnWidths;
for (var i = 0; i < columnLength; i++) {
columnWidths[i.toString()] = columnWidth;
}
transaction.updateNode(tableNode, {
SimpleTableBlockKeys.columnWidths: columnWidths,
});
await apply(transaction);
}
}

3
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_row_block_component.dart
View File

@ -1,5 +1,4 @@
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/_shared_widget.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table_constants.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

81
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_widgets/simple_table_align_button.dart Normal file
View File

@ -0,0 +1,81 @@
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class SimpleTableAlignMenu extends StatefulWidget {
const SimpleTableAlignMenu({
super.key,
required this.type,
required this.tableCellNode,
this.mutex,
});
final SimpleTableMoreActionType type;
final Node tableCellNode;
final PopoverMutex? mutex;
@override
State<SimpleTableAlignMenu> createState() => _SimpleTableAlignMenuState();
}
class _SimpleTableAlignMenuState extends State<SimpleTableAlignMenu> {
@override
Widget build(BuildContext context) {
final align = switch (widget.type) {
SimpleTableMoreActionType.column => widget.tableCellNode.columnAlign,
SimpleTableMoreActionType.row => widget.tableCellNode.rowAlign,
};
return AppFlowyPopover(
mutex: widget.mutex,
child: SimpleTableBasicButton(
leftIconSvg: align.leftIconSvg,
text: LocaleKeys.document_plugins_simpleTable_moreActions_align.tr(),
onTap: () {},
),
popupBuilder: (popoverContext) {
void onClose() => PopoverContainer.of(popoverContext).closeAll();
return Column(
mainAxisSize: MainAxisSize.min,
children: [
_buildAlignButton(context, TableAlign.left, onClose),
_buildAlignButton(context, TableAlign.center, onClose),
_buildAlignButton(context, TableAlign.right, onClose),
],
);
},
);
}
Widget _buildAlignButton(
BuildContext context,
TableAlign align,
VoidCallback onClose,
) {
return SimpleTableBasicButton(
leftIconSvg: align.leftIconSvg,
text: align.name,
onTap: () {
switch (widget.type) {
case SimpleTableMoreActionType.column:
context.read<EditorState>().updateColumnAlign(
tableCellNode: widget.tableCellNode,
align: align,
);
break;
case SimpleTableMoreActionType.row:
context.read<EditorState>().updateRowAlign(
tableCellNode: widget.tableCellNode,
align: align,
);
break;
}
onClose();
},
);
}
}

104
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_widgets/simple_table_background_menu.dart Normal file
View File

@ -0,0 +1,104 @@
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class SimpleTableBackgroundColorMenu extends StatefulWidget {
const SimpleTableBackgroundColorMenu({
super.key,
required this.type,
required this.tableCellNode,
this.mutex,
});
final SimpleTableMoreActionType type;
final Node tableCellNode;
final PopoverMutex? mutex;
@override
State<SimpleTableBackgroundColorMenu> createState() =>
_SimpleTableBackgroundColorMenuState();
}
class _SimpleTableBackgroundColorMenuState
extends State<SimpleTableBackgroundColorMenu> {
@override
Widget build(BuildContext context) {
final theme = AFThemeExtension.of(context);
final backgroundColor = switch (widget.type) {
SimpleTableMoreActionType.row =>
widget.tableCellNode.buildRowColor(context),
SimpleTableMoreActionType.column =>
widget.tableCellNode.buildColumnColor(context),
};
return AppFlowyPopover(
mutex: widget.mutex,
popupBuilder: (popoverContext) {
return _buildColorOptionMenu(
context,
theme: theme,
onClose: () => PopoverContainer.of(popoverContext).closeAll(),
);
},
direction: PopoverDirection.rightWithCenterAligned,
child: SimpleTableBasicButton(
leftIconBuilder: (onHover) => ColorOptionIcon(
color: backgroundColor ?? Colors.transparent,
),
text: LocaleKeys.document_plugins_simpleTable_moreActions_color.tr(),
onTap: () {},
),
);
}
Widget _buildColorOptionMenu(
BuildContext context, {
required AFThemeExtension theme,
required VoidCallback onClose,
}) {
final colors = [
// reset to default background color
FlowyColorOption(
color: Colors.transparent,
i18n: LocaleKeys.document_plugins_optionAction_defaultColor.tr(),
id: optionActionColorDefaultColor,
),
...FlowyTint.values.map(
(e) => FlowyColorOption(
color: e.color(context, theme: theme),
i18n: e.tintName(AppFlowyEditorL10n.current),
id: e.id,
),
),
];
return FlowyColorPicker(
colors: colors,
border: Border.all(
color: theme.onBackground,
),
onTap: (option, index) {
switch (widget.type) {
case SimpleTableMoreActionType.column:
context.read<EditorState>().updateColumnBackgroundColor(
tableCellNode: widget.tableCellNode,
color: option.id,
);
break;
case SimpleTableMoreActionType.row:
context.read<EditorState>().updateRowBackgroundColor(
tableCellNode: widget.tableCellNode,
color: option.id,
);
break;
}
onClose();
},
);
}
}

50
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_widgets/simple_table_basic_button.dart Normal file
View File

@ -0,0 +1,50 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
class SimpleTableBasicButton extends StatelessWidget {
const SimpleTableBasicButton({
super.key,
required this.text,
required this.onTap,
this.leftIconSvg,
this.leftIconBuilder,
this.rightIcon,
});
final FlowySvgData? leftIconSvg;
final String text;
final VoidCallback onTap;
final Widget Function(bool onHover)? leftIconBuilder;
final Widget? rightIcon;
@override
Widget build(BuildContext context) {
return Container(
height: SimpleTableConstants.moreActionHeight,
padding: SimpleTableConstants.moreActionPadding,
child: FlowyIconTextButton(
margin: SimpleTableConstants.moreActionHorizontalMargin,
leftIconBuilder: _buildLeftIcon,
iconPadding: 10.0,
textBuilder: (onHover) => FlowyText.regular(
text,
fontSize: 14.0,
figmaLineHeight: 18.0,
),
onTap: onTap,
rightIconBuilder: (onHover) => rightIcon ?? const SizedBox.shrink(),
),
);
}
Widget _buildLeftIcon(bool onHover) {
if (leftIconBuilder != null) {
return leftIconBuilder!(onHover);
}
return leftIconSvg != null
? FlowySvg(leftIconSvg!)
: const SizedBox.shrink();
}
}

28
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_widgets/simple_table_border_builder.dart
View File

@ -185,12 +185,15 @@ class SimpleTableBorderBuilder {
simpleTableContext.isReorderingColumn.value.$2 < node.columnIndex;
return Border(
top: _buildDefaultBorderSide(),
bottom: _buildDefaultBorderSide(),
left:
isLeftSide ? _buildHighlightBorderSide() : _buildDefaultBorderSide(),
top: node.rowIndex == 0
? _buildDefaultBorderSide()
: _buildLightBorderSide(),
bottom: node.rowIndex + 1 == node.parentTableNode?.rowLength
? _buildDefaultBorderSide()
: _buildLightBorderSide(),
left: isLeftSide ? _buildHighlightBorderSide() : _buildLightBorderSide(),
right:
isRightSide ? _buildHighlightBorderSide() : _buildDefaultBorderSide(),
isRightSide ? _buildHighlightBorderSide() : _buildLightBorderSide(),
);
}
@ -216,12 +219,15 @@ class SimpleTableBorderBuilder {
simpleTableContext.isReorderingRow.value.$2 < node.rowIndex;
return Border(
top: isTopSide ? _buildHighlightBorderSide() : _buildDefaultBorderSide(),
bottom: isBottomSide
? _buildHighlightBorderSide()
: _buildDefaultBorderSide(),
left: _buildDefaultBorderSide(),
right: _buildDefaultBorderSide(),
top: isTopSide ? _buildHighlightBorderSide() : _buildLightBorderSide(),
bottom:
isBottomSide ? _buildHighlightBorderSide() : _buildLightBorderSide(),
left: node.columnIndex == 0
? _buildDefaultBorderSide()
: _buildLightBorderSide(),
right: node.columnIndex + 1 == node.parentTableNode?.columnLength
? _buildDefaultBorderSide()
: _buildLightBorderSide(),
);
}

28
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_widgets/simple_table_divider.dart Normal file
View File

@ -0,0 +1,28 @@
import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
import 'package:flutter/material.dart';
class SimpleTableRowDivider extends StatelessWidget {
const SimpleTableRowDivider({
super.key,
});
@override
Widget build(BuildContext context) {
return VerticalDivider(
color: context.simpleTableBorderColor,
width: 1.0,
);
}
}
class SimpleTableColumnDivider extends StatelessWidget {
const SimpleTableColumnDivider({super.key});
@override
Widget build(BuildContext context) {
return Divider(
color: context.simpleTableBorderColor,
height: 1.0,
);
}
}

1
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_widgets/simple_table_reorder_button.dart
View File

@ -1,6 +1,5 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table_widgets/simple_table_widget.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

1
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_widgets/simple_table_widget.dart
View File

@ -1,4 +1,3 @@
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/_shared_widget.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';

11
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_widgets/widgets.dart Normal file
View File

@ -0,0 +1,11 @@
export 'simple_table_add_column_and_row_button.dart';
export 'simple_table_add_column_button.dart';
export 'simple_table_add_row_button.dart';
export 'simple_table_align_button.dart';
export 'simple_table_background_menu.dart';
export 'simple_table_basic_button.dart';
export 'simple_table_border_builder.dart';
export 'simple_table_column_resize_handle.dart';
export 'simple_table_divider.dart';
export 'simple_table_reorder_button.dart';
export 'simple_table_widget.dart';

11
frontend/resources/flowy_icons/16x/table_clear_content.svg
View File

@ -1,4 +1,11 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.77563 11.6528C8.95869 11.8358 9.2555 11.8358 9.43856 11.6528C9.62162 11.4697 9.62162 11.1729 9.43856 10.9898L8.77563 11.6528ZM5.01018 6.56145C4.82713 6.37839 4.53033 6.37839 4.34727 6.56145C4.16421 6.74451 4.16421 7.04131 4.34727 7.22437L5.01018 6.56145ZM11.7279 8.03756L8.03756 11.7279L8.7005 12.3908L12.3908 8.7005L11.7279 8.03756ZM4.27212 7.96244L7.96244 4.27212L7.2995 3.60921L3.60921 7.2995L4.27212 7.96244ZM4.27212 11.7279C3.74086 11.1966 3.37647 10.8308 3.13908 10.5197C2.90995 10.2194 2.84375 10.0257 2.84375 9.84513H1.90625C1.90625 10.3131 2.10099 10.7046 2.39375 11.0884C2.67826 11.4613 3.09669 11.8783 3.60921 12.3908L4.27212 11.7279ZM3.60921 7.2995C3.09669 7.812 2.67826 8.22906 2.39375 8.60194C2.10099 8.98562 1.90625 9.37719 1.90625 9.84513H2.84375C2.84375 9.66456 2.90995 9.47094 3.13908 9.17062C3.37647 8.8595 3.74086 8.49369 4.27212 7.96244L3.60921 7.2995ZM8.03756 11.7279C7.50631 12.2591 7.1405 12.6236 6.82937 12.8609C6.52907 13.0901 6.33541 13.1562 6.15485 13.1562V14.0938C6.62281 14.0938 7.01438 13.899 7.39806 13.6062C7.77094 13.3217 8.188 12.9033 8.7005 12.3908L8.03756 11.7279ZM3.60921 12.3908C4.12173 12.9033 4.53876 13.3217 4.91164 13.6062C5.29535 13.899 5.68689 14.0938 6.15485 14.0938V13.1562C5.97429 13.1562 5.78062 13.0901 5.48031 12.8609C5.16918 12.6236 4.80338 12.2591 4.27212 11.7279L3.60921 12.3908ZM11.7279 4.27212C12.2591 4.80338 12.6236 5.16918 12.8609 5.48031C13.0901 5.78062 13.1562 5.97429 13.1562 6.15485H14.0938C14.0938 5.68689 13.899 5.29535 13.6062 4.91164C13.3217 4.53876 12.9033 4.12173 12.3908 3.60921L11.7279 4.27212ZM12.3908 8.7005C12.9033 8.188 13.3217 7.77094 13.6062 7.39806C13.899 7.01438 14.0938 6.62281 14.0938 6.15485H13.1562C13.1562 6.33541 13.0901 6.52907 12.8609 6.82937C12.6236 7.1405 12.2591 7.50631 11.7279 8.03756L12.3908 8.7005ZM12.3908 3.60921C11.8783 3.09669 11.4613 2.67826 11.0884 2.39375C10.7046 2.10099 10.3131 1.90625 9.84513 1.90625V2.84375C10.0257 2.84375 10.2194 2.90995 10.5197 3.13908C10.8308 3.37647 11.1966 3.74086 11.7279 4.27212L12.3908 3.60921ZM7.96244 4.27212C8.49369 3.74086 8.8595 3.37647 9.17062 3.13908C9.47094 2.90995 9.66456 2.84375 9.84513 2.84375V1.90625C9.37719 1.90625 8.98562 2.10099 8.60194 2.39375C8.22906 2.67826 7.812 3.09669 7.2995 3.60921L7.96244 4.27212ZM9.43856 10.9898L5.01018 6.56145L4.34727 7.22437L8.77563 11.6528L9.43856 10.9898Z" fill="#1F2329"/>
<path d="M6.125 13.625H13.625" stroke="#1F2329" stroke-linecap="round"/>
<g clip-path="url(#clip0_6135_6661)">
<path d="M8.92911 12.376C9.14841 12.5953 9.50398 12.5953 9.72328 12.376C9.94257 12.1567 9.94257 11.8011 9.72328 11.5818L8.92911 12.376ZM4.4183 6.27689C4.19901 6.05759 3.84346 6.05759 3.62417 6.27689C3.40487 6.49619 3.40487 6.85174 3.62417 7.07104L4.4183 6.27689ZM12.4658 8.04519L8.04495 12.466L8.83911 13.2602L13.2599 8.83936L12.4658 8.04519ZM3.53414 7.9552L7.95495 3.53438L7.16079 2.74025L2.74001 7.16103L3.53414 7.9552ZM3.53414 12.466C2.89772 11.8296 2.4612 11.3914 2.17682 11.0187C1.90233 10.6589 1.82303 10.4269 1.82303 10.2106H0.699951C0.699951 10.7712 0.933244 11.2402 1.28395 11.6999C1.62477 12.1466 2.12603 12.6461 2.74001 13.2602L3.53414 12.466ZM2.74001 7.16103C2.12603 7.77498 1.62477 8.2746 1.28395 8.72129C0.933244 9.18092 0.699951 9.65 0.699951 10.2106H1.82303C1.82303 9.99426 1.90233 9.7623 2.17682 9.40254C2.4612 9.02983 2.89772 8.59161 3.53414 7.9552L2.74001 7.16103ZM8.04495 12.466C7.40854 13.1024 6.97031 13.539 6.5976 13.8233C6.23785 14.0978 6.00585 14.1771 5.78956 14.1771V15.3002C6.35014 15.3002 6.81922 15.0669 7.27886 14.7162C7.72555 14.3754 8.22517 13.8741 8.83911 13.2602L8.04495 12.466ZM2.74001 13.2602C3.35398 13.8741 3.85356 14.3754 4.30026 14.7162C4.75992 15.0669 5.22896 15.3002 5.78956 15.3002V14.1771C5.57325 14.1771 5.34125 14.0978 4.98149 13.8233C4.60878 13.539 4.17057 13.1024 3.53414 12.466L2.74001 13.2602ZM12.4658 3.53438C13.1022 4.17081 13.5387 4.60902 13.8231 4.98174C14.0976 5.3415 14.1769 5.5735 14.1769 5.7898H15.3C15.3 5.22921 15.0667 4.76016 14.716 4.3005C14.3751 3.8538 13.8739 3.35422 13.2599 2.74025L12.4658 3.53438ZM13.2599 8.83936C13.8739 8.22541 14.3751 7.72579 14.716 7.27911C15.0667 6.81947 15.3 6.35039 15.3 5.7898H14.1769C14.1769 6.0061 14.0976 6.23809 13.8231 6.59785C13.5387 6.97056 13.1022 7.40878 12.4658 8.04519L13.2599 8.83936ZM13.2599 2.74025C12.6459 2.12628 12.1464 1.62502 11.6997 1.2842C11.24 0.933488 10.771 0.700195 10.2103 0.700195V1.82327C10.4266 1.82327 10.6586 1.90258 11.0184 2.17706C11.3911 2.46144 11.8293 2.89797 12.4658 3.53438L13.2599 2.74025ZM7.95495 3.53438C8.59136 2.89797 9.02959 2.46144 9.4023 2.17706C9.76206 1.90258 9.99401 1.82327 10.2103 1.82327V0.700195C9.64975 0.700195 9.18068 0.933488 8.72104 1.2842C8.27436 1.62502 7.77474 2.12628 7.16079 2.74025L7.95495 3.53438ZM9.72328 11.5818L4.4183 6.27689L3.62417 7.07104L8.92911 12.376L9.72328 11.5818Z" fill="#171717"/>
<path d="M5.7677 14.7979H14.8092" stroke="#171717" stroke-linecap="round"/>
</g>
<defs>
<clipPath id="clip0_6135_6661">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

9
frontend/resources/flowy_icons/16x/table_distribute_columns_evenly.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_6139_6635)">
<rect width="16" height="16"/>
<path d="M1.33325 1.33301L1.33325 14.6663" stroke="#1F2329" stroke-linecap="round"/>
<path d="M14.6667 1.33301L14.6667 14.6663" stroke="#1F2329" stroke-linecap="round"/>
<rect x="4.33569" y="3.66699" width="3.66423" height="8.66667" stroke="#1F2329" stroke-linejoin="round"/>
<rect x="8" y="3.66699" width="3.66667" height="8.66667" stroke="#1F2329" stroke-linejoin="round"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 553 B

5
frontend/resources/flowy_icons/16x/table_insert_above.svg
View File

@ -1,3 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.58413 8.96704V13.6593C2.58413 13.7342 2.60816 13.7957 2.65621 13.8437C2.70427 13.8918 2.76572 13.9158 2.84059 13.9158H13.1593C13.2342 13.9158 13.2957 13.8918 13.3437 13.8437C13.3918 13.7957 13.4158 13.7342 13.4158 13.6593V8.96704H2.58413ZM2.84059 14.915C2.49531 14.915 2.19968 14.792 1.95371 14.5462C1.70788 14.3002 1.58496 14.0046 1.58496 13.6593V3.34059C1.58496 2.99531 1.70753 2.69968 1.95267 2.45371C2.19781 2.20788 2.49253 2.08496 2.83684 2.08496H3.66913C3.80663 2.08496 3.92552 2.13378 4.02579 2.23142C4.12607 2.32906 4.17621 2.44475 4.17621 2.5785C4.17621 2.71531 4.12711 2.83378 4.02892 2.93392C3.93073 3.03406 3.81267 3.08413 3.67475 3.08413H2.84059C2.76572 3.08413 2.70427 3.10816 2.65621 3.15621C2.60816 3.20427 2.58413 3.26572 2.58413 3.34059V7.96788H13.4158V3.34059C13.4158 3.26572 13.3918 3.20427 13.3437 3.15621C13.2957 3.10816 13.2342 3.08413 13.1593 3.08413H12.3298C12.1929 3.08413 12.0751 3.0351 11.9762 2.93704C11.8772 2.83913 11.8277 2.72302 11.8277 2.58871C11.8277 2.45441 11.8763 2.33684 11.9737 2.236C12.0709 2.13531 12.1888 2.08496 12.3275 2.08496H13.1639C13.5103 2.08496 13.8054 2.20788 14.0493 2.45371C14.2931 2.69968 14.415 2.99531 14.415 3.34059V13.6593C14.415 14.0046 14.292 14.3002 14.0462 14.5462C13.8002 14.792 13.5046 14.915 13.1593 14.915H2.84059ZM7.50246 3.08413H6.24996C6.11204 3.08413 5.99461 3.0351 5.89767 2.93704C5.80086 2.83913 5.75246 2.72302 5.75246 2.58871C5.75246 2.45441 5.80086 2.33684 5.89767 2.236C5.99461 2.13531 6.11204 2.08496 6.24996 2.08496H7.50246V0.832461C7.50246 0.6976 7.55045 0.580932 7.64642 0.48246C7.74253 0.384127 7.85899 0.334961 7.99579 0.334961C8.1326 0.334961 8.25107 0.384127 8.35121 0.48246C8.45149 0.580932 8.50163 0.6976 8.50163 0.832461V2.08496H9.74996C9.88788 2.08496 10.006 2.13378 10.1043 2.23142C10.2025 2.32906 10.2516 2.44475 10.2516 2.5785C10.2516 2.71531 10.2025 2.83378 10.1043 2.93392C10.006 3.03406 9.88788 3.08413 9.74996 3.08413H8.50163V4.33246C8.50163 4.47052 8.45288 4.58864 8.35538 4.68684C8.25802 4.78503 8.14093 4.83413 8.00413 4.83413C7.86732 4.83413 7.74948 4.78503 7.65059 4.68684C7.55184 4.58864 7.50246 4.47052 7.50246 4.33246V3.08413Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 8.375C1.68934 8.375 1.4375 8.62684 1.4375 8.9375L1.4375 12.6875C1.4375 14.2408 2.6967 15.5 4.25 15.5H11.75C13.3033 15.5 14.5625 14.2408 14.5625 12.6875V8.9375C14.5625 8.62684 14.3107 8.375 14 8.375H2ZM2.5625 9.5H13.4375V12.6875C13.4375 13.6195 12.682 14.375 11.75 14.375H4.25C3.31802 14.375 2.5625 13.6195 2.5625 12.6875L2.5625 9.5Z" fill="#171717"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.1925 8.9375C9.1925 8.62684 8.94066 8.375 8.63 8.375H2.5625L2.5625 4.46603C2.5625 3.9325 2.995 3.5 3.52853 3.5C3.83919 3.5 4.09103 3.24816 4.09103 2.9375C4.09103 2.62684 3.83919 2.375 3.52853 2.375C2.37368 2.375 1.4375 3.31118 1.4375 4.46603L1.4375 8.9375C1.4375 9.24816 1.68934 9.5 2 9.5H8.63C8.94066 9.5 9.1925 9.24816 9.1925 8.9375Z" fill="#171717"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.8075 8.9375C6.8075 9.24816 7.05934 9.5 7.37 9.5H14C14.3107 9.5 14.5625 9.24816 14.5625 8.9375V4.46603C14.5625 3.31118 13.6263 2.375 12.4715 2.375C12.1608 2.375 11.909 2.62684 11.909 2.9375C11.909 3.24816 12.1608 3.5 12.4715 3.5C13.005 3.5 13.4375 3.9325 13.4375 4.46603V8.375H7.37C7.05934 8.375 6.8075 8.62684 6.8075 8.9375Z" fill="#171717"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5625 2.9375C5.5625 3.24816 5.81434 3.5 6.125 3.5H7.4375V4.8125C7.4375 5.12316 7.68934 5.375 8 5.375C8.31066 5.375 8.5625 5.12316 8.5625 4.8125V3.5H9.875C10.1857 3.5 10.4375 3.24816 10.4375 2.9375C10.4375 2.62684 10.1857 2.375 9.875 2.375H8.5625V1.0625C8.5625 0.75184 8.31066 0.5 8 0.5C7.68934 0.5 7.4375 0.75184 7.4375 1.0625V2.375L6.125 2.375C5.81434 2.375 5.5625 2.62684 5.5625 2.9375Z" fill="#171717"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

5
frontend/resources/flowy_icons/16x/table_insert_below.svg
View File

@ -1,3 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4158 7.03288V2.34059C13.4158 2.26572 13.3918 2.20427 13.3437 2.15621C13.2957 2.10816 13.2342 2.08413 13.1593 2.08413H2.84059C2.76572 2.08413 2.70427 2.10816 2.65621 2.15621C2.60816 2.20427 2.58413 2.26572 2.58413 2.34059V7.03288H13.4158ZM2.836 13.915C2.48961 13.915 2.19447 13.792 1.95059 13.5462C1.70684 13.3002 1.58496 13.0046 1.58496 12.6593V2.34059C1.58496 1.99531 1.70788 1.69968 1.95371 1.45371C2.19968 1.20788 2.49531 1.08496 2.84059 1.08496H13.1593C13.5046 1.08496 13.8002 1.20788 14.0462 1.45371C14.292 1.69968 14.415 1.99531 14.415 2.34059V12.6593C14.415 13.0046 14.2924 13.3002 14.0473 13.5462C13.8021 13.792 13.5074 13.915 13.1631 13.915H12.3308C12.1933 13.915 12.0751 13.866 11.9762 13.7681C11.8772 13.67 11.8277 13.5539 11.8277 13.4195C11.8277 13.2852 11.8761 13.1677 11.9731 13.067C12.0699 12.9662 12.1873 12.9158 12.3252 12.9158H13.1593C13.2342 12.9158 13.2957 12.8918 13.3437 12.8437C13.3918 12.7957 13.4158 12.7342 13.4158 12.6593V8.03204H2.58413V12.6593C2.58413 12.7342 2.60816 12.7957 2.65621 12.8437C2.70427 12.8918 2.76572 12.9158 2.84059 12.9158H3.67017C3.80698 12.9158 3.92552 12.9646 4.02579 13.0623C4.12607 13.1599 4.17621 13.2756 4.17621 13.4093C4.17621 13.5461 4.12691 13.6646 4.02829 13.7648C3.92968 13.8649 3.81107 13.915 3.67246 13.915H2.836ZM8.00413 15.665C7.86732 15.665 7.74948 15.6159 7.65059 15.5177C7.55184 15.4195 7.50246 15.3014 7.50246 15.1635V13.915H6.24996C6.11204 13.915 5.99461 13.866 5.89767 13.7681C5.80086 13.67 5.75246 13.5539 5.75246 13.4195C5.75246 13.2852 5.80086 13.1677 5.89767 13.067C5.99461 12.9662 6.11204 12.9158 6.24996 12.9158H7.50246V11.6635C7.50246 11.5285 7.55045 11.4118 7.64642 11.3135C7.74253 11.215 7.85899 11.1658 7.99579 11.1658C8.1326 11.1658 8.25107 11.215 8.35121 11.3135C8.45149 11.4118 8.50163 11.5285 8.50163 11.6635V12.9158H9.74996C9.88788 12.9158 10.006 12.9646 10.1043 13.0623C10.2025 13.1599 10.2516 13.2756 10.2516 13.4093C10.2516 13.5461 10.2025 13.6646 10.1043 13.7648C10.006 13.8649 9.88788 13.915 9.74996 13.915H8.50163V15.1635C8.50163 15.3014 8.45288 15.4195 8.35538 15.5177C8.25802 15.6159 8.14093 15.665 8.00413 15.665Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 7.625C1.68934 7.625 1.4375 7.37316 1.4375 7.0625L1.4375 3.3125C1.4375 1.7592 2.6967 0.5 4.25 0.5H11.75C13.3033 0.5 14.5625 1.7592 14.5625 3.3125V7.0625C14.5625 7.37316 14.3107 7.625 14 7.625L2 7.625ZM2.5625 6.5H13.4375V3.3125C13.4375 2.38052 12.682 1.625 11.75 1.625H4.25C3.31802 1.625 2.5625 2.38052 2.5625 3.3125L2.5625 6.5Z" fill="#171717"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.1925 7.0625C9.1925 7.37316 8.94066 7.625 8.63 7.625H2.5625L2.5625 11.534C2.5625 12.0675 2.995 12.5 3.52853 12.5C3.83919 12.5 4.09103 12.7518 4.09103 13.0625C4.09103 13.3732 3.83919 13.625 3.52853 13.625C2.37368 13.625 1.4375 12.6888 1.4375 11.534L1.4375 7.0625C1.4375 6.75184 1.68934 6.5 2 6.5H8.63C8.94066 6.5 9.1925 6.75184 9.1925 7.0625Z" fill="#171717"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.8075 7.0625C6.8075 6.75184 7.05934 6.5 7.37 6.5H14C14.3107 6.5 14.5625 6.75184 14.5625 7.0625V11.534C14.5625 12.6888 13.6263 13.625 12.4715 13.625C12.1608 13.625 11.909 13.3732 11.909 13.0625C11.909 12.7518 12.1608 12.5 12.4715 12.5C13.005 12.5 13.4375 12.0675 13.4375 11.534V7.625L7.37 7.625C7.05934 7.625 6.8075 7.37316 6.8075 7.0625Z" fill="#171717"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5625 13.0625C5.5625 12.7518 5.81434 12.5 6.125 12.5H7.4375V11.1875C7.4375 10.8768 7.68934 10.625 8 10.625C8.31066 10.625 8.5625 10.8768 8.5625 11.1875V12.5H9.875C10.1857 12.5 10.4375 12.7518 10.4375 13.0625C10.4375 13.3732 10.1857 13.625 9.875 13.625H8.5625V14.9375C8.5625 15.2482 8.31066 15.5 8 15.5C7.68934 15.5 7.4375 15.2482 7.4375 14.9375V13.625H6.125C5.81434 13.625 5.5625 13.3732 5.5625 13.0625Z" fill="#171717"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

7
frontend/resources/flowy_icons/16x/table_insert_left.svg
View File

@ -1,3 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.96709 13.4158H13.6594C13.7342 13.4158 13.7957 13.3918 13.8438 13.3437C13.8918 13.2957 13.9158 13.2342 13.9158 13.1593V2.84059C13.9158 2.76572 13.8918 2.70427 13.8438 2.65621C13.7957 2.60816 13.7342 2.58413 13.6594 2.58413H8.96709V13.4158ZM3.34063 14.415C2.99535 14.415 2.69973 14.2924 2.45376 14.0473C2.20792 13.8021 2.08501 13.5074 2.08501 13.1631V12.3308C2.08501 12.1933 2.13369 12.0744 2.23105 11.9741C2.32855 11.8738 2.44501 11.8237 2.58042 11.8237C2.71598 11.8237 2.83383 11.8728 2.93397 11.971C3.0341 12.0692 3.08417 12.1873 3.08417 12.3252V13.1593C3.08417 13.2342 3.1082 13.2957 3.15626 13.3437C3.20431 13.3918 3.26577 13.4158 3.34063 13.4158H7.96792V2.58413H3.34063C3.26577 2.58413 3.20431 2.60816 3.15626 2.65621C3.1082 2.70427 3.08417 2.76572 3.08417 2.84059V3.67017C3.08417 3.80697 3.03515 3.92482 2.93709 4.02371C2.83917 4.12274 2.72306 4.17225 2.58876 4.17225C2.45445 4.17225 2.33688 4.12357 2.23605 4.02621C2.13535 3.92899 2.08501 3.81107 2.08501 3.67246V2.836C2.08501 2.48961 2.20792 2.19447 2.45376 1.95059C2.69973 1.70684 2.99535 1.58496 3.34063 1.58496H13.6594C14.0047 1.58496 14.3003 1.70788 14.5463 1.95371C14.7921 2.19968 14.915 2.49531 14.915 2.84059V13.1593C14.915 13.5046 14.7921 13.8002 14.5463 14.0462C14.3003 14.292 14.0047 14.415 13.6594 14.415H3.34063ZM2.58876 10.2475C2.45445 10.2475 2.33688 10.1991 2.23605 10.1023C2.13535 10.0053 2.08501 9.88788 2.08501 9.74996V8.49746H0.836465C0.698548 8.49746 0.580493 8.44947 0.482298 8.3535C0.384104 8.25739 0.335007 8.14093 0.335007 8.00413C0.335007 7.86732 0.384104 7.74885 0.482298 7.64871C0.580493 7.54843 0.698548 7.49829 0.836465 7.49829H2.08501V6.24996C2.08501 6.11204 2.13369 5.99392 2.23105 5.89559C2.32855 5.79739 2.44501 5.74829 2.58042 5.74829C2.71598 5.74829 2.83383 5.79739 2.93397 5.89559C3.0341 5.99392 3.08417 6.11204 3.08417 6.24996V7.49829H4.33646C4.47147 7.49829 4.58813 7.54704 4.68647 7.64454C4.78494 7.74191 4.83417 7.85899 4.83417 7.99579C4.83417 8.1326 4.78494 8.25045 4.68647 8.34934C4.58813 8.44809 4.47147 8.49746 4.33646 8.49746H3.08417V9.74996C3.08417 9.88788 3.03515 10.0053 2.93709 10.1023C2.83917 10.1991 2.72306 10.2475 2.58876 10.2475Z" fill="black"/>
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.875 2C8.875 1.68934 9.12684 1.4375 9.4375 1.4375H13.1875C14.7408 1.4375 16 2.6967 16 4.25V11.75C16 13.3033 14.7408 14.5625 13.1875 14.5625H9.4375C9.12684 14.5625 8.875 14.3107 8.875 14V2ZM10 2.5625V13.4375H13.1875C14.1195 13.4375 14.875 12.682 14.875 11.75V4.25C14.875 3.31802 14.1195 2.5625 13.1875 2.5625H10Z" fill="#171717"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.4375 9.1925C9.12684 9.1925 8.875 8.94066 8.875 8.63V2.5625H4.96603C4.4325 2.5625 4 2.995 4 3.52853C4 3.83919 3.74816 4.09103 3.4375 4.09103C3.12684 4.09103 2.875 3.83919 2.875 3.52853C2.875 2.37368 3.81118 1.4375 4.96603 1.4375H9.4375C9.74816 1.4375 10 1.68934 10 2V8.63C10 8.94066 9.74816 9.1925 9.4375 9.1925Z" fill="#171717"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.4375 6.8075C9.74816 6.8075 10 7.05934 10 7.37V14C10 14.3107 9.74816 14.5625 9.4375 14.5625H4.96603C3.81118 14.5625 2.875 13.6263 2.875 12.4715C2.875 12.1608 3.12684 11.909 3.4375 11.909C3.74816 11.909 4 12.1608 4 12.4715C4 13.005 4.4325 13.4375 4.96603 13.4375H8.875V7.37C8.875 7.05934 9.12684 6.8075 9.4375 6.8075Z" fill="#171717"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.4375 5.5625C3.74816 5.5625 4 5.81434 4 6.125V7.4375H5.3125C5.62316 7.4375 5.875 7.68934 5.875 8C5.875 8.31066 5.62316 8.5625 5.3125 8.5625H4V9.875C4 10.1857 3.74816 10.4375 3.4375 10.4375C3.12684 10.4375 2.875 10.1857 2.875 9.875V8.5625H1.5625C1.25184 8.5625 1 8.31066 1 8C1 7.68934 1.25184 7.4375 1.5625 7.4375H2.875V6.125C2.875 5.81434 3.12684 5.5625 3.4375 5.5625Z" fill="#171717"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

7
frontend/resources/flowy_icons/16x/table_insert_right.svg
View File

@ -1,3 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.03292 2.58413H2.34063C2.26577 2.58413 2.20431 2.60816 2.15626 2.65621C2.1082 2.70427 2.08417 2.76572 2.08417 2.84059V13.1593C2.08417 13.2342 2.1082 13.2957 2.15626 13.3437C2.20431 13.3918 2.26577 13.4158 2.34063 13.4158H7.03292V2.58413ZM2.34063 14.415C1.99535 14.415 1.69973 14.292 1.45376 14.0462C1.20792 13.8002 1.08501 13.5046 1.08501 13.1593V2.84059C1.08501 2.49531 1.20792 2.19968 1.45376 1.95371C1.69973 1.70788 1.99535 1.58496 2.34063 1.58496H12.6594C13.0047 1.58496 13.3003 1.70753 13.5463 1.95267C13.7921 2.19781 13.915 2.49253 13.915 2.83684V3.66913C13.915 3.80663 13.866 3.92482 13.7681 4.02371C13.6701 4.12274 13.5539 4.17225 13.4196 4.17225C13.2853 4.17225 13.1678 4.12378 13.0671 4.02684C12.9663 3.93003 12.9158 3.81267 12.9158 3.67475V2.84059C12.9158 2.76572 12.8918 2.70427 12.8438 2.65621C12.7957 2.60816 12.7342 2.58413 12.6594 2.58413H8.03209V13.4158H12.6594C12.7342 13.4158 12.7957 13.3918 12.8438 13.3437C12.8918 13.2957 12.9158 13.2342 12.9158 13.1593V12.3298C12.9158 12.1929 12.9646 12.0744 13.0621 11.9741C13.1595 11.8738 13.2758 11.8237 13.4113 11.8237C13.5468 11.8237 13.6647 11.873 13.7648 11.9716C13.8649 12.0702 13.915 12.1889 13.915 12.3275V13.1639C13.915 13.5103 13.7921 13.8054 13.5463 14.0493C13.3003 14.2931 13.0047 14.415 12.6594 14.415H2.34063ZM13.4196 10.2475C13.2853 10.2475 13.1678 10.1991 13.0671 10.1023C12.9663 10.0053 12.9158 9.88788 12.9158 9.74996V8.49746H11.6675C11.5295 8.49746 11.4113 8.44947 11.3131 8.3535C11.2149 8.25739 11.1658 8.14093 11.1658 8.00413C11.1658 7.86732 11.2149 7.74885 11.3131 7.64871C11.4113 7.54843 11.5295 7.49829 11.6675 7.49829H12.9158V6.24996C12.9158 6.11204 12.9646 5.99392 13.0621 5.89559C13.1595 5.79739 13.2758 5.74829 13.4113 5.74829C13.5468 5.74829 13.6647 5.79739 13.7648 5.89559C13.8649 5.99392 13.915 6.11204 13.915 6.24996V7.49829H15.1675C15.3024 7.49829 15.419 7.54704 15.5175 7.64454C15.6158 7.74191 15.665 7.85899 15.665 7.99579C15.665 8.1326 15.6158 8.25045 15.5175 8.34934C15.419 8.44809 15.3024 8.49746 15.1675 8.49746H13.915V9.74996C13.915 9.88788 13.866 10.0053 13.7681 10.1023C13.6701 10.1991 13.5539 10.2475 13.4196 10.2475Z" fill="black"/>
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.125 2C8.125 1.68934 7.87316 1.4375 7.5625 1.4375H3.8125C2.2592 1.4375 1 2.6967 1 4.25V11.75C1 13.3033 2.2592 14.5625 3.8125 14.5625H7.5625C7.87316 14.5625 8.125 14.3107 8.125 14V2ZM7 2.5625V13.4375H3.8125C2.88052 13.4375 2.125 12.682 2.125 11.75V4.25C2.125 3.31802 2.88052 2.5625 3.8125 2.5625H7Z" fill="#171717"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5625 9.1925C7.87316 9.1925 8.125 8.94066 8.125 8.63V2.5625H12.034C12.5675 2.5625 13 2.995 13 3.52853C13 3.83919 13.2518 4.09103 13.5625 4.09103C13.8732 4.09103 14.125 3.83919 14.125 3.52853C14.125 2.37368 13.1888 1.4375 12.034 1.4375H7.5625C7.25184 1.4375 7 1.68934 7 2V8.63C7 8.94066 7.25184 9.1925 7.5625 9.1925Z" fill="#171717"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5625 6.8075C7.25184 6.8075 7 7.05934 7 7.37V14C7 14.3107 7.25184 14.5625 7.5625 14.5625H12.034C13.1888 14.5625 14.125 13.6263 14.125 12.4715C14.125 12.1608 13.8732 11.909 13.5625 11.909C13.2518 11.909 13 12.1608 13 12.4715C13 13.005 12.5675 13.4375 12.034 13.4375H8.125V7.37C8.125 7.05934 7.87316 6.8075 7.5625 6.8075Z" fill="#171717"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5625 5.5625C13.2518 5.5625 13 5.81434 13 6.125V7.4375H11.6875C11.3768 7.4375 11.125 7.68934 11.125 8C11.125 8.31066 11.3768 8.5625 11.6875 8.5625H13V9.875C13 10.1857 13.2518 10.4375 13.5625 10.4375C13.8732 10.4375 14.125 10.1857 14.125 9.875V8.5625H15.4375C15.7482 8.5625 16 8.31066 16 8C16 7.68934 15.7482 7.4375 15.4375 7.4375H14.125V6.125C14.125 5.81434 13.8732 5.5625 13.5625 5.5625Z" fill="#171717"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

3
frontend/resources/flowy_icons/16x/table_set_to_page_width.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 8.00033L5 5.33366M2 8.00033L5 10.667M2 8.00033H14M14 8.00033L11 5.33366M14 8.00033L11 10.667" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 275 B

6
frontend/resources/translations/en.json
View File

@ -1725,7 +1725,9 @@
"insertBelow": "Insert below",
"headerColumn": "Header column",
"headerRow": "Header row",
"clearContents": "Clear contents"
"clearContents": "Clear contents",
"setToPageWidth": "Set to page width",
"distributeColumnsWidth": "Distribute columns evenly"
},
"clickToAddNewRow": "Click to add a new row",
"clickToAddNewColumn": "Click to add a new column",
@ -2906,4 +2908,4 @@
"permissionDenied": "No permission to open this file",
"unknownError": "File open failed"
}
}
}