Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: enable direction for card title, group column header #5429

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat: enable direction for card title, group column header #5429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7d76b24
feat: enable direction for card title, group column header
zoli May 28, 2024
23ea1be
build: updated appflowy_editor to use latest
zoli May 29, 2024
daa550f
style: merge main resolve conflict
zoli Jun 21, 2024
1e7f385
style: Merge branch 'main' into feat/board-text-direction
zoli Jul 14, 2024
4dd1684
style: Merge branch 'main' into feat/board-text-direction
zoli Jul 22, 2024
e9951c7
style: merge main
zoli Sep 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 92 additions & 0 deletions frontend/appflowy_flutter/integration_test/desktop/board/board_row_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
import 'dart:ui' as ui;

import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/database/application/cell/bloc/text_cell_bloc.dart';
import 'package:appflowy/plugins/database/widgets/card/card.dart';
import 'package:appflowy/plugins/database/widgets/cell/editable_cell_skeleton/text.dart';
import 'package:appflowy/plugins/database/widgets/row/row_banner.dart';
import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
import 'package:appflowy_board/appflowy_board.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';
Expand Down Expand Up @@ -101,5 +108,90 @@ void main() {
await tester.pumpAndSettle();
tester.assertNewGroupTextField(false);
});

testWidgets('auto direction card title', (tester) async {
const card1Name = 'Card 1';
await tester.initializeAppFlowy();
await tester.tapAnonymousSignInButton();
await tester.setDefaultTextDirection(AppFlowyTextDirection.auto);

await tester.createNewPageWithNameUnderParent(layout: ViewLayoutPB.Board);
final card1 = find.ancestor(
of: find.text(card1Name),
matching: find.byType(RowCard),
);

await tester.tap(card1);
await tester.pumpAndSettle();

var cardTitleTextField = find.descendant(
of: find.byType(RowBanner),
matching: find.byWidgetPredicate(
(w) => w is TextField && w.controller?.text == card1Name,
),
);
expect(cardTitleTextField, findsOne);
var cardTitleTextFieldWidget =
tester.widget(cardTitleTextField) as TextField;

await tester.tap(cardTitleTextField);
await tester.ctrlABackspace();
expect(cardTitleTextFieldWidget.textDirection, ui.TextDirection.ltr);

cardTitleTextField = find.descendant(
of: find.byType(RowBanner),
matching: find.byType(TextField),
matchRoot: true,
);
await tester.enterText(cardTitleTextField, "کارت ۱");
var editableTextCell = find.descendant(
of: find.byType(RowBanner),
matching: find.byType(EditableTextCell),
matchRoot: true,
);
var editableTextCellState =
tester.state(editableTextCell) as EditableTextCellState;
editableTextCellState.cellBloc.add(
const TextCellEvent.didReceiveCellUpdate("کارت ۱"),
);
await tester.pumpAndSettle();

cardTitleTextFieldWidget = tester.widget<TextField>(
find.descendant(
of: find.byType(RowBanner),
matching: find.byType(TextField),
matchRoot: true,
),
);
expect(cardTitleTextFieldWidget.textDirection, ui.TextDirection.rtl);

await tester.ctrlABackspace();
cardTitleTextField = find.descendant(
of: find.byType(RowBanner),
matching: find.byType(TextField),
matchRoot: true,
);
await tester.enterText(cardTitleTextField, card1Name);
editableTextCell = find.descendant(
of: find.byType(RowBanner),
matching: find.byType(EditableTextCell),
matchRoot: true,
);
editableTextCellState =
tester.state(editableTextCell) as EditableTextCellState;
editableTextCellState.cellBloc.add(
const TextCellEvent.didReceiveCellUpdate(card1Name),
);
await tester.pumpAndSettle();

cardTitleTextFieldWidget = tester.widget<TextField>(
find.descendant(
of: find.byType(RowBanner),
matching: find.byType(TextField),
matchRoot: true,
),
);
expect(cardTitleTextFieldWidget.textDirection, ui.TextDirection.ltr);
});
});
}
9 changes: 9 additions & 0 deletions frontend/appflowy_flutter/integration_test/shared/common_operations.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -607,6 +607,15 @@ extension CommonOperations on WidgetTester {
await tap(button);
await pump();
}

Future<void> ctrlABackspace() async {
await simulateKeyEvent(
LogicalKeyboardKey.keyA,
isControlPressed: Platform.isWindows || Platform.isLinux,
isMetaPressed: Platform.isMacOS,
);
await simulateKeyEvent(LogicalKeyboardKey.backspace);
}
}

extension SettingsFinder on CommonFinders {
Expand Down
36 changes: 36 additions & 0 deletions frontend/appflowy_flutter/integration_test/shared/settings.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
import 'package:appflowy/workspace/application/settings/prelude.dart';
import 'package:appflowy/workspace/presentation/home/menu/sidebar/shared/sidebar_setting.dart';
import 'package:appflowy/workspace/presentation/settings/pages/account/account_user_profile.dart';
Expand Down Expand Up @@ -113,6 +114,41 @@ extension AppFlowySettings on WidgetTester {

await tap(switcher);

// tap anywhere to close the settings page
await tapAt(Offset.zero);
await pumpAndSettle();
}

// go to settings page and set default text direction
Future<void> setDefaultTextDirection(
AppFlowyTextDirection textDirection,
) async {
String directionText =
LocaleKeys.settings_workspacePage_textDirection_leftToRight.tr();
if (textDirection == AppFlowyTextDirection.rtl) {
directionText =
LocaleKeys.settings_workspacePage_textDirection_rightToLeft.tr();
} else if (textDirection == AppFlowyTextDirection.auto) {
directionText = LocaleKeys.settings_workspacePage_textDirection_auto.tr();
}

await openSettings();
await openSettingsPage(SettingsPage.workspace);

final scrollable = find.findSettingsScrollable();
await scrollUntilVisible(
find.byType(TextDirectionSelect),
0,
scrollable: scrollable,
);

final directionRadio = find.descendant(
of: find.byType(TextDirectionSelect),
matching: find.text(directionText),
);

await tap(directionRadio);

// tap anywhere to close the settings page
await tapAt(Offset.zero);
await pumpAndSettle();
Expand Down
88 changes: 52 additions & 36 deletions ...appflowy_flutter/lib/plugins/database/board/presentation/widgets/board_column_header.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

Expand All @@ -7,6 +8,7 @@ import 'package:appflowy/plugins/database/board/application/board_bloc.dart';
import 'package:appflowy/plugins/database/board/application/column_header_bloc.dart';
import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
import 'package:appflowy/plugins/database/grid/presentation/widgets/header/field_type_extension.dart';
import 'package:appflowy/util/text_direction.dart';
import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
import 'package:appflowy_board/appflowy_board.dart';
Expand Down Expand Up @@ -61,6 +63,8 @@ class _BoardColumnHeaderState extends State<BoardColumnHeader> {
super.dispose();
}

ui.TextDirection? lastDirection;

@override
Widget build(BuildContext context) {
final boardCustomData = widget.groupData.customData as GroupData;
Expand All @@ -76,10 +80,17 @@ class _BoardColumnHeaderState extends State<BoardColumnHeader> {
});
}

lastDirection = getTextDirectionBaseOnContext(
context,
widget.groupData.headerData.groupName,
lastDirection: lastDirection,
);

Widget title = Expanded(
child: FlowyText.medium(
state.groupName,
overflow: TextOverflow.ellipsis,
textDirection: lastDirection,
),
);

Expand All @@ -98,6 +109,7 @@ class _BoardColumnHeaderState extends State<BoardColumnHeader> {
child: FlowyText.medium(
state.groupName,
overflow: TextOverflow.ellipsis,
textDirection: lastDirection,
),
),
),
Expand Down Expand Up @@ -150,45 +162,49 @@ class _BoardColumnHeaderState extends State<BoardColumnHeader> {
}

Widget _buildTextField(BuildContext context) {
return Expanded(
child: KeyboardListener(
focusNode: _keyboardListenerFocusNode,
onKeyEvent: (event) {
if ([LogicalKeyboardKey.enter, LogicalKeyboardKey.escape]
.contains(event.logicalKey)) {
_saveEdit();
}
},
child: TextField(
controller: _controller,
focusNode: _focusNode,
onEditingComplete: _saveEdit,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(fontSize: 14),
decoration: InputDecoration(
filled: true,
fillColor: Theme.of(context).colorScheme.surface,
hoverColor: Colors.transparent,
contentPadding:
const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).colorScheme.primary,
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).colorScheme.primary,
),
),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).colorScheme.primary,
return ValueListenableBuilder(
valueListenable: _controller,
builder: (context, TextEditingValue value, __) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using _ (single underscore).

lastDirection = getTextDirectionBaseOnContext(
context,
_controller.text,
lastDirection: lastDirection,
);

return Expanded(
child: KeyboardListener(
focusNode: _keyboardListenerFocusNode,
onKeyEvent: (event) {
if ([LogicalKeyboardKey.enter, LogicalKeyboardKey.escape]
.contains(event.logicalKey)) {
_saveEdit();
}
},
child: TextField(
controller: _controller,
focusNode: _focusNode,
onEditingComplete: _saveEdit,
style: Theme.of(context)
.textTheme
.bodyMedium!
.copyWith(fontSize: 14),
textDirection: lastDirection,
decoration: InputDecoration(
filled: true,
fillColor: Theme.of(context).colorScheme.surface,
hoverColor: Colors.transparent,
contentPadding:
const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).colorScheme.primary,
),
),
),
),
isDense: true,
),
),
),
);
},
);
}

Expand Down
21 changes: 19 additions & 2 deletions ...appflowy_flutter/lib/plugins/database/widgets/cell/card_cell_skeleton/text_card_cell.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import 'dart:ui' as ui;
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
Expand All @@ -8,6 +9,7 @@ import 'package:appflowy/plugins/database/application/cell/bloc/text_cell_bloc.d
import 'package:appflowy/plugins/database/application/cell/cell_controller.dart';
import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart';
import 'package:appflowy/plugins/database/application/database_controller.dart';
import 'package:appflowy/util/text_direction.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
Expand Down Expand Up @@ -181,12 +183,25 @@ class _TextCellState extends State<TextCardCell> {
);
}

ui.TextDirection? lastDirection;

Widget _buildTitle() {
final textField = _buildTextField();
return BlocBuilder<TextCellBloc, TextCellState>(
builder: (context, state) {
final text = _textEditingController.text.isNotEmpty
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about setting LocaleKeys.grid_row_titlePlaceholder.tr() as the hint text instead of the text?

? _textEditingController.text
: LocaleKeys.grid_row_titlePlaceholder.tr();
lastDirection = getTextDirectionBaseOnContext(
context,
text,
lastDirection: lastDirection,
);

final icon = _buildIcon(state);
final textField = _buildTextField(lastDirection!);

return Row(
textDirection: lastDirection,
children: [
if (icon != null) ...[
icon,
Expand All @@ -199,7 +214,7 @@ class _TextCellState extends State<TextCardCell> {
);
}

Widget _buildTextField() {
Widget _buildTextField(ui.TextDirection lastDirection) {
return BlocSelector<TextCellBloc, TextCellState, bool>(
selector: (state) => state.enableEdit,
builder: (context, isEditing) {
Expand All @@ -214,6 +229,7 @@ class _TextCellState extends State<TextCardCell> {
},
child: TextField(
controller: _textEditingController,
textDirection: lastDirection,
focusNode: focusNode,
onEditingComplete: () => focusNode.unfocus(),
onSubmitted: (_) => focusNode.unfocus(),
Expand All @@ -231,6 +247,7 @@ class _TextCellState extends State<TextCardCell> {
isDense: true,
isCollapsed: true,
hintText: LocaleKeys.grid_row_titlePlaceholder.tr(),
hintTextDirection: lastDirection,
hintStyle: widget.style.titleTextStyle.copyWith(
color: Theme.of(context).hintColor,
),
Expand Down
6 changes: 4 additions & 2 deletions frontend/appflowy_flutter/lib/plugins/database/widgets/cell/editable_cell_skeleton/text.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,12 @@ class EditableTextCell extends EditableCellWidget {
final IEditableTextCellSkin skin;

@override
GridEditableTextCell<EditableTextCell> createState() => _TextCellState();
GridEditableTextCell<EditableTextCell> createState() =>
EditableTextCellState();
}

class _TextCellState extends GridEditableTextCell<EditableTextCell> {
@visibleForTesting
class EditableTextCellState extends GridEditableTextCell<EditableTextCell> {
late final TextEditingController _textEditingController;
late final cellBloc = TextCellBloc(
cellController: makeCellController(
Expand Down
Loading
Loading