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

refact, remote toolbar, monitors menu

Browse Source 
Signed-off-by: fufesou <shuanglongchen@yeah.net>
This commit is contained in:
fufesou 2023-10-31 14:27:27 +08:00
parent b83e007405
commit 2c1f948832
1 changed files with 98 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
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,18 @@ 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);
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 +665,17 @@ 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);
}
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,24 +687,25 @@ 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,
alignment: AlignmentDirectional.center, icon: isAllMonitors
constraints: ? monitorsIcon
const BoxConstraints(minHeight: _ToolbarTheme.height), : Container(
child: Stack( alignment: AlignmentDirectional.center,
alignment: Alignment.center, constraints:
children: [ const BoxConstraints(minHeight: _ToolbarTheme.height),
SvgPicture.asset( child: Stack(
"assets/screen.svg", alignment: Alignment.center,
colorFilter: children: [
ColorFilter.mode(Colors.white, BlendMode.srcIn), 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), onPressed: () => onPressed(i, pi),
); );
}); });
@ -709,72 +719,72 @@ class _MonitorMenu extends StatelessWidget {
return monitorList; return monitorList;
} }
globalMonitorsWidget(Size size) { globalMonitorsWidget(SimpleWrapper<double> width) {
final pi = ffi.ffiModel.pi; getMonitors() {
return Obx(() { final pi = ffi.ffiModel.pi;
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),
), ),
child: Center( // to-do: theme
child: Text( color: Colors.white,
'${i + 1}',
style: TextStyle(
color: display.value == i
? _ToolbarTheme.blueColor
: _ToolbarTheme.inactiveColor,
fontSize: fontSize,
fontWeight: FontWeight.bold,
),
)),
), ),
child: Center(
child: Text(
'${i + 1}',
style: TextStyle(
color: display.value == i
? _ToolbarTheme.blueColor
: _ToolbarTheme.inactiveColor,
fontSize: fontSize,
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 +1810,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 +1822,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 +1843,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,18 +1890,20 @@ 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,
required this.color, required this.color,
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 +1923,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,