feat: enable changing dabtabse icon on mobile

AppFlowy-IO · Jan 16, 2025 · 447aa82 · 447aa82
1 parent d06c190
commit 447aa82
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 12 deletions.
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart
@@ -5,6 +5,8 @@ import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
 import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/application/tab_bar_bloc.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
+import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_ext.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
@@ -163,9 +165,20 @@ class MobileDatabaseViewListButton extends StatelessWidget {
   }
 
   Widget _buildViewIconButton(BuildContext context, ViewPB view) {
+    final iconData = view.icon.toEmojiIconData();
+    Widget icon;
+    if (iconData.isEmpty || iconData.type != FlowyIconType.icon) {
+      icon = view.defaultIcon();
+    } else {
+      icon = RawEmojiIconWidget(
+        emoji: iconData,
+        emojiSize: 14.0,
+        enableColor: false,
+      );
+    }
     return SizedBox.square(
       dimension: 20.0,
-      child: view.defaultIcon(),
+      child: icon,
     );
   }
 

diff --git a/...d/appflowy_flutter/lib/mobile/presentation/database/view/database_view_quick_actions.dart b/...d/appflowy_flutter/lib/mobile/presentation/database/view/database_view_quick_actions.dart
@@ -1,11 +1,16 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/show_transition_bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart';
 import 'package:appflowy/plugins/database/application/database_controller.dart';
+import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
+import 'package:appflowy/shared/icon_emoji_picker/tab.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
+import 'package:appflowy/workspace/application/view/view_service.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
@@ -49,6 +54,41 @@ class MobileDatabaseViewQuickActions extends StatelessWidget {
           }
         }),
         const MobileQuickActionDivider(),
+        _actionButton(
+          context,
+          _Action.changeIcon,
+          () {
+            showMobileBottomSheet(
+              context,
+              showDragHandle: true,
+              showDivider: false,
+              showHeader: true,
+              title: LocaleKeys.titleBar_pageIcon.tr(),
+              backgroundColor: AFThemeExtension.of(context).background,
+              enableDraggableScrollable: true,
+              minChildSize: 0.6,
+              initialChildSize: 0.61,
+              scrollableWidgetBuilder: (_, controller) {
+                return Expanded(
+                  child: FlowyIconEmojiPicker(
+                    tabs: const [PickerTabType.icon],
+                    enableBackgroundColorSelection: false,
+                    onSelectedEmoji: (r) {
+                      ViewBackendService.updateViewIcon(
+                        viewId: view.id,
+                        viewIcon: r.data,
+                      );
+                      Navigator.pop(context);
+                    },
+                  ),
+                );
+              },
+              builder: (_) => const SizedBox.shrink(),
+            ).then((_) => Navigator.pop(context));
+          },
+          !isInline,
+        ),
+        const MobileQuickActionDivider(),
         _actionButton(
           context,
           _Action.duplicate,
@@ -91,14 +131,16 @@ class MobileDatabaseViewQuickActions extends StatelessWidget {
 
 enum _Action {
   edit,
-  duplicate,
-  delete;
+  changeIcon,
+  delete,
+  duplicate;
 
   String get label {
     return switch (this) {
       edit => LocaleKeys.grid_settings_editView.tr(),
       duplicate => LocaleKeys.button_duplicate.tr(),
       delete => LocaleKeys.button_delete.tr(),
+      changeIcon => LocaleKeys.disclosureAction_changeIcon.tr(),
     };
   }
 
@@ -107,6 +149,7 @@ enum _Action {
       edit => FlowySvgs.view_item_rename_s,
       duplicate => FlowySvgs.duplicate_s,
       delete => FlowySvgs.trash_s,
+      changeIcon => FlowySvgs.change_icon_s,
     };
   }
 

diff --git a/frontend/appflowy_flutter/lib/shared/icon_emoji_picker/recent_icons.dart b/frontend/appflowy_flutter/lib/shared/icon_emoji_picker/recent_icons.dart
@@ -42,15 +42,16 @@ class RecentIcons {
   static List<RecentIcon> getIconsSync() {
     final iconList = _dataMap[FlowyIconType.icon.name] ?? [];
     try {
-      return iconList
-          .map(
-            (e) => RecentIcon.fromJson(jsonDecode(e) as Map<String, dynamic>),
-          )
-
-          /// skip the data that is already stored locally but has an empty
-          /// groupName to accommodate the issue of destructive data modifications
-          .skipWhile((e) => e.groupName.isEmpty)
-          .toList();
+      final List<RecentIcon> result = [];
+      for (final map in iconList) {
+        final recentIcon =
+            RecentIcon.fromJson(jsonDecode(map) as Map<String, dynamic>);
+        if (recentIcon.groupName.isEmpty) {
+          continue;
+        }
+        result.add(recentIcon);
+      }
+      return result;
     } catch (e) {
       Log.error('RecentIcons getIcons with :$iconList', e);
     }