From e186eec5df9b238def11dcf81af06cf26ae6dc55 Mon Sep 17 00:00:00 2001 From: 21pages Date: Thu, 10 Nov 2022 17:06:27 +0800 Subject: [PATCH] portable service: optimize flutter cm buttons Signed-off-by: 21pages --- flutter/lib/desktop/pages/server_page.dart | 264 +++++++++------------ 1 file changed, 112 insertions(+), 152 deletions(-) diff --git a/flutter/lib/desktop/pages/server_page.dart b/flutter/lib/desktop/pages/server_page.dart index aac6ee017..16abe0b64 100644 --- a/flutter/lib/desktop/pages/server_page.dart +++ b/flutter/lib/desktop/pages/server_page.dart @@ -76,7 +76,6 @@ class _DesktopServerPageState extends State mainAxisAlignment: MainAxisAlignment.start, children: [ Expanded(child: ConnectionManager()), - SizedBox.fromSize(size: Size(0, 15.0)), ], ), ), @@ -486,6 +485,8 @@ class _PrivilegeBoardState extends State<_PrivilegeBoard> { } } +const double bigMargin = 15; + class _CmControlPanel extends StatelessWidget { final Client client; @@ -503,180 +504,139 @@ class _CmControlPanel extends StatelessWidget { buildAuthorized(BuildContext context) { final bool canElevate = bind.cmCanElevate(); final model = Provider.of(context); - final offstage = !(canElevate && model.showElevation); - final width = offstage ? 200.0 : 100.0; - return Row( - mainAxisAlignment: MainAxisAlignment.center, + final showElevation = canElevate && model.showElevation; + return Column( + mainAxisAlignment: MainAxisAlignment.end, children: [ Offstage( - offstage: offstage, - child: Ink( - width: width, - height: 40, - decoration: BoxDecoration( - color: Colors.green[700], - borderRadius: BorderRadius.circular(10)), - child: InkWell( - onTap: () => - checkClickTime(client.id, () => handleElevate(context)), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Icon( - Icons.security_sharp, - color: Colors.white, - ), - Text( - translate("Elevate"), - style: TextStyle(color: Colors.white), - ), - ], - )), - ), + offstage: !showElevation, + child: buildButton(context, color: Colors.green[700], onClick: () { + handleElevate(context); + windowManager.minimize(); + }, + icon: Icon( + Icons.security_sharp, + color: Colors.white, + ), + text: 'Elevate', + textColor: Colors.white), ), - Offstage( - offstage: offstage, - child: SizedBox( - width: 30, - )), - Ink( - width: width, - height: 40, - decoration: BoxDecoration( - color: Colors.redAccent, borderRadius: BorderRadius.circular(10)), - child: InkWell( - onTap: () => - checkClickTime(client.id, () => handleDisconnect(context)), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - translate("Disconnect"), - style: TextStyle(color: Colors.white), - ), - ], - )), + Row( + children: [ + Expanded( + child: buildButton(context, + color: Colors.redAccent, + onClick: handleDisconnect, + text: 'Disconnect', + textColor: Colors.white)), + ], ) ], - ); + ) + .marginOnly(bottom: showElevation ? 0 : bigMargin) + .marginSymmetric(horizontal: showElevation ? 0 : bigMargin); } buildDisconnected(BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - Ink( - width: 200, - height: 40, - decoration: BoxDecoration( - color: MyTheme.accent, borderRadius: BorderRadius.circular(10)), - child: InkWell( - onTap: () => handleClose(context), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - translate("Close"), - style: TextStyle(color: Colors.white), - ), - ], - )), - ) + Expanded( + child: buildButton(context, + color: MyTheme.accent, + onClick: handleClose, + text: 'Close', + textColor: Colors.white)), ], - ); + ).marginOnly(bottom: 15).marginSymmetric(horizontal: bigMargin); } buildUnAuthorized(BuildContext context) { final bool canElevate = bind.cmCanElevate(); final model = Provider.of(context); - final offstage = !(canElevate && model.showElevation); - final width = offstage ? 100.0 : 85.0; - final spacerWidth = offstage ? 30.0 : 5.0; - return Row( - mainAxisAlignment: MainAxisAlignment.center, + final showElevation = canElevate && model.showElevation; + return Column( + mainAxisAlignment: MainAxisAlignment.end, children: [ Offstage( - offstage: offstage, - child: Ink( - height: 40, - width: width, - decoration: BoxDecoration( - color: Colors.green[700], - borderRadius: BorderRadius.circular(10)), - child: InkWell( - onTap: () => checkClickTime(client.id, () { - handleAccept(context); - handleElevate(context); - windowManager.minimize(); - }), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Icon( - Icons.security_sharp, - color: Colors.white, - ), - Text( - translate("Accept"), - style: TextStyle(color: Colors.white), - ), - ], - )), - ), + offstage: !showElevation, + child: buildButton(context, color: Colors.green[700], onClick: () { + handleAccept(context); + handleElevate(context); + windowManager.minimize(); + }, + text: 'Accept', + icon: Icon( + Icons.security_sharp, + color: Colors.white, + ), + textColor: Colors.white), ), - Offstage( - offstage: offstage, - child: SizedBox( - width: spacerWidth, - )), - Ink( - width: width, - height: 40, - decoration: BoxDecoration( - color: MyTheme.accent, borderRadius: BorderRadius.circular(10)), - child: InkWell( - onTap: () => checkClickTime(client.id, () { - handleAccept(context); - windowManager.minimize(); - }), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - translate("Accept"), - style: TextStyle(color: Colors.white), - ), - ], - )), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Expanded( + child: buildButton(context, color: MyTheme.accent, onClick: () { + handleAccept(context); + windowManager.minimize(); + }, text: 'Accept', textColor: Colors.white)), + Expanded( + child: buildButton(context, + color: Colors.transparent, + border: Border.all(color: Colors.grey), + onClick: handleDisconnect, + text: 'Cancel', + textColor: null)), + ], ), - SizedBox( - width: spacerWidth, - ), - Ink( - width: width, - height: 40, - decoration: BoxDecoration( - color: Colors.transparent, - borderRadius: BorderRadius.circular(10), - border: Border.all(color: Colors.grey)), - child: InkWell( - onTap: () => - checkClickTime(client.id, () => handleDisconnect(context)), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - translate("Cancel"), - style: TextStyle(), - ), - ], - )), - ) ], - ); + ) + .marginOnly(bottom: showElevation ? 0 : bigMargin) + .marginSymmetric(horizontal: showElevation ? 0 : bigMargin); } - void handleDisconnect(BuildContext context) { + buildButton( + BuildContext context, { + required Color? color, + required Function() onClick, + Icon? icon, + BoxBorder? border, + required String text, + required Color? textColor, + }) { + Widget textWidget; + if (icon != null) { + textWidget = Text( + translate(text), + style: TextStyle(color: textColor), + textAlign: TextAlign.center, + ); + } else { + textWidget = Expanded( + child: Text( + translate(text), + style: TextStyle(color: textColor), + textAlign: TextAlign.center, + ), + ); + } + return Container( + height: 35, + decoration: BoxDecoration( + color: color, borderRadius: BorderRadius.circular(4), border: border), + child: InkWell( + onTap: () => checkClickTime(client.id, onClick), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Offstage(offstage: icon == null, child: icon), + textWidget, + ], + )), + ).marginAll(4); + } + + void handleDisconnect() { bind.cmCloseConnection(connId: client.id); } @@ -691,7 +651,7 @@ class _CmControlPanel extends StatelessWidget { bind.cmElevatePortable(connId: client.id); } - void handleClose(BuildContext context) async { + void handleClose() async { await bind.cmRemoveDisconnectedConnection(connId: client.id); if (await bind.cmGetClientsLength() == 0) { windowManager.close();