flutter desktop: ui changes

Signed-off-by: fufesou <shuanglongchen@yeah.net>

flutter/lib/desktop/widgets/peercard_widget.dart

@@ -15,7 +15,7 @@ class _PopupMenuTheme {
   static const Color commonColor = MyTheme.accent;
   // kMinInteractiveDimension
   static const double height = 25.0;
-  static const double dividerHeight = 12.0;
+  static const double dividerHeight = 3.0;
 }
 
 typedef PopupMenuEntryBuilder = Future<List<mod_menu.PopupMenuEntry<String>>>
@@ -46,6 +46,7 @@ class _PeerCard extends StatefulWidget {
 /// State for the connection page.
 class _PeerCardState extends State<_PeerCard>
     with AutomaticKeepAliveClientMixin {
+  var _menuPos = RelativeRect.fill;
   final double _cardRadis = 20;
   final double _borderWidth = 2;
   final RxBool _iconMoreHover = false.obs;
@@ -253,36 +254,36 @@ class _PeerCardState extends State<_PeerCard>
     );
   }
 
-  Widget _actionMore(Peer peer) {
-    return FutureBuilder(
-        future: widget.popupMenuEntryBuilder(context),
-        initialData: const <mod_menu.PopupMenuEntry<String>>[],
-        builder: (BuildContext context,
-            AsyncSnapshot<List<mod_menu.PopupMenuEntry<String>>> snapshot) {
-          if (snapshot.hasData) {
-            return Listener(
-                child: MouseRegion(
-                    onEnter: (_) => _iconMoreHover.value = true,
-                    onExit: (_) => _iconMoreHover.value = false,
-                    child: CircleAvatar(
-                        radius: 14,
-                        backgroundColor: _iconMoreHover.value
-                            ? MyTheme.color(context).grayBg!
-                            : MyTheme.color(context).bg!,
-                        child: mod_menu.PopupMenuButton(
-                          padding: EdgeInsets.zero,
-                          icon: Icon(Icons.more_vert,
-                              size: 18,
-                              color: _iconMoreHover.value
-                                  ? MyTheme.color(context).text
-                                  : MyTheme.color(context).lightText),
-                          position: mod_menu.PopupMenuPosition.over,
-                          itemBuilder: (BuildContext context) => snapshot.data!,
-                        ))));
-          } else {
-            return Container();
-          }
-        });
+  Widget _actionMore(Peer peer) => Listener(
+      onPointerDown: (e) {
+        final x = e.position.dx;
+        final y = e.position.dy;
+        _menuPos = RelativeRect.fromLTRB(x, y, x, y);
+      },
+      onPointerUp: (_) => _showPeerMenu(context, peer.id),
+      child: MouseRegion(
+          onEnter: (_) => _iconMoreHover.value = true,
+          onExit: (_) => _iconMoreHover.value = false,
+          child: CircleAvatar(
+              radius: 14,
+              backgroundColor: _iconMoreHover.value
+                  ? MyTheme.color(context).grayBg!
+                  : MyTheme.color(context).bg!,
+              child: Icon(Icons.more_vert,
+                  size: 18,
+                  color: _iconMoreHover.value
+                      ? MyTheme.color(context).text
+                      : MyTheme.color(context).lightText))));
+
+  /// Show the peer menu and handle user's choice.
+  /// User might remove the peer or send a file to the peer.
+  void _showPeerMenu(BuildContext context, String id) async {
+    await mod_menu.showMenu(
+      context: context,
+      position: _menuPos,
+      items: await super.widget.popupMenuEntryBuilder(context),
+      elevation: 8,
+    );
   }
 
   /// Get the image for the current [platform].
@@ -411,19 +412,26 @@ abstract class BasePeerCard extends StatelessWidget {
   @protected
   MenuEntryBase<String> _rdpAction(BuildContext context, String id) {
     return MenuEntryButton<String>(
-      childBuilder: (TextStyle? style) => Row(
-        children: [
-          Text(
-            translate('RDP'),
-            style: style,
-          ),
-          SizedBox(width: 20),
-          IconButton(
-            icon: Icon(Icons.edit),
-            onPressed: () => _rdpDialog(id),
-          )
-        ],
-      ),
+      childBuilder: (TextStyle? style) => Container(
+          alignment: AlignmentDirectional.center,
+          height: _PopupMenuTheme.height,
+          child: Row(
+            children: [
+              Text(
+                translate('RDP'),
+                style: style,
+              ),
+              Expanded(
+                  child: Align(
+                alignment: Alignment.centerRight,
+                child: IconButton(
+                  padding: EdgeInsets.zero,
+                  icon: Icon(Icons.edit),
+                  onPressed: () => _rdpDialog(id),
+                ),
+              ))
+            ],
+          )),
       proc: () {
         _connect(context, id, isRDP: true);
       },
@@ -614,6 +622,7 @@ class RecentPeerCard extends BasePeerCard {
     if (peer.platform == 'Windows') {
       menuItems.add(_rdpAction(context, peer.id));
     }
+    menuItems.add(MenuEntryDivider());
     menuItems.add(await _forceAlwaysRelayAction(peer.id));
     menuItems.add(_renameAction(peer.id, false));
     menuItems.add(_removeAction(peer.id, () async {

flutter/lib/desktop/widgets/remote_menubar.dart

@@ -472,9 +472,17 @@ class _RemoteMenubarState extends State<RemoteMenubar> {
               });
               final quality =
                   await bind.sessionGetCustomImageQuality(id: widget.id);
-              final double initValue = quality != null && quality.isNotEmpty
+              double initValue = quality != null && quality.isNotEmpty
                   ? quality[0].toDouble()
                   : 50.0;
+              const minValue = 10.0;
+              const maxValue = 100.0;
+              if (initValue < minValue) {
+                initValue = minValue;
+              }
+              if (initValue > maxValue) {
+                initValue = maxValue;
+              }
               final RxDouble sliderValue = RxDouble(initValue);
               final rxReplay = rxdart.ReplaySubject<double>();
               rxReplay
@@ -489,10 +497,9 @@ class _RemoteMenubarState extends State<RemoteMenubar> {
               final slider = Obx(() {
                 return Slider(
                   value: sliderValue.value,
-                  min: 10.0,
-                  max: 100.0,
+                  min: minValue,
+                  max: maxValue,
                   divisions: 90,
-                  // label: sliderValue.value.round().toString(),
                   onChanged: (double value) {
                     sliderValue.value = value;
                     rxReplay.add(value);
@@ -502,7 +509,12 @@ class _RemoteMenubarState extends State<RemoteMenubar> {
               final content = Row(
                 children: [
                   slider,
-                  Obx(() => Text('${sliderValue.value.round()}% Bitrate'))
+                  SizedBox(
+                      width: 90,
+                      child: Obx(() => Text(
+                            '${sliderValue.value.round()}% Bitrate',
+                            style: const TextStyle(fontSize: 15),
+                          )))
                 ],
               );
               msgBoxCommon(widget.ffi.dialogManager, 'Custom Image Quality',