fix: mobile improvements for calendar (#4027)

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<FieldEditorBloc>.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

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,
+        //   ),
+        // ),
       ],
     );
   }

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<CalendarBloc>.value(
       value: widget.calendarBloc,
       child: BlocBuilder<CalendarBloc, CalendarState>(
-        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,
                       ),
                     );
                   }),

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,
               ),
             ),

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<EventCard> createState() => _EventCardState();
@@ -180,9 +182,12 @@ class _EventCardState extends State<EventCard> {
           layoutSettings: settings,
         );
       },
-      child: DecoratedBox(
-        decoration: decoration,
-        child: card,
+      child: Padding(
+        padding: widget.padding,
+        child: DecoratedBox(
+          decoration: decoration,
+          child: card,
+        ),
       ),
     );
 

frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_page.dart

@@ -194,10 +194,9 @@ class _CalendarPageState extends State<CalendarPage> {
           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,

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

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,

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<MobileDatabasePropertyEditor> createState() =>
@@ -67,7 +69,7 @@ class _MobileDatabasePropertyEditorState
                   context.read<FieldEditorBloc>().typeOptionController;
 
               return Padding(
-                padding: const EdgeInsets.all(16),
+                padding: widget.padding,
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [

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,
             ),
           ),
         ),