wip: Adjust ui details(part2)

lijy91 · Aug 31, 2024 · 0eb9973 · 0eb9973
1 parent 0f1d05f
commit 0eb9973
Show file tree

Hide file tree

Showing 39 changed files with 412 additions and 1,099 deletions.
diff --git a/apps/biyi_app/lib/app/available_ocr_engines/page.dart b/apps/biyi_app/lib/app/available_ocr_engines/page.dart
@@ -2,11 +2,8 @@ import 'package:biyi_app/generated/locale_keys.g.dart';
 import 'package:biyi_app/services/api_client.dart';
 import 'package:biyi_app/states/settings.dart';
 import 'package:biyi_app/widgets/customized_app_bar/customized_app_bar.dart';
-import 'package:biyi_app/widgets/list_section.dart';
-import 'package:biyi_app/widgets/list_tile.dart';
 import 'package:biyi_app/widgets/widgets.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:go_router/go_router.dart';
 import 'package:reflect_ui/reflect_ui.dart';
 
@@ -42,6 +39,12 @@ class _AvailableOcrEnginesPageState extends State<AvailableOcrEnginesPage> {
     });
   }
 
+  void _handleSelectedEngineIdChanged(String? engineId) {
+    setState(() {
+      _selectedEngineId = engineId;
+    });
+  }
+
   Future<void> _handleClickOk() async {
     OcrEngineConfig? ocrEngineConfig =
         Settings.instance.privateOcrEngine(_selectedEngineId).get() ??
@@ -56,19 +59,13 @@ class _AvailableOcrEnginesPageState extends State<AvailableOcrEnginesPage> {
           ListSection(
             children: [
               for (var ocrEngineConfig in _proOcrEngineList)
-                ListTile(
+                RadioListTile<String>(
+                  value: ocrEngineConfig.id,
+                  groupValue: _selectedEngineId,
+                  onChanged: _handleSelectedEngineIdChanged,
+                  useCheckmarkStyle: true,
                   leading: OcrEngineIcon(ocrEngineConfig.type),
                   title: OcrEngineName(ocrEngineConfig),
-                  additionalInfo: ocrEngineConfig.id == _selectedEngineId
-                      ? const Icon(
-                          FluentIcons.checkmark_circle_16_filled,
-                        )
-                      : null,
-                  onTap: () {
-                    setState(() {
-                      _selectedEngineId = ocrEngineConfig.id;
-                    });
-                  },
                 ),
             ],
           ),
@@ -78,19 +75,13 @@ class _AvailableOcrEnginesPageState extends State<AvailableOcrEnginesPage> {
           ),
           children: [
             for (var ocrEngineConfig in _privateOcrEngineList)
-              ListTile(
+              RadioListTile<String>(
+                value: ocrEngineConfig.id,
+                groupValue: _selectedEngineId,
+                onChanged: _handleSelectedEngineIdChanged,
+                useCheckmarkStyle: true,
                 leading: OcrEngineIcon(ocrEngineConfig.type),
                 title: OcrEngineName(ocrEngineConfig),
-                additionalInfo: ocrEngineConfig.id == _selectedEngineId
-                    ? const Icon(
-                        FluentIcons.checkmark_circle_16_filled,
-                      )
-                    : null,
-                onTap: () {
-                  setState(() {
-                    _selectedEngineId = ocrEngineConfig.id;
-                  });
-                },
               ),
             if (_privateOcrEngineList.isEmpty)
               ListTile(
@@ -113,7 +104,7 @@ class _AvailableOcrEnginesPageState extends State<AvailableOcrEnginesPage> {
         ),
         actions: [
           Button(
-            variant: ButtonVariant.filled,
+            variant: ButtonVariant.subtle,
             onPressed: _handleClickOk,
             child: Text(LocaleKeys.ok.tr()),
           ),

diff --git a/apps/biyi_app/lib/app/available_translation_engines/page.dart b/apps/biyi_app/lib/app/available_translation_engines/page.dart
@@ -2,11 +2,8 @@ import 'package:biyi_app/generated/locale_keys.g.dart';
 import 'package:biyi_app/services/api_client.dart';
 import 'package:biyi_app/states/settings.dart';
 import 'package:biyi_app/widgets/customized_app_bar/customized_app_bar.dart';
-import 'package:biyi_app/widgets/list_section.dart';
-import 'package:biyi_app/widgets/list_tile.dart';
 import 'package:biyi_app/widgets/widgets.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:go_router/go_router.dart';
 import 'package:reflect_ui/reflect_ui.dart';
 
@@ -45,6 +42,12 @@ class _AvailableTranslationEnginesPageState
     });
   }
 
+  void _handleSelectedEngineIdChanged(String? engineId) {
+    setState(() {
+      _selectedEngineId = engineId;
+    });
+  }
+
   Future<void> _handleClickOk() async {
     TranslationEngineConfig? engineConfig =
         Settings.instance.privateTranslationEngine(_selectedEngineId).get() ??
@@ -59,19 +62,13 @@ class _AvailableTranslationEnginesPageState
           ListSection(
             children: [
               for (var engineConfig in _proEngineList)
-                ListTile(
+                RadioListTile<String>(
+                  value: engineConfig.id,
+                  groupValue: _selectedEngineId,
+                  onChanged: _handleSelectedEngineIdChanged,
+                  useCheckmarkStyle: true,
                   leading: TranslationEngineIcon(engineConfig.type),
                   title: TranslationEngineName(engineConfig),
-                  additionalInfo: engineConfig.id == _selectedEngineId
-                      ? const Icon(
-                          FluentIcons.checkmark_circle_16_filled,
-                        )
-                      : null,
-                  onTap: () {
-                    setState(() {
-                      _selectedEngineId = engineConfig.id;
-                    });
-                  },
                 ),
             ],
           ),
@@ -81,19 +78,13 @@ class _AvailableTranslationEnginesPageState
           ),
           children: [
             for (var engineConfig in _privateEngineList)
-              ListTile(
+              RadioListTile<String>(
+                value: engineConfig.id,
+                groupValue: _selectedEngineId,
+                onChanged: _handleSelectedEngineIdChanged,
+                useCheckmarkStyle: true,
                 leading: TranslationEngineIcon(engineConfig.type),
                 title: TranslationEngineName(engineConfig),
-                additionalInfo: engineConfig.id == _selectedEngineId
-                    ? const Icon(
-                        FluentIcons.checkmark_circle_16_filled,
-                      )
-                    : null,
-                onTap: () {
-                  setState(() {
-                    _selectedEngineId = engineConfig.id;
-                  });
-                },
               ),
             if (_privateEngineList.isEmpty)
               ListTile(

diff --git a/apps/biyi_app/lib/app/home/limited_functionality_banner.dart b/apps/biyi_app/lib/app/home/limited_functionality_banner.dart
@@ -1,5 +1,6 @@
 import 'package:biyi_app/generated/locale_keys.g.dart';
 import 'package:biyi_app/utils/utils.dart';
+import 'package:biyi_app/widgets/feature_status_icon/feature_status_icon.dart';
 import 'package:bot_toast/bot_toast.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:fluentui_system_icons/fluentui_system_icons.dart';
@@ -30,24 +31,7 @@ class AllowAccessListItem extends StatelessWidget {
       gap: 6,
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        Container(
-          width: 16,
-          height: 16,
-          padding: const EdgeInsets.all(2),
-          decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(16),
-            color: allowed ? ReflectColors.green : ReflectColors.red,
-          ),
-          child: Center(
-            child: Icon(
-              allowed
-                  ? FluentIcons.checkmark_12_regular
-                  : FluentIcons.dismiss_12_regular,
-              color: Colors.white,
-              size: 12,
-            ),
-          ),
-        ),
+        FeatureStatusIcon(supported: allowed),
         Expanded(
           child: Wrap(
             spacing: 30,

diff --git a/apps/biyi_app/lib/app/home/page.dart b/apps/biyi_app/lib/app/home/page.dart
@@ -45,7 +45,7 @@ class _HomePageState extends State<HomePage> {
         boxShadow: Theme.of(context).brightness == Brightness.light
             ? [
                 BoxShadow(
-                  color: ReflectColors.gray.withOpacity(0.2),
+                  color: ReflectColors.neutral.withOpacity(0.2),
                   blurRadius: 16,
                 ),
               ]

diff --git a/apps/biyi_app/lib/app/router_config.dart b/apps/biyi_app/lib/app/router_config.dart
@@ -273,10 +273,15 @@ final routerConfig = GoRouter(
     GoRoute(
       path: '/supported-languages',
       pageBuilder: (BuildContext context, GoRouterState state) {
+        bool isDark = Theme.of(context).brightness == Brightness.dark;
         return DialogPage(
-          barrierColor: Colors.black.withOpacity(0.5),
-          builder: (_) => SupportedLanguagesPage(
-            selectedLanguage: state.uri.queryParameters['selectedLanguage'],
+          barrierColor: isDark ? Colors.black38 : Colors.black54,
+          builder: (_) => Container(
+            padding: const EdgeInsets.all(2),
+            decoration: BoxDecoration(
+              border: Border.all(color: Colors.white, width: 1),
+            ),
+            child: const SupportedLanguagesPage(),
           ),
         );
       },

diff --git a/apps/biyi_app/lib/app/settings/about/page.dart b/apps/biyi_app/lib/app/settings/about/page.dart
@@ -1,11 +1,8 @@
 import 'package:biyi_app/generated/locale_keys.g.dart';
 import 'package:biyi_app/widgets/customized_app_bar/customized_app_bar.dart';
-import 'package:biyi_app/widgets/list_section.dart';
-import 'package:biyi_app/widgets/list_tile.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart' show Scaffold;
-import 'package:flutter/widgets.dart';
 import 'package:package_info_plus/package_info_plus.dart';
+import 'package:reflect_ui/reflect_ui.dart';
 
 class AboutSettingPage extends StatefulWidget {
   const AboutSettingPage({super.key});
@@ -42,6 +39,7 @@ class _AboutSettingPageState extends State<AboutSettingPage> {
     return ListView(
       children: [
         ListSection(
+          hasLeading: false,
           children: [
             ListTile(
               title: Text(

diff --git a/apps/biyi_app/lib/app/settings/advanced/page.dart b/apps/biyi_app/lib/app/settings/advanced/page.dart
@@ -1,7 +1,5 @@
 import 'package:biyi_app/generated/locale_keys.g.dart';
 import 'package:biyi_app/widgets/customized_app_bar/customized_app_bar.dart';
-import 'package:biyi_app/widgets/list_section.dart';
-import 'package:biyi_app/widgets/list_tile.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:launch_at_startup/launch_at_startup.dart';
 import 'package:reflect_ui/reflect_ui.dart';
@@ -41,18 +39,14 @@ class _AdvancedSettingPageState extends State<AdvancedSettingPage> {
     return ListView(
       children: [
         ListSection(
+          hasLeading: false,
           children: [
-            ListTile(
+            SwitchListTile(
+              value: _launchAtLoginEnabled,
+              onChanged: _handleLaunchAtLoginChanged,
               title: Text(
                 LocaleKeys.app_settings_advanced_launch_at_login_title.tr(),
               ),
-              additionalInfo: Switch(
-                value: _launchAtLoginEnabled,
-                onChanged: _handleLaunchAtLoginChanged,
-              ),
-              onTap: () {
-                _handleLaunchAtLoginChanged(!_launchAtLoginEnabled);
-              },
             ),
           ],
         ),

diff --git a/apps/biyi_app/lib/app/settings/appearance/page.dart b/apps/biyi_app/lib/app/settings/appearance/page.dart
@@ -1,10 +1,7 @@
 import 'package:biyi_app/generated/locale_keys.g.dart';
 import 'package:biyi_app/states/settings.dart';
 import 'package:biyi_app/widgets/customized_app_bar/customized_app_bar.dart';
-import 'package:biyi_app/widgets/list_section.dart';
-import 'package:biyi_app/widgets/list_tile.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:provider/provider.dart';
 import 'package:reflect_ui/reflect_ui.dart';
 
@@ -36,26 +33,25 @@ class _AppearanceSettingPageState extends State<AppearanceSettingPage> {
     return ListView(
       children: [
         ListSection(
+          hasLeading: false,
           children: [
             for (var themeMode in [
               ThemeMode.light,
               ThemeMode.dark,
               ThemeMode.system,
             ])
-              ListTile(
+              RadioListTile<ThemeMode>(
+                value: themeMode,
+                groupValue: settings.themeMode,
+                onChanged: (value) => _handleUpdateSettings(themeMode: value),
+                useCheckmarkStyle: true,
                 title: Text(
                   themeMode == ThemeMode.light
                       ? LocaleKeys.theme_mode_light.tr()
                       : themeMode == ThemeMode.dark
                           ? LocaleKeys.theme_mode_dark.tr()
                           : LocaleKeys.theme_mode_system.tr(),
                 ),
-                additionalInfo: settings.themeMode == themeMode
-                    ? const Icon(
-                        FluentIcons.checkmark_circle_16_filled,
-                      )
-                    : null,
-                onTap: () => _handleUpdateSettings(themeMode: themeMode),
               ),
           ],
         ),
@@ -64,35 +60,30 @@ class _AppearanceSettingPageState extends State<AppearanceSettingPage> {
             LocaleKeys.app_settings_appearance_tray_icon_title.tr(),
           ),
           children: [
-            ListTile(
+            SwitchListTile(
+              value: settings.trayIconEnabled,
+              onChanged: (newValue) =>
+                  _handleUpdateSettings(trayIconEnabled: newValue),
               title: Text(
                 LocaleKeys.app_settings_appearance_tray_icon_show_title.tr(),
               ),
-              additionalInfo: Switch(
-                value: settings.trayIconEnabled,
-                onChanged: (newValue) =>
-                    _handleUpdateSettings(trayIconEnabled: newValue),
-              ),
-              onTap: () => _handleUpdateSettings(
-                trayIconEnabled: !settings.trayIconEnabled,
-              ),
             ),
           ],
         ),
         ListSection(
+          hasLeading: false,
           header: Text(
             LocaleKeys.app_settings_appearance_max_window_height_title.tr(),
           ),
           children: [
             for (var option in _kMaxWindowHeightOptions)
-              ListTile(
+              RadioListTile<double>(
+                value: option,
+                groupValue: settings.maxWindowHeight,
+                onChanged: (value) =>
+                    _handleUpdateSettings(maxWindowHeight: value),
+                useCheckmarkStyle: true,
                 title: Text('${option.toInt()}'),
-                additionalInfo: settings.maxWindowHeight == option
-                    ? const Icon(
-                        FluentIcons.checkmark_circle_16_filled,
-                      )
-                    : null,
-                onTap: () => _handleUpdateSettings(maxWindowHeight: option),
               ),
           ],
         ),