responsible style in home page

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;

lib/home_page.dart

@@ -19,6 +19,7 @@ class HomePage extends StatefulWidget {
 class _HomePageState extends State<HomePage> {
   final _idController = TextEditingController();
   var _updateUrl = '';
+  var _menuPos = null;
 
   @override
   void initState() {
@@ -41,13 +42,21 @@ class _HomePageState extends State<HomePage> {
         appBar: AppBar(
           centerTitle: true,
           actions: [
-            IconButton(
+            Ink(
-                icon: Icon(Icons.more_vert),
+                child: InkWell(
-                onPressed: () {
+                    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: RelativeRect.fromLTRB(3000, 70, 3000, 70),
+                          position: this._menuPos,
                           items: [
                             PopupMenuItem<String>(
                                 child: Text(translate('ID Server')),
@@ -64,7 +73,7 @@ class _HomePageState extends State<HomePage> {
                           showAbout(context);
                         }
                       }();
-                })
+                    }))
           ],
           title: Text(widget.title),
         ),
@@ -93,6 +102,7 @@ class _HomePageState extends State<HomePage> {
                                     color: Colors.white,
                                     fontWeight: FontWeight.bold)))),
                 getSearchBarUI(),
+                Container(height: 12),
                 getPeers(),
               ]),
         ));
@@ -131,7 +141,7 @@ class _HomePageState extends State<HomePage> {
         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<HomePage> {
                         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<HomePage> {
                         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<HomePage> {
                   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<HomePage> {
         ),
       ),
     );
-    if (!isWeb) return w;
     return Center(
         child: Container(constraints: BoxConstraints(maxWidth: 600), child: w));
   }
@@ -217,46 +226,75 @@ class _HomePageState extends State<HomePage> {
     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 = <Widget>[];
     var peers = FFI.peers();
     peers.forEach((p) {
-      cards.add(Padding(
+      cards.add(Container(
-          padding: EdgeInsets.symmetric(horizontal: 12),
+          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 {
+                    this._menuPos = RelativeRect.fromLTRB(x, y, x, y);
-                      var value = await showMenu(
+                    this.showPeerMenu(context, p.id);
-                        context: context,
-                        position: RelativeRect.fromLTRB(x, y, x, y),
-                        items: [
-                          PopupMenuItem<String>(
-                              child: Text(translate('Remove')),
-                              value: 'remove'),
-                        ],
-                        elevation: 8,
-                      );
-                      if (value == 'remove') {
-                        setState(() => FFI.setByName('remove', '${p.id}'));
-                        () async {
-                          removePreference(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<String>(
+            child: Text(translate('Remove')), value: 'remove'),
+      ],
+      elevation: 8,
+    );
+    if (value == 'remove') {
+      setState(() => FFI.setByName('remove', '$id'));
+      () async {
+        removePreference(id);
+      }();
+    }
   }
 }
 

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;

lib/web_model.dart

@@ -10,7 +10,7 @@ class PlatformFFI {
   }
 
   static Future<String> getVersion() async {
-    return '';
+    return getByName('version');
   }
 
   static String getByName(String name, [String arg = '']) {
@@ -23,6 +23,7 @@ class PlatformFFI {
 
   static Future<Null> init() async {
     isWeb = true;
+    isDesktop = !js.context.callMethod('isMobile');
     js.context.callMethod('init');
   }
 }