refact, remote toolbar, monitors menu

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

flutter/lib/desktop/widgets/remote_toolbar.dart

@@ -107,7 +107,7 @@ class _ToolbarTheme {
   static const double dividerHeight = 12.0;
 
   static const double buttonSize = 32;
-  static const double buttonHMargin = 3;
+  static const double buttonHMargin = 2;
   static const double buttonVMargin = 6;
   static const double iconRadius = 8;
   static const double elevation = 3;
@@ -580,8 +580,6 @@ class _MobileActionMenu extends StatelessWidget {
   }
 }
 
-const _defaultButtonSize = Size(24.0, 18.0);
-
 class _MonitorMenu extends StatelessWidget {
   final String id;
   final FFI ffi;
@@ -600,14 +598,18 @@ class _MonitorMenu extends StatelessWidget {
       useTextureRender && ffi.ffiModel.pi.isSupportMultiDisplay;
 
   @override
-  Widget build(BuildContext context) =>
-      showMonitorsToolbar ? buildMultiMonitorMenu() : buildMonitorMenu();
+  Widget build(BuildContext context) => showMonitorsToolbar
+      ? buildMultiMonitorMenu()
+      : Obx(() => buildMonitorMenu());
 
   Widget buildMonitorMenu() {
+    final width = SimpleWrapper<double>(0);
+    final monitorsIcon = globalMonitorsWidget(width);
     return _IconSubmenuButton(
         tooltip: 'Select Monitor',
-        icon: icon(_defaultButtonSize),
+        icon: monitorsIcon,
         ffi: ffi,
+        width: width.value,
         color: _ToolbarTheme.blueColor,
         hoverColor: _ToolbarTheme.hoverBlueColor,
         menuStyle: MenuStyle(
@@ -663,10 +665,17 @@ class _MonitorMenu extends StatelessWidget {
 
     buildMonitorButton(int i) => Obx(() {
           RxInt display = CurrentDisplayState.find(id);
+
+          final isAllMonitors = i == kAllDisplayValue;
+          final width = SimpleWrapper<double>(0);
+          Widget? monitorsIcon;
+          if (isAllMonitors) {
+            monitorsIcon = globalMonitorsWidget(width);
+          }
           return _IconMenuButton(
             tooltip: isMulti
                 ? ''
-                : i == kAllDisplayValue
+                : isAllMonitors
                     ? 'all monitors'
                     : '#${i + 1} monitor',
             hMargin: isMulti ? null : 6,
@@ -678,24 +687,25 @@ class _MonitorMenu extends StatelessWidget {
             hoverColor: i == display.value
                 ? _ToolbarTheme.hoverBlueColor
                 : _ToolbarTheme.hoverInactiveColor,
-            icon: Container(
-              alignment: AlignmentDirectional.center,
-              constraints:
-                  const BoxConstraints(minHeight: _ToolbarTheme.height),
-              child: Stack(
-                alignment: Alignment.center,
-                children: [
-                  SvgPicture.asset(
-                    "assets/screen.svg",
-                    colorFilter:
-                        ColorFilter.mode(Colors.white, BlendMode.srcIn),
+            width: isAllMonitors ? width.value : null,
+            icon: isAllMonitors
+                ? monitorsIcon
+                : Container(
+                    alignment: AlignmentDirectional.center,
+                    constraints:
+                        const BoxConstraints(minHeight: _ToolbarTheme.height),
+                    child: Stack(
+                      alignment: Alignment.center,
+                      children: [
+                        SvgPicture.asset(
+                          "assets/screen.svg",
+                          colorFilter:
+                              ColorFilter.mode(Colors.white, BlendMode.srcIn),
+                        ),
+                        Obx(() => buildOneMonitorButton(i, display.value)),
+                      ],
+                    ),
                   ),
-                  i == kAllDisplayValue
-                      ? globalMonitorsWidget(_defaultButtonSize)
-                      : Obx(() => buildOneMonitorButton(i, display.value)),
-                ],
-              ),
-            ),
             onPressed: () => onPressed(i, pi),
           );
         });
@@ -709,72 +719,72 @@ class _MonitorMenu extends StatelessWidget {
     return monitorList;
   }
 
-  globalMonitorsWidget(Size size) {
-    final pi = ffi.ffiModel.pi;
-    return Obx(() {
+  globalMonitorsWidget(SimpleWrapper<double> width) {
+    getMonitors() {
+      final pi = ffi.ffiModel.pi;
       RxInt display = CurrentDisplayState.find(id);
       final rect = ffi.ffiModel.globalDisplaysRect();
       if (rect == null) {
         return Offstage();
       }
-      final scaleX = size.width / rect.width;
-      final scaleY = size.height / rect.height;
+
+      final scale = _ToolbarTheme.buttonSize/ rect.height * 0.75;
+      final startY = (_ToolbarTheme.buttonSize - rect.height * scale) * 0.5;
+      final startX = startY;
+
       final children = <Widget>[];
       for (var i = 0; i < pi.displays.length; i++) {
         final d = pi.displays[i];
-        final fontSize = (d.width * scaleX < d.height * scaleY
-                ? d.width * scaleX
-                : d.height * scaleY) *
-            0.75;
+        final fontSize = (d.width * scale < d.height * scale
+                ? d.width * scale
+                : d.height * scale) *
+            0.65;
         children.add(Positioned(
-          left: (d.x - rect.left) * scaleX,
-          top: (d.y - rect.top) * scaleY,
-          child: SizedBox(
-            width: d.width * scaleX,
-            height: d.height * scaleY,
-            child: Container(
-              decoration: BoxDecoration(
-                border: Border.all(
-                  color: Colors.grey,
-                  width: 1.0,
-                ),
-                borderRadius: BorderRadius.circular(1.0),
+          left: (d.x - rect.left) * scale + startX,
+          top: (d.y - rect.top) * scale + startY,
+          width: d.width * scale,
+          height: d.height * scale,
+          child: Container(
+            decoration: BoxDecoration(
+              border: Border.all(
+                color: Colors.grey,
+                width: 1.0,
               ),
-              child: Center(
-                  child: Text(
-                '${i + 1}',
-                style: TextStyle(
-                  color: display.value == i
-                      ? _ToolbarTheme.blueColor
-                      : _ToolbarTheme.inactiveColor,
-                  fontSize: fontSize,
-                  fontWeight: FontWeight.bold,
-                ),
-              )),
+              // to-do: theme
+              color: Colors.white,
             ),
+            child: Center(
+                child: Text(
+              '${i + 1}',
+              style: TextStyle(
+                color: display.value == i
+                    ? _ToolbarTheme.blueColor
+                    : _ToolbarTheme.inactiveColor,
+                fontSize: fontSize,
+                fontWeight: FontWeight.bold,
+              ),
+            )),
           ),
         ));
       }
-      return Container(
-        width: size.width,
-        height: size.height,
+      width.value = rect.width * scale + startX * 2;
+      return SizedBox(
+        width: width.value,
+        height: rect.height * scale + startY * 2,
         child: Stack(
           children: children,
         ),
       );
-    });
-  }
+    }
 
-  icon(Size size) => Stack(
-        alignment: Alignment.center,
-        children: [
-          SvgPicture.asset(
-            "assets/screen.svg",
-            colorFilter: ColorFilter.mode(Colors.white, BlendMode.srcIn),
-          ),
-          globalMonitorsWidget(size),
-        ],
-      );
+    return Stack(
+      alignment: Alignment.center,
+      children: [
+        SizedBox(height: _ToolbarTheme.buttonSize),
+        getMonitors(),
+      ],
+    );
+  }
 
   onPressed(int i, PeerInfo pi) {
     _menuDismissCallback(ffi);
@@ -1800,6 +1810,7 @@ class _IconMenuButton extends StatefulWidget {
   final double? hMargin;
   final double? vMargin;
   final bool topLevel;
+  final double? width;
   const _IconMenuButton({
     Key? key,
     this.assetName,
@@ -1811,6 +1822,7 @@ class _IconMenuButton extends StatefulWidget {
     this.hMargin,
     this.vMargin,
     this.topLevel = true,
+    this.width,
   }) : super(key: key);
 
   @override
@@ -1831,7 +1843,7 @@ class _IconMenuButtonState extends State<_IconMenuButton> {
           height: _ToolbarTheme.buttonSize,
         );
     var button = SizedBox(
-      width: _ToolbarTheme.buttonSize,
+      width: widget.width ?? _ToolbarTheme.buttonSize,
       height: _ToolbarTheme.buttonSize,
       child: MenuItemButton(
           style: ButtonStyle(
@@ -1878,18 +1890,20 @@ class _IconSubmenuButton extends StatefulWidget {
   final List<Widget> menuChildren;
   final MenuStyle? menuStyle;
   final FFI ffi;
+  final double? width;
 
-  _IconSubmenuButton(
-      {Key? key,
-      this.svg,
-      this.icon,
-      required this.tooltip,
-      required this.color,
-      required this.hoverColor,
-      required this.menuChildren,
-      required this.ffi,
-      this.menuStyle})
-      : super(key: key);
+  _IconSubmenuButton({
+    Key? key,
+    this.svg,
+    this.icon,
+    required this.tooltip,
+    required this.color,
+    required this.hoverColor,
+    required this.menuChildren,
+    required this.ffi,
+    this.menuStyle,
+    this.width,
+  }) : super(key: key);
 
   @override
   State<_IconSubmenuButton> createState() => _IconSubmenuButtonState();
@@ -1909,7 +1923,7 @@ class _IconSubmenuButtonState extends State<_IconSubmenuButton> {
           height: _ToolbarTheme.buttonSize,
         );
     final button = SizedBox(
-        width: _ToolbarTheme.buttonSize,
+        width: widget.width ?? _ToolbarTheme.buttonSize,
         height: _ToolbarTheme.buttonSize,
         child: SubmenuButton(
             menuStyle: widget.menuStyle ?? _ToolbarTheme.defaultMenuStyle,