Merge pull request #789 from naughtz/#692

feature: Shortcut for collapse the left sidebar #692

.github/workflows/ci.yaml

@@ -59,6 +59,7 @@ jobs:
             sudo wget -qO /etc/apt/sources.list.d/dart_stable.list https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list
             sudo apt-get update
             sudo apt-get install -y dart curl build-essential libsqlite3-dev libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev
+            sudo apt-get install keybinder-3.0
           elif [ "$RUNNER_OS" == "macOS" ]; then
             echo 'do nothing'
           fi

frontend/app_flowy/assets/translations/ca-ES.json

@@ -141,5 +141,9 @@
       "lightLabel": "Mode Clar",
       "darkLabel": "Mode Fosc"
     }
+  },
+  "sideBar": {
+    "openSidebar": "Open sidebar",
+    "closeSidebar": "Close sidebar"
   }
 }

frontend/app_flowy/assets/translations/de-DE.json

@@ -141,6 +141,10 @@
         "lightLabel": "Heller Modus",
         "darkLabel": "Dunkler Modus"
       }
+    },
+    "sideBar": {
+      "openSidebar": "Open sidebar",
+      "closeSidebar": "Close sidebar"
     }
   }
   

frontend/app_flowy/assets/translations/en.json

@@ -215,5 +215,9 @@
       "timeHintTextInTwelveHour": "12:00 AM",
       "timeHintTextInTwentyFourHour": "12:00"
     }
+  },
+  "sideBar": {
+    "openSidebar": "Open sidebar",
+    "closeSidebar": "Close sidebar"
   }
 }

frontend/app_flowy/assets/translations/es-VE.json

@@ -213,5 +213,9 @@
       "timeHintTextInTwelveHour": "12:00 AM",
       "timeHintTextInTwentyFourHour": "12:00"
     }
+  },
+  "sideBar": {
+    "openSidebar": "Open sidebar",
+    "closeSidebar": "Close sidebar"
   }
 }

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

@@ -141,5 +141,9 @@
       "lightLabel": "Mode clair",
       "darkLabel": "Mode sombre"
     }
+  },
+  "sideBar": {
+    "openSidebar": "Open sidebar",
+    "closeSidebar": "Close sidebar"
   }
 }

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

@@ -142,6 +142,10 @@
       "darkLabel": "Mode sombre"
     }
   },
+  "sideBar": {
+    "openSidebar": "Open sidebar",
+    "closeSidebar": "Close sidebar"
+  },
   "grid": {
     "settings": {
       "filter": "Filtrer",

frontend/app_flowy/assets/translations/hu-HU.json

@@ -141,5 +141,9 @@
       "lightLabel": "Világos mód",
       "darkLabel": "Éjjeli mód"
     }
+  },
+  "sideBar": {
+    "openSidebar": "Open sidebar",
+    "closeSidebar": "Close sidebar"
   }
 }

frontend/app_flowy/assets/translations/id-ID.json

@@ -214,5 +214,9 @@
       "timeHintTextInTwelveHour": "12:00 AM",
       "timeHintTextInTwentyFourHour": "12:00"
     }
+  },
+  "sideBar": {
+    "openSidebar": "Open sidebar",
+    "closeSidebar": "Close sidebar"
   }
 }

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

@@ -147,5 +147,9 @@
   },
   "document":{
     "menuName":"Documento"
+  },
+  "sideBar": {
+    "openSidebar": "Open sidebar",
+    "closeSidebar": "Close sidebar"
   }
 }

frontend/app_flowy/assets/translations/ja-JP.json

@@ -195,5 +195,9 @@
       "pannelTitle": "選択候補を検索 または 作成する",
       "searchOption": "選択候補を検索"
     }
+  },
+  "sideBar": {
+    "openSidebar": "Open sidebar",
+    "closeSidebar": "Close sidebar"
   }
 }

frontend/app_flowy/assets/translations/pl-PL.json

@@ -141,5 +141,9 @@
       "lightLabel": "Tryb Jasny",
       "darkLabel": "Tryb Ciemny"
     }
+  },
+  "sideBar": {
+    "openSidebar": "Open sidebar",
+    "closeSidebar": "Close sidebar"
   }
 }

frontend/app_flowy/assets/translations/pt-BR.json

@@ -141,6 +141,10 @@
         "lightLabel": "Modo Claro",
         "darkLabel": "Modo Escuro"
       }
+    },
+    "sideBar": {
+      "openSidebar": "Open sidebar",
+      "closeSidebar": "Close sidebar"
     }
   }
  

frontend/app_flowy/assets/translations/pt-PT.json

@@ -141,6 +141,10 @@
         "lightLabel": "Modo Claro",
         "darkLabel": "Modo Escuro"
       }
+    },
+    "sideBar": {
+      "openSidebar": "Open sidebar",
+      "closeSidebar": "Close sidebar"
     }
   }
 

frontend/app_flowy/assets/translations/ru-RU.json

@@ -203,6 +203,10 @@
         "timeHintTextInTwelveHour": "12:00 AM",
         "timeHintTextInTwentyFourHour": "12:00"
       }
+    },
+    "sideBar": {
+      "openSidebar": "Open sidebar",
+      "closeSidebar": "Close sidebar"
     }
   }
   

frontend/app_flowy/assets/translations/tr-TR.json

@@ -141,5 +141,9 @@
       "lightLabel": "Aydınlık Mod",
       "darkLabel": "Karanlık Mod"
     }
+  },
+  "sideBar": {
+    "openSidebar": "Open sidebar",
+    "closeSidebar": "Close sidebar"
   }
 }

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

@@ -149,6 +149,10 @@
       "darkLabel": "夜间模式"
     }
   },
+  "sideBar": {
+    "openSidebar": "打开侧边栏",
+    "closeSidebar": "关闭侧边栏"
+  },
   "grid": {
     "settings": {
       "filter": "过滤器",

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

@@ -214,5 +214,9 @@
       "timeHintTextInTwelveHour": "12:00 AM",
       "timeHintTextInTwentyFourHour": "12:00"
     }
+  },
+  "sideBar": {
+    "openSidebar": "Open sidebar",
+    "closeSidebar": "Close sidebar"
   }
 }

frontend/app_flowy/lib/main.dart

@@ -1,6 +1,7 @@
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/user/presentation/splash_screen.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:hotkey_manager/hotkey_manager.dart';
 import 'package:flutter/material.dart';
 
 class FlowyApp implements EntryPoint {
@@ -14,5 +15,8 @@ void main() async {
   WidgetsFlutterBinding.ensureInitialized();
   await EasyLocalization.ensureInitialized();
 
+  WidgetsFlutterBinding.ensureInitialized();
+  await hotKeyManager.unregisterAll();
+
   await FlowyRunner.run(FlowyApp());
 }

frontend/app_flowy/lib/workspace/presentation/home/home_screen.dart

@@ -1,5 +1,7 @@
 import 'package:app_flowy/startup/plugin/plugin.dart';
 import 'package:app_flowy/workspace/application/home/home_bloc.dart';
+
+import 'package:app_flowy/workspace/presentation/home/hotkeys.dart';
 import 'package:app_flowy/workspace/application/view/view_ext.dart';
 import 'package:app_flowy/workspace/presentation/widgets/edit_panel/panel_animation.dart';
 import 'package:app_flowy/workspace/presentation/widgets/float_bubble/question_bubble.dart';
@@ -54,7 +56,8 @@ class _HomeScreenState extends State<HomeScreen> {
           },
         ),
       ],
-      child: Scaffold(
+      child: HomeHotKeys(
+          child: Scaffold(
         body: BlocListener<HomeBloc, HomeState>(
           listenWhen: (p, c) => p.unauthorized != c.unauthorized,
           listener: (context, state) {
@@ -80,7 +83,7 @@ class _HomeScreenState extends State<HomeScreen> {
             },
           ),
         ),
-      ),
+      )),
     );
   }
 
@@ -145,6 +148,7 @@ class _HomeScreenState extends State<HomeScreen> {
     return FocusTraversalGroup(child: RepaintBoundary(child: homeMenu));
   }
 
+
   Widget _buildEditPanel(
       {required HomeState homeState,
       required BuildContext context,

frontend/app_flowy/lib/workspace/presentation/home/hotkeys.dart

@@ -0,0 +1,32 @@
+import 'dart:io';
+
+import 'package:app_flowy/startup/startup.dart';
+import 'package:app_flowy/workspace/application/home/home_bloc.dart';
+import 'package:app_flowy/workspace/presentation/home/home_stack.dart';
+import 'package:flutter/material.dart';
+import 'package:hotkey_manager/hotkey_manager.dart';
+import 'package:provider/provider.dart';
+
+class HomeHotKeys extends StatelessWidget {
+  final Widget child;
+  const HomeHotKeys({required this.child, Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    HotKey _hotKey = HotKey(
+      KeyCode.backslash,
+      modifiers: [Platform.isMacOS ? KeyModifier.meta : KeyModifier.control],
+      // Set hotkey scope (default is HotKeyScope.system)
+      scope: HotKeyScope.inapp, // Set as inapp-wide hotkey.
+    );
+    hotKeyManager.register(
+      _hotKey,
+      keyDownHandler: (hotKey) {
+        context.read<HomeBloc>().add(const HomeEvent.collapseMenu());
+        getIt<HomeStackManager>().collapsedNotifier.value =
+            !getIt<HomeStackManager>().collapsedNotifier.currentValue!;
+      },
+    );
+    return child;
+  }
+}

frontend/app_flowy/lib/workspace/presentation/home/menu/menu.dart

@@ -2,6 +2,7 @@ export './app/header/header.dart';
 export './app/menu_app.dart';
 
 import 'dart:io' show Platform;
+import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/plugins/trash/menu.dart';
 import 'package:app_flowy/workspace/presentation/home/home_sizes.dart';
 import 'package:app_flowy/workspace/presentation/home/home_stack.dart';
@@ -217,14 +218,23 @@ class MenuTopBar extends StatelessWidget {
             children: [
               renderIcon(context),
               const Spacer(),
-              FlowyIconButton(
-                width: 28,
-                onPressed: () => context
-                    .read<HomeBloc>()
-                    .add(const HomeEvent.collapseMenu()),
-                iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4),
-                icon: svgWidget("home/hide_menu", color: theme.iconColor),
-              )
+              Tooltip(
+                  richMessage: TextSpan(children: [
+                    const TextSpan(
+                        text: LocaleKeys.sideBar_closeSidebar + "\n"),
+                    TextSpan(
+                      text: Platform.isMacOS ? "⌘+\\" : "Ctrl+\\",
+                      style: const TextStyle(color: Colors.white60),
+                    ),
+                  ]),
+                  child: FlowyIconButton(
+                    width: 28,
+                    onPressed: () => context
+                        .read<HomeBloc>()
+                        .add(const HomeEvent.collapseMenu()),
+                    iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4),
+                    icon: svgWidget("home/hide_menu", color: theme.iconColor),
+                  ))
             ],
           )),
         );

frontend/app_flowy/lib/workspace/presentation/home/navigation.dart

@@ -1,3 +1,6 @@
+import 'dart:io';
+
+import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/workspace/application/home/home_bloc.dart';
 import 'package:app_flowy/workspace/presentation/home/home_stack.dart';
 import 'package:flowy_infra/image.dart';
@@ -14,7 +17,8 @@ typedef NaviAction = void Function();
 class NavigationNotifier with ChangeNotifier {
   List<NavigationItem> navigationItems;
   PublishNotifier<bool> collapasedNotifier;
-  NavigationNotifier({required this.navigationItems, required this.collapasedNotifier});
+  NavigationNotifier(
+      {required this.navigationItems, required this.collapasedNotifier});
 
   void update(HomeStackNotifier notifier) {
     bool shouldNotify = false;
@@ -69,7 +73,8 @@ class FlowyNavigation extends StatelessWidget {
         child: Row(children: [
           Selector<NavigationNotifier, PublishNotifier<bool>>(
               selector: (context, notifier) => notifier.collapasedNotifier,
-              builder: (ctx, collapsedNotifier, child) => _renderCollapse(ctx, collapsedNotifier, theme)),
+              builder: (ctx, collapsedNotifier, child) =>
+                  _renderCollapse(ctx, collapsedNotifier, theme)),
           Selector<NavigationNotifier, List<NavigationItem>>(
             selector: (context, notifier) => notifier.navigationItems,
             builder: (ctx, items, child) => Expanded(
@@ -84,7 +89,8 @@ class FlowyNavigation extends StatelessWidget {
     );
   }
 
-  Widget _renderCollapse(BuildContext context, PublishNotifier<bool> collapsedNotifier, AppTheme theme) {
+  Widget _renderCollapse(BuildContext context,
+      PublishNotifier<bool> collapsedNotifier, AppTheme theme) {
     return ChangeNotifierProvider.value(
       value: collapsedNotifier,
       child: Consumer(
@@ -92,15 +98,23 @@ class FlowyNavigation extends StatelessWidget {
           if (notifier.currentValue ?? false) {
             return RotationTransition(
               turns: const AlwaysStoppedAnimation(180 / 360),
-              child: FlowyIconButton(
-                width: 24,
-                onPressed: () {
-                  notifier.value = false;
-                  ctx.read<HomeBloc>().add(const HomeEvent.collapseMenu());
-                },
-                iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2),
-                icon: svgWidget("home/hide_menu", color: theme.iconColor),
-              ),
+              child: Tooltip(
+                  richMessage: TextSpan(children: [
+                    const TextSpan(text: LocaleKeys.sideBar_openSidebar + "\n"),
+                    TextSpan(
+                      text: Platform.isMacOS ? "⌘+\\" : "Ctrl+\\",
+                      style: const TextStyle(color: Colors.white60),
+                    ),
+                  ]),
+                  child: FlowyIconButton(
+                    width: 24,
+                    onPressed: () {
+                      notifier.value = false;
+                      ctx.read<HomeBloc>().add(const HomeEvent.collapseMenu());
+                    },
+                    iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2),
+                    icon: svgWidget("home/hide_menu", color: theme.iconColor),
+                  )),
             );
           } else {
             return Container();
@@ -154,7 +168,8 @@ class NaviItemWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Expanded(child: item.leftBarItem.padding(horizontal: 2, vertical: 2));
+    return Expanded(
+        child: item.leftBarItem.padding(horizontal: 2, vertical: 2));
   }
 }
 

frontend/app_flowy/pubspec.lock

@@ -569,6 +569,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.0"
+  hotkey_manager:
+    dependency: "direct main"
+    description:
+      name: hotkey_manager
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.7"
   html:
     dependency: transitive
     description:

frontend/app_flowy/pubspec.yaml

@@ -79,6 +79,7 @@ dependencies:
   table_calendar: ^3.0.5
   reorderables: ^0.5.0
   linked_scroll_controller: ^0.2.0
+  hotkey_manager: ^0.1.7
 
 dev_dependencies:
   flutter_lints: ^1.0.0

frontend/scripts/install_dev_env/install_linux.sh

@@ -46,6 +46,9 @@ flutter config --enable-linux-desktop
 # Fix any problems reported by flutter doctor
 flutter doctor
 
+# install keybinder-3.0
+apt-get install keybinder-3.0
+
 # Add the githooks directory to your git configuration
 printMessage "Setting up githooks."
 git config core.hooksPath .githooks