From 8f762329370914070edcaf6ea11b3543fac471b6 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Tue, 14 Feb 2023 17:21:09 +0200 Subject: [PATCH] - Change design/paddings for Send page on desktop view - Make AddTemplateButton instead of having it duplicated in send/exchange --- lib/src/screens/exchange/exchange_page.dart | 53 +----- lib/src/screens/send/send_page.dart | 201 +++++++++----------- lib/src/screens/send/widgets/send_card.dart | 12 +- lib/src/widgets/add_template_button.dart | 52 +++++ 4 files changed, 152 insertions(+), 166 deletions(-) create mode 100644 lib/src/widgets/add_template_button.dart diff --git a/lib/src/screens/exchange/exchange_page.dart b/lib/src/screens/exchange/exchange_page.dart index 7952665b2..0a1cd27e8 100644 --- a/lib/src/screens/exchange/exchange_page.dart +++ b/lib/src/screens/exchange/exchange_page.dart @@ -1,6 +1,7 @@ import 'package:cake_wallet/di.dart'; import 'package:cake_wallet/src/screens/exchange/widgets/desktop_exchange_cards_section.dart'; import 'package:cake_wallet/src/screens/exchange/widgets/mobile_exchange_cards_section.dart'; +import 'package:cake_wallet/src/widgets/add_template_button.dart'; import 'package:cake_wallet/utils/debounce.dart'; import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cw_core/sync_status.dart'; @@ -8,7 +9,6 @@ import 'package:cw_core/wallet_type.dart'; import 'package:cake_wallet/entities/parse_address_from_domain.dart'; import 'package:cake_wallet/src/screens/send/widgets/extract_address_from_parsed.dart'; import 'package:cake_wallet/src/widgets/standard_checkbox.dart'; -import 'package:dotted_border/dotted_border.dart'; import 'package:flutter/material.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:keyboard_actions/keyboard_actions.dart'; @@ -164,8 +164,7 @@ class ExchangePage extends BasePage { bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), bottomSection: ConstrainedBox( - constraints: - BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), child: Column(children: [ Padding( padding: EdgeInsets.only(bottom: 15), @@ -241,51 +240,9 @@ class ExchangePage extends BasePage { return Row( children: [ - GestureDetector( - onTap: () => - Navigator.of(context).pushNamed(Routes.exchangeTemplate), - child: Container( - padding: EdgeInsets.only(left: 1, right: 10), - child: DottedBorder( - borderType: BorderType.RRect, - dashPattern: [6, 4], - color: Theme.of(context) - .primaryTextTheme! - .headline3! - .decorationColor!, - strokeWidth: 2, - radius: Radius.circular(20), - child: Container( - height: 34, - padding: EdgeInsets.symmetric( - horizontal: ResponsiveLayoutUtil.instance.isMobile(context) ? 10 : 30), - alignment: Alignment.center, - decoration: BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(20)), - color: Colors.transparent, - ), - child: templates.length >= 1 - ? Icon( - Icons.add, - color: Theme.of(context) - .primaryTextTheme! - .headline2! - .color!, - ) - : Text( - S.of(context).new_template, - style: TextStyle( - fontSize: 14, - fontWeight: FontWeight.w600, - color: Theme.of(context) - .primaryTextTheme! - .headline2! - .color!, - ), - ), - ), - ), - ), + AddTemplateButton( + onTap: () => Navigator.of(context).pushNamed(Routes.exchangeTemplate), + currentTemplatesLength: templates.length, ), ListView.builder( scrollDirection: Axis.horizontal, diff --git a/lib/src/screens/send/send_page.dart b/lib/src/screens/send/send_page.dart index 2cd849f34..0ddaaf83e 100644 --- a/lib/src/screens/send/send_page.dart +++ b/lib/src/screens/send/send_page.dart @@ -1,10 +1,12 @@ import 'package:cake_wallet/entities/fiat_currency.dart'; import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator_icon.dart'; import 'package:cake_wallet/src/screens/send/widgets/send_card.dart'; +import 'package:cake_wallet/src/widgets/add_template_button.dart'; import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart'; import 'package:cake_wallet/src/widgets/picker.dart'; import 'package:cake_wallet/src/widgets/template_tile.dart'; import 'package:cake_wallet/utils/payment_request.dart'; +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cake_wallet/view_model/send/output.dart'; import 'package:flutter/material.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; @@ -19,7 +21,6 @@ import 'package:cake_wallet/src/widgets/trail_button.dart'; import 'package:cake_wallet/utils/show_pop_up.dart'; import 'package:cake_wallet/view_model/send/send_view_model_state.dart'; import 'package:cake_wallet/generated/i18n.dart'; -import 'package:dotted_border/dotted_border.dart'; import 'package:cake_wallet/src/widgets/alert_with_one_action.dart'; import 'package:cake_wallet/src/screens/send/widgets/confirm_sending_alert.dart'; import 'package:smooth_page_indicator/smooth_page_indicator.dart'; @@ -53,6 +54,15 @@ class SendPage extends BasePage { @override AppBarStyle get appBarStyle => AppBarStyle.transparent; + double _sendCardHeight(BuildContext context) { + final double initialHeight = sendViewModel.isElectrumWallet ? 490 : 465; + + if (!ResponsiveLayoutUtil.instance.isMobile(context)) { + return initialHeight - 77; + } + return initialHeight; + } + @override void onClose(BuildContext context) { sendViewModel.onClose(); @@ -107,7 +117,7 @@ class SendPage extends BasePage { content: Column( children: [ Container( - height: sendViewModel.isElectrumWallet ? 490 : 465, + height: _sendCardHeight(context), child: Observer( builder: (_) { return PageView.builder( @@ -172,51 +182,9 @@ class SendPage extends BasePage { return Row( children: [ - GestureDetector( - onTap: () => Navigator.of(context) - .pushNamed(Routes.sendTemplate), - child: Container( - padding: EdgeInsets.only(left: 1, right: 10), - child: DottedBorder( - borderType: BorderType.RRect, - dashPattern: [6, 4], - color: Theme.of(context) - .primaryTextTheme! - .headline2! - .decorationColor!, - strokeWidth: 2, - radius: Radius.circular(20), - child: Container( - height: 34, - padding: EdgeInsets.only(left: 10, right: 10), - alignment: Alignment.center, - decoration: BoxDecoration( - borderRadius: - BorderRadius.all(Radius.circular(20)), - color: Colors.transparent, - ), - child: templates.length >= 1 - ? Icon( - Icons.add, - color: Theme.of(context) - .primaryTextTheme! - .headline2! - .color!, - ) - : Text( - S.of(context).new_template, - style: TextStyle( - fontSize: 14, - fontWeight: FontWeight.w600, - color: Theme.of(context) - .primaryTextTheme! - .headline2! - .color!, - ), - ), - ), - ), - ), + AddTemplateButton( + onTap: () => Navigator.of(context).pushNamed(Routes.sendTemplate), + currentTemplatesLength: templates.length, ), ListView.builder( scrollDirection: Axis.horizontal, @@ -279,80 +247,83 @@ class SendPage extends BasePage { ), bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - bottomSection: Column( - children: [ - if (sendViewModel.hasCurrecyChanger) - Observer(builder: (_) => - Padding( - padding: EdgeInsets.only(bottom: 12), - child: PrimaryButton( - onPressed: () => presentCurrencyPicker(context), - text: 'Change your asset (${sendViewModel.selectedCryptoCurrency})', - color: Colors.transparent, - textColor: Theme.of(context) - .accentTextTheme! - .headline3! - .decorationColor!, + bottomSection: ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: Column( + children: [ + if (sendViewModel.hasCurrecyChanger) + Observer(builder: (_) => + Padding( + padding: EdgeInsets.only(bottom: 12), + child: PrimaryButton( + onPressed: () => presentCurrencyPicker(context), + text: 'Change your asset (${sendViewModel.selectedCryptoCurrency})', + color: Colors.transparent, + textColor: Theme.of(context) + .accentTextTheme! + .headline3! + .decorationColor!, + ) ) - ) - ), - if (sendViewModel.hasMultiRecipient) - Padding( - padding: EdgeInsets.only(bottom: 12), - child: PrimaryButton( - onPressed: () { - sendViewModel.addOutput(); - Future.delayed(const Duration(milliseconds: 250), () { - controller.jumpToPage(sendViewModel.outputs.length - 1); - }); - }, - text: S.of(context).add_receiver, - color: Colors.transparent, - textColor: Theme.of(context) - .accentTextTheme! - .headline3! - .decorationColor!, - isDottedBorder: true, - borderColor: Theme.of(context) - .primaryTextTheme! - .headline3! - .decorationColor!, - )), - Observer( - builder: (_) { - return LoadingPrimaryButton( - onPressed: () async { - if (_formKey.currentState != null && !_formKey.currentState!.validate()) { - if (sendViewModel.outputs.length > 1) { - showErrorValidationAlert(context); + ), + if (sendViewModel.hasMultiRecipient) + Padding( + padding: EdgeInsets.only(bottom: 12), + child: PrimaryButton( + onPressed: () { + sendViewModel.addOutput(); + Future.delayed(const Duration(milliseconds: 250), () { + controller.jumpToPage(sendViewModel.outputs.length - 1); + }); + }, + text: S.of(context).add_receiver, + color: Colors.transparent, + textColor: Theme.of(context) + .accentTextTheme! + .headline3! + .decorationColor!, + isDottedBorder: true, + borderColor: Theme.of(context) + .primaryTextTheme! + .headline3! + .decorationColor!, + )), + Observer( + builder: (_) { + return LoadingPrimaryButton( + onPressed: () async { + if (_formKey.currentState != null && !_formKey.currentState!.validate()) { + if (sendViewModel.outputs.length > 1) { + showErrorValidationAlert(context); + } + + return; } - return; - } + final notValidItems = sendViewModel.outputs + .where((item) => + item.address.isEmpty || item.cryptoAmount.isEmpty) + .toList(); - final notValidItems = sendViewModel.outputs - .where((item) => - item.address.isEmpty || item.cryptoAmount.isEmpty) - .toList(); + if (notValidItems?.isNotEmpty ?? false) { + showErrorValidationAlert(context); + return; + } - if (notValidItems?.isNotEmpty ?? false) { - showErrorValidationAlert(context); - return; - } - - await sendViewModel.createTransaction(); + await sendViewModel.createTransaction(); - }, - text: S.of(context).send, - color: Theme.of(context).accentTextTheme!.bodyText1!.color!, - textColor: Colors.white, - isLoading: sendViewModel.state is IsExecutingState || - sendViewModel.state is TransactionCommitting, - isDisabled: !sendViewModel.isReadyForSend, - ); - }, - ) - ], + }, + text: S.of(context).send, + color: Theme.of(context).accentTextTheme!.bodyText1!.color!, + textColor: Colors.white, + isLoading: sendViewModel.state is IsExecutingState || + sendViewModel.state is TransactionCommitting, + isDisabled: !sendViewModel.isReadyForSend, + ); + }, + ) + ], + ), )), ); } diff --git a/lib/src/screens/send/widgets/send_card.dart b/lib/src/screens/send/widgets/send_card.dart index 082067d95..cdae9a8df 100644 --- a/lib/src/screens/send/widgets/send_card.dart +++ b/lib/src/screens/send/widgets/send_card.dart @@ -1,6 +1,7 @@ import 'package:cake_wallet/entities/priority_for_wallet_type.dart'; import 'package:cake_wallet/src/widgets/alert_with_one_action.dart'; import 'package:cake_wallet/utils/payment_request.dart'; +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cw_core/transaction_priority.dart'; import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/src/widgets/keyboard_done_button.dart'; @@ -119,7 +120,7 @@ class SendCardState extends State color: Colors.transparent, )), Container( - decoration: BoxDecoration( + decoration: ResponsiveLayoutUtil.instance.isMobile(context) ? BoxDecoration( borderRadius: BorderRadius.only( bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)), @@ -130,9 +131,14 @@ class SendCardState extends State .subtitle1! .decorationColor!, ], begin: Alignment.topLeft, end: Alignment.bottomRight), - ), + ) : null, child: Padding( - padding: EdgeInsets.fromLTRB(24, 100, 24, 32), + padding: EdgeInsets.fromLTRB( + 24, + ResponsiveLayoutUtil.instance.isMobile(context) ? 100 : 55, + 24, + ResponsiveLayoutUtil.instance.isMobile(context) ? 32 : 0, + ), child: SingleChildScrollView( child: Observer(builder: (_) => Column( mainAxisSize: MainAxisSize.min, diff --git a/lib/src/widgets/add_template_button.dart b/lib/src/widgets/add_template_button.dart new file mode 100644 index 000000000..249c493a6 --- /dev/null +++ b/lib/src/widgets/add_template_button.dart @@ -0,0 +1,52 @@ +import 'package:cake_wallet/generated/i18n.dart'; +import 'package:cake_wallet/utils/responsive_layout_util.dart'; +import 'package:dotted_border/dotted_border.dart'; +import 'package:flutter/material.dart'; + +class AddTemplateButton extends StatelessWidget { + final Function() onTap; + final int currentTemplatesLength; + + const AddTemplateButton({Key? key, required this.onTap, required this.currentTemplatesLength}) + : super(key: key); + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: onTap, + child: Container( + padding: EdgeInsets.only(left: 1, right: 10), + child: DottedBorder( + borderType: BorderType.RRect, + dashPattern: [6, 4], + color: Theme.of(context).primaryTextTheme.headline3!.decorationColor!, + strokeWidth: 2, + radius: Radius.circular(20), + child: Container( + height: 34, + padding: EdgeInsets.symmetric( + horizontal: ResponsiveLayoutUtil.instance.isMobile(context) ? 10 : 30), + alignment: Alignment.center, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(20)), + color: Colors.transparent, + ), + child: currentTemplatesLength >= 1 + ? Icon( + Icons.add, + color: Theme.of(context).primaryTextTheme.headline2!.color!, + ) + : Text( + S.of(context).new_template, + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + color: Theme.of(context).primaryTextTheme.headline2!.color!, + ), + ), + ), + ), + ), + ); + } +}