Skip to content

Commit 4e3c479

Browse files
LucasXu0LucasXu0
committed
feat: implement new settings page design on mobile
1 parent 33ef5cc commit 4e3c479

15 files changed

+150
-195
lines changed

‎frontend/appflowy_flutter/lib/mobile/presentation/setting/about/about_setting_group.dart

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import 'package:appflowy/core/helpers/url_launcher.dart';
22
import 'package:appflowy/generated/locale_keys.g.dart';
3+
import 'package:appflowy/mobile/presentation/setting/widgets/mobile_setting_trailing.dart';
34
import 'package:appflowy/startup/tasks/device_info_task.dart';
45
import 'package:appflowy/workspace/presentation/settings/widgets/feature_flags/mobile_feature_flag_screen.dart';
56
import 'package:easy_localization/easy_localization.dart';
6-
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
77
import 'package:flutter/foundation.dart';
88
import 'package:flutter/material.dart';
99
import 'package:go_router/go_router.dart';
@@ -22,33 +22,34 @@ class AboutSettingGroup extends StatelessWidget {
2222
settingItemList: [
2323
MobileSettingItem(
2424
name: LocaleKeys.settings_mobile_privacyPolicy.tr(),
25-
trailing: const Icon(
26-
Icons.chevron_right,
25+
trailing: MobileSettingTrailing(
26+
text: '',
2727
),
2828
onTap: () => afLaunchUrlString('https://appflowy.com/privacy'),
2929
),
3030
MobileSettingItem(
3131
name: LocaleKeys.settings_mobile_termsAndConditions.tr(),
32-
trailing: const Icon(
33-
Icons.chevron_right,
32+
trailing: MobileSettingTrailing(
33+
text: '',
3434
),
3535
onTap: () => afLaunchUrlString('https://appflowy.com/terms'),
3636
),
3737
if (kDebugMode)
3838
MobileSettingItem(
3939
name: 'Feature Flags',
40-
trailing: const Icon(
41-
Icons.chevron_right,
40+
trailing: MobileSettingTrailing(
41+
text: '',
4242
),
4343
onTap: () {
4444
context.push(FeatureFlagScreen.routeName);
4545
},
4646
),
4747
MobileSettingItem(
4848
name: LocaleKeys.settings_mobile_version.tr(),
49-
trailing: FlowyText(
50-
'${ApplicationInfo.applicationVersion} (${ApplicationInfo.buildNumber})',
51-
color: Theme.of(context).colorScheme.onSurface,
49+
trailing: MobileSettingTrailing(
50+
text:
51+
'${ApplicationInfo.applicationVersion} (${ApplicationInfo.buildNumber})',
52+
showArrow: false,
5253
),
5354
),
5455
],

‎frontend/appflowy_flutter/lib/mobile/presentation/setting/ai/ai_settings_group.dart

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import 'package:appflowy/generated/locale_keys.g.dart';
22
import 'package:appflowy/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart';
33
import 'package:appflowy/mobile/presentation/setting/widgets/mobile_setting_group_widget.dart';
44
import 'package:appflowy/mobile/presentation/setting/widgets/mobile_setting_item_widget.dart';
5+
import 'package:appflowy/mobile/presentation/setting/widgets/mobile_setting_trailing.dart';
56
import 'package:appflowy/mobile/presentation/widgets/flowy_option_tile.dart';
67
import 'package:appflowy/workspace/application/settings/ai/settings_ai_bloc.dart';
78
import 'package:appflowy_backend/protobuf/flowy-user/user_profile.pb.dart';
89
import 'package:easy_localization/easy_localization.dart';
9-
import 'package:flowy_infra_ui/style_widget/text.dart';
1010
import 'package:flutter/material.dart';
1111
import 'package:flutter_bloc/flutter_bloc.dart';
1212
import 'package:go_router/go_router.dart';
@@ -23,7 +23,6 @@ class AiSettingsGroup extends StatelessWidget {
2323

2424
@override
2525
Widget build(BuildContext context) {
26-
final theme = Theme.of(context);
2726
return BlocProvider(
2827
create: (context) => SettingsAIBloc(
2928
userProfile,
@@ -36,21 +35,8 @@ class AiSettingsGroup extends StatelessWidget {
3635
settingItemList: [
3736
MobileSettingItem(
3837
name: LocaleKeys.settings_aiPage_keys_llmModelType.tr(),
39-
trailing: ConstrainedBox(
40-
constraints: const BoxConstraints(maxWidth: 200),
41-
child: Row(
42-
mainAxisSize: MainAxisSize.min,
43-
children: [
44-
Flexible(
45-
child: FlowyText(
46-
state.availableModels?.selectedModel.name ?? "",
47-
color: theme.colorScheme.onSurface,
48-
overflow: TextOverflow.ellipsis,
49-
),
50-
),
51-
const Icon(Icons.chevron_right),
52-
],
53-
),
38+
trailing: MobileSettingTrailing(
39+
text: state.availableModels?.selectedModel.name ?? "",
5440
),
5541
onTap: () => _onLLMModelTypeTap(context, state),
5642
),

‎frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/rtl_setting.dart

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import 'package:appflowy/generated/locale_keys.g.dart';
22
import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
3+
import 'package:appflowy/mobile/presentation/setting/widgets/mobile_setting_trailing.dart';
34
import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
45
import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
56
import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
67
import 'package:easy_localization/easy_localization.dart';
7-
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
88
import 'package:flutter/material.dart';
99
import 'package:flutter_bloc/flutter_bloc.dart';
1010

@@ -17,20 +17,12 @@ class RTLSetting extends StatelessWidget {
1717

1818
@override
1919
Widget build(BuildContext context) {
20-
final theme = Theme.of(context);
2120
final textDirection =
2221
context.watch<AppearanceSettingsCubit>().state.textDirection;
2322
return MobileSettingItem(
2423
name: LocaleKeys.settings_appearance_textDirection_label.tr(),
25-
trailing: Row(
26-
mainAxisSize: MainAxisSize.min,
27-
children: [
28-
FlowyText(
29-
_textDirectionLabelText(textDirection),
30-
color: theme.colorScheme.onSurface,
31-
),
32-
const Icon(Icons.chevron_right),
33-
],
24+
trailing: MobileSettingTrailing(
25+
text: _textDirectionLabelText(textDirection),
3426
),
3527
onTap: () {
3628
showMobileBottomSheet(

‎frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/text_scale_setting.dart

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import 'package:appflowy/generated/locale_keys.g.dart';
22
import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
3+
import 'package:appflowy/mobile/presentation/setting/widgets/mobile_setting_trailing.dart';
34
import 'package:appflowy/startup/startup.dart';
45
import 'package:appflowy/startup/tasks/app_window_size_manager.dart';
56
import 'package:appflowy/workspace/presentation/home/hotkeys.dart';
67
import 'package:appflowy/workspace/presentation/widgets/more_view_actions/widgets/font_size_stepper.dart';
78
import 'package:easy_localization/easy_localization.dart';
8-
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
99
import 'package:flutter/material.dart';
1010
import 'package:scaled_app/scaled_app.dart';
1111

@@ -42,18 +42,10 @@ class _DisplaySizeSettingState extends State<DisplaySizeSetting> {
4242

4343
@override
4444
Widget build(BuildContext context) {
45-
final theme = Theme.of(context);
4645
return MobileSettingItem(
4746
name: LocaleKeys.settings_appearance_displaySize.tr(),
48-
trailing: Row(
49-
mainAxisSize: MainAxisSize.min,
50-
children: [
51-
FlowyText(
52-
scaleFactor.toStringAsFixed(2),
53-
color: theme.colorScheme.onSurface,
54-
),
55-
const Icon(Icons.chevron_right),
56-
],
47+
trailing: MobileSettingTrailing(
48+
text: scaleFactor.toStringAsFixed(1),
5749
),
5850
onTap: () {
5951
showMobileBottomSheet(

‎frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/theme_setting.dart

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import 'package:appflowy/generated/flowy_svgs.g.dart';
22
import 'package:appflowy/generated/locale_keys.g.dart';
33
import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
4+
import 'package:appflowy/mobile/presentation/setting/widgets/mobile_setting_trailing.dart';
45
import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
56
import 'package:appflowy/util/theme_mode_extension.dart';
67
import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
78
import 'package:easy_localization/easy_localization.dart';
8-
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
99
import 'package:flutter/material.dart';
1010
import 'package:flutter_bloc/flutter_bloc.dart';
1111

@@ -18,19 +18,11 @@ class ThemeSetting extends StatelessWidget {
1818

1919
@override
2020
Widget build(BuildContext context) {
21-
final theme = Theme.of(context);
2221
final themeMode = context.watch<AppearanceSettingsCubit>().state.themeMode;
2322
return MobileSettingItem(
2423
name: LocaleKeys.settings_appearance_themeMode_label.tr(),
25-
trailing: Row(
26-
mainAxisSize: MainAxisSize.min,
27-
children: [
28-
FlowyText(
29-
themeMode.labelText,
30-
color: theme.colorScheme.onSurface,
31-
),
32-
const Icon(Icons.chevron_right),
33-
],
24+
trailing: MobileSettingTrailing(
25+
text: themeMode.labelText,
3426
),
3527
onTap: () {
3628
showMobileBottomSheet(

‎frontend/appflowy_flutter/lib/mobile/presentation/setting/cloud/cloud_setting_group.dart

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import 'package:appflowy/generated/locale_keys.g.dart';
1+
import 'package:appflowy/env/cloud_env.dart';
22
import 'package:appflowy/mobile/presentation/setting/cloud/appflowy_cloud_page.dart';
33
import 'package:appflowy/mobile/presentation/setting/widgets/mobile_setting_group_widget.dart';
44
import 'package:appflowy/mobile/presentation/setting/widgets/mobile_setting_item_widget.dart';
5-
import 'package:easy_localization/easy_localization.dart';
5+
import 'package:appflowy/mobile/presentation/setting/widgets/mobile_setting_trailing.dart';
6+
import 'package:appflowy/workspace/presentation/settings/widgets/setting_cloud.dart';
67
import 'package:flutter/material.dart';
78
import 'package:go_router/go_router.dart';
8-
import 'package:package_info_plus/package_info_plus.dart';
99

1010
class CloudSettingGroup extends StatelessWidget {
1111
const CloudSettingGroup({
@@ -15,19 +15,23 @@ class CloudSettingGroup extends StatelessWidget {
1515
@override
1616
Widget build(BuildContext context) {
1717
return FutureBuilder(
18-
future: PackageInfo.fromPlatform(),
19-
builder: (context, snapshot) => MobileSettingGroup(
20-
groupTitle: LocaleKeys.settings_menu_cloudSettings.tr(),
21-
settingItemList: [
22-
MobileSettingItem(
23-
name: LocaleKeys.settings_menu_cloudAppFlowy.tr(),
24-
trailing: const Icon(
25-
Icons.chevron_right,
18+
future: getAuthenticatorType(),
19+
builder: (context, snapshot) {
20+
final cloudType = snapshot.data ?? AuthenticatorType.appflowyCloud;
21+
final name = titleFromCloudType(cloudType);
22+
return MobileSettingGroup(
23+
groupTitle: 'Cloud settings',
24+
settingItemList: [
25+
MobileSettingItem(
26+
name: 'Cloud server',
27+
trailing: MobileSettingTrailing(
28+
text: name,
29+
),
30+
onTap: () => context.push(AppFlowyCloudPage.routeName),
2631
),
27-
onTap: () => context.push(AppFlowyCloudPage.routeName),
28-
),
29-
],
30-
),
32+
],
33+
);
34+
},
3135
);
3236
}
3337
}

‎frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_setting.dart

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import 'dart:async';
22

33
import 'package:appflowy/generated/locale_keys.g.dart';
44
import 'package:appflowy/mobile/presentation/setting/font/font_picker_screen.dart';
5+
import 'package:appflowy/mobile/presentation/setting/widgets/mobile_setting_trailing.dart';
56
import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
67
import 'package:appflowy/util/font_family_extension.dart';
78
import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
89
import 'package:easy_localization/easy_localization.dart';
9-
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
1010
import 'package:flutter/material.dart';
1111
import 'package:flutter_bloc/flutter_bloc.dart';
1212
import 'package:go_router/go_router.dart';
@@ -20,21 +20,12 @@ class FontSetting extends StatelessWidget {
2020

2121
@override
2222
Widget build(BuildContext context) {
23-
final theme = Theme.of(context);
2423
final selectedFont = context.watch<AppearanceSettingsCubit>().state.font;
2524
final name = selectedFont.fontFamilyDisplayName;
2625
return MobileSettingItem(
2726
name: LocaleKeys.settings_appearance_fontFamily_label.tr(),
28-
trailing: Row(
29-
mainAxisSize: MainAxisSize.min,
30-
children: [
31-
FlowyText(
32-
lineHeight: 1.0,
33-
name,
34-
color: theme.colorScheme.onSurface,
35-
),
36-
const Icon(Icons.chevron_right),
37-
],
27+
trailing: MobileSettingTrailing(
28+
text: name,
3829
),
3930
onTap: () async {
4031
final newFont = await context.push<String>(FontPickerScreen.routeName);

‎frontend/appflowy_flutter/lib/mobile/presentation/setting/language_setting_group.dart

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import 'package:appflowy/generated/locale_keys.g.dart';
22
import 'package:appflowy/mobile/presentation/setting/language/language_picker_screen.dart';
3+
import 'package:appflowy/mobile/presentation/setting/widgets/mobile_setting_trailing.dart';
34
import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
45
import 'package:easy_localization/easy_localization.dart';
56
import 'package:flowy_infra/language.dart';
6-
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
77
import 'package:flutter/material.dart';
88
import 'package:flutter_bloc/flutter_bloc.dart';
99
import 'package:go_router/go_router.dart';
@@ -28,22 +28,13 @@ class _LanguageSettingGroupState extends State<LanguageSettingGroup> {
2828
return state.locale;
2929
},
3030
builder: (context, locale) {
31-
final theme = Theme.of(context);
3231
return MobileSettingGroup(
3332
groupTitle: LocaleKeys.settings_menu_language.tr(),
3433
settingItemList: [
3534
MobileSettingItem(
3635
name: LocaleKeys.settings_menu_language.tr(),
37-
trailing: Row(
38-
mainAxisSize: MainAxisSize.min,
39-
children: [
40-
FlowyText(
41-
lineHeight: 1.0,
42-
languageFromLocale(locale),
43-
color: theme.colorScheme.onSurface,
44-
),
45-
const Icon(Icons.chevron_right),
46-
],
36+
trailing: MobileSettingTrailing(
37+
text: languageFromLocale(locale),
4738
),
4839
onTap: () async {
4940
final newLocale =

‎frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/personal_info_setting_group.dart

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import 'package:appflowy/generated/flowy_svgs.g.dart';
21
import 'package:appflowy/generated/locale_keys.g.dart';
32
import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
3+
import 'package:appflowy/mobile/presentation/setting/widgets/mobile_setting_trailing.dart';
44
import 'package:appflowy/startup/startup.dart';
55
import 'package:appflowy/workspace/application/user/prelude.dart';
66
import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
77
import 'package:appflowy_ui/appflowy_ui.dart';
88
import 'package:easy_localization/easy_localization.dart';
9-
import 'package:flowy_infra_ui/widget/spacing.dart';
109
import 'package:flutter/material.dart';
1110
import 'package:flutter_bloc/flutter_bloc.dart';
1211

@@ -35,23 +34,9 @@ class PersonalInfoSettingGroup extends StatelessWidget {
3534
groupTitle: LocaleKeys.settings_accountPage_title.tr(),
3635
settingItemList: [
3736
MobileSettingItem(
38-
name: 'User Name',
39-
trailing: Row(
40-
mainAxisSize: MainAxisSize.min,
41-
children: [
42-
Text(
43-
userName,
44-
style: theme.textStyle.heading4.standard(
45-
color: theme.textColorScheme.secondary,
46-
),
47-
),
48-
const HSpace(8),
49-
FlowySvg(
50-
FlowySvgs.toolbar_arrow_right_m,
51-
size: Size.square(24),
52-
color: theme.iconColorScheme.tertiary,
53-
),
54-
],
37+
name: 'User name',
38+
trailing: MobileSettingTrailing(
39+
text: userName,
5540
),
5641
onTap: () {
5742
showMobileBottomSheet(

0 commit comments

Comments
 (0)