Merge pull request #1131 from AppFlowy-IO/fix/date_select_pannel_layout

fix: UI layout issue when date select panel popup
2024-08-30 18:12:39 +00:00 · 2022-09-23 09:15:25 +08:00 · 2022-09-23 09:15:25 +08:00 · 0b8909a150
commit 0b8909a150
parent 206b06f023 5464f1851b
7 changed files with 111 additions and 82 deletions
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart
@ -65,23 +65,17 @@ class _DateCellState extends GridCellState<GridDateCell> {
        builder: (context, state) {
          return AppFlowyPopover(
            controller: _popover,
-            offset: const Offset(0, 20),
+            triggerActions: PopoverTriggerFlags.none,
            direction: PopoverDirection.bottomWithLeftAligned,
            constraints: BoxConstraints.loose(const Size(320, 500)),
+            margin: EdgeInsets.zero,
            child: SizedBox.expand(
              child: GestureDetector(
                behavior: HitTestBehavior.opaque,
-                onTap: () => _showCalendar(context),
-                child: MouseRegion(
-                  opaque: false,
-                  cursor: SystemMouseCursors.click,
-                  child: Align(
-                    alignment: alignment,
-                    child: FlowyText.medium(
-                      state.dateStr,
-                      fontSize: 12,
-                    ),
-                  ),
+                onTap: () => _popover.show(),
+                child: Align(
+                  alignment: alignment,
+                  child: FlowyText.medium(state.dateStr, fontSize: 12),
                ),
              ),
            ),
@ -101,10 +95,6 @@ class _DateCellState extends GridCellState<GridDateCell> {
    );
  }

-  void _showCalendar(BuildContext context) {
-    _popover.show();
-  }
-
  @override
  Future<void> dispose() async {
    _cellBloc.close();
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart
@ -2,6 +2,7 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/plugins/grid/application/cell/date_cal_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
+import 'package:dartz/dartz.dart' show Either;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.dart';
@ -11,6 +12,7 @@ import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flowy_sdk/log.dart';
+import 'package:flowy_sdk/protobuf/flowy-error/errors.pbserver.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/date_type_option.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@ -39,34 +41,37 @@ class DateCellEditor extends StatefulWidget {
 }

 class _DateCellEditor extends State<DateCellEditor> {
-  DateTypeOptionPB? _dateTypeOptionPB;
-
-  @override
-  void initState() {
-    super.initState();
-    _fetchData();
-  }
-
-  _fetchData() async {
-    final result = await widget.cellController
-        .getFieldTypeOption(DateTypeOptionDataParser());
-
-    result.fold((dateTypeOptionPB) {
-      setState(() {
-        _dateTypeOptionPB = dateTypeOptionPB;
-      });
-    }, (err) => Log.error(err));
-  }
-
  @override
  Widget build(BuildContext context) {
-    if (_dateTypeOptionPB == null) {
-      return Container();
-    }
+    return FutureBuilder<Either<dynamic, FlowyError>>(
+      future: widget.cellController.getFieldTypeOption(
+        DateTypeOptionDataParser(),
+      ),
+      builder: (BuildContext context, snapshot) {
+        if (snapshot.hasData) {
+          return _buildWidget(snapshot);
+        } else {
+          return const SizedBox();
+        }
+      },
+    );
+  }

-    return _CellCalendarWidget(
-      cellContext: widget.cellController,
-      dateTypeOptionPB: _dateTypeOptionPB!,
+  Widget _buildWidget(AsyncSnapshot<Either<dynamic, FlowyError>> snapshot) {
+    return snapshot.data!.fold(
+      (dateTypeOptionPB) {
+        return Padding(
+          padding: const EdgeInsets.all(12),
+          child: _CellCalendarWidget(
+            cellContext: widget.cellController,
+            dateTypeOptionPB: dateTypeOptionPB,
+          ),
+        );
+      },
+      (err) {
+        Log.error(err);
+        return const SizedBox();
+      },
    );
  }
 }
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/flowy_infra_ui.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/flowy_infra_ui.dart
@ -9,4 +9,4 @@ export 'src/flowy_overlay/flowy_overlay.dart';
 export 'src/flowy_overlay/list_overlay.dart';
 export 'src/flowy_overlay/option_overlay.dart';
 export 'src/flowy_overlay/flowy_dialog.dart';
-export 'src/flowy_overlay/appflowy_stype_popover.dart';
+export 'src/flowy_overlay/appflowy_popover.dart';
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_stype_popover.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_stype_popover.dart
@ -1,7 +1,10 @@
-import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flutter/material.dart';

+import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra_ui/style_widget/decoration.dart';
+import 'package:provider/provider.dart';
+
 class AppFlowyPopover extends StatelessWidget {
  final Widget child;
  final PopoverController? controller;
@ -13,6 +16,7 @@ class AppFlowyPopover extends StatelessWidget {
  final PopoverMutex? mutex;
  final Offset? offset;
  final bool asBarrier;
+  final EdgeInsets margin;

  const AppFlowyPopover({
    Key? key,
@ -26,6 +30,7 @@ class AppFlowyPopover extends StatelessWidget {
    this.offset,
    this.controller,
    this.asBarrier = false,
+    this.margin = const EdgeInsets.all(12),
  }) : super(key: key);

  @override
@ -39,13 +44,44 @@ class AppFlowyPopover extends StatelessWidget {
      triggerActions: triggerActions,
      popupBuilder: (context) {
        final child = popupBuilder(context);
-        debugPrint('$child popover');
-        return OverlayContainer(
+        debugPrint('Show $child popover');
+        return _PopoverContainer(
          constraints: constraints,
-          child: popupBuilder(context),
+          margin: margin,
+          child: child,
        );
      },
      child: child,
    );
  }
 }
+
+class _PopoverContainer extends StatelessWidget {
+  final Widget child;
+  final BoxConstraints? constraints;
+  final EdgeInsets margin;
+  const _PopoverContainer({
+    required this.child,
+    required this.margin,
+    this.constraints,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
+    final decoration = FlowyDecoration.decoration(
+      theme.surface,
+      theme.shadowColor.withOpacity(0.15),
+    );
+    return Material(
+      type: MaterialType.transparency,
+      child: Container(
+        padding: margin,
+        decoration: decoration,
+        constraints: constraints,
+        child: child,
+      ),
+    );
+  }
+}
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart
@ -4,7 +4,6 @@ import 'dart:ui';
 import 'package:flowy_infra_ui/src/flowy_overlay/layout.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-export './overlay_container.dart';

 /// Specifies how overlay are anchored to the SourceWidget
 enum AnchorDirection {
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart
@ -1,5 +1,8 @@
-import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
+import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra_ui/style_widget/decoration.dart';
+import 'package:provider/provider.dart';

 class ListOverlayFooter {
  Widget widget;
@ -96,3 +99,33 @@ class ListOverlay extends StatelessWidget {
    );
  }
 }
+
+const overlayContainerPadding = EdgeInsets.all(12);
+
+class OverlayContainer extends StatelessWidget {
+  final Widget child;
+  final BoxConstraints? constraints;
+  final EdgeInsets padding;
+  const OverlayContainer({
+    required this.child,
+    this.constraints,
+    this.padding = overlayContainerPadding,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme =
+        context.watch<AppTheme?>() ?? AppTheme.fromType(ThemeType.light);
+    return Material(
+      type: MaterialType.transparency,
+      child: Container(
+        padding: padding,
+        decoration: FlowyDecoration.decoration(
+            theme.surface, theme.shadowColor.withOpacity(0.15)),
+        constraints: constraints,
+        child: child,
+      ),
+    );
+  }
+}
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/overlay_container.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/overlay_container.dart
@ -1,34 +0,0 @@
-import 'package:flowy_infra/theme.dart';
-import 'package:flowy_infra_ui/style_widget/decoration.dart';
-import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
-
-const overlayContainerPadding = EdgeInsets.all(12);
-
-class OverlayContainer extends StatelessWidget {
-  final Widget child;
-  final BoxConstraints? constraints;
-  final EdgeInsets padding;
-  const OverlayContainer({
-    required this.child,
-    this.constraints,
-    this.padding = overlayContainerPadding,
-    Key? key,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    final theme =
-        context.watch<AppTheme?>() ?? AppTheme.fromType(ThemeType.light);
-    return Material(
-      type: MaterialType.transparency,
-      child: Container(
-        padding: padding,
-        decoration: FlowyDecoration.decoration(
-            theme.surface, theme.shadowColor.withOpacity(0.15)),
-        constraints: constraints,
-        child: child,
-      ),
-    );
-  }
-}