fix: minor ui issues (#4102)

LucasXu0 · web-flow · commit fe5ce75ea8ce · 2023-12-06T13:49:30.000+08:00
* fix: minor ui issues

* feat: support using emoji as icon

* chore: update langauges

* fix: missing reminder bloc in detail page

* fix: integration test
diff --git a/frontend/appflowy_flutter/integration_test/settings/user_icon_test.dart b/frontend/appflowy_flutter/integration_test/settings/user_icon_test.dart
@@ -3,6 +3,8 @@ import 'package:appflowy/workspace/presentation/settings/widgets/settings_user_v
 import 'package:appflowy/workspace/presentation/widgets/user_avatar.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
+
+import '../util/emoji.dart';
 import '../util/util.dart';
 
 void main() {
@@ -28,27 +30,12 @@ void main() {
       await tester.pumpAndSettle();
 
       // Select first option that isn't default
-      await tester.tap(find.byType(IconOption).first);
-      await tester.pumpAndSettle();
-
-      UserAvatar userAvatar = tester.widget(userAvatarFinder) as UserAvatar;
-      expect(userAvatar.iconUrl, isNotEmpty);
-
-      // Open icon picker dialog again
-      await tester.tap(userAvatarFinder);
-      await tester.pumpAndSettle();
-
-      // Tap the default option
-      await tester.tap(
-        find.descendant(
-          of: find.byType(IconGallery),
-          matching: find.byType(UserAvatar),
-        ),
-      );
+      await tester.tapEmoji('😁');
       await tester.pumpAndSettle();
 
-      userAvatar = tester.widget(userAvatarFinder) as UserAvatar;
-      expect(userAvatar.iconUrl, isEmpty);
+      final UserAvatar userAvatar =
+          tester.widget(userAvatarFinder) as UserAvatar;
+      expect(userAvatar.iconUrl, '😁');
     });
   });
 }
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_page_header.dart b/frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_page_header.dart
@@ -1,10 +1,13 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/home/mobile_home_setting_page.dart';
 import 'package:appflowy/plugins/base/emoji/emoji_picker_screen.dart';
 import 'package:appflowy/plugins/base/icon/icon_picker.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/application/user/settings_user_bloc.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/settings_user_view.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/user_profile.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -31,33 +34,7 @@ class MobileHomePageHeader extends StatelessWidget {
             constraints: const BoxConstraints(minHeight: 48),
             child: Row(
               children: [
-                FlowyButton(
-                  useIntrinsicWidth: true,
-                  text: FlowyText(
-                    // replace with user icon
-                    userIcon.isNotEmpty ? userIcon : '🐻',
-                    fontSize: 26,
-                  ),
-                  onTap: () async {
-                    final icon = await context.push<EmojiPickerResult>(
-                      Uri(
-                        path: MobileEmojiPickerScreen.routeName,
-                        queryParameters: {
-                          MobileEmojiPickerScreen.pageTitle: 'User icon',
-                        },
-                      ).toString(),
-                    );
-                    if (icon != null) {
-                      if (context.mounted) {
-                        context.read<SettingsUserViewBloc>().add(
-                              SettingsUserEvent.updateUserIcon(
-                                iconUrl: icon.emoji,
-                              ),
-                            );
-                      }
-                    }
-                  },
-                ),
+                _UserIcon(userIcon: userIcon),
                 const HSpace(12),
                 Expanded(
                   child: Column(
@@ -96,3 +73,49 @@ class MobileHomePageHeader extends StatelessWidget {
     );
   }
 }
+
+class _UserIcon extends StatelessWidget {
+  const _UserIcon({
+    required this.userIcon,
+  });
+
+  final String userIcon;
+
+  @override
+  Widget build(BuildContext context) {
+    return FlowyButton(
+      useIntrinsicWidth: true,
+      text: builtInSVGIcons.contains(userIcon)
+          // to be compatible with old user icon
+          ? FlowySvg(
+              FlowySvgData('emoji/$userIcon'),
+              size: const Size.square(32),
+              blendMode: null,
+            )
+          : FlowyText(
+              userIcon.isNotEmpty ? userIcon : '🐻',
+              fontSize: 26,
+            ),
+      onTap: () async {
+        final icon = await context.push<EmojiPickerResult>(
+          Uri(
+            path: MobileEmojiPickerScreen.routeName,
+            queryParameters: {
+              MobileEmojiPickerScreen.pageTitle:
+                  LocaleKeys.titleBar_userIcon.tr(),
+            },
+          ).toString(),
+        );
+        if (icon != null) {
+          if (context.mounted) {
+            context.read<SettingsUserViewBloc>().add(
+                  SettingsUserEvent.updateUserIcon(
+                    iconUrl: icon.emoji,
+                  ),
+                );
+          }
+        }
+      },
+    );
+  }
+}
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/cloud/appflowy_cloud_page.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/cloud/appflowy_cloud_page.dart
@@ -13,7 +13,7 @@ class AppFlowyCloudPage extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
-        title: Text(LocaleKeys.settings_menu_cloudSetting.tr()),
+        title: Text(LocaleKeys.settings_menu_cloudSettings.tr()),
       ),
       body: Padding(
         padding: const EdgeInsets.all(20.0),
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/cloud/cloud_setting_group.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/cloud/cloud_setting_group.dart
@@ -17,7 +17,7 @@ class CloudSettingGroup extends StatelessWidget {
     return FutureBuilder(
       future: PackageInfo.fromPlatform(),
       builder: (context, snapshot) => MobileSettingGroup(
-        groupTitle: LocaleKeys.settings_menu_cloudSetting.tr(),
+        groupTitle: LocaleKeys.settings_menu_cloudSettings.tr(),
         settingItemList: [
           MobileSettingItem(
             name: LocaleKeys.settings_menu_cloudAppFlowy.tr(),
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_detail.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_detail.dart
@@ -2,8 +2,9 @@ import 'package:appflowy/plugins/database_view/application/field/field_controlle
 import 'package:appflowy/plugins/database_view/application/row/row_controller.dart';
 import 'package:appflowy/plugins/database_view/grid/application/row/row_detail_bloc.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/row_document.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
@@ -43,9 +44,17 @@ class _RowDetailPageState extends State<RowDetailPage> {
   @override
   Widget build(BuildContext context) {
     return FlowyDialog(
-      child: BlocProvider(
-        create: (context) => RowDetailBloc(rowController: widget.rowController)
-          ..add(const RowDetailEvent.initial()),
+      child: MultiBlocProvider(
+        providers: [
+          BlocProvider(
+            create: (context) =>
+                RowDetailBloc(rowController: widget.rowController)
+                  ..add(const RowDetailEvent.initial()),
+          ),
+          BlocProvider.value(
+            value: getIt<ReminderBloc>(),
+          ),
+        ],
         child: ListView(
           controller: scrollController,
           children: [
diff --git a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/third_party_sign_in_buttons.dart b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/third_party_sign_in_buttons.dart
@@ -189,35 +189,30 @@ class _MobileSignInButton extends StatelessWidget {
             width: 0.5,
           ),
         ),
-        child: Center(
-          child: Row(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              SizedBox(
-                // The icon could be in different height as original aspect ratio, we use a fixed sizebox to wrap it to make sure they all occupy the same space.
-                width: 30,
-                height: 30,
-                child: Center(
-                  child: SizedBox(
-                    width: 24,
-                    child: FlowySvg(
-                      icon,
-                      blendMode: null,
-                    ),
+        alignment: Alignment.center,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SizedBox(
+              // The icon could be in different height as original aspect ratio, we use a fixed sizebox to wrap it to make sure they all occupy the same space.
+              width: 30,
+              height: 30,
+              child: Center(
+                child: SizedBox(
+                  width: 24,
+                  child: FlowySvg(
+                    icon,
+                    blendMode: null,
                   ),
                 ),
               ),
-              const HSpace(8),
-              SizedBox(
-                // To fit the longest label 'Log in with Discord'
-                width: 135,
-                child: Text(
-                  labelText,
-                  style: Theme.of(context).textTheme.titleSmall,
-                ),
-              ),
-            ],
-          ),
+            ),
+            const HSpace(8),
+            Text(
+              labelText,
+              style: Theme.of(context).textTheme.titleSmall,
+            ),
+          ],
         ),
       ),
     );
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar_user.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar_user.dart
@@ -1,21 +1,21 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/application/menu/menu_user_bloc.dart';
 import 'package:appflowy/workspace/presentation/notifications/widgets/notification_button.dart';
 import 'package:appflowy/workspace/presentation/settings/settings_dialog.dart';
+import 'package:appflowy/workspace/presentation/widgets/user_avatar.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
-import 'package:appflowy/workspace/presentation/widgets/user_avatar.dart';
+import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart'
+    show UserProfilePB;
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
-import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart'
-    show UserProfilePB;
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:easy_localization/easy_localization.dart';
 
 class SidebarUser extends StatelessWidget {
   const SidebarUser({
@@ -42,7 +42,7 @@ class SidebarUser extends StatelessWidget {
               iconUrl: state.userProfile.iconUrl,
               name: state.userProfile.name,
             ),
-            const HSpace(10),
+            const HSpace(4),
             Expanded(
               child: _buildUserName(context, state),
             ),
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu.dart b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu.dart
@@ -61,7 +61,7 @@ class SettingsMenu extends StatelessWidget {
         SettingsMenuElement(
           page: SettingsPage.cloud,
           selectedPage: currentPage,
-          label: LocaleKeys.settings_menu_cloudSetting.tr(),
+          label: LocaleKeys.settings_menu_cloudSettings.tr(),
           icon: Icons.sync,
           changeSelectedPage: changeSelectedPage,
         ),
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_user_view.dart b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_user_view.dart
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/user_avatar.dart b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/user_avatar.dart
diff --git a/frontend/resources/translations/en.json b/frontend/resources/translations/en.json
