feat: make file manager draggable
This commit is contained in:
Kingtous
parent
ca991ff39f
commit
c3c4505132
@ -53,6 +53,8 @@ const int kDesktopMaxDisplayHeight = 1080;
|
||||
|
||||
const double kDesktopFileTransferNameColWidth = 200;
|
||||
const double kDesktopFileTransferModifiedColWidth = 120;
|
||||
const double kDesktopFileTransferMinimumWidth = 100;
|
||||
const double kDesktopFileTransferMaximumWidth = 300;
|
||||
const double kDesktopFileTransferRowHeight = 30.0;
|
||||
const double kDesktopFileTransferHeaderHeight = 25.0;
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@ import 'dart:async';
|
||||
import 'dart:io';
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:flutter_hbb/desktop/widgets/dragable_divider.dart';
|
||||
import 'package:percent_indicator/percent_indicator.dart';
|
||||
import 'package:desktop_drop/desktop_drop.dart';
|
||||
import 'package:flutter/gestures.dart';
|
||||
@ -78,6 +79,10 @@ class _FileManagerPageState extends State<FileManagerPage>
|
||||
final _keyboardNodeRemote = FocusNode(debugLabel: "keyboardNodeRemote");
|
||||
final _listSearchBufferLocal = TimeoutStringBuffer();
|
||||
final _listSearchBufferRemote = TimeoutStringBuffer();
|
||||
final _nameColWidthLocal = kDesktopFileTransferNameColWidth.obs;
|
||||
final _modifiedColWidthLocal = kDesktopFileTransferModifiedColWidth.obs;
|
||||
final _nameColWidthRemote = kDesktopFileTransferNameColWidth.obs;
|
||||
final _modifiedColWidthRemote = kDesktopFileTransferModifiedColWidth.obs;
|
||||
|
||||
/// [_lastClickTime], [_lastClickEntry] help to handle double click
|
||||
int _lastClickTime =
|
||||
@ -297,11 +302,12 @@ class _FileManagerPageState extends State<FileManagerPage>
|
||||
}
|
||||
var searchResult = entries
|
||||
.skip(skipCount)
|
||||
.where((element) => element.name.startsWith(buffer));
|
||||
.where((element) => element.name.toLowerCase().startsWith(buffer));
|
||||
if (searchResult.isEmpty) {
|
||||
// cannot find next, lets restart search from head
|
||||
debugPrint("restart search from head");
|
||||
searchResult =
|
||||
entries.where((element) => element.name.startsWith(buffer));
|
||||
entries.where((element) => element.name.toLowerCase().startsWith(buffer));
|
||||
}
|
||||
if (searchResult.isEmpty) {
|
||||
setState(() {
|
||||
@ -316,7 +322,7 @@ class _FileManagerPageState extends State<FileManagerPage>
|
||||
debugPrint("searching for $buffer");
|
||||
final selectedEntries = getSelectedItems(isLocal);
|
||||
final searchResult =
|
||||
entries.where((element) => element.name.startsWith(buffer));
|
||||
entries.where((element) => element.name.toLowerCase().startsWith(buffer));
|
||||
selectedEntries.clear();
|
||||
if (searchResult.isEmpty) {
|
||||
setState(() {
|
||||
@ -362,37 +368,41 @@ class _FileManagerPageState extends State<FileManagerPage>
|
||||
child: Row(
|
||||
children: [
|
||||
GestureDetector(
|
||||
child: Container(
|
||||
width: kDesktopFileTransferNameColWidth,
|
||||
child: Tooltip(
|
||||
waitDuration:
|
||||
Duration(milliseconds: 500),
|
||||
message: entry.name,
|
||||
child: Row(children: [
|
||||
entry.isDrive
|
||||
? Image(
|
||||
image: iconHardDrive,
|
||||
fit: BoxFit.scaleDown,
|
||||
color: Theme.of(context)
|
||||
.iconTheme
|
||||
.color
|
||||
?.withOpacity(0.7))
|
||||
.paddingAll(4)
|
||||
: SvgPicture.asset(
|
||||
entry.isFile
|
||||
? "assets/file.svg"
|
||||
: "assets/folder.svg",
|
||||
color: Theme.of(context)
|
||||
.tabBarTheme
|
||||
.labelColor,
|
||||
),
|
||||
Expanded(
|
||||
child: Text(
|
||||
entry.name.nonBreaking,
|
||||
overflow:
|
||||
TextOverflow.ellipsis))
|
||||
]),
|
||||
)),
|
||||
child: Obx(
|
||||
() => Container(
|
||||
width: isLocal
|
||||
? _nameColWidthLocal.value
|
||||
: _nameColWidthRemote.value,
|
||||
child: Tooltip(
|
||||
waitDuration:
|
||||
Duration(milliseconds: 500),
|
||||
message: entry.name,
|
||||
child: Row(children: [
|
||||
entry.isDrive
|
||||
? Image(
|
||||
image: iconHardDrive,
|
||||
fit: BoxFit.scaleDown,
|
||||
color: Theme.of(context)
|
||||
.iconTheme
|
||||
.color
|
||||
?.withOpacity(0.7))
|
||||
.paddingAll(4)
|
||||
: SvgPicture.asset(
|
||||
entry.isFile
|
||||
? "assets/file.svg"
|
||||
: "assets/folder.svg",
|
||||
color: Theme.of(context)
|
||||
.tabBarTheme
|
||||
.labelColor,
|
||||
),
|
||||
Expanded(
|
||||
child: Text(
|
||||
entry.name.nonBreaking,
|
||||
overflow:
|
||||
TextOverflow.ellipsis))
|
||||
]),
|
||||
)),
|
||||
),
|
||||
onTap: () {
|
||||
final items = getSelectedItems(isLocal);
|
||||
// handle double click
|
||||
@ -406,24 +416,35 @@ class _FileManagerPageState extends State<FileManagerPage>
|
||||
items, filteredEntries, entry, isLocal);
|
||||
},
|
||||
),
|
||||
SizedBox(
|
||||
width: 2.0,
|
||||
),
|
||||
GestureDetector(
|
||||
child: SizedBox(
|
||||
width: kDesktopFileTransferModifiedColWidth,
|
||||
child: Tooltip(
|
||||
waitDuration:
|
||||
Duration(milliseconds: 500),
|
||||
message: lastModifiedStr,
|
||||
child: Text(
|
||||
lastModifiedStr,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: MyTheme.darkGray,
|
||||
),
|
||||
)),
|
||||
child: Obx(
|
||||
() => SizedBox(
|
||||
width: isLocal
|
||||
? _modifiedColWidthLocal.value
|
||||
: _modifiedColWidthRemote.value,
|
||||
child: Tooltip(
|
||||
waitDuration:
|
||||
Duration(milliseconds: 500),
|
||||
message: lastModifiedStr,
|
||||
child: Text(
|
||||
lastModifiedStr,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: MyTheme.darkGray,
|
||||
),
|
||||
)),
|
||||
),
|
||||
),
|
||||
),
|
||||
// Divider from header.
|
||||
SizedBox(
|
||||
width: 100,
|
||||
width: 2.0,
|
||||
),
|
||||
Expanded(
|
||||
// width: 100,
|
||||
child: GestureDetector(
|
||||
child: Tooltip(
|
||||
waitDuration: Duration(milliseconds: 500),
|
||||
@ -1362,6 +1383,7 @@ class _FileManagerPageState extends State<FileManagerPage>
|
||||
Text(
|
||||
name,
|
||||
style: headerTextStyle,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
).marginSymmetric(horizontal: 4),
|
||||
ascending.value != null
|
||||
? Icon(
|
||||
@ -1383,16 +1405,48 @@ class _FileManagerPageState extends State<FileManagerPage>
|
||||
}
|
||||
|
||||
Widget _buildFileBrowserHeader(BuildContext context, bool isLocal) {
|
||||
return Row(
|
||||
children: [
|
||||
headerItemFunc(kDesktopFileTransferNameColWidth, SortBy.name,
|
||||
translate("Name"), isLocal),
|
||||
headerItemFunc(kDesktopFileTransferModifiedColWidth, SortBy.modified,
|
||||
translate("Modified"), isLocal),
|
||||
Expanded(
|
||||
child:
|
||||
headerItemFunc(null, SortBy.size, translate("Size"), isLocal))
|
||||
],
|
||||
final nameColWidth = isLocal ? _nameColWidthLocal : _nameColWidthRemote;
|
||||
final modifiedColWidth =
|
||||
isLocal ? _modifiedColWidthLocal : _modifiedColWidthRemote;
|
||||
final padding = EdgeInsets.all(1.0);
|
||||
return SizedBox(
|
||||
height: kDesktopFileTransferHeaderHeight,
|
||||
child: Row(
|
||||
children: [
|
||||
Obx(
|
||||
() => headerItemFunc(
|
||||
nameColWidth.value, SortBy.name, translate("Name"), isLocal),
|
||||
),
|
||||
DraggableDivider(
|
||||
axis: Axis.vertical,
|
||||
onPointerMove: (dx) {
|
||||
nameColWidth.value += dx;
|
||||
nameColWidth.value = min(
|
||||
kDesktopFileTransferMaximumWidth,
|
||||
max(kDesktopFileTransferMinimumWidth,
|
||||
nameColWidth.value));
|
||||
},
|
||||
padding: padding,
|
||||
),
|
||||
Obx(
|
||||
() => headerItemFunc(modifiedColWidth.value, SortBy.modified,
|
||||
translate("Modified"), isLocal),
|
||||
),
|
||||
DraggableDivider(
|
||||
axis: Axis.vertical,
|
||||
onPointerMove: (dx) {
|
||||
modifiedColWidth.value += dx;
|
||||
modifiedColWidth.value = min(
|
||||
kDesktopFileTransferMaximumWidth,
|
||||
max(kDesktopFileTransferMinimumWidth,
|
||||
modifiedColWidth.value));
|
||||
},
|
||||
padding: padding),
|
||||
Expanded(
|
||||
child:
|
||||
headerItemFunc(null, SortBy.size, translate("Size"), isLocal))
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
53
flutter/lib/desktop/widgets/dragable_divider.dart
Normal file
53
flutter/lib/desktop/widgets/dragable_divider.dart
Normal file
@ -0,0 +1,53 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/src/widgets/framework.dart';
|
||||
import 'package:flutter/src/widgets/placeholder.dart';
|
||||
|
||||
class DraggableDivider extends StatefulWidget {
|
||||
final Axis axis;
|
||||
final double thickness;
|
||||
final Color color;
|
||||
final Function(double)? onPointerMove;
|
||||
final VoidCallback? onHover;
|
||||
final EdgeInsets padding;
|
||||
const DraggableDivider({
|
||||
super.key,
|
||||
this.axis = Axis.horizontal,
|
||||
this.thickness = 1.0,
|
||||
this.color = const Color.fromARGB(200, 177, 175, 175),
|
||||
this.onPointerMove,
|
||||
this.padding = const EdgeInsets.symmetric(horizontal: 1.0),
|
||||
this.onHover,
|
||||
});
|
||||
|
||||
@override
|
||||
State<DraggableDivider> createState() => _DraggableDividerState();
|
||||
}
|
||||
|
||||
class _DraggableDividerState extends State<DraggableDivider> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Listener(
|
||||
onPointerMove: (event) {
|
||||
final dl =
|
||||
widget.axis == Axis.horizontal ? event.localDelta.dy : event.localDelta.dx;
|
||||
widget.onPointerMove?.call(dl);
|
||||
},
|
||||
onPointerHover: (event) => widget.onHover?.call(),
|
||||
child: MouseRegion(
|
||||
cursor: SystemMouseCursors.resizeLeftRight,
|
||||
child: Padding(
|
||||
padding: widget.padding,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(color: widget.color),
|
||||
width: widget.axis == Axis.horizontal
|
||||
? double.infinity
|
||||
: widget.thickness,
|
||||
height: widget.axis == Axis.horizontal
|
||||
? widget.thickness
|
||||
: double.infinity,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -55,6 +55,7 @@ class TimeoutStringBuffer {
|
||||
}
|
||||
|
||||
ListSearchAction input(String ch) {
|
||||
ch = ch.toLowerCase();
|
||||
final curr = DateTime.now();
|
||||
try {
|
||||
if (curr.difference(_duration).inMilliseconds > timeoutMilliSec) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user