Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2025-01-03 17:40:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

- Change design/paddings for Send page on desktop view

Browse source 
- Make AddTemplateButton instead of having it duplicated in send/exchange
This commit is contained in:
OmarHatem 2023-02-14 17:21:09 +02:00
parent bd04383b7c
commit 8f76232937
4 changed files with 152 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
lib/src/screens/exchange/exchange_page.dart
View file

@ -1,6 +1,7 @@
import 'package:cake_wallet/di.dart'; 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/desktop_exchange_cards_section.dart';
import 'package:cake_wallet/src/screens/exchange/widgets/mobile_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/debounce.dart';
import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:cw_core/sync_status.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/entities/parse_address_from_domain.dart';
import 'package:cake_wallet/src/screens/send/widgets/extract_address_from_parsed.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:cake_wallet/src/widgets/standard_checkbox.dart';
import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:keyboard_actions/keyboard_actions.dart'; import 'package:keyboard_actions/keyboard_actions.dart';
@ -164,8 +164,7 @@ class ExchangePage extends BasePage {
bottomSectionPadding: bottomSectionPadding:
EdgeInsets.only(left: 24, right: 24, bottom: 24), EdgeInsets.only(left: 24, right: 24, bottom: 24),
bottomSection: ConstrainedBox( bottomSection: ConstrainedBox(
constraints: constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Column(children: <Widget>[ child: Column(children: <Widget>[
Padding( Padding(
padding: EdgeInsets.only(bottom: 15), padding: EdgeInsets.only(bottom: 15),
@ -241,51 +240,9 @@ class ExchangePage extends BasePage {
return Row( return Row(
children: <Widget>[ children: <Widget>[
GestureDetector( AddTemplateButton(
onTap: () => onTap: () => Navigator.of(context).pushNamed(Routes.exchangeTemplate),
Navigator.of(context).pushNamed(Routes.exchangeTemplate), currentTemplatesLength: templates.length,
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!,
),
),
),
),
),
), ),
ListView.builder( ListView.builder(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,

201
lib/src/screens/send/send_page.dart
View file

@ -1,10 +1,12 @@
import 'package:cake_wallet/entities/fiat_currency.dart'; 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/dashboard/widgets/sync_indicator_icon.dart';
import 'package:cake_wallet/src/screens/send/widgets/send_card.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/alert_with_two_actions.dart';
import 'package:cake_wallet/src/widgets/picker.dart'; import 'package:cake_wallet/src/widgets/picker.dart';
import 'package:cake_wallet/src/widgets/template_tile.dart'; import 'package:cake_wallet/src/widgets/template_tile.dart';
import 'package:cake_wallet/utils/payment_request.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:cake_wallet/view_model/send/output.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.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/utils/show_pop_up.dart';
import 'package:cake_wallet/view_model/send/send_view_model_state.dart'; import 'package:cake_wallet/view_model/send/send_view_model_state.dart';
import 'package:cake_wallet/generated/i18n.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/widgets/alert_with_one_action.dart';
import 'package:cake_wallet/src/screens/send/widgets/confirm_sending_alert.dart'; import 'package:cake_wallet/src/screens/send/widgets/confirm_sending_alert.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart'; import 'package:smooth_page_indicator/smooth_page_indicator.dart';
@ -53,6 +54,15 @@ class SendPage extends BasePage {
@override @override
AppBarStyle get appBarStyle => AppBarStyle.transparent; 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 @override
void onClose(BuildContext context) { void onClose(BuildContext context) {
sendViewModel.onClose(); sendViewModel.onClose();
@ -107,7 +117,7 @@ class SendPage extends BasePage {
content: Column( content: Column(
children: <Widget>[ children: <Widget>[
Container( Container(
height: sendViewModel.isElectrumWallet ? 490 : 465, height: _sendCardHeight(context),
child: Observer( child: Observer(
builder: (_) { builder: (_) {
return PageView.builder( return PageView.builder(
@ -172,51 +182,9 @@ class SendPage extends BasePage {
return Row( return Row(
children: <Widget>[ children: <Widget>[
GestureDetector( AddTemplateButton(
onTap: () => Navigator.of(context) onTap: () => Navigator.of(context).pushNamed(Routes.sendTemplate),
.pushNamed(Routes.sendTemplate), currentTemplatesLength: templates.length,
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!,
),
),
),
),
),
), ),
ListView.builder( ListView.builder(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
@ -279,80 +247,83 @@ class SendPage extends BasePage {
), ),
bottomSectionPadding: bottomSectionPadding:
EdgeInsets.only(left: 24, right: 24, bottom: 24), EdgeInsets.only(left: 24, right: 24, bottom: 24),
bottomSection: Column( bottomSection: ConstrainedBox(
children: [ constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
if (sendViewModel.hasCurrecyChanger) child: Column(
Observer(builder: (_) => children: [
Padding( if (sendViewModel.hasCurrecyChanger)
padding: EdgeInsets.only(bottom: 12), Observer(builder: (_) =>
child: PrimaryButton( Padding(
onPressed: () => presentCurrencyPicker(context), padding: EdgeInsets.only(bottom: 12),
text: 'Change your asset (${sendViewModel.selectedCryptoCurrency})', child: PrimaryButton(
color: Colors.transparent, onPressed: () => presentCurrencyPicker(context),
textColor: Theme.of(context) text: 'Change your asset (${sendViewModel.selectedCryptoCurrency})',
.accentTextTheme! color: Colors.transparent,
.headline3! textColor: Theme.of(context)
.decorationColor!, .accentTextTheme!
.headline3!
.decorationColor!,
)
) )
) ),
), if (sendViewModel.hasMultiRecipient)
if (sendViewModel.hasMultiRecipient) Padding(
Padding( padding: EdgeInsets.only(bottom: 12),
padding: EdgeInsets.only(bottom: 12), child: PrimaryButton(
child: PrimaryButton( onPressed: () {
onPressed: () { sendViewModel.addOutput();
sendViewModel.addOutput(); Future.delayed(const Duration(milliseconds: 250), () {
Future.delayed(const Duration(milliseconds: 250), () { controller.jumpToPage(sendViewModel.outputs.length - 1);
controller.jumpToPage(sendViewModel.outputs.length - 1); });
}); },
}, text: S.of(context).add_receiver,
text: S.of(context).add_receiver, color: Colors.transparent,
color: Colors.transparent, textColor: Theme.of(context)
textColor: Theme.of(context) .accentTextTheme!
.accentTextTheme! .headline3!
.headline3! .decorationColor!,
.decorationColor!, isDottedBorder: true,
isDottedBorder: true, borderColor: Theme.of(context)
borderColor: Theme.of(context) .primaryTextTheme!
.primaryTextTheme! .headline3!
.headline3! .decorationColor!,
.decorationColor!, )),
)), Observer(
Observer( builder: (_) {
builder: (_) { return LoadingPrimaryButton(
return LoadingPrimaryButton( onPressed: () async {
onPressed: () async { if (_formKey.currentState != null && !_formKey.currentState!.validate()) {
if (_formKey.currentState != null && !_formKey.currentState!.validate()) { if (sendViewModel.outputs.length > 1) {
if (sendViewModel.outputs.length > 1) { showErrorValidationAlert(context);
showErrorValidationAlert(context); }
return;
} }
return; final notValidItems = sendViewModel.outputs
} .where((item) =>
item.address.isEmpty || item.cryptoAmount.isEmpty)
.toList();
final notValidItems = sendViewModel.outputs if (notValidItems?.isNotEmpty ?? false) {
.where((item) => showErrorValidationAlert(context);
item.address.isEmpty || item.cryptoAmount.isEmpty) return;
.toList(); }
if (notValidItems?.isNotEmpty ?? false) { await sendViewModel.createTransaction();
showErrorValidationAlert(context);
return;
}
await sendViewModel.createTransaction();
}, },
text: S.of(context).send, text: S.of(context).send,
color: Theme.of(context).accentTextTheme!.bodyText1!.color!, color: Theme.of(context).accentTextTheme!.bodyText1!.color!,
textColor: Colors.white, textColor: Colors.white,
isLoading: sendViewModel.state is IsExecutingState || isLoading: sendViewModel.state is IsExecutingState ||
sendViewModel.state is TransactionCommitting, sendViewModel.state is TransactionCommitting,
isDisabled: !sendViewModel.isReadyForSend, isDisabled: !sendViewModel.isReadyForSend,
); );
}, },
) )
], ],
),
)), )),
); );
} }

12
lib/src/screens/send/widgets/send_card.dart
View file

@ -1,6 +1,7 @@
import 'package:cake_wallet/entities/priority_for_wallet_type.dart'; 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/src/widgets/alert_with_one_action.dart';
import 'package:cake_wallet/utils/payment_request.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:cw_core/transaction_priority.dart';
import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/routes.dart';
import 'package:cake_wallet/src/widgets/keyboard_done_button.dart'; import 'package:cake_wallet/src/widgets/keyboard_done_button.dart';
@ -119,7 +120,7 @@ class SendCardState extends State<SendCard>
color: Colors.transparent, color: Colors.transparent,
)), )),
Container( Container(
decoration: BoxDecoration( decoration: ResponsiveLayoutUtil.instance.isMobile(context) ? BoxDecoration(
borderRadius: BorderRadius.only( borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(24), bottomLeft: Radius.circular(24),
bottomRight: Radius.circular(24)), bottomRight: Radius.circular(24)),
@ -130,9 +131,14 @@ class SendCardState extends State<SendCard>
.subtitle1! .subtitle1!
.decorationColor!, .decorationColor!,
], begin: Alignment.topLeft, end: Alignment.bottomRight), ], begin: Alignment.topLeft, end: Alignment.bottomRight),
), ) : null,
child: Padding( 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: SingleChildScrollView(
child: Observer(builder: (_) => Column( child: Observer(builder: (_) => Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,

52
lib/src/widgets/add_template_button.dart Normal file
View file

@ -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!,
),
),
),
),
),
);
}
}