From 1c6e709c820d5aab148f921ec24e7e865a4817e9 Mon Sep 17 00:00:00 2001 From: Richard Shiue <71320345+richardshiue@users.noreply.github.com> Date: Thu, 5 Sep 2024 13:55:37 +0800 Subject: [PATCH] fix: board ui bugs (#6194) * fix: date reminder indicator on board/calendar cards * fix: stop restricting max lines of card title to two lines * fix: don't allow multiline row titles * fix: oops --- .../card_cell_skeleton/date_card_cell.dart | 23 ++++++-- .../card_cell_skeleton/text_card_cell.dart | 31 ++++++++++- .../database/widgets/row/row_banner.dart | 53 +++++++++++-------- 3 files changed, 80 insertions(+), 27 deletions(-) diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/card_cell_skeleton/date_card_cell.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/card_cell_skeleton/date_card_cell.dart index 3b47971fdb..746a0c677d 100644 --- a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/card_cell_skeleton/date_card_cell.dart +++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/card_cell_skeleton/date_card_cell.dart @@ -1,7 +1,9 @@ +import 'package:appflowy/generated/flowy_svgs.g.dart'; 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/plugins/database/application/cell/bloc/date_cell_bloc.dart'; +import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; @@ -44,7 +46,9 @@ class _DateCellState extends State { ); }, child: BlocBuilder( - buildWhen: (previous, current) => previous.dateStr != current.dateStr, + buildWhen: (previous, current) => + previous.dateStr != current.dateStr || + previous.data != current.data, builder: (context, state) { if (state.dateStr.isEmpty) { return const SizedBox.shrink(); @@ -53,9 +57,20 @@ class _DateCellState extends State { return Container( alignment: Alignment.centerLeft, padding: widget.style.padding, - child: Text( - state.dateStr, - style: widget.style.textStyle, + child: Row( + children: [ + Flexible( + child: Text( + state.dateStr, + style: widget.style.textStyle, + overflow: TextOverflow.ellipsis, + ), + ), + if (state.data?.reminderId.isNotEmpty ?? false) ...[ + const HSpace(4), + const FlowySvg(FlowySvgs.clock_alarm_s), + ], + ], ), ); }, diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/card_cell_skeleton/text_card_cell.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/card_cell_skeleton/text_card_cell.dart index ab372506bb..b4c1b62f71 100644 --- a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/card_cell_skeleton/text_card_cell.dart +++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/card_cell_skeleton/text_card_cell.dart @@ -1,3 +1,4 @@ +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; @@ -12,7 +13,6 @@ import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import '../editable_cell_builder.dart'; - import 'card_cell.dart'; class TextCardCellStyle extends CardCellStyle { @@ -209,12 +209,15 @@ class _TextCellState extends State { bindings: { const SingleActivator(LogicalKeyboardKey.escape): () => focusNode.unfocus(), + const SimpleActivator(LogicalKeyboardKey.enter): () => + focusNode.unfocus(), }, child: TextField( controller: _textEditingController, focusNode: focusNode, onEditingComplete: () => focusNode.unfocus(), - maxLines: isEditing ? null : 2, + onSubmitted: (_) => focusNode.unfocus(), + maxLines: null, minLines: 1, textInputAction: TextInputAction.done, readOnly: !isEditing, @@ -240,3 +243,27 @@ class _TextCellState extends State { ); } } + +class SimpleActivator with Diagnosticable implements ShortcutActivator { + const SimpleActivator( + this.trigger, { + this.includeRepeats = true, + }); + + final LogicalKeyboardKey trigger; + final bool includeRepeats; + + @override + bool accepts(KeyEvent event, HardwareKeyboard state) { + return (event is KeyDownEvent || + (includeRepeats && event is KeyRepeatEvent)) && + trigger == event.logicalKey; + } + + @override + String debugDescribeKeys() => + kDebugMode ? trigger.debugName ?? trigger.toStringShort() : ''; + + @override + Iterable? get triggers => [trigger]; +} diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/row/row_banner.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/row/row_banner.dart index 6ffca62716..e303ea038d 100644 --- a/frontend/appflowy_flutter/lib/plugins/database/widgets/row/row_banner.dart +++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/row/row_banner.dart @@ -1,4 +1,6 @@ +import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; import 'package:appflowy/generated/flowy_svgs.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart'; @@ -7,6 +9,7 @@ import 'package:appflowy/plugins/database/application/cell/cell_controller.dart' import 'package:appflowy/plugins/database/application/database_controller.dart'; import 'package:appflowy/plugins/database/application/row/row_banner_bloc.dart'; import 'package:appflowy/plugins/database/application/row/row_controller.dart'; +import 'package:appflowy/plugins/database/widgets/cell/card_cell_skeleton/text_card_cell.dart'; import 'package:appflowy/plugins/database/widgets/cell/editable_cell_builder.dart'; import 'package:appflowy/plugins/database/widgets/cell/editable_cell_skeleton/text.dart'; import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.dart'; @@ -14,7 +17,6 @@ import 'package:appflowy/plugins/database/widgets/row/row_action.dart'; import 'package:appflowy/workspace/presentation/settings/widgets/emoji_picker/emoji_picker.dart'; import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:easy_localization/easy_localization.dart'; -import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; const _kBannerActionHeight = 40.0; @@ -287,27 +289,36 @@ class _TitleSkin extends IEditableTextCellSkin { FocusNode focusNode, TextEditingController textEditingController, ) { - return TextField( - controller: textEditingController, - focusNode: focusNode, - autofocus: true, - style: Theme.of(context).textTheme.bodyMedium?.copyWith(fontSize: 28), - decoration: InputDecoration( - contentPadding: EdgeInsets.zero, - border: InputBorder.none, - focusedBorder: InputBorder.none, - enabledBorder: InputBorder.none, - errorBorder: InputBorder.none, - disabledBorder: InputBorder.none, - hintText: LocaleKeys.grid_row_titlePlaceholder.tr(), - isDense: true, - isCollapsed: true, - ), - onChanged: (text) { - if (textEditingController.value.composing.isCollapsed) { - bloc.add(TextCellEvent.updateText(text)); - } + return CallbackShortcuts( + bindings: { + const SingleActivator(LogicalKeyboardKey.escape): () => + focusNode.unfocus(), + const SimpleActivator(LogicalKeyboardKey.enter): () => + focusNode.unfocus(), }, + child: TextField( + controller: textEditingController, + focusNode: focusNode, + autofocus: true, + style: Theme.of(context).textTheme.bodyMedium?.copyWith(fontSize: 28), + maxLines: null, + decoration: InputDecoration( + contentPadding: EdgeInsets.zero, + border: InputBorder.none, + focusedBorder: InputBorder.none, + enabledBorder: InputBorder.none, + errorBorder: InputBorder.none, + disabledBorder: InputBorder.none, + hintText: LocaleKeys.grid_row_titlePlaceholder.tr(), + isDense: true, + isCollapsed: true, + ), + onChanged: (text) { + if (textEditingController.value.composing.isCollapsed) { + bloc.add(TextCellEvent.updateText(text)); + } + }, + ), ); } }