chore: improve grid focus and hover event handling (#1735)

richardshiue · web-flow · commit 243a781b6cf9 · 2023-01-27T10:35:17.000+08:00
* chore: improve primary cell accessory behavior

* fix: focus border disappearing

* chore: port to GridCellState

* chore: fix typo

* chore: connect popover controller

* chore: final
diff --git a/frontend/app_flowy/lib/plugins/board/presentation/card/board_checklist_cell.dart b/frontend/app_flowy/lib/plugins/board/presentation/card/board_checklist_cell.dart
@@ -1,6 +1,6 @@
 import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
 import 'package:app_flowy/plugins/grid/application/cell/checklist_cell_bloc.dart';
-import 'package:app_flowy/plugins/grid/presentation/widgets/cell/checklist_cell/checklist_cell.dart';
+import 'package:app_flowy/plugins/grid/presentation/widgets/cell/checklist_cell/checklist_progress_bar.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
@@ -29,7 +29,10 @@ class _BoardChecklistCellState extends State<BoardChecklistCell> {
   Widget build(BuildContext context) {
     return BlocProvider.value(
       value: _cellBloc,
-      child: const ChecklistProgressBar(),
+      child: BlocBuilder<ChecklistCellBloc, ChecklistCellState>(
+        builder: (context, state) =>
+            ChecklistProgressBar(percent: state.percent),
+      ),
     );
   }
 }
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_accessory.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_accessory.dart
@@ -67,18 +67,14 @@ class _PrimaryCellAccessoryState extends State<PrimaryCellAccessory>
     with GridCellAccessoryState {
   @override
   Widget build(BuildContext context) {
-    if (widget.isCellEditing) {
-      return const SizedBox();
-    } else {
-      return Tooltip(
-        message: LocaleKeys.tooltip_openAsPage.tr(),
-        textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
-        child: svgWidget(
-          "grid/expander",
-          color: Theme.of(context).colorScheme.primary,
-        ),
-      );
-    }
+    return Tooltip(
+      message: LocaleKeys.tooltip_openAsPage.tr(),
+      textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
+      child: svgWidget(
+        "grid/expander",
+        color: Theme.of(context).colorScheme.primary,
+      ),
+    );
   }
 
   @override
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_container.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_container.dart
@@ -12,20 +12,23 @@ class CellContainer extends StatelessWidget {
   final GridCellWidget child;
   final AccessoryBuilder? accessoryBuilder;
   final double width;
-  final RegionStateNotifier rowStateNotifier;
+  final bool isPrimary;
+  final CellContainerNotifier cellContainerNotifier;
+
   const CellContainer({
     Key? key,
     required this.child,
     required this.width,
-    required this.rowStateNotifier,
+    required this.isPrimary,
+    required this.cellContainerNotifier,
     this.accessoryBuilder,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return ChangeNotifierProvider<_CellContainerNotifier>(
-      create: (_) => _CellContainerNotifier(child),
-      child: Selector<_CellContainerNotifier, bool>(
+    return ChangeNotifierProvider.value(
+      value: cellContainerNotifier,
+      child: Selector<CellContainerNotifier, bool>(
         selector: (context, notifier) => notifier.isFocus,
         builder: (privderContext, isFocus, _) {
           Widget container = Center(child: GridCellShortcuts(child: child));
@@ -41,6 +44,7 @@ class CellContainer extends StatelessWidget {
             if (accessories.isNotEmpty) {
               container = _GridCellEnterRegion(
                 accessories: accessories,
+                isPrimary: isPrimary,
                 child: container,
               );
             }
@@ -81,17 +85,23 @@ class CellContainer extends StatelessWidget {
 class _GridCellEnterRegion extends StatelessWidget {
   final Widget child;
   final List<GridCellAccessoryBuilder> accessories;
-  const _GridCellEnterRegion(
-      {required this.child, required this.accessories, Key? key})
-      : super(key: key);
+  final bool isPrimary;
+  const _GridCellEnterRegion({
+    required this.child,
+    required this.accessories,
+    required this.isPrimary,
+    Key? key,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Selector2<RegionStateNotifier, _CellContainerNotifier, bool>(
-  selector: (context, regionNotifier, cellNotifier) => !cellNotifier.isFocus && (cellNotifier.onEnter),
-      builder: (context, onEnter, _) {
+    return Selector2<RegionStateNotifier, CellContainerNotifier, bool>(
+      selector: (context, regionNotifier, cellNotifier) =>
+          !cellNotifier.isFocus &&
+          (cellNotifier.onEnter || regionNotifier.onEnter && isPrimary),
+      builder: (context, showAccessory, _) {
         List<Widget> children = [child];
-        if (onEnter) {
+        if (showAccessory) {
           children.add(
             CellAccessoryContainer(accessories: accessories).positioned(
               right: GridSize.cellContentInsets.right,
@@ -102,10 +112,10 @@ class _GridCellEnterRegion extends StatelessWidget {
         return MouseRegion(
           cursor: SystemMouseCursors.click,
           onEnter: (p) =>
-              Provider.of<_CellContainerNotifier>(context, listen: false)
+              Provider.of<CellContainerNotifier>(context, listen: false)
                   .onEnter = true,
           onExit: (p) =>
-              Provider.of<_CellContainerNotifier>(context, listen: false)
+              Provider.of<CellContainerNotifier>(context, listen: false)
                   .onEnter = false,
           child: Stack(
             alignment: AlignmentDirectional.center,
@@ -118,13 +128,13 @@ class _GridCellEnterRegion extends StatelessWidget {
   }
 }
 
-class _CellContainerNotifier extends ChangeNotifier {
+class CellContainerNotifier extends ChangeNotifier {
   final CellEditable cellEditable;
   VoidCallback? _onCellFocusListener;
   bool _isFocus = false;
   bool _onEnter = false;
 
-  _CellContainerNotifier(this.cellEditable) {
+  CellContainerNotifier(this.cellEditable) {
     _onCellFocusListener = () => isFocus = cellEditable.onCellFocus.value;
     cellEditable.onCellFocus.addListener(_onCellFocusListener!);
   }
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/checklist_cell/checklist_cell.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/checklist_cell/checklist_cell.dart
@@ -5,22 +5,23 @@ import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+
 import '../cell_builder.dart';
 import 'checklist_cell_editor.dart';
-import 'checklist_prograss_bar.dart';
+import 'checklist_progress_bar.dart';
 
 class GridChecklistCell extends GridCellWidget {
   final GridCellControllerBuilder cellControllerBuilder;
   GridChecklistCell({required this.cellControllerBuilder, Key? key})
       : super(key: key);
 
   @override
-  GridChecklistCellState createState() => GridChecklistCellState();
+  GridCellState<GridChecklistCell> createState() => GridChecklistCellState();
 }
 
-class GridChecklistCellState extends State<GridChecklistCell> {
-  late PopoverController _popover;
+class GridChecklistCellState extends GridCellState<GridChecklistCell> {
   late ChecklistCellBloc _cellBloc;
+  late final PopoverController _popover;
 
   @override
   void initState() {
@@ -36,52 +37,32 @@ class GridChecklistCellState extends State<GridChecklistCell> {
   Widget build(BuildContext context) {
     return BlocProvider.value(
       value: _cellBloc,
-      child: Stack(
-        alignment: AlignmentDirectional.center,
-        fit: StackFit.expand,
-        children: [
-          _wrapPopover(const ChecklistProgressBar()),
-          InkWell(onTap: () => _popover.show()),
-        ],
-      ),
-    );
-  }
-
-  Widget _wrapPopover(Widget child) {
-    return AppFlowyPopover(
-      controller: _popover,
-      constraints: BoxConstraints.loose(const Size(260, 400)),
-      direction: PopoverDirection.bottomWithLeftAligned,
-      triggerActions: PopoverTriggerFlags.none,
-      popupBuilder: (BuildContext context) {
-        WidgetsBinding.instance.addPostFrameCallback((_) {
-          widget.onCellEditing.value = true;
-        });
-        return GridChecklistCellEditor(
-          cellController: widget.cellControllerBuilder.build()
-              as GridChecklistCellController,
-        );
-      },
-      onClose: () => widget.onCellEditing.value = false,
-      child: Padding(
-        padding: GridSize.cellContentInsets,
-        child: child,
+      child: AppFlowyPopover(
+        controller: _popover,
+        constraints: BoxConstraints.loose(const Size(260, 400)),
+        direction: PopoverDirection.bottomWithLeftAligned,
+        triggerActions: PopoverTriggerFlags.none,
+        popupBuilder: (BuildContext context) {
+          WidgetsBinding.instance.addPostFrameCallback((_) {
+            widget.onCellEditing.value = true;
+          });
+          return GridChecklistCellEditor(
+            cellController: widget.cellControllerBuilder.build()
+                as GridChecklistCellController,
+          );
+        },
+        onClose: () => widget.onCellEditing.value = false,
+        child: Padding(
+          padding: GridSize.cellContentInsets,
+          child: BlocBuilder<ChecklistCellBloc, ChecklistCellState>(
+            builder: (context, state) =>
+                ChecklistProgressBar(percent: state.percent),
+          ),
+        ),
       ),
     );
   }
-}
-
-class ChecklistProgressBar extends StatelessWidget {
-  const ChecklistProgressBar({Key? key}) : super(key: key);
 
   @override
-  Widget build(BuildContext context) {
-    return BlocBuilder<ChecklistCellBloc, ChecklistCellState>(
-      builder: (context, state) {
-        return ChecklistPrograssBar(
-          percent: state.percent,
-        );
-      },
-    );
-  }
+  void requestBeginFocus() => _popover.show();
 }
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/checklist_cell/checklist_cell_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/checklist_cell/checklist_cell_editor.dart
@@ -1,7 +1,7 @@
 import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
 import 'package:app_flowy/plugins/grid/application/cell/checklist_cell_editor_bloc.dart';
 import 'package:app_flowy/plugins/grid/presentation/layout/sizes.dart';
-import 'package:app_flowy/plugins/grid/presentation/widgets/cell/checklist_cell/checklist_prograss_bar.dart';
+import 'package:app_flowy/plugins/grid/presentation/widgets/cell/checklist_cell/checklist_progress_bar.dart';
 import 'package:app_flowy/plugins/grid/presentation/widgets/header/type_option/select_option_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra/image.dart';
@@ -48,7 +48,7 @@ class _GridChecklistCellEditorState extends State<GridChecklistCellEditor> {
       child: BlocBuilder<ChecklistCellEditorBloc, ChecklistCellEditorState>(
         builder: (context, state) {
           final List<Widget> slivers = [
-            const SliverChecklistPrograssBar(),
+            const SliverChecklistProgressBar(),
             SliverToBoxAdapter(
               child: Padding(
                 padding: GridSize.typeOptionContentInsets,
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/checklist_cell/checklist_progress_bar.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/checklist_cell/checklist_progress_bar.dart
@@ -8,9 +8,9 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:percent_indicator/percent_indicator.dart';
 
-class ChecklistPrograssBar extends StatelessWidget {
+class ChecklistProgressBar extends StatelessWidget {
   final double percent;
-  const ChecklistPrograssBar({required this.percent, Key? key})
+  const ChecklistProgressBar({required this.percent, Key? key})
       : super(key: key);
 
   @override
@@ -26,21 +26,21 @@ class ChecklistPrograssBar extends StatelessWidget {
   }
 }
 
-class SliverChecklistPrograssBar extends StatelessWidget {
-  const SliverChecklistPrograssBar({Key? key}) : super(key: key);
+class SliverChecklistProgressBar extends StatelessWidget {
+  const SliverChecklistProgressBar({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return SliverPersistentHeader(
       pinned: true,
-      delegate: _SliverChecklistPrograssBarDelegate(),
+      delegate: _SliverChecklistProgressBarDelegate(),
     );
   }
 }
 
-class _SliverChecklistPrograssBarDelegate
+class _SliverChecklistProgressBarDelegate
     extends SliverPersistentHeaderDelegate {
-  _SliverChecklistPrograssBarDelegate();
+  _SliverChecklistProgressBarDelegate();
 
   double fixHeight = 60;
 
@@ -71,7 +71,7 @@ class _SliverChecklistPrograssBarDelegate
               ),
               Padding(
                 padding: const EdgeInsets.only(top: 6.0),
-                child: ChecklistPrograssBar(percent: state.percent),
+                child: ChecklistProgressBar(percent: state.percent),
               ),
             ],
           ),
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/grid_row.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/grid_row.dart
