added missing translation

frontend/app_flowy/assets/translations/en.json

@@ -88,7 +88,9 @@
     "bulletList": "Bulleted List",
     "checkList": "Check List",
     "inlineCode": "Inline Code",
-    "quote": "Quote Block"
+    "quote": "Quote Block",
+    "header": "Header",
+    "highlight": "Highlight"
   },
   "tooltip": {
     "lightMode": "Switch to Light mode",
@@ -132,11 +134,12 @@
     "title": "Settings",
     "menu": {
       "appearance": "Appearance",
-      "language": "Language"
+      "language": "Language",
+      "open": "Open Settings"
     },
     "appearance": {
       "lightLabel": "Light Mode",
       "darkLabel": "Dark Mode"
     }
   }
-}
+}

frontend/app_flowy/assets/translations/fr-CA.json

@@ -88,7 +88,9 @@
     "bulletList": "Liste à puces",
     "checkList": "Liste de contrôle",
     "inlineCode": "Code en ligne",
-    "quote": "Citation"
+    "quote": "Citation",
+    "header": "en-tête",
+    "highlight": "Surligner"
   },
   "tooltip": {
     "lightMode": "Aller en mode claire",
@@ -132,7 +134,8 @@
     "title": "Réglages",
     "menu": {
       "appearance": "Apparence",
-      "language": "Langue"
+      "language": "Langue",
+      "open": "ouvrir les paramètres"
     },
     "appearance": {
       "lightLabel": "Mode claire",

frontend/app_flowy/assets/translations/it-IT.json

@@ -88,7 +88,9 @@
     "bulletList": "Lista a punti",
     "checkList": "Lista Controllo",
     "inlineCode": "Codice in linea",
-    "quote": "Cita Blocco"
+    "quote": "Cita Blocco",
+    "header": "intestazione",
+    "highlight": "Evidenziare"
   },
   "tooltip": {
     "lightMode": "Passa alla modalità Chiara",
@@ -132,7 +134,8 @@
     "title": "Impostazioni",
     "menu": {
       "appearance": "Aspetto",
-      "language": "Lingua"
+      "language": "Lingua",
+      "open": "aprire le impostazioni"
     },
     "appearance": {
       "lightLabel": "Modalità Chiara",

frontend/app_flowy/assets/translations/zh-CN.json

@@ -88,7 +88,9 @@
     "bulletList": "无序列表",
     "checkList": "任务列表",
     "inlineCode": "内联代码",
-    "quote": "块引用"
+    "quote": "块引用",
+    "header": "标题",
+    "highlight": "高亮"
   },
   "tooltip": {
     "lightMode": "切换到灯光模式",
@@ -132,7 +134,8 @@
     "title": "设置",
     "menu": {
       "appearance": "外观",
-      "language": "语言"
+      "language": "语言",
+      "open": "打开设置"
     },
     "appearance": {
       "lightLabel": "日间模式",

frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart

@@ -1,9 +1,11 @@
 import 'package:app_flowy/generated/locale_keys.g.dart';
+import 'package:app_flowy/workspace/application/appearance.dart';
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_appearance_view.dart';
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_language_view.dart';
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_menu.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
 class SettingsDialog extends StatefulWidget {
   const SettingsDialog({Key? key}) : super(key: key);
@@ -22,41 +24,45 @@ class _SettingsDialogState extends State<SettingsDialog> {
 
   @override
   Widget build(BuildContext context) {
-    return AlertDialog(
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(10),
-      ),
-      title: Text(
-        LocaleKeys.settings_title.tr(),
-        style: const TextStyle(
-          fontWeight: FontWeight.bold,
+    return ChangeNotifierProvider.value(
+      value: Provider.of<AppearanceSettingModel>(context, listen: true),
+      child: AlertDialog(
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(10),
         ),
-      ),
-      content: ConstrainedBox(
-        constraints: const BoxConstraints(
-          maxHeight: 600,
+        title: Text(
+          LocaleKeys.settings_title.tr(),
+          style: const TextStyle(
+            fontWeight: FontWeight.bold,
+          ),
         ),
-        child: Row(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Expanded(
-              flex: 1,
-              child: SettingsMenu(
-                changeSelectedIndex: (index) {
-                  setState(() {
-                    _selectedViewIndex = index;
-                  });
-                },
-                currentIndex: _selectedViewIndex,
+        content: ConstrainedBox(
+          constraints: const BoxConstraints(
+            maxHeight: 600,
+            minWidth: 600,
+            maxWidth: 1000,
+          ),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              SizedBox(
+                width: 200,
+                child: SettingsMenu(
+                  changeSelectedIndex: (index) {
+                    setState(() {
+                      _selectedViewIndex = index;
+                    });
+                  },
+                  currentIndex: _selectedViewIndex,
+                ),
               ),
-            ),
-            const VerticalDivider(),
-            const SizedBox(width: 10),
-            Expanded(
-              flex: 4,
-              child: settingsViews[_selectedViewIndex],
-            )
-          ],
+              const VerticalDivider(),
+              const SizedBox(width: 10),
+              Expanded(
+                child: settingsViews[_selectedViewIndex],
+              )
+            ],
+          ),
         ),
       ),
     );

frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart

@@ -16,9 +16,6 @@ class SettingsAppearanceView extends StatelessWidget {
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          const SizedBox(
-            height: 15,
-          ),
           Row(
             children: [
               Text(

frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart

@@ -12,12 +12,7 @@ class SettingsLanguageView extends StatelessWidget {
     return SingleChildScrollView(
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
-        children: const [
-          SizedBox(
-            height: 15,
-          ),
-          LanguageSelectorDropdown()
-        ],
+        children: const [LanguageSelectorDropdown()],
       ),
     );
   }
@@ -42,6 +37,7 @@ class _LanguageSelectorDropdownState extends State<LanguageSelectorDropdown> {
           context.read<AppearanceSettingModel>().setLanguage(context, val!);
         });
       },
+      autofocus: true,
       items: AppLanguage.values.map((language) {
         return DropdownMenuItem<AppLanguage>(
           value: language,

frontend/app_flowy/lib/workspace/presentation/stack_page/doc/doc_stack_page.dart

@@ -1,4 +1,5 @@
 import 'package:app_flowy/startup/startup.dart';
+import 'package:app_flowy/workspace/application/appearance.dart';
 import 'package:app_flowy/workspace/application/doc/share_bloc.dart';
 import 'package:app_flowy/workspace/domain/i_view.dart';
 import 'package:app_flowy/workspace/domain/page_stack/page_stack.dart';
@@ -7,6 +8,7 @@ import 'package:app_flowy/workspace/infrastructure/repos/view_repo.dart';
 import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:app_flowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/language.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -20,6 +22,7 @@ import 'package:dartz/dartz.dart' as dartz;
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:clipboard/clipboard.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
+import 'package:provider/provider.dart';
 
 import 'doc_page.dart';
 
@@ -171,14 +174,20 @@ class DococumentShareButton extends StatelessWidget {
         },
         child: BlocBuilder<DocShareBloc, DocShareState>(
           builder: (context, state) {
-            return RoundedTextButton(
-              title: 'shareAction.buttonText'.tr(),
-              height: 30,
-              width: buttonWidth,
-              fontSize: 12,
-              borderRadius: Corners.s6Border,
-              color: Colors.lightBlue,
-              onPressed: () => _showActionList(context, Offset(-(buttonWidth / 2), 10)),
+            return ChangeNotifierProvider.value(
+              value: Provider.of<AppearanceSettingModel>(context, listen: true),
+              child: Selector<AppearanceSettingModel, AppLanguage>(
+                selector: (ctx, notifier) => notifier.language,
+                builder: (ctx, _, child) => RoundedTextButton(
+                  title: LocaleKeys.shareAction_buttonText.tr(),
+                  height: 30,
+                  width: buttonWidth,
+                  fontSize: 12,
+                  borderRadius: Corners.s6Border,
+                  color: Colors.lightBlue,
+                  onPressed: () => _showActionList(context, Offset(-(buttonWidth / 2), 10)),
+                ),
+              ),
             );
           },
         ),

frontend/app_flowy/lib/workspace/presentation/stack_page/doc/widget/toolbar/color_picker.dart

@@ -3,7 +3,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_quill/flutter_quill.dart';
 import 'package:flutter_quill/models/documents/style.dart';
 import 'package:flutter_quill/utils/color.dart';
-
+import 'package:app_flowy/generated/locale_keys.g.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'toolbar_icon_button.dart';
 
 class FlowyColorButton extends StatefulWidget {
@@ -33,7 +34,6 @@ class _FlowyColorButtonState extends State<FlowyColorButton> {
   late bool _isWhitebackground;
 
   Style get _selectionStyle => widget.controller.getSelectionStyle();
-  final tooltipText = 'Highlight';
 
   void _didChangeEditingValue() {
     setState(() {
@@ -93,7 +93,7 @@ class _FlowyColorButtonState extends State<FlowyColorButton> {
         : (widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor);
 
     return Tooltip(
-      message: tooltipText,
+      message: LocaleKeys.toolbar_highlight.tr(),
       showDuration: Duration.zero,
       child: QuillIconButton(
         highlightElevation: 0,

frontend/app_flowy/lib/workspace/presentation/stack_page/doc/widget/toolbar/header_button.dart

@@ -1,7 +1,8 @@
 import 'package:flutter_quill/flutter_quill.dart';
 import 'package:flutter_quill/models/documents/style.dart';
 import 'package:flutter/material.dart';
-
+import 'package:app_flowy/generated/locale_keys.g.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'toolbar_icon_button.dart';
 
 class FlowyHeaderStyleButton extends StatefulWidget {
@@ -50,7 +51,7 @@ class _FlowyHeaderStyleButtonState extends State<FlowyHeaderStyleButton> {
         // final child =
         //     _valueToText[_value] == _valueString[index] ? svg('editor/H1', color: Colors.white) : svg('editor/H1');
 
-        final headerTitle = 'Header ${index + 1}';
+        final headerTitle = "${LocaleKeys.toolbar_header.tr()} ${index + 1}";
         final _isToggled = _valueToText[_value] == _valueString[index];
         return ToolbarIconButton(
           onPressed: () {

frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/menu_trash.dart

@@ -1,9 +1,11 @@
 import 'package:app_flowy/startup/startup.dart';
+import 'package:app_flowy/workspace/application/appearance.dart';
 import 'package:app_flowy/workspace/domain/page_stack/page_stack.dart';
 import 'package:app_flowy/workspace/presentation/stack_page/trash/trash_page.dart';
 import 'package:app_flowy/workspace/presentation/widgets/menu/menu.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/language.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
@@ -29,11 +31,23 @@ class MenuTrash extends StatelessWidget {
   }
 
   Widget _render(BuildContext context) {
-    final theme = context.watch<AppTheme>();
     return Row(children: [
-      SizedBox(width: 16, height: 16, child: svg("home/trash", color: theme.iconColor)),
+      ChangeNotifierProvider.value(
+        value: Provider.of<AppearanceSettingModel>(context, listen: true),
+        child: Selector<AppearanceSettingModel, AppTheme>(
+          selector: (ctx, notifier) => notifier.theme,
+          builder: (ctx, theme, child) =>
+              SizedBox(width: 16, height: 16, child: svg("home/trash", color: theme.iconColor)),
+        ),
+      ),
       const HSpace(6),
-      FlowyText.medium(LocaleKeys.trash_text.tr(), fontSize: 12),
+      ChangeNotifierProvider.value(
+        value: Provider.of<AppearanceSettingModel>(context, listen: true),
+        child: Selector<AppearanceSettingModel, AppLanguage>(
+          selector: (ctx, notifier) => notifier.language,
+          builder: (ctx, _, child) => FlowyText.medium(LocaleKeys.trash_text.tr(), fontSize: 12),
+        ),
+      ),
     ]);
   }
 }

frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/menu_user.dart

@@ -7,6 +7,8 @@ import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flowy_sdk/protobuf/flowy-user-data-model/protobuf.dart' show UserProfile;
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:app_flowy/generated/locale_keys.g.dart';
+import 'package:easy_localization/easy_localization.dart';
 
 class MenuUser extends StatelessWidget {
   final UserProfile user;
@@ -63,7 +65,7 @@ class MenuUser extends StatelessWidget {
 
   Widget _renderSettingsButton(BuildContext context) {
     return Tooltip(
-      message: 'Open Settings',
+      message: LocaleKeys.settings_menu_open.tr(),
       child: IconButton(
         onPressed: () {
           showDialog(