diff --git a/flutter/lib/desktop/widgets/remote_toolbar.dart b/flutter/lib/desktop/widgets/remote_toolbar.dart index e0da98b16..6f19b2359 100644 --- a/flutter/lib/desktop/widgets/remote_toolbar.dart +++ b/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,19 @@ 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(0); + final monitorsIcon = + globalMonitorsWidget(width, Colors.white, Colors.black38); 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 +666,18 @@ class _MonitorMenu extends StatelessWidget { buildMonitorButton(int i) => Obx(() { RxInt display = CurrentDisplayState.find(id); + + final isAllMonitors = i == kAllDisplayValue; + final width = SimpleWrapper(0); + Widget? monitorsIcon; + if (isAllMonitors) { + monitorsIcon = globalMonitorsWidget( + width, Colors.white, _ToolbarTheme.blueColor); + } return _IconMenuButton( tooltip: isMulti ? '' - : i == kAllDisplayValue + : isAllMonitors ? 'all monitors' : '#${i + 1} monitor', hMargin: isMulti ? null : 6, @@ -678,24 +689,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 +721,72 @@ class _MonitorMenu extends StatelessWidget { return monitorList; } - globalMonitorsWidget(Size size) { - final pi = ffi.ffiModel.pi; - return Obx(() { + globalMonitorsWidget( + SimpleWrapper width, Color activeTextColor, Color activeBgColor) { + 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 = []; 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, - ), - )), + color: display.value == i ? activeBgColor : Colors.white, ), + child: Center( + child: Text( + '${i + 1}', + style: TextStyle( + color: display.value == i + ? activeTextColor + : _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 +1812,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 +1824,7 @@ class _IconMenuButton extends StatefulWidget { this.hMargin, this.vMargin, this.topLevel = true, + this.width, }) : super(key: key); @override @@ -1831,7 +1845,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 +1892,20 @@ class _IconSubmenuButton extends StatefulWidget { final List 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 +1925,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,