fix: mobile improvements for calendar (#4027)

2024-08-30 18:12:39 +00:00 · 2023-11-28 03:13:22 +02:00 · 2023-11-28 03:13:22 +02:00 · bfa9233bd4
commit bfa9233bd4
parent c659cf4ff2
14 changed files with 92 additions and 130 deletions
--- 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<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
--- 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
@ -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();
-          },
-        ),
-      ],
-    );
-  }
-}
--- 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,
+        //   ),
+        // ),
      ],
    );
  }
--- 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<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,
                      ),
                    );
                  }),
--- 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,
              ),
            ),
--- 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<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,
+        ),
      ),
    );

--- 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<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,
--- 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,
+              ),
            ),
          );
        },
--- 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,
--- 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<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: [
--- 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,
            ),
          ),
        ),
--- 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<ThemeUploadWidget> {
  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<ThemeUploadWidget> {
            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<ThemeUploadWidget> {
                .pop(const DynamicPluginState.compilationSuccess());
          }
        },
-        deletionFailure: (path) {},
      );
    });
  }
--- 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<DynamicPluginEvent, DynamicPluginState> {
      }
      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());
--- 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<FlowyDynamicPlugin> 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;