changed monitor icon and implemented new setting to show monitors directly in menubar #3333

flutter/assets/screen.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="321.118 40.669 32 32" width="32pt" height="32pt"><g><path d=" M 321.118 40.669 L 353.118 40.669 L 353.118 72.669 L 321.118 72.669 L 321.118 40.669 Z " fill="none"/><path d=" M 344.588 47.817 L 329.648 47.817 C 327.572 47.817 325.887 49.504 325.887 51.581 L 325.887 61.757 C 325.887 63.834 327.572 65.521 329.648 65.521 L 344.588 65.521 C 346.664 65.521 348.35 63.834 348.35 61.757 L 348.35 51.581 C 348.35 49.504 346.664 47.817 344.588 47.817 L 344.588 47.817 L 344.588 47.817 Z " fill="rgb(0,0,0)"/></g></svg>

flutter/lib/desktop/pages/desktop_setting_page.dart

@@ -1318,6 +1318,7 @@ class _DisplayState extends State<_Display> {
 
   Widget other(BuildContext context) {
     return _Card(title: 'Other Default Options', children: [
+      otherRow('Show monitors in menu bar', 'show_monitors_menubar'),
       otherRow('Show remote cursor', 'show_remote_cursor'),
       otherRow('Zoom cursor', 'zoom-cursor'),
       otherRow('Show quality monitor', 'show_quality_monitor'),

flutter/lib/desktop/widgets/remote_menubar.dart

@@ -391,7 +391,16 @@ class _RemoteMenubarState extends State<RemoteMenubar> {
           _FullscreenMenu(state: widget.state, setFullscreen: _setFullscreen));
       menubarItems.add(_MobileActionMenu(ffi: widget.ffi));
     }
-    menubarItems.add(_MonitorMenu(id: widget.id, ffi: widget.ffi));
+
+    if (PrivacyModeState.find(widget.id).isTrue ||
+        stateGlobal.displaysCount.value > 1) {
+      menubarItems.add(
+        bind.mainGetUserDefaultOption(key: 'show_monitors_menubar') == 'Y'
+            ? _MultiMonitorMenu(id: widget.id, ffi: widget.ffi)
+            : _MonitorMenu(id: widget.id, ffi: widget.ffi),
+      );
+    }
+
     menubarItems
         .add(_ControlMenu(id: widget.id, ffi: widget.ffi, state: widget.state));
     menubarItems.add(_DisplayMenu(
@@ -525,10 +534,6 @@ class _MonitorMenu extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    if (PrivacyModeState.find(id).isTrue ||
-        stateGlobal.displaysCount.value < 2) {
-      return Offstage();
-    }
     return _IconSubmenuButton(
         tooltip: 'Select Monitor',
         icon: icon(),
@@ -547,19 +552,20 @@ class _MonitorMenu extends StatelessWidget {
       alignment: Alignment.center,
       children: [
         SvgPicture.asset(
-          "assets/display.svg",
+          "assets/screen.svg",
           color: Colors.white,
         ),
-        Padding(
+        Obx(() {
-          padding: const EdgeInsets.only(bottom: 3.9),
-          child: Obx(() {
           RxInt display = CurrentDisplayState.find(id);
           return Text(
             '${display.value + 1}/${pi.displays.length}',
-              style: const TextStyle(color: Colors.white, fontSize: 8),
+            style: const TextStyle(
+              color: _MenubarTheme.blueColor,
+              fontSize: 8,
+              fontWeight: FontWeight.bold,
+            ),
           );
         }),
-        )
       ],
     );
   }
@@ -582,19 +588,17 @@ class _MonitorMenu extends StatelessWidget {
             alignment: Alignment.center,
             children: [
               SvgPicture.asset(
-                "assets/display.svg",
+                "assets/screen.svg",
                 color: Colors.white,
               ),
-              Padding(
+              Text(
-                padding: const EdgeInsets.only(bottom: 3.5 /*2.5*/),
-                child: Text(
                 (i + 1).toString(),
                 style: TextStyle(
-                    color: Colors.white,
+                  color: _MenubarTheme.blueColor,
                   fontSize: 12,
+                  fontWeight: FontWeight.bold,
                 ),
               ),
-              )
             ],
           ),
         ),
@@ -2204,3 +2208,69 @@ Widget _buildPointerTrackWidget(Widget child, FFI ffi) {
     ),
   );
 }
+
+class _MultiMonitorMenu extends StatelessWidget {
+  final String id;
+  final FFI ffi;
+
+  const _MultiMonitorMenu({
+    super.key,
+    required this.id,
+    required this.ffi,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final List<Widget> rowChildren = [];
+    final pi = ffi.ffiModel.pi;
+
+    for (int i = 0; i < pi.displays.length; i++) {
+      rowChildren.add(
+        Obx(() {
+          RxInt display = CurrentDisplayState.find(id);
+          return _IconMenuButton(
+            topLevel: false,
+            color: i == display.value
+                ? _MenubarTheme.blueColor
+                : Colors.grey[800]!,
+            hoverColor: i == display.value
+                ? _MenubarTheme.hoverBlueColor
+                : Colors.grey[850]!,
+            icon: Container(
+              alignment: AlignmentDirectional.center,
+              constraints:
+                  const BoxConstraints(minHeight: _MenubarTheme.height),
+              child: Stack(
+                alignment: Alignment.center,
+                children: [
+                  SvgPicture.asset(
+                    "assets/screen.svg",
+                    color: Colors.white,
+                  ),
+                  Obx(
+                    () => Text(
+                      (i + 1).toString(),
+                      style: TextStyle(
+                        color: i == display.value
+                            ? _MenubarTheme.blueColor
+                            : Colors.grey[800]!,
+                        fontSize: 12,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            onPressed: () {
+              if (display.value != i) {
+                bind.sessionSwitchDisplay(id: id, value: i);
+              }
+            },
+          );
+        }),
+      );
+    }
+    return Row(children: rowChildren);
+  }
+}