diff --git a/lib/routes/user/home/account_page.dart b/lib/routes/user/home/account_page.dart index 94836bdad..ab54a0cd2 100644 --- a/lib/routes/user/home/account_page.dart +++ b/lib/routes/user/home/account_page.dart @@ -5,6 +5,7 @@ import 'package:breez/bloc/invoice/invoice_bloc.dart'; import 'package:breez/bloc/user_profile/currency.dart'; import 'package:breez/bloc/user_profile/user_profile_bloc.dart'; import 'package:breez/routes/user/home/floating_actions_bar.dart'; +import 'package:breez/routes/user/home/invoice_bottom_sheet.dart'; import 'package:breez/routes/user/home/payments_filter.dart'; import 'package:breez/routes/user/home/payments_list.dart'; import 'package:breez/routes/user/home/wallet_dashboard.dart'; @@ -164,6 +165,13 @@ class AccountPageState extends State with SingleTickerProviderState return account != null && !account.initial ? FloatingActionsBar(account, height, heightFactor) : Positioned(top: 0.0, child: SizedBox()); }, ), + ScrollWatcher( + controller: widget.scrollController, + builder: (context, offset) { + double height = (DASHBOARD_MAX_HEIGHT - offset).clamp(DASHBOARD_MIN_HEIGHT, DASHBOARD_MAX_HEIGHT); + return (account?.active ?? false) ? InvoiceBottomSheet(_invoiceBloc, height < 160.0) : Positioned(top: 0.0, child: SizedBox()); + }, + ), ], ); } diff --git a/lib/routes/user/home/invoice_bottom_sheet.dart b/lib/routes/user/home/invoice_bottom_sheet.dart new file mode 100644 index 000000000..c90231cca --- /dev/null +++ b/lib/routes/user/home/invoice_bottom_sheet.dart @@ -0,0 +1,87 @@ +import 'package:barcode_scan/barcode_scan.dart'; +import 'package:breez/bloc/invoice/invoice_bloc.dart'; +import 'package:breez/theme_data.dart' as theme; +import 'package:flutter/material.dart'; + +class InvoiceBottomSheet extends StatefulWidget { + final InvoiceBloc invoiceBloc; + final bool isSmallView; + + InvoiceBottomSheet(this.invoiceBloc, this.isSmallView); + + @override + State createState() => InvoiceBottomSheetState(); +} + +class InvoiceBottomSheetState extends State with TickerProviderStateMixin { + bool isExpanded; + + @override + void initState() { + super.initState(); + isExpanded = false; + } + + @override + Widget build(BuildContext context) { + return AnimatedContainer( + transform: isExpanded ? Matrix4.translationValues(0, 0, 0) : Matrix4.translationValues(0, 112.0, 0), + duration: Duration(milliseconds: 150), + child: Column( + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.end, + mainAxisSize: MainAxisSize.max, + children: [ + _buildInvoiceMenuItem("INVOICE", "src/icon/invoice.png", () { + setState(() { + isExpanded = !isExpanded; + }); + }, isFirst: true), + _buildInvoiceMenuItem("PAY", "src/icon/qr_scan.png", () async { + String decodedQr = await BarcodeScanner.scan(); + widget.invoiceBloc.decodeInvoiceSink.add(decodedQr); + }), + _buildInvoiceMenuItem("CREATE", "src/icon/paste.png", () => Navigator.of(context).pushNamed('/create_invoice')), + ])); + } + + Widget _buildInvoiceMenuItem(String title, String iconPath, Function function, {bool isFirst = false}) { + return AnimatedContainer( + width: widget.isSmallView ? 56.0 : 126.0, + height: isFirst ? 50.0 : 56.0, + duration: Duration(milliseconds: 150), + child: RaisedButton( + onPressed: function, + color: isFirst ? Colors.white : Color.fromRGBO(0, 133, 251, 1.0), + padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 12.0), + shape: isFirst + ? RoundedRectangleBorder(borderRadius: new BorderRadius.only(topLeft: Radius.circular(20.0))) + : Border(top: BorderSide(color: Color.fromRGBO(255, 255, 255, 0.12), width: 1, style: BorderStyle.solid)), + child: Row( + mainAxisSize: MainAxisSize.max, + children: widget.isSmallView + ? [ + ImageIcon( + AssetImage(iconPath), + color: isFirst ? Color.fromRGBO(0, 133, 251, 1.0) : Colors.white, + size: 24.0, + ) + ] + : [ + ImageIcon( + AssetImage(iconPath), + color: isFirst ? Color.fromRGBO(0, 133, 251, 1.0) : Colors.white, + size: 24.0, + ), + Padding(padding: EdgeInsets.only(left: 8.0)), + Text( + title.toUpperCase(), + style: theme.bottomSheetMenuItemStyle.copyWith( + color: isFirst ? Color.fromRGBO(0, 133, 251, 1.0) : Colors.white, + ), + ), + ]), + ), + ); + } +} diff --git a/lib/theme_data.dart b/lib/theme_data.dart index 0c95a9b62..84f056578 100644 --- a/lib/theme_data.dart +++ b/lib/theme_data.dart @@ -17,6 +17,7 @@ final TextStyle notificationTextStyle = new TextStyle(color: BreezColors.grey[50 final TextStyle headline = new TextStyle(color: BreezColors.grey[600],fontSize: 26.0); final TextStyle subtitle = new TextStyle(color: BreezColors.grey[600],fontSize: 14.3,letterSpacing: 0.2); final TextStyle addFundsBtnStyle = new TextStyle(color: BreezColors.white[400], fontSize: 16.0, letterSpacing: 1.25); +final TextStyle bottomSheetMenuItemStyle = new TextStyle(color: BreezColors.white[400], fontSize: 14.3, letterSpacing: 0.55); final TextStyle autoCompleteStyle = new TextStyle(color: Colors.black, fontSize: 14.0); final TextStyle dialogBlackStye = TextStyle(color: Colors.black, fontSize: 16.0, height: 1.5); final TextStyle dialogGrayStyle = TextStyle(color: BreezColors.grey[500], fontSize: 16.0, height: 1.5); diff --git a/src/icon/invoice.png b/src/icon/invoice.png new file mode 100644 index 000000000..d42ec8b08 Binary files /dev/null and b/src/icon/invoice.png differ