Merge pull request #505 from AppFlowy-IO/fix_0.0.4_bugs_2

Fix some UI bugs

Author: appflowy

frontend/app_flowy/assets/translations/en.json

@@ -168,6 +168,7 @@
       "dateFormatLocal": "Month/Month/Day",
       "dateFormatUS": "Month/Month/Day",
       "timeFormat": " Time format",
+      "invalidTimeFormat": "Invalid format",
       "timeFormatTwelveHour": "12 hour",
       "timeFormatTwentyFourHour": "24 hour",
       "addSelectOption": "Add an option",

frontend/app_flowy/lib/workspace/application/grid/cell/date_cal_bloc.dart

@@ -1,6 +1,9 @@
+import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/workspace/application/grid/field/field_service.dart';
+import 'package:easy_localization/easy_localization.dart' show StringTranslateExtension;
 import 'package:flowy_sdk/log.dart';
 import 'package:flowy_sdk/protobuf/flowy-error-code/code.pb.dart';
+import 'package:flowy_sdk/protobuf/flowy-error/errors.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/date_type_option.pb.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
@@ -91,7 +94,7 @@ class DateCalBloc extends Bloc<DateCalEvent, DateCalState> {
           case ErrorCode.InvalidDateTimeFormat:
             emit(state.copyWith(
               dateData: Some(newDateData),
-              timeFormatError: Some(err.toString()),
+              timeFormatError: Some(timeFormatPrompt(err)),
             ));
             break;
           default:
@@ -101,6 +104,21 @@ class DateCalBloc extends Bloc<DateCalEvent, DateCalState> {
     );
   }
 
+  String timeFormatPrompt(FlowyError error) {
+    String msg = LocaleKeys.grid_field_invalidTimeFormat.tr() + ". ";
+    switch (state.dateTypeOption.timeFormat) {
+      case TimeFormat.TwelveHour:
+        msg = msg + "e.g. 01: 00 AM";
+        break;
+      case TimeFormat.TwentyFourHour:
+        msg = msg + "e.g. 13: 00";
+        break;
+      default:
+        break;
+    }
+    return msg;
+  }
+
   @override
   Future<void> close() async {
     if (_onCellChangedFn != null) {

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_builder.dart

@@ -47,13 +47,11 @@ class BlankCell extends StatelessWidget {
   }
 }
 
-abstract class GridCellWidget extends HoverWidget {
+abstract class GridCellWidget implements FlowyHoverWidget {
   @override
   final ValueNotifier<bool> onFocus = ValueNotifier<bool>(false);
 
   final GridCellRequestFocusNotifier requestFocus = GridCellRequestFocusNotifier();
-
-  GridCellWidget({Key? key}) : super(key: key);
 }
 
 class GridCellRequestFocusNotifier extends ChangeNotifier {

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/checkbox_cell.dart

@@ -6,7 +6,7 @@ import 'package:flutter/widgets.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'cell_builder.dart';
 
-class CheckboxCell extends GridCellWidget {
+class CheckboxCell extends StatefulWidget with GridCellWidget {
   final GridCellContextBuilder cellContextBuilder;
   CheckboxCell({
     required this.cellContextBuilder,
@@ -41,7 +41,7 @@ class _CheckboxCellState extends State<CheckboxCell> {
               onPressed: () => context.read<CheckboxCellBloc>().add(const CheckboxCellEvent.select()),
               iconPadding: EdgeInsets.zero,
               icon: icon,
-              width: 23,
+              width: 20,
             ),
           );
         },

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/date_cell/date_cell.dart

@@ -18,7 +18,7 @@ abstract class GridCellDelegate {
   GridCellDelegate get delegate;
 }
 
-class DateCell extends GridCellWidget {
+class DateCell extends StatefulWidget with GridCellWidget {
   final GridCellContextBuilder cellContextBuilder;
   late final DateCellStyle? cellStyle;
 

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/number_cell.dart

@@ -7,7 +7,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'cell_builder.dart';
 
-class NumberCell extends GridCellWidget {
+class NumberCell extends StatefulWidget with GridCellWidget {
   final GridCellContextBuilder cellContextBuilder;
 
   NumberCell({

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/select_option_cell/extension.dart

@@ -87,7 +87,7 @@ class SelectOptionTag extends StatelessWidget {
   Widget build(BuildContext context) {
     return ChoiceChip(
       pressElevation: 1,
-      label: FlowyText.medium(name, fontSize: 12),
+      label: FlowyText.medium(name, fontSize: 12, overflow: TextOverflow.ellipsis),
       selectedColor: color,
       backgroundColor: color,
       labelPadding: const EdgeInsets.symmetric(horizontal: 6),
@@ -130,11 +130,18 @@ class SelectOptionTagCell extends StatelessWidget {
           child: InkWell(
             child: Padding(
               padding: const EdgeInsets.symmetric(horizontal: 3),
-              child: Row(children: [
-                SelectOptionTag.fromSelectOption(context: context, option: option),
-                const Spacer(),
-                ...children,
-              ]),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Flexible(
+                    fit: FlexFit.loose,
+                    flex: 2,
+                    child: SelectOptionTag.fromSelectOption(context: context, option: option),
+                  ),
+                  const Spacer(),
+                  ...children,
+                ],
+              ),
             ),
             onTap: () => onSelected(option),
           ),

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/select_option_cell/select_option_cell.dart

@@ -20,7 +20,7 @@ class SelectOptionCellStyle extends GridCellStyle {
   });
 }
 
-class SingleSelectCell extends GridCellWidget {
+class SingleSelectCell extends StatefulWidget with GridCellWidget {
   final GridCellContextBuilder cellContextBuilder;
   late final SelectOptionCellStyle? cellStyle;
 
@@ -74,7 +74,7 @@ class _SingleSelectCellState extends State<SingleSelectCell> {
 }
 
 //----------------------------------------------------------------
-class MultiSelectCell extends GridCellWidget {
+class MultiSelectCell extends StatefulWidget with GridCellWidget {
   final GridCellContextBuilder cellContextBuilder;
   late final SelectOptionCellStyle? cellStyle;
 
@@ -160,7 +160,7 @@ class _SelectOptionCell extends StatelessWidget {
           .toList();
       child = Align(
         alignment: Alignment.centerLeft,
-        child: Wrap(children: tags, spacing: 4, runSpacing: 4),
+        child: Wrap(children: tags, spacing: 4, runSpacing: 2),
       );
     }
 

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/select_option_cell/select_option_editor.dart

@@ -225,7 +225,18 @@ class _SelectOptionCell extends StatelessWidget {
       height: GridSize.typeOptionItemHeight,
       child: Row(
         children: [
-          Expanded(child: _body(theme, context)),
+          Flexible(
+            fit: FlexFit.loose,
+            child: SelectOptionTagCell(
+              option: option,
+              onSelected: (option) {
+                context.read<SelectOptionCellEditorBloc>().add(SelectOptionEditorEvent.selectOption(option.id));
+              },
+              children: [
+                if (isSelected) svgWidget("grid/checkmark"),
+              ],
+            ),
+          ),
           FlowyIconButton(
             width: 30,
             onPressed: () => _showEditPannel(context),
@@ -237,18 +248,6 @@ class _SelectOptionCell extends StatelessWidget {
     );
   }
 
-  Widget _body(AppTheme theme, BuildContext context) {
-    return SelectOptionTagCell(
-      option: option,
-      onSelected: (option) {
-        context.read<SelectOptionCellEditorBloc>().add(SelectOptionEditorEvent.selectOption(option.id));
-      },
-      children: [
-        if (isSelected) svgWidget("grid/checkmark"),
-      ],
-    );
-  }
-
   void _showEditPannel(BuildContext context) {
     final pannel = SelectOptionTypeOptionEditor(
       option: option,

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/text_cell.dart

@@ -13,7 +13,7 @@ class GridTextCellStyle extends GridCellStyle {
   });
 }
 
-class GridTextCell extends GridCellWidget {
+class GridTextCell extends StatefulWidget with GridCellWidget {
   final GridCellContextBuilder cellContextBuilder;
   late final GridTextCellStyle? cellStyle;
   GridTextCell({