fix: sidebar issues (#5444)

* fix: cannot open the view in favorite menu * fix: pinned docs should also show up in the search list * fix: the search result doesn't update after deleting query * fix: remove widget button * fix: translation * fix: replace icon selector * fix: translations * fix: recent page title sycn slowly * fix: unable to favorite database on mobile * fix: auto focus on search textfield when opening favorite menu * feat: extend the expand icon hit test area * fix: mobile tab bar dark mode issue * fix: keep tab views alive * chore: update frontend/appflowy_flutter/lib/mobile/presentation/page_item/mobile_view_item.dart Co-authored-by: Mathias Mogensen <42929161+Xazin@users.noreply.github.com> --------- Co-authored-by: Mathias Mogensen <42929161+Xazin@users.noreply.github.com>
2024-08-30 18:12:39 +00:00 · 2024-05-31 10:34:23 +08:00
parent 8b04506ac4
commit 2c0cdfa6c5
21 changed files with 332 additions and 245 deletions
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart
@ -1,12 +1,14 @@
 import 'dart:io';

+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
-import 'package:appflowy/plugins/base/emoji/emoji_picker_screen.dart';
-import 'package:appflowy/plugins/base/icon/icon_picker.dart';
+import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/plugins/document/application/prelude.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/build_context_extension.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/cover/document_immersive_cover_bloc.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/icon/icon_selector.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/page_style/_page_style_icon_bloc.dart';
 import 'package:appflowy/shared/appflowy_network_image.dart';
 import 'package:appflowy/shared/flowy_gradient_colors.dart';
 import 'package:appflowy/shared/google_fonts_extension.dart';
@ -17,11 +19,12 @@ import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:auto_size_text_field/auto_size_text_field.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/ignore_parent_gesture.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:go_router/go_router.dart';

 double kDocumentCoverHeight = 98.0;
 double kDocumentTitlePadding = 20.0;
@ -171,12 +174,40 @@ class _DocumentImmersiveCoverState extends State<DocumentImmersiveCover> {
        ),
      ),
      onTap: () async {
-        final result = await context.push<EmojiPickerResult>(
-          MobileEmojiPickerScreen.routeName,
+        final pageStyleIconBloc = PageStyleIconBloc(view: widget.view)
+          ..add(const PageStyleIconEvent.initial());
+        await showMobileBottomSheet(
+          context,
+          showDragHandle: true,
+          showDivider: false,
+          showDoneButton: true,
+          showHeader: true,
+          title: LocaleKeys.titleBar_pageIcon.tr(),
+          backgroundColor: AFThemeExtension.of(context).background,
+          enableDraggableScrollable: true,
+          minChildSize: 0.6,
+          initialChildSize: 0.61,
+          showRemoveButton: true,
+          onRemove: () {
+            pageStyleIconBloc.add(
+              const PageStyleIconEvent.updateIcon('', true),
+            );
+          },
+          scrollableWidgetBuilder: (_, controller) {
+            return BlocProvider.value(
+              value: pageStyleIconBloc,
+              child: Expanded(
+                child: Scrollbar(
+                  controller: controller,
+                  child: IconSelector(
+                    scrollController: controller,
+                  ),
+                ),
+              ),
+            );
+          },
+          builder: (_) => const SizedBox.shrink(),
        );
-        if (result != null && context.mounted) {
-          context.read<ViewBloc>().add(ViewEvent.updateIcon(result.emoji));
-        }
      },
    );
  }
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/icon/icon_selector.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/icon/icon_selector.dart
@ -0,0 +1,159 @@
+import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_text_field.dart';
+import 'package:appflowy/plugins/base/emoji/emoji_picker.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/page_style/_page_style_icon_bloc.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_emoji_mart/flutter_emoji_mart.dart';
+
+class IconSelector extends StatefulWidget {
+  const IconSelector({
+    super.key,
+    required this.scrollController,
+  });
+
+  final ScrollController scrollController;
+
+  @override
+  State<IconSelector> createState() => _IconSelectorState();
+}
+
+class _IconSelectorState extends State<IconSelector> {
+  EmojiData? emojiData;
+  List<String> availableEmojis = [];
+
+  PageStyleIconBloc? pageStyleIconBloc;
+
+  @override
+  void initState() {
+    super.initState();
+
+    // load the emoji data from cache if it's available
+    if (kCachedEmojiData != null) {
+      emojiData = kCachedEmojiData;
+      availableEmojis = _setupAvailableEmojis(emojiData!);
+    } else {
+      EmojiData.builtIn().then(
+        (value) {
+          kCachedEmojiData = value;
+          setState(() {
+            emojiData = value;
+            availableEmojis = _setupAvailableEmojis(value);
+          });
+        },
+      );
+    }
+
+    pageStyleIconBloc = context.read<PageStyleIconBloc>();
+  }
+
+  @override
+  void dispose() {
+    pageStyleIconBloc?.close();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (emojiData == null) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    return RepaintBoundary(
+      child: BlocBuilder<PageStyleIconBloc, PageStyleIconState>(
+        builder: (_, state) => Column(
+          children: [
+            _buildSearchBar(context),
+            Expanded(
+              child: GridView.count(
+                crossAxisCount: 7,
+                controller: widget.scrollController,
+                children: [
+                  for (final emoji in availableEmojis)
+                    _buildEmoji(context, emoji, state.icon),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildEmoji(
+    BuildContext context,
+    String emoji,
+    String? selectedEmoji,
+  ) {
+    Widget child = SizedBox.square(
+      dimension: 24.0,
+      child: Center(
+        child: FlowyText.emoji(
+          emoji,
+          fontSize: 24,
+        ),
+      ),
+    );
+
+    if (emoji == selectedEmoji) {
+      child = Center(
+        child: Container(
+          width: 40,
+          height: 40,
+          decoration: ShapeDecoration(
+            shape: RoundedRectangleBorder(
+              side: const BorderSide(
+                width: 1.40,
+                strokeAlign: BorderSide.strokeAlignOutside,
+                color: Color(0xFF00BCF0),
+              ),
+              borderRadius: BorderRadius.circular(10),
+            ),
+          ),
+          child: child,
+        ),
+      );
+    }
+
+    return GestureDetector(
+      onTap: () {
+        context.read<PageStyleIconBloc>().add(
+              PageStyleIconEvent.updateIcon(emoji, true),
+            );
+      },
+      child: child,
+    );
+  }
+
+  List<String> _setupAvailableEmojis(EmojiData emojiData) {
+    final categories = emojiData.categories;
+    availableEmojis = categories
+        .map((e) => e.emojiIds.map((e) => emojiData.getEmojiById(e)))
+        .expand((e) => e)
+        .toList();
+    return availableEmojis;
+  }
+
+  Widget _buildSearchBar(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        vertical: 8.0,
+        horizontal: 12.0,
+      ),
+      child: FlowyMobileSearchTextField(
+        onChanged: (keyword) {
+          if (emojiData == null) {
+            return;
+          }
+
+          final filtered = emojiData!.filterByKeyword(keyword);
+          final availableEmojis = _setupAvailableEmojis(filtered);
+
+          setState(() {
+            this.availableEmojis = availableEmojis;
+          });
+        },
+      ),
+    );
+  }
+}
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/page_style/_page_style_icon.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/page_style/_page_style_icon.dart
@ -1,8 +1,7 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
-import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_text_field.dart';
-import 'package:appflowy/plugins/base/emoji/emoji_picker.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/icon/icon_selector.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/page_style/_page_style_icon_bloc.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/page_style/_page_style_util.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
@ -11,7 +10,6 @@ import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_emoji_mart/flutter_emoji_mart.dart';
 import 'package:go_router/go_router.dart';

 class PageStyleIcon extends StatefulWidget {
@ -94,7 +92,7 @@ class _PageStyleIconState extends State<PageStyleIcon> {
          child: Expanded(
            child: Scrollbar(
              controller: controller,
-              child: _IconSelector(
+              child: IconSelector(
                scrollController: controller,
              ),
            ),
@ -105,154 +103,3 @@ class _PageStyleIconState extends State<PageStyleIcon> {
    );
  }
 }
-
-class _IconSelector extends StatefulWidget {
-  const _IconSelector({
-    required this.scrollController,
-  });
-
-  final ScrollController scrollController;
-
-  @override
-  State<_IconSelector> createState() => _IconSelectorState();
-}
-
-class _IconSelectorState extends State<_IconSelector> {
-  EmojiData? emojiData;
-  List<String> availableEmojis = [];
-
-  PageStyleIconBloc? pageStyleIconBloc;
-
-  @override
-  void initState() {
-    super.initState();
-
-    // load the emoji data from cache if it's available
-    if (kCachedEmojiData != null) {
-      emojiData = kCachedEmojiData;
-      availableEmojis = _setupAvailableEmojis(emojiData!);
-    } else {
-      EmojiData.builtIn().then(
-        (value) {
-          kCachedEmojiData = value;
-          setState(() {
-            emojiData = value;
-            availableEmojis = _setupAvailableEmojis(value);
-          });
-        },
-      );
-    }
-
-    pageStyleIconBloc = context.read<PageStyleIconBloc>();
-  }
-
-  @override
-  void dispose() {
-    pageStyleIconBloc?.close();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    if (emojiData == null) {
-      return const Center(child: CircularProgressIndicator());
-    }
-
-    return RepaintBoundary(
-      child: BlocBuilder<PageStyleIconBloc, PageStyleIconState>(
-        builder: (_, state) => Column(
-          children: [
-            _buildSearchBar(context),
-            Expanded(
-              child: GridView.count(
-                crossAxisCount: 7,
-                controller: widget.scrollController,
-                children: [
-                  for (final emoji in availableEmojis)
-                    _buildEmoji(context, emoji, state.icon),
-                ],
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-
-  Widget _buildEmoji(
-    BuildContext context,
-    String emoji,
-    String? selectedEmoji,
-  ) {
-    Widget child = SizedBox.square(
-      dimension: 24.0,
-      child: Center(
-        child: FlowyText.emoji(
-          emoji,
-          fontSize: 24,
-        ),
-      ),
-    );
-
-    if (emoji == selectedEmoji) {
-      child = Center(
-        child: Container(
-          width: 40,
-          height: 40,
-          decoration: ShapeDecoration(
-            shape: RoundedRectangleBorder(
-              side: const BorderSide(
-                width: 1.40,
-                strokeAlign: BorderSide.strokeAlignOutside,
-                color: Color(0xFF00BCF0),
-              ),
-              borderRadius: BorderRadius.circular(10),
-            ),
-          ),
-          child: child,
-        ),
-      );
-    }
-
-    return GestureDetector(
-      onTap: () {
-        context.read<PageStyleIconBloc>().add(
-              PageStyleIconEvent.updateIcon(emoji, true),
-            );
-      },
-      child: child,
-    );
-  }
-
-  List<String> _setupAvailableEmojis(EmojiData emojiData) {
-    final categories = emojiData.categories;
-    availableEmojis = categories
-        .map((e) => e.emojiIds.map((e) => emojiData.getEmojiById(e)))
-        .expand((e) => e)
-        .toList();
-    return availableEmojis;
-  }
-
-  Widget _buildSearchBar(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.symmetric(
-        vertical: 8.0,
-        horizontal: 12.0,
-      ),
-      child: FlowyMobileSearchTextField(
-        onChanged: (keyword) {
-          if (emojiData == null) {
-            return;
-          }
-
-          final filtered = emojiData!.filterByKeyword(keyword);
-          final availableEmojis = _setupAvailableEmojis(filtered);
-
-          setState(() {
-            this.availableEmojis = availableEmojis;
-          });
-        },
-      ),
-    );
-  }
-}