feat: improve scroll to focused editor on mobile

matthiasn · Jun 6, 2024 · c6dc001 · c6dc001
1 parent d6eef1f
commit c6dc001
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 51 deletions.
diff --git a/lib/widgets/journal/editor/editor_widget.dart b/lib/widgets/journal/editor/editor_widget.dart
@@ -1,5 +1,3 @@
-// ignore_for_file: avoid_dynamic_calls
-
 import 'dart:async';
 
 import 'package:flex_color_scheme/flex_color_scheme.dart';
@@ -9,7 +7,6 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:lotti/features/journal/state/entry_controller.dart';
 import 'package:lotti/l10n/app_localizations_context.dart';
 import 'package:lotti/themes/theme.dart';
-import 'package:lotti/utils/platform.dart';
 import 'package:lotti/widgets/journal/editor/editor_styles.dart';
 import 'package:lotti/widgets/journal/editor/editor_toolbar.dart';
 
@@ -40,20 +37,9 @@ class EditorWidget extends ConsumerWidget {
     final controller = notifier.controller;
     final focusNode = notifier.focusNode;
 
-    final isFocused = entryState.value?.isFocused ?? false;
     final shouldShowEditorToolBar =
         entryState.value?.shouldShowEditorToolBar ?? false;
 
-    if (isFocused && isMobile) {
-      Future.microtask(() {
-        Scrollable.ensureVisible(
-          context,
-          duration: const Duration(milliseconds: 400),
-          curve: Curves.easeInOutQuint,
-        );
-      });
-    }
-
     return Card(
       color: Theme.of(context).colorScheme.surface.brighten(),
       elevation: 0,

diff --git a/lib/widgets/journal/entry_details_widget.dart b/lib/widgets/journal/entry_details_widget.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:lotti/classes/journal_entities.dart';
 import 'package:lotti/features/journal/state/entry_controller.dart';
+import 'package:lotti/utils/platform.dart';
 import 'package:lotti/widgets/audio/audio_player.dart';
 import 'package:lotti/widgets/events/event_form.dart';
 import 'package:lotti/widgets/journal/editor/editor_widget.dart';
@@ -70,47 +71,99 @@ class EntryDetailWidget extends ConsumerWidget {
               journalImage: EntryImageWidget.new,
               orElse: () => const SizedBox.shrink(),
             ),
-            EntryDetailHeader(
-              entryId: itemId,
-              inLinkedEntries: unlinkFn != null,
-              linkedFromId: linkedFromId,
+            EntryDetailsContent(
+              itemId,
               unlinkFn: unlinkFn,
+              linkedFromId: linkedFromId,
+              parentTags: parentTags,
             ),
-            TagsListWidget(entryId: itemId, parentTags: parentTags),
-            item.maybeMap(
-              task: (_) => const SizedBox.shrink(),
-              event: (_) => const SizedBox.shrink(),
-              quantitative: (_) => const SizedBox.shrink(),
-              workout: (_) => const SizedBox.shrink(),
-              orElse: () {
-                return EditorWidget(
-                  entryId: itemId,
-                  unlinkFn: unlinkFn,
-                );
-              },
-            ),
-            item.map(
-              journalAudio: AudioPlayerWidget.new,
-              workout: WorkoutSummary.new,
-              survey: SurveySummary.new,
-              quantitative: HealthSummary.new,
-              measurement: MeasurementSummary.new,
-              task: TaskForm.new,
-              event: EventForm.new,
-              habitCompletion: (habit) => HabitSummary(
-                habit,
-                paddingLeft: 10,
-                showIcon: true,
-                showText: false,
-              ),
-              journalEntry: (_) => const SizedBox.shrink(),
-              journalImage: (_) => const SizedBox.shrink(),
-              checklistItem: (_) => const SizedBox.shrink(),
-            ),
-            EntryDetailFooter(entryId: itemId),
           ],
         ),
       ),
     );
   }
 }
+
+class EntryDetailsContent extends ConsumerWidget {
+  const EntryDetailsContent(
+    this.itemId, {
+    this.unlinkFn,
+    this.linkedFromId,
+    this.parentTags,
+    super.key,
+  });
+
+  final String itemId;
+  final Future<void> Function()? unlinkFn;
+  final String? linkedFromId;
+  final Set<String>? parentTags;
+
+  @override
+  Widget build(
+    BuildContext context,
+    WidgetRef ref,
+  ) {
+    final provider = entryControllerProvider(id: itemId);
+    final entryState = ref.watch(provider).value;
+
+    final item = entryState?.entry;
+    if (item == null || item.meta.deletedAt != null) {
+      return const SizedBox.shrink();
+    }
+
+    final isFocused = entryState?.isFocused ?? false;
+
+    if (isFocused && isMobile) {
+      Future.microtask(() {
+        Scrollable.ensureVisible(
+          context,
+          duration: const Duration(milliseconds: 400),
+          curve: Curves.easeInOutQuint,
+        );
+      });
+    }
+
+    return Column(
+      children: [
+        EntryDetailHeader(
+          entryId: itemId,
+          inLinkedEntries: unlinkFn != null,
+          linkedFromId: linkedFromId,
+          unlinkFn: unlinkFn,
+        ),
+        TagsListWidget(entryId: itemId, parentTags: parentTags),
+        item.maybeMap(
+          task: (_) => const SizedBox.shrink(),
+          event: (_) => const SizedBox.shrink(),
+          quantitative: (_) => const SizedBox.shrink(),
+          workout: (_) => const SizedBox.shrink(),
+          orElse: () {
+            return EditorWidget(
+              entryId: itemId,
+              unlinkFn: unlinkFn,
+            );
+          },
+        ),
+        item.map(
+          journalAudio: AudioPlayerWidget.new,
+          workout: WorkoutSummary.new,
+          survey: SurveySummary.new,
+          quantitative: HealthSummary.new,
+          measurement: MeasurementSummary.new,
+          task: TaskForm.new,
+          event: EventForm.new,
+          habitCompletion: (habit) => HabitSummary(
+            habit,
+            paddingLeft: 10,
+            showIcon: true,
+            showText: false,
+          ),
+          journalEntry: (_) => const SizedBox.shrink(),
+          journalImage: (_) => const SizedBox.shrink(),
+          checklistItem: (_) => const SizedBox.shrink(),
+        ),
+        EntryDetailFooter(entryId: itemId),
+      ],
+    );
+  }
+}
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,7 +1,7 @@
 name: lotti
 description: Achieve your goals and keep your data private with Lotti.
 publish_to: 'none'
-version: 0.9.476+2554
+version: 0.9.476+2555
 
 msix_config:
   display_name: LottiApp