mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2025-01-03 17:40:43 +00:00
- Change design/paddings for Send page on desktop view
- Make AddTemplateButton instead of having it duplicated in send/exchange
This commit is contained in:
OmarHatem
parent
bd04383b7c
commit
8f76232937
4 changed files with 152 additions and 166 deletions
|
|
@ -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: <Widget>[
|
||||
Padding(
|
||||
padding: EdgeInsets.only(bottom: 15),
|
||||
|
|
@ -241,51 +240,9 @@ class ExchangePage extends BasePage {
|
|||
|
||||
return Row(
|
||||
children: <Widget>[
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -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: <Widget>[
|
||||
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: <Widget>[
|
||||
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,
|
||||
);
|
||||
},
|
||||
)
|
||||
],
|
||||
),
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<SendCard>
|
|||
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<SendCard>
|
|||
.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,
|
||||
|
|
|
|||
52
lib/src/widgets/add_template_button.dart
Normal file
52
lib/src/widgets/add_template_button.dart
Normal 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!,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue