From 98434eb11ee0642e82c188f4615e3192803bf1d5 Mon Sep 17 00:00:00 2001 From: rustdesk Date: Mon, 31 Jan 2022 16:22:05 +0800 Subject: [PATCH] responsible style in home page --- lib/common.dart | 3 + lib/home_page.dart | 142 ++++++++++++++++++++++++++++----------------- lib/model.dart | 3 +- lib/web_model.dart | 3 +- 4 files changed, 97 insertions(+), 54 deletions(-) diff --git a/lib/common.dart b/lib/common.dart index 93d7cca58..c9fa582bf 100644 --- a/lib/common.dart +++ b/lib/common.dart @@ -18,6 +18,8 @@ class MyTheme { static const Color accent80 = Color(0xAA0071FF); static const Color canvasColor = Color(0xFF212121); static const Color border = Color(0xFFCCCCCC); + static const Color idColor = Color(0xFF00B6F0); + static const Color darkGray = Color(0xFFB9BABC); } final ButtonStyle flatButtonStyle = TextButton.styleFrom( @@ -212,3 +214,4 @@ Color str2color(String str, [alpha = 0xFF]) { bool isAndroid = false; bool isIOS = false; bool isWeb = false; +bool isDesktop = false; diff --git a/lib/home_page.dart b/lib/home_page.dart index 299a0ec1a..afe38fd58 100644 --- a/lib/home_page.dart +++ b/lib/home_page.dart @@ -19,6 +19,7 @@ class HomePage extends StatefulWidget { class _HomePageState extends State { final _idController = TextEditingController(); var _updateUrl = ''; + var _menuPos = null; @override void initState() { @@ -41,30 +42,38 @@ class _HomePageState extends State { appBar: AppBar( centerTitle: true, actions: [ - IconButton( - icon: Icon(Icons.more_vert), - onPressed: () { - () async { - var value = await showMenu( - context: context, - position: RelativeRect.fromLTRB(3000, 70, 3000, 70), - items: [ - PopupMenuItem( - child: Text(translate('ID Server')), - value: 'server'), - PopupMenuItem( - child: Text(translate('About') + ' RustDesk'), - value: 'about'), - ], - elevation: 8, - ); - if (value == 'server') { - showServer(context); - } else if (value == 'about') { - showAbout(context); - } - }(); - }) + Ink( + child: InkWell( + child: Padding( + padding: const EdgeInsets.all(12), + child: Icon(Icons.more_vert)), + onTapDown: (e) { + var x = e.globalPosition.dx; + var y = e.globalPosition.dy; + this._menuPos = RelativeRect.fromLTRB(x, y, x, y); + }, + onTap: () { + () async { + var value = await showMenu( + context: context, + position: this._menuPos, + items: [ + PopupMenuItem( + child: Text(translate('ID Server')), + value: 'server'), + PopupMenuItem( + child: Text(translate('About') + ' RustDesk'), + value: 'about'), + ], + elevation: 8, + ); + if (value == 'server') { + showServer(context); + } else if (value == 'about') { + showAbout(context); + } + }(); + })) ], title: Text(widget.title), ), @@ -93,6 +102,7 @@ class _HomePageState extends State { color: Colors.white, fontWeight: FontWeight.bold)))), getSearchBarUI(), + Container(height: 12), getPeers(), ]), )); @@ -131,7 +141,7 @@ class _HomePageState extends State { height: 84, child: Padding( padding: const EdgeInsets.only(top: 8, bottom: 8), - child: Container( + child: Ink( decoration: BoxDecoration( color: MyTheme.white, borderRadius: const BorderRadius.only( @@ -155,7 +165,7 @@ class _HomePageState extends State { fontFamily: 'WorkSans', fontWeight: FontWeight.bold, fontSize: 30, - color: Color(0xFF00B6F0), + color: MyTheme.idColor, ), decoration: InputDecoration( labelText: translate('Remote ID'), @@ -164,13 +174,13 @@ class _HomePageState extends State { helperStyle: TextStyle( fontWeight: FontWeight.bold, fontSize: 16, - color: Color(0xFFB9BABC), + color: MyTheme.darkGray, ), labelStyle: TextStyle( fontWeight: FontWeight.w600, fontSize: 16, letterSpacing: 0.2, - color: Color(0xFFB9BABC), + color: MyTheme.darkGray, ), ), autofocus: _idController.text.isEmpty, @@ -183,7 +193,7 @@ class _HomePageState extends State { height: 60, child: IconButton( icon: Icon(Icons.arrow_forward, - color: Color(0xFFB9BABC), size: 45), + color: MyTheme.darkGray, size: 45), onPressed: onConnect, autofocus: _idController.text.isNotEmpty, ), @@ -194,7 +204,6 @@ class _HomePageState extends State { ), ), ); - if (!isWeb) return w; return Center( child: Container(constraints: BoxConstraints(maxWidth: 600), child: w)); } @@ -217,46 +226,75 @@ class _HomePageState extends State { if (!FFI.ffiModel.initialized) { return Container(); } + final size = MediaQuery.of(context).size; + final space = 8.0; + var width = size.width - 2 * space; + final minWidth = 320.0; + if (size.width > minWidth + 2 * space) { + final n = (size.width / (minWidth + 2 * space)).floor(); + width = size.width / n - 2 * space; + } final cards = []; var peers = FFI.peers(); peers.forEach((p) { - cards.add(Padding( - padding: EdgeInsets.symmetric(horizontal: 12), + cards.add(Container( + width: width, child: Card( child: GestureDetector( - onTap: () => connect('${p.id}'), + onTap: () => { + if (!isDesktop) {connect('${p.id}')} + }, + onDoubleTap: () => { + if (isDesktop) {connect('${p.id}')} + }, onLongPressStart: (details) { var x = details.globalPosition.dx; var y = details.globalPosition.dy; - () async { - var value = await showMenu( - context: context, - position: RelativeRect.fromLTRB(x, y, x, y), - items: [ - PopupMenuItem( - child: Text(translate('Remove')), - value: 'remove'), - ], - elevation: 8, - ); - if (value == 'remove') { - setState(() => FFI.setByName('remove', '${p.id}')); - () async { - removePreference(p.id); - }(); - } - }(); + this._menuPos = RelativeRect.fromLTRB(x, y, x, y); + this.showPeerMenu(context, p.id); }, child: ListTile( + contentPadding: const EdgeInsets.only(left: 12), subtitle: Text('${p.username}@${p.hostname}'), title: Text('${p.id}'), leading: Container( padding: const EdgeInsets.all(6), child: getPlatformImage('${p.platform}'), color: str2color('${p.id}${p.platform}', 0x7f)), + trailing: InkWell( + child: Padding( + padding: const EdgeInsets.all(12), + child: Icon(Icons.more_vert)), + onTapDown: (e) { + var x = e.globalPosition.dx; + var y = e.globalPosition.dy; + this._menuPos = RelativeRect.fromLTRB(x, y, x, y); + }, + onDoubleTap: () {}, + onTap: () { + showPeerMenu(context, p.id); + }), ))))); }); - return Wrap(children: cards); + return Wrap(children: cards, spacing: space, runSpacing: space); + } + + void showPeerMenu(BuildContext context, String id) async { + var value = await showMenu( + context: context, + position: this._menuPos, + items: [ + PopupMenuItem( + child: Text(translate('Remove')), value: 'remove'), + ], + elevation: 8, + ); + if (value == 'remove') { + setState(() => FFI.setByName('remove', '$id')); + () async { + removePreference(id); + }(); + } } } diff --git a/lib/model.dart b/lib/model.dart index 98a7f6bcd..209163670 100644 --- a/lib/model.dart +++ b/lib/model.dart @@ -176,7 +176,6 @@ class FfiModel with ChangeNotifier { } if (_pi.currentDisplay < _pi.displays.length) { _display = _pi.displays[_pi.currentDisplay]; - initializeCursorAndCanvas(); } if (displays.length > 0) { showLoading(translate('Connected, waiting for image...'), context); @@ -197,6 +196,7 @@ class ImageModel with ChangeNotifier { final xscale = size.width / image.width; final yscale = size.height / image.height; FFI.canvasModel.scale = max(xscale, yscale); + initializeCursorAndCanvas(); } _image = image; if (image != null) notifyListeners(); @@ -328,6 +328,7 @@ class CursorModel with ChangeNotifier { void touch(double x, double y, bool right) { final scale = FFI.canvasModel.scale; + print(scale); final xoffset = FFI.canvasModel.x; final yoffset = FFI.canvasModel.y; _x = (x - xoffset) / scale + _displayOriginX; diff --git a/lib/web_model.dart b/lib/web_model.dart index a6d5033ae..807a42ab9 100644 --- a/lib/web_model.dart +++ b/lib/web_model.dart @@ -10,7 +10,7 @@ class PlatformFFI { } static Future getVersion() async { - return ''; + return getByName('version'); } static String getByName(String name, [String arg = '']) { @@ -23,6 +23,7 @@ class PlatformFFI { static Future init() async { isWeb = true; + isDesktop = !js.context.callMethod('isMobile'); js.context.callMethod('init'); } }