mirror of
https://github.com/rustdesk/rustdesk.git
synced 2024-11-27 14:59:02 +08:00
opt peer card multi select
Signed-off-by: 21pages <pages21@163.com>
This commit is contained in:
parent
5028b8a93d
commit
3fd58bb69d
BIN
flutter/assets/checkbox.ttf
Normal file
BIN
flutter/assets/checkbox.ttf
Normal file
Binary file not shown.
@ -90,6 +90,7 @@ class IconFont {
|
||||
static const IconData roundClose = IconData(0xe6ed, fontFamily: _family2);
|
||||
static const IconData addressBook =
|
||||
IconData(0xe602, fontFamily: "AddressBook");
|
||||
static const IconData checkbox = IconData(0xe7d6, fontFamily: "CheckBox");
|
||||
}
|
||||
|
||||
class ColorThemeExtension extends ThemeExtension<ColorThemeExtension> {
|
||||
|
@ -61,20 +61,19 @@ class _PeerCardState extends State<_PeerCard>
|
||||
final name =
|
||||
'${peer.username}${peer.username.isNotEmpty && peer.hostname.isNotEmpty ? '@' : ''}${peer.hostname}';
|
||||
final PeerTabModel peerTabModel = Provider.of(context);
|
||||
final selected = peerTabModel.isPeerSelected(peer.id);
|
||||
return Card(
|
||||
margin: EdgeInsets.symmetric(horizontal: 2),
|
||||
child: GestureDetector(
|
||||
onTap: () {
|
||||
if (peerTabModel.multiSelectionMode) {
|
||||
peerTabModel.togglePeerSelect(peer);
|
||||
peerTabModel.select(peer);
|
||||
} else {
|
||||
if (!isWebDesktop) connect(context, peer.id);
|
||||
}
|
||||
},
|
||||
onDoubleTap: isWebDesktop ? () => connect(context, peer.id) : null,
|
||||
onLongPress: () {
|
||||
peerTabModel.togglePeerSelect(peer);
|
||||
peerTabModel.select(peer);
|
||||
},
|
||||
child: Container(
|
||||
padding: EdgeInsets.only(left: 12, top: 8, bottom: 8),
|
||||
@ -103,23 +102,7 @@ class _PeerCardState extends State<_PeerCard>
|
||||
],
|
||||
).paddingOnly(left: 8.0),
|
||||
),
|
||||
selected
|
||||
? Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: checkBox(),
|
||||
)
|
||||
: InkWell(
|
||||
child: const Padding(
|
||||
padding: EdgeInsets.all(12),
|
||||
child: Icon(Icons.more_vert)),
|
||||
onTapDown: (e) {
|
||||
final x = e.globalPosition.dx;
|
||||
final y = e.globalPosition.dy;
|
||||
_menuPos = RelativeRect.fromLTRB(x, y, x, y);
|
||||
},
|
||||
onTap: () {
|
||||
_showPeerMenu(peer.id);
|
||||
}),
|
||||
checkBoxOrActionMoreMobile(peer),
|
||||
],
|
||||
),
|
||||
)));
|
||||
@ -159,15 +142,8 @@ class _PeerCardState extends State<_PeerCard>
|
||||
onDoubleTap: peerTabModel.multiSelectionMode
|
||||
? null
|
||||
: () => widget.connect(context, peer.id),
|
||||
onLongPress: () {
|
||||
peerTabModel.togglePeerSelect(peer);
|
||||
},
|
||||
onSecondaryTapDown: (_) {
|
||||
peerTabModel.togglePeerSelect(peer);
|
||||
},
|
||||
onTap: peerTabModel.multiSelectionMode
|
||||
? () => peerTabModel.togglePeerSelect(peer)
|
||||
: null,
|
||||
onTap: () => peerTabModel.select(peer),
|
||||
onLongPress: () => peerTabModel.select(peer),
|
||||
child: Obx(() => peerCardUiType.value == PeerUiType.grid
|
||||
? _buildPeerCard(context, peer, deco)
|
||||
: _buildPeerTile(context, peer, deco))),
|
||||
@ -176,8 +152,6 @@ class _PeerCardState extends State<_PeerCard>
|
||||
|
||||
Widget _buildPeerTile(
|
||||
BuildContext context, Peer peer, Rx<BoxDecoration?> deco) {
|
||||
final PeerTabModel peerTabModel = Provider.of(context);
|
||||
final selected = peerTabModel.isPeerSelected(peer.id);
|
||||
final name =
|
||||
'${peer.username}${peer.username.isNotEmpty && peer.hostname.isNotEmpty ? '@' : ''}${peer.hostname}';
|
||||
final greyStyle = TextStyle(
|
||||
@ -237,7 +211,7 @@ class _PeerCardState extends State<_PeerCard>
|
||||
],
|
||||
).marginOnly(top: 2),
|
||||
),
|
||||
selected ? checkBox() : _actionMore(peer),
|
||||
checkBoxOrActionMoreDesktop(peer),
|
||||
],
|
||||
).paddingOnly(left: 10.0, top: 3.0),
|
||||
),
|
||||
@ -250,8 +224,6 @@ class _PeerCardState extends State<_PeerCard>
|
||||
|
||||
Widget _buildPeerCard(
|
||||
BuildContext context, Peer peer, Rx<BoxDecoration?> deco) {
|
||||
final PeerTabModel peerTabModel = Provider.of(context);
|
||||
final selected = peerTabModel.isPeerSelected(peer.id);
|
||||
final name =
|
||||
'${peer.username}${peer.username.isNotEmpty && peer.hostname.isNotEmpty ? '@' : ''}${peer.hostname}';
|
||||
return Card(
|
||||
@ -321,7 +293,7 @@ class _PeerCardState extends State<_PeerCard>
|
||||
style: Theme.of(context).textTheme.titleSmall,
|
||||
)),
|
||||
]).paddingSymmetric(vertical: 8)),
|
||||
selected ? checkBox() : _actionMore(peer),
|
||||
checkBoxOrActionMoreDesktop(peer),
|
||||
],
|
||||
).paddingSymmetric(horizontal: 12.0),
|
||||
)
|
||||
@ -333,11 +305,57 @@ class _PeerCardState extends State<_PeerCard>
|
||||
);
|
||||
}
|
||||
|
||||
Widget checkBox() {
|
||||
return Icon(
|
||||
Icons.check_box,
|
||||
color: MyTheme.accent,
|
||||
);
|
||||
Widget checkBoxOrActionMoreMobile(Peer peer) {
|
||||
final PeerTabModel peerTabModel = Provider.of(context);
|
||||
final selected = peerTabModel.isPeerSelected(peer.id);
|
||||
if (peerTabModel.multiSelectionMode) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: selected
|
||||
? Icon(
|
||||
Icons.check_box,
|
||||
color: MyTheme.accent,
|
||||
)
|
||||
: Icon(Icons.check_box_outline_blank),
|
||||
);
|
||||
} else {
|
||||
return InkWell(
|
||||
child: const Padding(
|
||||
padding: EdgeInsets.all(12), child: Icon(Icons.more_vert)),
|
||||
onTapDown: (e) {
|
||||
final x = e.globalPosition.dx;
|
||||
final y = e.globalPosition.dy;
|
||||
_menuPos = RelativeRect.fromLTRB(x, y, x, y);
|
||||
},
|
||||
onTap: () {
|
||||
_showPeerMenu(peer.id);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Widget checkBoxOrActionMoreDesktop(Peer peer) {
|
||||
final PeerTabModel peerTabModel = Provider.of(context);
|
||||
final selected = peerTabModel.isPeerSelected(peer.id);
|
||||
if (peerTabModel.multiSelectionMode) {
|
||||
final icon = selected
|
||||
? Icon(
|
||||
Icons.check_box,
|
||||
color: MyTheme.accent,
|
||||
)
|
||||
: Icon(Icons.check_box_outline_blank);
|
||||
bool last = peerTabModel.isShiftDown && peer.id == peerTabModel.lastId;
|
||||
if (last) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: MyTheme.accent, width: 1)),
|
||||
child: icon,
|
||||
);
|
||||
} else {
|
||||
return icon;
|
||||
}
|
||||
} else {
|
||||
return _actionMore(peer);
|
||||
}
|
||||
}
|
||||
|
||||
Widget _actionMore(Peer peer) => Listener(
|
||||
|
@ -103,6 +103,7 @@ class _PeerTabPageState extends State<PeerTabPage>
|
||||
Expanded(child: _createSwitchBar(context)),
|
||||
const PeerSearchBar().marginOnly(right: isMobile ? 0 : 13),
|
||||
_createRefresh(),
|
||||
_createMultiSelection(),
|
||||
Offstage(
|
||||
offstage: !isDesktop,
|
||||
child: _createPeerViewTypeSwitch(context)),
|
||||
@ -258,6 +259,24 @@ class _PeerTabPageState extends State<PeerTabPage>
|
||||
);
|
||||
}
|
||||
|
||||
Widget _createMultiSelection() {
|
||||
final textColor = Theme.of(context).textTheme.titleLarge?.color;
|
||||
final model = Provider.of<PeerTabModel>(context);
|
||||
return Container(
|
||||
padding: EdgeInsets.all(4.0),
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
model.setMultiSelectionMode(true);
|
||||
},
|
||||
child: Icon(
|
||||
IconFont.checkbox,
|
||||
size: 18,
|
||||
color: textColor,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget createMultiSelectionBar() {
|
||||
final model = Provider.of<PeerTabModel>(context);
|
||||
return Row(
|
||||
@ -308,7 +327,7 @@ class _PeerTabPageState extends State<PeerTabPage>
|
||||
default:
|
||||
break;
|
||||
}
|
||||
gFFI.peerTabModel.closeSelection();
|
||||
gFFI.peerTabModel.setMultiSelectionMode(false);
|
||||
showToast(translate('Successful'));
|
||||
}
|
||||
|
||||
@ -334,7 +353,7 @@ class _PeerTabPageState extends State<PeerTabPage>
|
||||
}
|
||||
}
|
||||
await bind.mainStoreFav(favs: favs);
|
||||
gFFI.peerTabModel.closeSelection();
|
||||
model.setMultiSelectionMode(false);
|
||||
showToast(translate('Successful'));
|
||||
},
|
||||
child: Tooltip(
|
||||
@ -355,7 +374,7 @@ class _PeerTabPageState extends State<PeerTabPage>
|
||||
final peers = model.selectedPeers;
|
||||
gFFI.abModel.addPeers(peers);
|
||||
gFFI.abModel.pushAb();
|
||||
gFFI.peerTabModel.closeSelection();
|
||||
model.setMultiSelectionMode(false);
|
||||
showToast(translate('Successful'));
|
||||
},
|
||||
child: Tooltip(
|
||||
@ -379,7 +398,7 @@ class _PeerTabPageState extends State<PeerTabPage>
|
||||
gFFI.abModel.changeTagForPeers(
|
||||
peers.map((p) => p.id).toList(), selectedTags);
|
||||
gFFI.abModel.pushAb();
|
||||
gFFI.peerTabModel.closeSelection();
|
||||
model.setMultiSelectionMode(false);
|
||||
showToast(translate('Successful'));
|
||||
});
|
||||
},
|
||||
@ -416,7 +435,7 @@ class _PeerTabPageState extends State<PeerTabPage>
|
||||
final model = Provider.of<PeerTabModel>(context);
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
model.closeSelection();
|
||||
model.setMultiSelectionMode(false);
|
||||
},
|
||||
child:
|
||||
Tooltip(message: translate('Close'), child: Icon(Icons.clear)))
|
||||
|
@ -418,7 +418,7 @@ class _AppState extends State<App> {
|
||||
: (context, child) {
|
||||
child = _keepScaleBuilder(context, child);
|
||||
child = botToastBuilder(context, child);
|
||||
if (desktopType == DesktopType.main) {
|
||||
if (isDesktop && desktopType == DesktopType.main) {
|
||||
child = keyListenerBuilder(context, child);
|
||||
}
|
||||
return child;
|
||||
@ -465,9 +465,9 @@ Widget keyListenerBuilder(BuildContext context, Widget? child) {
|
||||
onKey: (RawKeyEvent event) {
|
||||
if (event.logicalKey == LogicalKeyboardKey.shiftLeft) {
|
||||
if (event is RawKeyDownEvent) {
|
||||
gFFI.peerTabModel.isShiftDown = true;
|
||||
gFFI.peerTabModel.setShiftDown(true);
|
||||
} else if (event is RawKeyUpEvent) {
|
||||
gFFI.peerTabModel.isShiftDown = false;
|
||||
gFFI.peerTabModel.setShiftDown(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -39,11 +39,14 @@ class PeerTabModel with ChangeNotifier {
|
||||
List<int> get indexs => List.generate(tabNames.length, (index) => index);
|
||||
List<Peer> _selectedPeers = List.empty(growable: true);
|
||||
List<Peer> get selectedPeers => _selectedPeers;
|
||||
bool get multiSelectionMode => _selectedPeers.isNotEmpty;
|
||||
bool _multiSelectionMode = false;
|
||||
bool get multiSelectionMode => _multiSelectionMode;
|
||||
List<Peer> _currentTabCachedPeers = List.empty(growable: true);
|
||||
List<Peer> get currentTabCachedPeers => _currentTabCachedPeers;
|
||||
bool isShiftDown = false;
|
||||
String? _shiftAnchorId;
|
||||
bool _isShiftDown = false;
|
||||
bool get isShiftDown => _isShiftDown;
|
||||
String _lastId = '';
|
||||
String get lastId => _lastId;
|
||||
|
||||
PeerTabModel(this.parent) {
|
||||
// init currentTab
|
||||
@ -85,38 +88,39 @@ class PeerTabModel with ChangeNotifier {
|
||||
return Icons.help;
|
||||
}
|
||||
|
||||
togglePeerSelect(Peer peer) {
|
||||
setMultiSelectionMode(bool mode) {
|
||||
_multiSelectionMode = mode;
|
||||
if (!mode) {
|
||||
_selectedPeers.clear();
|
||||
_lastId = '';
|
||||
}
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
select(Peer peer) {
|
||||
if (!_multiSelectionMode) {
|
||||
// https://github.com/flutter/flutter/issues/101275#issuecomment-1604541700
|
||||
// After onTap, the shift key should be pressed for a while when not in multiselection mode,
|
||||
// because onTap is delayed when onDoubleTap is not null
|
||||
if (isDesktop && !_isShiftDown) return;
|
||||
_multiSelectionMode = true;
|
||||
}
|
||||
final cached = _currentTabCachedPeers.map((e) => e.id).toList();
|
||||
int thisIndex = cached.indexOf(peer.id);
|
||||
int closestIndex = -1;
|
||||
String? closestId;
|
||||
int smallestDiff = -1;
|
||||
for (var i = 0; i < cached.length; i++) {
|
||||
if (isPeerSelected(cached[i])) {
|
||||
int diff = (i - thisIndex).abs();
|
||||
if (smallestDiff == -1 || diff < smallestDiff) {
|
||||
closestIndex = i;
|
||||
closestId = cached[i];
|
||||
smallestDiff = diff;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (isShiftDown &&
|
||||
thisIndex >= 0 &&
|
||||
closestIndex >= 0 &&
|
||||
closestId != null) {
|
||||
int shiftAnchorIndex = cached.indexOf(_shiftAnchorId ?? '');
|
||||
if (shiftAnchorIndex < 0) {
|
||||
// use closest as shift anchor, rather than focused which we don't have
|
||||
shiftAnchorIndex = closestIndex;
|
||||
_shiftAnchorId = closestId;
|
||||
}
|
||||
int start = min(shiftAnchorIndex, thisIndex);
|
||||
int end = max(shiftAnchorIndex, thisIndex);
|
||||
_selectedPeers.clear();
|
||||
int lastIndex = cached.indexOf(_lastId);
|
||||
if (_isShiftDown && thisIndex >= 0 && lastIndex >= 0) {
|
||||
int start = min(thisIndex, lastIndex);
|
||||
int end = max(thisIndex, lastIndex);
|
||||
bool remove = isPeerSelected(peer.id);
|
||||
for (var i = start; i <= end; i++) {
|
||||
if (!isPeerSelected(cached[i])) {
|
||||
_selectedPeers.add(_currentTabCachedPeers[i]);
|
||||
if (remove) {
|
||||
if (isPeerSelected(cached[i])) {
|
||||
_selectedPeers.removeWhere((p) => p.id == cached[i]);
|
||||
}
|
||||
} else {
|
||||
if (!isPeerSelected(cached[i])) {
|
||||
_selectedPeers.add(_currentTabCachedPeers[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
@ -125,14 +129,8 @@ class PeerTabModel with ChangeNotifier {
|
||||
} else {
|
||||
_selectedPeers.add(peer);
|
||||
}
|
||||
_shiftAnchorId = null;
|
||||
}
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
closeSelection() {
|
||||
_selectedPeers.clear();
|
||||
_shiftAnchorId = null;
|
||||
_lastId = peer.id;
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
@ -151,4 +149,13 @@ class PeerTabModel with ChangeNotifier {
|
||||
bool isPeerSelected(String id) {
|
||||
return selectedPeers.firstWhereOrNull((p) => p.id == id) != null;
|
||||
}
|
||||
|
||||
setShiftDown(bool v) {
|
||||
if (_isShiftDown != v) {
|
||||
_isShiftDown = v;
|
||||
if (_multiSelectionMode) {
|
||||
notifyListeners();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -149,6 +149,9 @@ flutter:
|
||||
- family: AddressBook
|
||||
fonts:
|
||||
- asset: assets/address_book.ttf
|
||||
- family: CheckBox
|
||||
fonts:
|
||||
- asset: assets/checkbox.ttf
|
||||
|
||||
# An image asset can refer to one or more resolution-specific "variants", see
|
||||
# https://flutter.dev/assets-and-images/#resolution-aware.
|
||||
|
Loading…
Reference in New Issue
Block a user