From 2c1f9488327a5e7c7de2a563c9afe4d068f73f68 Mon Sep 17 00:00:00 2001 From: fufesou Date: Tue, 31 Oct 2023 14:27:27 +0800 Subject: [PATCH 1/2] refact, remote toolbar, monitors menu Signed-off-by: fufesou --- .../lib/desktop/widgets/remote_toolbar.dart | 182 ++++++++++-------- 1 file changed, 98 insertions(+), 84 deletions(-) diff --git a/flutter/lib/desktop/widgets/remote_toolbar.dart b/flutter/lib/desktop/widgets/remote_toolbar.dart index e0da98b16..c67b4fa89 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,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(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(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 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 = []; 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 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, From 009c088a64fae74f69269b88bcfc0550566a69f8 Mon Sep 17 00:00:00 2001 From: fufesou Date: Tue, 31 Oct 2023 15:14:43 +0800 Subject: [PATCH 2/2] change active monitor style Signed-off-by: fufesou --- flutter/lib/desktop/widgets/remote_toolbar.dart | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/flutter/lib/desktop/widgets/remote_toolbar.dart b/flutter/lib/desktop/widgets/remote_toolbar.dart index c67b4fa89..6f19b2359 100644 --- a/flutter/lib/desktop/widgets/remote_toolbar.dart +++ b/flutter/lib/desktop/widgets/remote_toolbar.dart @@ -604,7 +604,8 @@ class _MonitorMenu extends StatelessWidget { Widget buildMonitorMenu() { final width = SimpleWrapper(0); - final monitorsIcon = globalMonitorsWidget(width); + final monitorsIcon = + globalMonitorsWidget(width, Colors.white, Colors.black38); return _IconSubmenuButton( tooltip: 'Select Monitor', icon: monitorsIcon, @@ -670,7 +671,8 @@ class _MonitorMenu extends StatelessWidget { final width = SimpleWrapper(0); Widget? monitorsIcon; if (isAllMonitors) { - monitorsIcon = globalMonitorsWidget(width); + monitorsIcon = globalMonitorsWidget( + width, Colors.white, _ToolbarTheme.blueColor); } return _IconMenuButton( tooltip: isMulti @@ -719,7 +721,8 @@ class _MonitorMenu extends StatelessWidget { return monitorList; } - globalMonitorsWidget(SimpleWrapper width) { + globalMonitorsWidget( + SimpleWrapper width, Color activeTextColor, Color activeBgColor) { getMonitors() { final pi = ffi.ffiModel.pi; RxInt display = CurrentDisplayState.find(id); @@ -728,7 +731,7 @@ class _MonitorMenu extends StatelessWidget { return Offstage(); } - final scale = _ToolbarTheme.buttonSize/ rect.height * 0.75; + final scale = _ToolbarTheme.buttonSize / rect.height * 0.75; final startY = (_ToolbarTheme.buttonSize - rect.height * scale) * 0.5; final startX = startY; @@ -750,15 +753,14 @@ class _MonitorMenu extends StatelessWidget { color: Colors.grey, width: 1.0, ), - // to-do: theme - color: Colors.white, + color: display.value == i ? activeBgColor : Colors.white, ), child: Center( child: Text( '${i + 1}', style: TextStyle( color: display.value == i - ? _ToolbarTheme.blueColor + ? activeTextColor : _ToolbarTheme.inactiveColor, fontSize: fontSize, fontWeight: FontWeight.bold,