hongshaorou/rustdesk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #6239 from fufesou/refact/remote_toolbar_monitors_menu

Browse Source 
refact, remote toolbar, monitors menu
This commit is contained in:
RustDesk 2023-10-31 15:32:50 +08:00 committed by GitHub
commit e69183ce12
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 100 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
flutter/lib/desktop/widgets/remote_toolbar.dart
View File

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