opt dropdown button of connection page (#11086)

* Use menu style of the peer card
* Add margin between connection button and dropdown button
* Use thinner icon

Signed-off-by: 21pages <sunboeasy@gmail.com>

flutter/lib/common.dart

@@ -108,6 +108,8 @@ class IconFont {
   static const _family2 = 'PeerSearchbar';
   static const _family3 = 'AddressBook';
   static const _family4 = 'DeviceGroup';
+  static const _family5 = 'More';
+
   IconFont._();
 
   static const IconData max = IconData(0xe606, fontFamily: _family1);
@@ -123,6 +125,7 @@ class IconFont {
       IconData(0xe623, fontFamily: _family4);
   static const IconData deviceGroupFill =
       IconData(0xe748, fontFamily: _family4);
+  static const IconData more = IconData(0xe609, fontFamily: _family5);
 }
 
 class ColorThemeExtension extends ThemeExtension<ColorThemeExtension> {

flutter/lib/desktop/pages/connection_page.dart

@@ -2,10 +2,12 @@
 
 import 'dart:async';
 import 'dart:convert';
+import 'dart:math';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_hbb/common/widgets/connection_page_title.dart';
 import 'package:flutter_hbb/consts.dart';
+import 'package:flutter_hbb/desktop/widgets/popup_menu.dart';
 import 'package:flutter_hbb/models/state_model.dart';
 import 'package:get/get.dart';
 import 'package:url_launcher/url_launcher_string.dart';
@@ -17,6 +19,7 @@ import '../../common/formatter/id_formatter.dart';
 import '../../common/widgets/peer_tab_page.dart';
 import '../../common/widgets/autocomplete.dart';
 import '../../models/platform_model.dart';
+import '../../desktop/widgets/material_mod_popup_menu.dart' as mod_menu;
 
 class OnlineStatusWidget extends StatefulWidget {
   const OnlineStatusWidget({Key? key, this.onSvcStatusChanged})
@@ -211,6 +214,8 @@ class _ConnectionPageState extends State<ConnectionPage>
   // https://github.com/flutter/flutter/issues/157244
   Iterable<Peer> _autocompleteOpts = [];
 
+  final _menuOpen = false.obs;
+
   @override
   void initState() {
     super.initState();
@@ -513,7 +518,7 @@ class _ConnectionPageState extends State<ConnectionPage>
                     child: Text(translate("Connect")),
                   ),
                 ),
-                const SizedBox(width: 3),
+                const SizedBox(width: 8),
                 Container(
                   height: 28.0,
                   width: 28.0,
@@ -522,41 +527,64 @@ class _ConnectionPageState extends State<ConnectionPage>
                     borderRadius: BorderRadius.circular(8),
                   ),
                   child: Center(
-                    child: MenuAnchor(
-                      builder: (context, controller, builder) {
-                        return IconButton(
-                          padding: EdgeInsets.zero,
-                          constraints: BoxConstraints(),
-                          visualDensity: VisualDensity.compact,
-                          icon: controller.isOpen
-                              ? const Icon(Icons.keyboard_arrow_up)
-                              : const Icon(Icons.keyboard_arrow_down),
-                          onPressed: () {
-                            setState(() {
-                              if (controller.isOpen) {
-                                controller.close();
-                              } else {
-                                controller.open();
-                              }
-                            });
-                          },
-                        );
-                      },
-                      menuChildren: <Widget>[
-                        MenuItemButton(
-                          onPressed: () {
-                            onConnect(isFileTransfer: true);
-                          },
-                          child: Text(translate('Transfer file')),
-                        ),
-                        MenuItemButton(
-                          onPressed: () {
-                            onConnect(isViewCamera: true);
-                          },
-                          child: Text(translate('View camera')),
-                        ),
-                      ],
-                    ),
+                    child: Obx(() {
+                      var offset = Offset(0, 0);
+                      return InkWell(
+                        child: _menuOpen.value
+                            ? Transform.rotate(
+                                angle: pi,
+                                child: Icon(IconFont.more, size: 14),
+                              )
+                            : Icon(IconFont.more, size: 14),
+                        onTapDown: (e) {
+                          offset = e.globalPosition;
+                        },
+                        onTap: () async {
+                          _menuOpen.value = true;
+                          final x = offset.dx;
+                          final y = offset.dy;
+                          await mod_menu
+                              .showMenu(
+                            context: context,
+                            position: RelativeRect.fromLTRB(x, y, x, y),
+                            items: [
+                              (
+                                'Transfer file',
+                                () => onConnect(isFileTransfer: true)
+                              ),
+                              (
+                                'View camera',
+                                () => onConnect(isViewCamera: true)
+                              ),
+                            ]
+                                .map((e) => MenuEntryButton<String>(
+                                      childBuilder: (TextStyle? style) => Text(
+                                        translate(e.$1),
+                                        style: style,
+                                      ),
+                                      proc: () => e.$2(),
+                                      padding: EdgeInsets.symmetric(
+                                          horizontal: kDesktopMenuPadding.left),
+                                      dismissOnClicked: true,
+                                    ))
+                                .map((e) => e.build(
+                                    context,
+                                    const MenuConfig(
+                                        commonColor:
+                                            CustomPopupMenuTheme.commonColor,
+                                        height: CustomPopupMenuTheme.height,
+                                        dividerHeight: CustomPopupMenuTheme
+                                            .dividerHeight)))
+                                .expand((i) => i)
+                                .toList(),
+                            elevation: 8,
+                          )
+                              .then((_) {
+                            _menuOpen.value = false;
+                          });
+                        },
+                      );
+                    }),
                   ),
                 ),
               ]),

flutter/lib/desktop/pages/view_camera_page.dart

@@ -229,7 +229,7 @@ class _ViewCameraPageState extends State<ViewCameraPage>
 
     // https://github.com/flutter/flutter/issues/64935
     super.dispose();
-    debugPrint("REMOTE PAGE dispose session $sessionId ${widget.id}");
+    debugPrint("VIEW CAMERA PAGE dispose session $sessionId ${widget.id}");
     _ffi.textureModel.onViewCameraPageDispose(closeSession);
     if (closeSession) {
       // ensure we leave this session, this is a double check

flutter/pubspec.yaml

@@ -164,6 +164,9 @@ flutter:
     - family: DeviceGroup
       fonts:
         - asset: assets/device_group.ttf
+    - family: More
+      fonts:
+        - asset: assets/more.ttf
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware.