From bfa9233bd4dc7d617f2288e1abd4c1fdccdfcd25 Mon Sep 17 00:00:00 2001 From: Mathias Mogensen <42929161+Xazin@users.noreply.github.com> Date: Tue, 28 Nov 2023 03:13:22 +0200 Subject: [PATCH] fix: mobile improvements for calendar (#4027) --- .../bottom_sheet_database_field_editor.dart | 45 +++++++--------- .../bottom_sheet_database_field_header.dart | 52 ------------------- .../bottom_sheet/bottom_sheet_view_page.dart | 18 +++---- .../mobile_calendar_events_screen.dart | 36 ++++++++----- .../calendar/presentation/calendar_day.dart | 14 ++--- .../presentation/calendar_event_card.dart | 11 ++-- .../calendar/presentation/calendar_page.dart | 3 +- .../widgets/header/mobile_field_cell.dart | 19 ++++--- .../setting/database_setting_action.dart | 5 +- .../mobile_database_property_editor.dart | 4 +- .../setting/setting_property_list.dart | 1 + .../theme_upload/theme_upload_view.dart | 6 +-- .../lib/plugins/bloc/dynamic_plugin_bloc.dart | 4 +- .../plugins/bloc/dynamic_plugin_state.dart | 4 +- 14 files changed, 92 insertions(+), 130 deletions(-) delete mode 100644 frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_database_field_header.dart diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_database_field_editor.dart b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_database_field_editor.dart index 61fd5c62949aa..89f5c7d01d513 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_database_field_editor.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_database_field_editor.dart @@ -1,8 +1,11 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart'; +import 'package:appflowy/mobile/presentation/widgets/flowy_paginated_bottom_sheet.dart'; import 'package:appflowy/plugins/database_view/application/field/field_controller.dart'; import 'package:appflowy/plugins/database_view/application/field/field_editor_bloc.dart'; import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_context.dart'; +import 'package:appflowy/plugins/database_view/application/setting/property_bloc.dart'; +import 'package:appflowy/plugins/database_view/widgets/setting/mobile_database_property_editor.dart'; import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pb.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; @@ -11,7 +14,6 @@ import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:go_router/go_router.dart'; import 'bottom_sheet_action_widget.dart'; -import 'bottom_sheet_database_field_header.dart'; import 'bottom_sheet_rename_widget.dart'; /// The mobile bottom bar field editor is a two-deep menu. The type option @@ -67,30 +69,7 @@ class _MobileDBBottomSheetFieldEditorState Widget build(BuildContext context) { return BlocProvider.value( value: _fieldEditorBloc, - child: Padding( - padding: const EdgeInsets.fromLTRB(16, 16, 16, 32), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - _buildHeader(), - const VSpace(16), - _buildBody(), - ], - ), - ), - ); - } - - Widget _buildHeader() { - return MobileDBFieldBottomSheetHeader( - showBackButton: viewMode == MobileDBBottomSheetViewMode.typeOption, - onBack: () { - if (viewMode == MobileDBBottomSheetViewMode.typeOption) { - setState(() { - viewMode = MobileDBBottomSheetViewMode.general; - }); - } - }, + child: _buildBody(), ); } @@ -100,6 +79,22 @@ class _MobileDBBottomSheetFieldEditorState onAction: (action) { switch (action) { case MobileDBBottomSheetGeneralAction.typeOption: + FlowyBottomSheetController.of(context)!.push( + SheetPage( + title: LocaleKeys.grid_field_editProperty.tr(), + body: MobileDatabasePropertyEditor( + padding: EdgeInsets.zero, + viewId: widget.viewId, + fieldInfo: + widget.fieldController.getField(widget.field.id)!, + fieldController: widget.fieldController, + bloc: DatabasePropertyBloc( + viewId: widget.viewId, + fieldController: widget.fieldController, + ), + ), + ), + ); break; case MobileDBBottomSheetGeneralAction.toggleVisibility: _fieldEditorBloc diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_database_field_header.dart b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_database_field_header.dart deleted file mode 100644 index 5aa7e12ad9b41..0000000000000 --- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_database_field_header.dart +++ /dev/null @@ -1,52 +0,0 @@ -import 'package:appflowy/generated/locale_keys.g.dart'; -import 'package:easy_localization/easy_localization.dart'; -import 'package:flutter/material.dart'; -import 'package:go_router/go_router.dart'; - -class MobileDBFieldBottomSheetHeader extends StatelessWidget { - const MobileDBFieldBottomSheetHeader({ - super.key, - required this.showBackButton, - required this.onBack, - }); - - final bool showBackButton; - final VoidCallback onBack; - - @override - Widget build(BuildContext context) { - final theme = Theme.of(context); - return Row( - children: [ - // back button - if (showBackButton) - InkWell( - onTap: onBack, - child: const Padding( - padding: EdgeInsets.symmetric(horizontal: 8.0), - child: Icon( - Icons.arrow_back_ios_new_rounded, - size: 24.0, - ), - ), - ), - // field name - Expanded( - child: Text( - LocaleKeys.grid_field_editProperty.tr(), - style: theme.textTheme.labelSmall, - ), - ), - IconButton( - icon: Icon( - Icons.close, - color: theme.hintColor, - ), - onPressed: () { - context.pop(); - }, - ), - ], - ); - } -} diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_page.dart b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_page.dart index d1dd3527c32e9..c6a29e6f1d6b5 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_page.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_page.dart @@ -217,16 +217,16 @@ class MobileViewBottomSheetBody extends StatelessWidget { : MobileViewBottomSheetBodyAction.addToFavorites, ), ), - const VSpace(8), - // help center - BottomSheetActionWidget( - svg: FlowySvgs.m_help_center_m, - text: LocaleKeys.button_helpCenter.tr(), - onTap: () => onAction( - MobileViewBottomSheetBodyAction.helpCenter, - ), - ), + // Help Center + // const VSpace(8), + // BottomSheetActionWidget( + // svg: FlowySvgs.m_help_center_m, + // text: LocaleKeys.button_helpCenter.tr(), + // onTap: () => onAction( + // MobileViewBottomSheetBodyAction.helpCenter, + // ), + // ), ], ); } diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/mobile_calendar_events_screen.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/mobile_calendar_events_screen.dart index 6acf3fdefabfc..cdc41ea068423 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/mobile_calendar_events_screen.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/mobile_calendar_events_screen.dart @@ -1,6 +1,8 @@ import 'package:appflowy/plugins/database_view/application/row/row_cache.dart'; import 'package:appflowy/plugins/database_view/calendar/application/calendar_bloc.dart'; import 'package:appflowy/plugins/database_view/calendar/presentation/calendar_event_card.dart'; +import 'package:calendar_view/calendar_view.dart'; +import 'package:collection/collection.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra_ui/widget/spacing.dart'; import 'package:flutter/material.dart'; @@ -42,12 +44,17 @@ class _MobileCalendarEventsScreenState @override Widget build(BuildContext context) { - return BlocProvider.value( + return BlocProvider.value( value: widget.calendarBloc, child: BlocBuilder( - buildWhen: (p, c) => p.newEvent != c.newEvent, + buildWhen: (p, c) => + p.newEvent != c.newEvent && + c.newEvent?.date.withoutTime == widget.date, builder: (context, state) { - if (state.newEvent?.event != null) { + if (state.newEvent?.event != null && + _events + .none((e) => e.eventId == state.newEvent!.event!.eventId) && + state.newEvent!.date.withoutTime == widget.date) { _events.add(state.newEvent!.event!); } @@ -71,17 +78,18 @@ class _MobileCalendarEventsScreenState child: Column( children: [ const VSpace(10), - ...widget.events.map((event) { - return ListTile( - dense: true, - title: EventCard( - fieldController: widget.calendarBloc.fieldController, - event: event, - viewId: widget.viewId, - rowCache: widget.rowCache, - constraints: const BoxConstraints.expand(), - autoEdit: false, - isDraggable: false, + ..._events.map((event) { + return EventCard( + fieldController: widget.calendarBloc.fieldController, + event: event, + viewId: widget.viewId, + rowCache: widget.rowCache, + constraints: const BoxConstraints.expand(), + autoEdit: false, + isDraggable: false, + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 3, ), ); }), diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart b/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart index d6c61bbd6c36d..d4bf350aebb33 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart @@ -185,8 +185,8 @@ class _EventIndicator extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.center, children: [ Container( - width: 6, - height: 6, + width: 7, + height: 7, decoration: BoxDecoration( shape: BoxShape.circle, color: Theme.of(context).hintColor, @@ -303,8 +303,10 @@ class _DayBadge extends StatelessWidget { dayTextColor = Theme.of(context).colorScheme.onPrimary; } + final double size = PlatformExtension.isMobile ? 20 : 18; + return SizedBox( - height: 18, + height: size, child: Row( mainAxisAlignment: PlatformExtension.isMobile ? MainAxisAlignment.center @@ -322,12 +324,12 @@ class _DayBadge extends StatelessWidget { color: isToday ? Theme.of(context).colorScheme.primary : null, borderRadius: BorderRadius.circular(10), ), - width: isToday ? 18 : null, - height: isToday ? 18 : null, + width: isToday ? size : null, + height: isToday ? size : null, child: Center( child: FlowyText.medium( dayString, - fontSize: 11, + fontSize: PlatformExtension.isMobile ? 12 : 11, color: dayTextColor, ), ), diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_event_card.dart b/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_event_card.dart index 9af38c4578ffd..5695dc0c7ae6a 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_event_card.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_event_card.dart @@ -34,6 +34,7 @@ class EventCard extends StatefulWidget { required this.constraints, required this.autoEdit, this.isDraggable = true, + this.padding = EdgeInsets.zero, }); final FieldController fieldController; @@ -43,6 +44,7 @@ class EventCard extends StatefulWidget { final BoxConstraints constraints; final bool autoEdit; final bool isDraggable; + final EdgeInsets padding; @override State createState() => _EventCardState(); @@ -180,9 +182,12 @@ class _EventCardState extends State { layoutSettings: settings, ); }, - child: DecoratedBox( - decoration: decoration, - child: card, + child: Padding( + padding: widget.padding, + child: DecoratedBox( + decoration: decoration, + child: card, + ), ), ); diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_page.dart b/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_page.dart index 7b6383600f1bd..90001015e1021 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_page.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_page.dart @@ -194,10 +194,9 @@ class _CalendarPageState extends State { behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false), child: MonthView( key: _calendarState, - // TODO(Xazin): Border Color on Mobile controller: _eventController, width: constraints.maxWidth, - cellAspectRatio: PlatformExtension.isMobile ? 1 : 0.6, + cellAspectRatio: PlatformExtension.isMobile ? 0.9 : 0.6, startDay: _weekdayFromInt(firstDayOfWeek), showBorder: false, headerBuilder: _headerNavigatorBuilder, diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/mobile_field_cell.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/mobile_field_cell.dart index 7561bb12ab459..ceabfaf5ed81b 100755 --- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/mobile_field_cell.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/mobile_field_cell.dart @@ -1,8 +1,10 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; -import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart'; +import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_database_field_editor.dart'; +import 'package:appflowy/mobile/presentation/widgets/flowy_paginated_bottom_sheet.dart'; import 'package:appflowy/plugins/database_view/application/field/field_info.dart'; import 'package:appflowy/plugins/database_view/grid/application/grid_bloc.dart'; +import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra/theme_extension.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; @@ -42,12 +44,15 @@ class MobileFieldButton extends StatelessWidget { ), child: TextButton( onLongPress: () { - showMobileBottomSheet( - context: context, - builder: (context) => MobileDBBottomSheetFieldEditor( - viewId: viewId, - field: field.field, - fieldController: fieldController, + showPaginatedBottomSheet( + context, + page: SheetPage( + title: LocaleKeys.grid_field_editProperty.tr(), + body: MobileDBBottomSheetFieldEditor( + viewId: viewId, + field: field.field, + fieldController: fieldController, + ), ), ); }, diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/setting/database_setting_action.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/setting/database_setting_action.dart index 8102967502d0d..e8578fbc92a8e 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/setting/database_setting_action.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/setting/database_setting_action.dart @@ -190,7 +190,10 @@ extension DatabaseSettingActionExtension on DatabaseSettingAction { layout.name, color: Theme.of(context).colorScheme.onSurface, ), - const Icon(Icons.chevron_right), + Icon( + Icons.chevron_right, + color: Theme.of(context).colorScheme.onSurface, + ), ], ), _ => null, diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/setting/mobile_database_property_editor.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/setting/mobile_database_property_editor.dart index dd36c6b42e059..37d1c06c52d11 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/setting/mobile_database_property_editor.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/setting/mobile_database_property_editor.dart @@ -23,12 +23,14 @@ class MobileDatabasePropertyEditor extends StatefulWidget { required this.fieldInfo, required this.fieldController, required this.bloc, + this.padding = const EdgeInsets.all(16), }); final String viewId; final FieldInfo fieldInfo; final FieldController fieldController; final DatabasePropertyBloc bloc; + final EdgeInsets padding; @override State createState() => @@ -67,7 +69,7 @@ class _MobileDatabasePropertyEditorState context.read().typeOptionController; return Padding( - padding: const EdgeInsets.all(16), + padding: widget.padding, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/setting/setting_property_list.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/setting/setting_property_list.dart index 9f6c6861673c6..7e598a7f4ced1 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/setting/setting_property_list.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/setting/setting_property_list.dart @@ -196,6 +196,7 @@ class _MobileDatabasePropertyCellState fieldInfo: widget.fieldInfo, fieldController: widget.fieldController, bloc: widget.bloc, + padding: EdgeInsets.zero, ), ), ), diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/theme_upload/theme_upload_view.dart b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/theme_upload/theme_upload_view.dart index c36ca25312aa8..4fea7a10810c4 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/theme_upload/theme_upload_view.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/theme_upload/theme_upload_view.dart @@ -27,8 +27,7 @@ class ThemeUploadWidget extends StatefulWidget { class _ThemeUploadWidgetState extends State { void listen(BuildContext context, DynamicPluginState state) { setState(() { - state.when( - uninitialized: () => null, + state.whenOrNull( ready: (plugins) { child = const UploadNewThemeWidget(key: Key('upload_new_theme_widget')); @@ -42,7 +41,7 @@ class _ThemeUploadWidgetState extends State { key: Key('upload_theme_loading_widget'), ); }, - compilationFailure: (path) { + compilationFailure: () { child = const ThemeUploadFailureWidget( key: Key('upload_theme_failure_widget'), ); @@ -53,7 +52,6 @@ class _ThemeUploadWidgetState extends State { .pop(const DynamicPluginState.compilationSuccess()); } }, - deletionFailure: (path) {}, ); }); } diff --git a/frontend/appflowy_flutter/packages/flowy_infra/lib/plugins/bloc/dynamic_plugin_bloc.dart b/frontend/appflowy_flutter/packages/flowy_infra/lib/plugins/bloc/dynamic_plugin_bloc.dart index df373790277d2..5639757ab80bb 100644 --- a/frontend/appflowy_flutter/packages/flowy_infra/lib/plugins/bloc/dynamic_plugin_bloc.dart +++ b/frontend/appflowy_flutter/packages/flowy_infra/lib/plugins/bloc/dynamic_plugin_bloc.dart @@ -38,9 +38,7 @@ class DynamicPluginBloc extends Bloc { } await FlowyPluginService.instance.addPlugin(plugin); } on PluginCompilationException { - // TODO(a-wallen): Remove path from compilation failure - emit(const DynamicPluginState.compilationFailure(path: '')); - return; + return emit(const DynamicPluginState.compilationFailure()); } emit(const DynamicPluginState.compilationSuccess()); diff --git a/frontend/appflowy_flutter/packages/flowy_infra/lib/plugins/bloc/dynamic_plugin_state.dart b/frontend/appflowy_flutter/packages/flowy_infra/lib/plugins/bloc/dynamic_plugin_state.dart index 566ce567e69fc..397ddff8d37f7 100644 --- a/frontend/appflowy_flutter/packages/flowy_infra/lib/plugins/bloc/dynamic_plugin_state.dart +++ b/frontend/appflowy_flutter/packages/flowy_infra/lib/plugins/bloc/dynamic_plugin_state.dart @@ -11,9 +11,7 @@ class DynamicPluginState with _$DynamicPluginState { required Iterable plugins, }) = Ready; const factory DynamicPluginState.processing() = _Processing; - const factory DynamicPluginState.compilationFailure({ - required String path, - }) = _CompilationFailure; + const factory DynamicPluginState.compilationFailure() = _CompilationFailure; const factory DynamicPluginState.deletionFailure({ required String path, }) = _DeletionFailure;