fix: UI layout issue when date select panel popup

This commit is contained in:
appflowy
2022-09-22 21:12:41 +08:00
parent 206b06f023
commit 5464f1851b
7 changed files with 111 additions and 82 deletions

View File

@ -65,23 +65,17 @@ class _DateCellState extends GridCellState<GridDateCell> {
builder: (context, state) { builder: (context, state) {
return AppFlowyPopover( return AppFlowyPopover(
controller: _popover, controller: _popover,
offset: const Offset(0, 20), triggerActions: PopoverTriggerFlags.none,
direction: PopoverDirection.bottomWithLeftAligned, direction: PopoverDirection.bottomWithLeftAligned,
constraints: BoxConstraints.loose(const Size(320, 500)), constraints: BoxConstraints.loose(const Size(320, 500)),
margin: EdgeInsets.zero,
child: SizedBox.expand( child: SizedBox.expand(
child: GestureDetector( child: GestureDetector(
behavior: HitTestBehavior.opaque, behavior: HitTestBehavior.opaque,
onTap: () => _showCalendar(context), onTap: () => _popover.show(),
child: MouseRegion( child: Align(
opaque: false, alignment: alignment,
cursor: SystemMouseCursors.click, child: FlowyText.medium(state.dateStr, fontSize: 12),
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 @override
Future<void> dispose() async { Future<void> dispose() async {
_cellBloc.close(); _cellBloc.close();

View File

@ -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/cell/date_cal_bloc.dart';
import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart'; import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:dartz/dartz.dart' show Either;
import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.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/rounded_input_field.dart';
import 'package:flowy_infra_ui/widget/spacing.dart'; import 'package:flowy_infra_ui/widget/spacing.dart';
import 'package:flowy_sdk/log.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:flowy_sdk/protobuf/flowy-grid/date_type_option.pb.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
@ -39,34 +41,37 @@ class DateCellEditor extends StatefulWidget {
} }
class _DateCellEditor extends State<DateCellEditor> { 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
if (_dateTypeOptionPB == null) { return FutureBuilder<Either<dynamic, FlowyError>>(
return Container(); future: widget.cellController.getFieldTypeOption(
} DateTypeOptionDataParser(),
),
builder: (BuildContext context, snapshot) {
if (snapshot.hasData) {
return _buildWidget(snapshot);
} else {
return const SizedBox();
}
},
);
}
return _CellCalendarWidget( Widget _buildWidget(AsyncSnapshot<Either<dynamic, FlowyError>> snapshot) {
cellContext: widget.cellController, return snapshot.data!.fold(
dateTypeOptionPB: _dateTypeOptionPB!, (dateTypeOptionPB) {
return Padding(
padding: const EdgeInsets.all(12),
child: _CellCalendarWidget(
cellContext: widget.cellController,
dateTypeOptionPB: dateTypeOptionPB,
),
);
},
(err) {
Log.error(err);
return const SizedBox();
},
); );
} }
} }

View File

@ -9,4 +9,4 @@ export 'src/flowy_overlay/flowy_overlay.dart';
export 'src/flowy_overlay/list_overlay.dart'; export 'src/flowy_overlay/list_overlay.dart';
export 'src/flowy_overlay/option_overlay.dart'; export 'src/flowy_overlay/option_overlay.dart';
export 'src/flowy_overlay/flowy_dialog.dart'; export 'src/flowy_overlay/flowy_dialog.dart';
export 'src/flowy_overlay/appflowy_stype_popover.dart'; export 'src/flowy_overlay/appflowy_popover.dart';

View File

@ -1,7 +1,10 @@
import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:flutter/material.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 { class AppFlowyPopover extends StatelessWidget {
final Widget child; final Widget child;
final PopoverController? controller; final PopoverController? controller;
@ -13,6 +16,7 @@ class AppFlowyPopover extends StatelessWidget {
final PopoverMutex? mutex; final PopoverMutex? mutex;
final Offset? offset; final Offset? offset;
final bool asBarrier; final bool asBarrier;
final EdgeInsets margin;
const AppFlowyPopover({ const AppFlowyPopover({
Key? key, Key? key,
@ -26,6 +30,7 @@ class AppFlowyPopover extends StatelessWidget {
this.offset, this.offset,
this.controller, this.controller,
this.asBarrier = false, this.asBarrier = false,
this.margin = const EdgeInsets.all(12),
}) : super(key: key); }) : super(key: key);
@override @override
@ -39,13 +44,44 @@ class AppFlowyPopover extends StatelessWidget {
triggerActions: triggerActions, triggerActions: triggerActions,
popupBuilder: (context) { popupBuilder: (context) {
final child = popupBuilder(context); final child = popupBuilder(context);
debugPrint('$child popover'); debugPrint('Show $child popover');
return OverlayContainer( return _PopoverContainer(
constraints: constraints, constraints: constraints,
child: popupBuilder(context), margin: margin,
child: child,
); );
}, },
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,
),
);
}
}

View File

@ -4,7 +4,6 @@ import 'dart:ui';
import 'package:flowy_infra_ui/src/flowy_overlay/layout.dart'; import 'package:flowy_infra_ui/src/flowy_overlay/layout.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
export './overlay_container.dart';
/// Specifies how overlay are anchored to the SourceWidget /// Specifies how overlay are anchored to the SourceWidget
enum AnchorDirection { enum AnchorDirection {

View File

@ -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: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 { class ListOverlayFooter {
Widget widget; 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,
),
);
}
}

View File

@ -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,
),
);
}
}