feat: switch breadcrumb&path with focus node

Signed-off-by: Kingtous <kingtous@qq.com>

flutter/lib/desktop/pages/file_manager_page.dart

@@ -2,6 +2,7 @@ import 'dart:io';
 import 'dart:math';
 
 import 'package:flutter/material.dart';
+import 'package:flutter_breadcrumb/flutter_breadcrumb.dart';
 import 'package:flutter_hbb/mobile/pages/file_manager_page.dart';
 import 'package:flutter_hbb/models/file_model.dart';
 import 'package:get/get.dart';
@@ -12,6 +13,8 @@ import '../../common.dart';
 import '../../models/model.dart';
 import '../../models/platform_model.dart';
 
+enum LocationStatus { bread, textField }
+
 class FileManagerPage extends StatefulWidget {
   FileManagerPage({Key? key, required this.id}) : super(key: key);
   final String id;
@@ -25,6 +28,17 @@ class _FileManagerPageState extends State<FileManagerPage>
   final _localSelectedItems = SelectedItems();
   final _remoteSelectedItems = SelectedItems();
 
+  final _locationStatusLocal = LocationStatus.bread.obs;
+  final _locationStatusRemote = LocationStatus.bread.obs;
+  final FocusNode _locationNodeLocal =
+      FocusNode(debugLabel: "locationNodeLocal");
+  final FocusNode _locationNodeRemote =
+      FocusNode(debugLabel: "locationNodeRemote");
+  final FocusNode _locationSearchLocal =
+      FocusNode(debugLabel: "locationSearchLocal");
+  final FocusNode _locationSearchRemote =
+      FocusNode(debugLabel: "locationSearchRemote");
+
   late FFI _ffi;
 
   FileModel get model => _ffi.fileModel;
@@ -44,6 +58,9 @@ class _FileManagerPageState extends State<FileManagerPage>
       Wakelock.enable();
     }
     print("init success with id ${widget.id}");
+    // register location listener
+    _locationNodeLocal.addListener(onLocalLocationFocusChanged);
+    _locationNodeRemote.addListener(onRemoteLocationFocusChanged);
   }
 
   @override
@@ -55,6 +72,8 @@ class _FileManagerPageState extends State<FileManagerPage>
       Wakelock.disable();
     }
     Get.delete<FFI>(tag: 'ft_${widget.id}');
+    _locationNodeLocal.removeListener(onLocalLocationFocusChanged);
+    _locationNodeRemote.removeListener(onRemoteLocationFocusChanged);
     super.dispose();
   }
 
@@ -129,8 +148,7 @@ class _FileManagerPageState extends State<FileManagerPage>
     final sortAscending =
         isLocal ? model.localSortAscending : model.remoteSortAscending;
     return Container(
-      decoration: BoxDecoration(
+      decoration: BoxDecoration(border: Border.all(color: Colors.black26)),
-          color: Colors.white54, border: Border.all(color: Colors.black26)),
       margin: const EdgeInsets.all(16.0),
       padding: const EdgeInsets.all(8.0),
       child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
@@ -142,6 +160,7 @@ class _FileManagerPageState extends State<FileManagerPage>
             Expanded(
               child: SingleChildScrollView(
                 child: DataTable(
+                  key: ValueKey(isLocal ? 0 : 1),
                   showCheckboxColumn: true,
                   dataRowHeight: 25,
                   headingRowHeight: 30,
@@ -355,8 +374,7 @@ class _FileManagerPageState extends State<FileManagerPage>
         child: Container(
           margin: const EdgeInsets.only(top: 16.0, bottom: 16.0, right: 16.0),
           padding: const EdgeInsets.all(8.0),
-          decoration: BoxDecoration(
+          decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
-              color: Colors.white70, border: Border.all(color: Colors.grey)),
           child: Obx(
             () => ListView.builder(
               itemBuilder: (BuildContext context, int index) {
@@ -449,7 +467,11 @@ class _FileManagerPageState extends State<FileManagerPage>
     model.goToParentDirectory(isLocal: isLocal);
   }
 
-  Widget headTools(bool isLocal) => Container(
+  Widget headTools(bool isLocal) {
+    final _locationStatus =
+        isLocal ? _locationStatusLocal : _locationStatusRemote;
+    final _locationFocus = isLocal ? _locationNodeLocal : _locationNodeRemote;
+    return Container(
         child: Column(
       children: [
         // symbols
@@ -501,16 +523,29 @@ class _FileManagerPageState extends State<FileManagerPage>
               ],
             ),
             Expanded(
+                child: GestureDetector(
+              onTap: () {
+                _locationStatus.value =
+                    _locationStatus.value == LocationStatus.bread
+                        ? LocationStatus.textField
+                        : LocationStatus.bread;
+                Future.delayed(Duration.zero, () {
+                  if (_locationStatus.value == LocationStatus.textField) {
+                    _locationFocus.requestFocus();
+                  }
+                });
+              },
               child: Container(
-                      decoration: BoxDecoration(
+                  decoration:
-                          border: Border.all(color: Colors.black12)),
+                      BoxDecoration(border: Border.all(color: Colors.black12)),
-                      child: TextField(
+                  child: Row(
-                        decoration: InputDecoration(
+                    children: [
-                            border: InputBorder.none,
+                      Expanded(
-                            isDense: true,
+                          child: Obx(() =>
-                            prefix:
+                              _locationStatus.value == LocationStatus.bread
-                                Padding(padding: EdgeInsets.only(left: 4.0)),
+                                  ? buildBread(isLocal)
-                            suffix: DropdownButton<String>(
+                                  : buildPathLocation(isLocal))),
+                      DropdownButton<String>(
                           isDense: true,
                           underline: Offstage(),
                           items: [
@@ -524,20 +559,28 @@ class _FileManagerPageState extends State<FileManagerPage>
                             if (path is String && path.isNotEmpty) {
                               model.openDirectory(path, isLocal: isLocal);
                             }
-                                })),
+                          })
-                        controller: TextEditingController(
+                    ],
-                            text: isLocal
+                  )),
-                                ? model.currentLocalDir.path
+            )),
-                                : model.currentRemoteDir.path),
+            PopupMenuButton(
-                        onSubmitted: (path) {
+              itemBuilder: (context) => [
-                          model.openDirectory(path, isLocal: isLocal);
+                PopupMenuItem(
-                        },
+                    enabled: false,
-                      ))),
+                    child: ConstrainedBox(
+                      constraints: BoxConstraints(minWidth: 200),
+                      child: TextField(
+                        decoration: InputDecoration(),
+                      ),
+                    ))
+              ],
+              child: Icon(Icons.search),
+            ),
             IconButton(
                 onPressed: () {
                   model.refresh(isLocal: isLocal);
                 },
-                  icon: Icon(Icons.refresh))
+                icon: Icon(Icons.refresh)),
           ],
         ),
         Row(
@@ -551,8 +594,8 @@ class _FileManagerPageState extends State<FileManagerPage>
                   IconButton(
                       onPressed: () {
                         final name = TextEditingController();
-                          _ffi.dialogManager.show((setState, close) =>
+                        _ffi.dialogManager
-                              CustomAlertDialog(
+                            .show((setState, close) => CustomAlertDialog(
                                     title: Text(translate("Create Folder")),
                                     content: Column(
                                       mainAxisSize: MainAxisSize.min,
@@ -578,7 +621,8 @@ class _FileManagerPageState extends State<FileManagerPage>
                                               model.createDir(
                                                   PathUtil.join(
                                                       model
-                                                        .getCurrentDir(isLocal)
+                                                          .getCurrentDir(
+                                                              isLocal)
                                                           .path,
                                                       name.value.text,
                                                       model.getCurrentIsWindows(
@@ -613,19 +657,16 @@ class _FileManagerPageState extends State<FileManagerPage>
                   angle: isLocal ? 0 : pi,
                   child: Icon(
                     Icons.send,
-                      color: Colors.black54,
                   ),
                 ),
                 label: Text(
                   isLocal ? translate('Send') : translate('Receive'),
-                    style: TextStyle(
-                      color: Colors.black54,
-                    ),
                 )),
           ],
         ).marginOnly(top: 8.0)
       ],
     ));
+  }
 
   Widget listTail({bool isLocal = false}) {
     final dir = isLocal ? model.currentLocalDir : model.currentRemoteDir;
@@ -663,4 +704,69 @@ class _FileManagerPageState extends State<FileManagerPage>
     else if (platform != 'linux' && platform != 'android') platform = 'win';
     return Image.asset('assets/$platform.png', width: 25, height: 25);
   }
+
+  void onLocalLocationFocusChanged() {
+    debugPrint("focus changed on local");
+    if (_locationNodeLocal.hasFocus) {
+      // ignore
+    } else {
+      // lost focus, change to bread
+      _locationStatusLocal.value = LocationStatus.bread;
+    }
+  }
+
+  void onRemoteLocationFocusChanged() {
+    debugPrint("focus changed on remote");
+    if (_locationNodeRemote.hasFocus) {
+      // ignore
+    } else {
+      // lost focus, change to bread
+      _locationStatusRemote.value = LocationStatus.bread;
+    }
+  }
+
+  Widget buildBread(bool isLocal) {
+    final directory = model.getCurrentDir(isLocal);
+    print(directory.path);
+    return BreadCrumb(
+      items: getPathBreadCrumbItems(isLocal, (list) {
+        var path = "";
+        for (var item in list) {
+          path = PathUtil.join(path, item, model.getCurrentIsWindows(isLocal));
+        }
+        model.openDirectory(path, isLocal: isLocal);
+      }),
+      divider: Text("/").paddingSymmetric(horizontal: 4.0),
+    );
+  }
+
+  List<BreadCrumbItem> getPathBreadCrumbItems(
+      bool isLocal, void Function(List<String>) onPressed) {
+    final path = model.getCurrentDir(isLocal).path;
+    final list = PathUtil.split(path, model.getCurrentIsWindows(isLocal));
+    final breadCrumbList = List<BreadCrumbItem>.empty(growable: true);
+    breadCrumbList.addAll(list.asMap().entries.map((e) => BreadCrumbItem(
+        content: TextButton(
+            child: Text(e.value),
+            style:
+                ButtonStyle(minimumSize: MaterialStateProperty.all(Size(0, 0))),
+            onPressed: () => onPressed(list.sublist(0, e.key + 1))))));
+    return breadCrumbList;
+  }
+
+  Widget buildPathLocation(bool isLocal) {
+    return TextField(
+      focusNode: isLocal ? _locationNodeLocal : _locationNodeRemote,
+      decoration: InputDecoration(
+        border: InputBorder.none,
+        isDense: true,
+        prefix: Padding(padding: EdgeInsets.only(left: 4.0)),
+      ),
+      controller:
+          TextEditingController(text: model.getCurrentDir(isLocal).path),
+      onSubmitted: (path) {
+        model.openDirectory(path, isLocal: isLocal);
+      },
+    );
+  }
 }

flutter/lib/models/file_model.dart

@@ -68,6 +68,22 @@ class FileModel extends ChangeNotifier {
     return isLocal ? currentLocalDir : currentRemoteDir;
   }
 
+  String getCurrentShortPath(bool isLocal) {
+    final currentDir = getCurrentDir(isLocal);
+    final currentHome = getCurrentHome(isLocal);
+    if (currentDir.path.startsWith(currentHome)) {
+      var path = currentDir.path.replaceFirst(currentHome, "");
+      if (path.length == 0) return "";
+      if (path[0] == "/" || path[0] == "\\") {
+        // remove more '/' or '\'
+        path = path.replaceFirst(path[0], "");
+      }
+      return path;
+    } else {
+      return currentDir.path.replaceFirst(currentHome, "");
+    }
+  }
+
   String get currentHome => _isLocal ? _localOption.home : _remoteOption.home;
 
   String getCurrentHome(bool isLocal) {