opt peer card multi select

Signed-off-by: 21pages <pages21@163.com>

flutter/lib/common/widgets/peer_card.dart

@@ -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(

flutter/lib/common/widgets/peer_tab_page.dart

@@ -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)))