diff --git a/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart b/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart index b6d92e2781..69020b5eed 100644 --- a/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart +++ b/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart @@ -104,8 +104,8 @@ class _BoardContentState extends State { Widget _buildBoard(BuildContext context) { return ChangeNotifierProvider.value( - value: Provider.of(context, listen: true), - child: Selector( + value: Provider.of(context, listen: true), + child: Selector( selector: (ctx, notifier) => notifier.theme, builder: (ctx, theme, child) => Expanded( child: AppFlowyBoard( @@ -331,8 +331,8 @@ class _ToolbarBlocAdaptor extends StatelessWidget { ); return ChangeNotifierProvider.value( - value: Provider.of(context, listen: true), - child: Selector( + value: Provider.of(context, listen: true), + child: Selector( selector: (ctx, notifier) => notifier.theme, builder: (ctx, theme, child) { return BoardToolbar(toolbarContext: toolbarContext); diff --git a/frontend/app_flowy/lib/plugins/doc/document.dart b/frontend/app_flowy/lib/plugins/doc/document.dart index 7403a01a91..d186513acc 100644 --- a/frontend/app_flowy/lib/plugins/doc/document.dart +++ b/frontend/app_flowy/lib/plugins/doc/document.dart @@ -131,8 +131,8 @@ class DocumentShareButton extends StatelessWidget { child: BlocBuilder( builder: (context, state) { return ChangeNotifierProvider.value( - value: Provider.of(context, listen: true), - child: Selector( + value: Provider.of(context, listen: true), + child: Selector( selector: (ctx, notifier) => notifier.locale, builder: (ctx, _, child) => ConstrainedBox( constraints: const BoxConstraints.expand( diff --git a/frontend/app_flowy/lib/plugins/doc/document_page.dart b/frontend/app_flowy/lib/plugins/doc/document_page.dart index 1d745982be..8593766087 100644 --- a/frontend/app_flowy/lib/plugins/doc/document_page.dart +++ b/frontend/app_flowy/lib/plugins/doc/document_page.dart @@ -134,7 +134,7 @@ class _DocumentPageState extends State { Widget _renderToolbar(quill.QuillController controller) { return ChangeNotifierProvider.value( - value: Provider.of(context, listen: true), + value: Provider.of(context, listen: true), child: EditorToolbar.basic( controller: controller, ), diff --git a/frontend/app_flowy/lib/plugins/trash/menu.dart b/frontend/app_flowy/lib/plugins/trash/menu.dart index 15cfc398a1..73fff65ba3 100644 --- a/frontend/app_flowy/lib/plugins/trash/menu.dart +++ b/frontend/app_flowy/lib/plugins/trash/menu.dart @@ -33,8 +33,8 @@ class MenuTrash extends StatelessWidget { Widget _render(BuildContext context) { return Row(children: [ ChangeNotifierProvider.value( - value: Provider.of(context, listen: true), - child: Selector( + value: Provider.of(context, listen: true), + child: Selector( selector: (ctx, notifier) => notifier.theme, builder: (ctx, theme, child) => SizedBox( width: 16, @@ -44,8 +44,8 @@ class MenuTrash extends StatelessWidget { ), const HSpace(6), ChangeNotifierProvider.value( - value: Provider.of(context, listen: true), - child: Selector( + value: Provider.of(context, listen: true), + child: Selector( selector: (ctx, notifier) => notifier.locale, builder: (ctx, _, child) => FlowyText.medium(LocaleKeys.trash_text.tr(), fontSize: 12), diff --git a/frontend/app_flowy/lib/startup/tasks/app_widget.dart b/frontend/app_flowy/lib/startup/tasks/app_widget.dart index 9ca28e2f36..7ff53efeff 100644 --- a/frontend/app_flowy/lib/startup/tasks/app_widget.dart +++ b/frontend/app_flowy/lib/startup/tasks/app_widget.dart @@ -17,8 +17,8 @@ class InitAppWidgetTask extends LaunchTask { @override Future initialize(LaunchContext context) async { final widget = context.getIt().create(); - final setting = await UserSettingsService().getAppearanceSettings(); - final settingModel = AppearanceSettingModel(setting); + final setting = await SettingsFFIService().getAppearanceSetting(); + final settingModel = AppearanceSetting(setting); final app = ApplicationWidget( settingModel: settingModel, child: widget, @@ -58,7 +58,7 @@ class InitAppWidgetTask extends LaunchTask { class ApplicationWidget extends StatelessWidget { final Widget child; - final AppearanceSettingModel settingModel; + final AppearanceSetting settingModel; const ApplicationWidget({ Key? key, @@ -75,10 +75,10 @@ class ApplicationWidget extends StatelessWidget { const minWidth = 600.0; setWindowMinSize(const Size(minWidth, minWidth / ratio)); settingModel.readLocaleWhenAppLaunch(context); - AppTheme theme = context.select( + AppTheme theme = context.select( (value) => value.theme, ); - Locale locale = context.select( + Locale locale = context.select( (value) => value.locale, ); diff --git a/frontend/app_flowy/lib/user/application/user_settings_service.dart b/frontend/app_flowy/lib/user/application/user_settings_service.dart index 28309d202c..b420af505c 100644 --- a/frontend/app_flowy/lib/user/application/user_settings_service.dart +++ b/frontend/app_flowy/lib/user/application/user_settings_service.dart @@ -4,8 +4,8 @@ import 'package:flowy_sdk/flowy_sdk.dart'; import 'package:flowy_sdk/protobuf/flowy-error/errors.pb.dart'; import 'package:flowy_sdk/protobuf/flowy-user/user_setting.pb.dart'; -class UserSettingsService { - Future getAppearanceSettings() async { +class SettingsFFIService { + Future getAppearanceSetting() async { final result = await UserEventGetAppearanceSetting().send(); return result.fold( @@ -18,7 +18,8 @@ class UserSettingsService { ); } - Future> setAppearanceSettings(AppearanceSettingsPB settings) { - return UserEventSetAppearanceSetting(settings).send(); + Future> setAppearanceSetting( + AppearanceSettingsPB setting) { + return UserEventSetAppearanceSetting(setting).send(); } } diff --git a/frontend/app_flowy/lib/workspace/application/appearance.dart b/frontend/app_flowy/lib/workspace/application/appearance.dart index a9b498fb00..1d3a13c7af 100644 --- a/frontend/app_flowy/lib/workspace/application/appearance.dart +++ b/frontend/app_flowy/lib/workspace/application/appearance.dart @@ -8,72 +8,114 @@ import 'package:flowy_sdk/protobuf/flowy-user/user_setting.pb.dart'; import 'package:flutter/material.dart'; import 'package:easy_localization/easy_localization.dart'; -class AppearanceSettingModel extends ChangeNotifier with EquatableMixin { - AppearanceSettingsPB setting; +/// [AppearanceSetting] is used to modify the appear setting of AppFlowy application. Including the [Locale], [AppTheme], etc. +class AppearanceSetting extends ChangeNotifier with EquatableMixin { + final AppearanceSettingsPB _setting; AppTheme _theme; Locale _locale; - Timer? _saveOperation; + Timer? _debounceSaveOperation; - AppearanceSettingModel(this.setting) - : _theme = AppTheme.fromName(name: setting.theme), - _locale = - Locale(setting.locale.languageCode, setting.locale.countryCode); + AppearanceSetting(AppearanceSettingsPB setting) + : _setting = setting, + _theme = AppTheme.fromName(name: setting.theme), + _locale = Locale( + setting.locale.languageCode, + setting.locale.countryCode, + ); + /// Returns the current [AppTheme] AppTheme get theme => _theme; + + /// Returns the current [Locale] Locale get locale => _locale; - Future save() async { - _saveOperation?.cancel(); - _saveOperation = Timer(const Duration(seconds: 2), () async { - await UserSettingsService().setAppearanceSettings(setting); - }); - } - - @override - List get props { - return [setting.hashCode]; - } - - void swapTheme() { - final themeType = - (_theme.ty == ThemeType.light ? ThemeType.dark : ThemeType.light); - - if (_theme.ty != themeType) { - _theme = AppTheme.fromType(themeType); - setting.theme = themeTypeToString(themeType); - notifyListeners(); - save(); + /// Updates the current theme and notify the listeners the theme was changed. + /// Do nothing if the passed in themeType equal to the current theme type. + /// + void setTheme(ThemeType themeType) { + if (_theme.ty == themeType) { + return; } + + _theme = AppTheme.fromType(themeType); + _setting.theme = themeTypeToString(themeType); + _saveAppearSetting(); + + notifyListeners(); } + /// Updates the current locale and notify the listeners the locale was changed + /// Fallback to [en] locale If the newLocale is not supported. + /// void setLocale(BuildContext context, Locale newLocale) { if (!context.supportedLocales.contains(newLocale)) { - Log.warn("Unsupported locale: $newLocale"); + Log.warn("Unsupported locale: $newLocale, Fallback to locale: en"); newLocale = const Locale('en'); - Log.debug("Fallback to locale: $newLocale"); } context.setLocale(newLocale); if (_locale != newLocale) { _locale = newLocale; - setting.locale.languageCode = _locale.languageCode; - setting.locale.countryCode = _locale.countryCode ?? ""; + _setting.locale.languageCode = _locale.languageCode; + _setting.locale.countryCode = _locale.countryCode ?? ""; + _saveAppearSetting(); + notifyListeners(); - save(); } } - void readLocaleWhenAppLaunch(BuildContext context) { - if (setting.resetAsDefault) { - setting.resetAsDefault = false; - save(); + /// Saves key/value setting to disk. + /// Removes the key if the passed in value is null + void setKeyValue(String key, String? value) { + if (key.isEmpty) { + Log.warn("The key should not be empty"); + return; + } + if (value == null) { + _setting.settingKeyValue.remove(key); + } + + if (_setting.settingKeyValue[key] != value) { + if (value == null) { + _setting.settingKeyValue.remove(key); + } else { + _setting.settingKeyValue[key] = value; + } + + _saveAppearSetting(); + notifyListeners(); + } + } + + /// Called when the application launch. + /// Uses the device locale when open the application for the first time + void readLocaleWhenAppLaunch(BuildContext context) { + if (_setting.resetToDefault) { + _setting.resetToDefault = false; + _saveAppearSetting(); setLocale(context, context.deviceLocale); return; } - // when opening app the first time setLocale(context, _locale); } + + Future _saveAppearSetting() async { + _debounceSaveOperation?.cancel(); + _debounceSaveOperation = Timer( + const Duration(seconds: 1), + () { + SettingsFFIService().setAppearanceSetting(_setting).then((result) { + result.fold((l) => null, (error) => Log.error(error)); + }); + }, + ); + } + + @override + List get props { + return [_setting.hashCode]; + } } diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/menu_app.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/menu_app.dart index 7c2e2e4d87..c7ee59d03e 100644 --- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/menu_app.dart +++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/menu_app.dart @@ -89,8 +89,7 @@ class _MenuAppState extends State { hasIcon: false, ), header: ChangeNotifierProvider.value( - value: - Provider.of(context, listen: true), + value: Provider.of(context, listen: true), child: MenuAppHeader(widget.app), ), expanded: ViewSection(appViewData: viewDataContext), diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart b/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart index 6de69029a5..42a51b7da1 100644 --- a/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart +++ b/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart @@ -33,8 +33,7 @@ class SettingsDialog extends StatelessWidget { ..add(const SettingsDialogEvent.initial()), child: BlocBuilder( builder: (context, state) => ChangeNotifierProvider.value( - value: Provider.of(context, - listen: true), + value: Provider.of(context, listen: true), child: FlowyDialog( title: Text( LocaleKeys.settings_title.tr(), diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart index 85b78ae3b0..ea885fc86a 100644 --- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart +++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart @@ -13,7 +13,7 @@ class SettingsAppearanceView extends StatelessWidget { @override Widget build(BuildContext context) { - final theme = context.watch(); + final theme = context.read(); return SingleChildScrollView( child: Column( @@ -30,9 +30,7 @@ class SettingsAppearanceView extends StatelessWidget { ), Toggle( value: theme.isDark, - onChanged: (val) { - context.read().swapTheme(); - }, + onChanged: (_) => setTheme(context), style: ToggleStyle.big(theme), ), Text( @@ -48,4 +46,13 @@ class SettingsAppearanceView extends StatelessWidget { ), ); } + + void setTheme(BuildContext context) { + final theme = context.read(); + if (theme.isDark) { + context.read().setTheme(ThemeType.light); + } else { + context.read().setTheme(ThemeType.dark); + } + } } diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart index bb1b419da0..457d3b2f59 100644 --- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart +++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart @@ -13,7 +13,7 @@ class SettingsLanguageView extends StatelessWidget { Widget build(BuildContext context) { context.watch(); return ChangeNotifierProvider.value( - value: Provider.of(context, listen: true), + value: Provider.of(context, listen: true), child: SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -43,7 +43,8 @@ class LanguageSelectorDropdown extends StatefulWidget { }) : super(key: key); @override - State createState() => _LanguageSelectorDropdownState(); + State createState() => + _LanguageSelectorDropdownState(); } class _LanguageSelectorDropdownState extends State { @@ -77,10 +78,10 @@ class _LanguageSelectorDropdownState extends State { ), child: DropdownButtonHideUnderline( child: DropdownButton( - value: context.read().locale, + value: context.read().locale, onChanged: (val) { setState(() { - context.read().setLocale(context, val!); + context.read().setLocale(context, val!); }); }, icon: const Visibility( diff --git a/frontend/rust-lib/flowy-user/src/entities/user_setting.rs b/frontend/rust-lib/flowy-user/src/entities/user_setting.rs index 23c74b6d5f..1d4e77896b 100644 --- a/frontend/rust-lib/flowy-user/src/entities/user_setting.rs +++ b/frontend/rust-lib/flowy-user/src/entities/user_setting.rs @@ -1,5 +1,6 @@ use flowy_derive::ProtoBuf; use serde::{Deserialize, Serialize}; +use std::collections::HashMap; #[derive(ProtoBuf, Default, Debug, Clone)] pub struct UserPreferencesPB { @@ -21,7 +22,11 @@ pub struct AppearanceSettingsPB { #[pb(index = 3)] #[serde(default = "DEFAULT_RESET_VALUE")] - pub reset_as_default: bool, + pub reset_to_default: bool, + + #[pb(index = 4)] + #[serde(default)] + pub setting_key_value: HashMap, } const DEFAULT_RESET_VALUE: fn() -> bool = || APPEARANCE_RESET_AS_DEFAULT; @@ -52,7 +57,8 @@ impl std::default::Default for AppearanceSettingsPB { AppearanceSettingsPB { theme: APPEARANCE_DEFAULT_THEME.to_owned(), locale: LocaleSettingsPB::default(), - reset_as_default: APPEARANCE_RESET_AS_DEFAULT, + reset_to_default: APPEARANCE_RESET_AS_DEFAULT, + setting_key_value: HashMap::default(), } } }