From 68a33c53e948813bfc2c8ae12cadf48e8820da95 Mon Sep 17 00:00:00 2001 From: Felix Date: Mon, 19 Aug 2019 12:36:12 +0100 Subject: [PATCH] animation, tooltips, ui sizing fixed --- lib/common/widgets/organisations_dialog.dart | 217 ++++---- lib/pages/receipt_page_2.dart | 499 ++++++++++--------- 2 files changed, 371 insertions(+), 345 deletions(-) diff --git a/lib/common/widgets/organisations_dialog.dart b/lib/common/widgets/organisations_dialog.dart index ce65afa..d374f8f 100644 --- a/lib/common/widgets/organisations_dialog.dart +++ b/lib/common/widgets/organisations_dialog.dart @@ -106,123 +106,126 @@ class FindOrganisations { builder: (BuildContext context) { return StatefulBuilder( builder: (context, setState) { - return SimpleDialog( - children: [ - Column( - children: [ - Row( - crossAxisAlignment: CrossAxisAlignment.center, + return AnimatedContainer( + duration: Duration(seconds: 1), + child : SimpleDialog( + children: [ + Column( children: [ - Container( - padding: EdgeInsets.fromLTRB(20, 0, 0, 0), - width: 150, - height: 50, - child: TextField( - controller: searchBarText, - decoration: InputDecoration( - hintText: "Payee Name", + Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Container( + padding: EdgeInsets.fromLTRB(20, 0, 0, 0), + width: 150, + height: 50, + child: TextField( + controller: searchBarText, + decoration: InputDecoration( + hintText: "Payee Name", + ), + onChanged: (value) { + if (value.length > 0) { + _searchEnabled = true; + } else { + _searchEnabled = false; + } + setState(() => {_searchEnabled}); + }, + onSubmitted: _searchEnabled ? (_) { + var result = _submitSearch(searchBarText.text); + result.then((_) { + setState(() {}); + }); + } : null, + ), ), - onChanged: (value) { - if (value.length > 0) { - _searchEnabled = true; - } else { - _searchEnabled = false; - } - setState(() => {_searchEnabled}); - }, - onSubmitted: _searchEnabled ? (_) { - var result = _submitSearch(searchBarText.text); - result.then((_) { - setState(() {}); - }); - } : null, - ), - ), - Container( - width: 80, - padding: EdgeInsets.fromLTRB(20, 0, 0, 0), + Container( + width: 80, + padding: EdgeInsets.fromLTRB(20, 0, 0, 0), - child: RaisedButton( - onPressed: (() { - if (_searchEnabled) { - SystemChannels.textInput.invokeMethod('TextInput.hide'); - var result = _submitSearch(searchBarText.text); - result.then((_) { - setState(() { - _orgsFetched = true; - }); - }); - } - }), + child: RaisedButton( + onPressed: (() { + if (_searchEnabled) { + SystemChannels.textInput.invokeMethod('TextInput.hide'); + var result = _submitSearch(searchBarText.text); + result.then((_) { + setState(() { + _orgsFetched = true; + }); + }); + } + }), - child: Icon(Icons.search, color: Colors.white), - color: _searchEnabled ? Colors.blue : Colors.blue[200], - // make inactive when search in progress as activity indicator - ), + child: Icon(Icons.search, color: Colors.white), + color: _searchEnabled ? Colors.blue : Colors.blue[200], + // make inactive when search in progress as activity indicator + ), + ), + ], ), ], ), + + Column( + children: _orgsFetched ? [ + Container( + padding: EdgeInsets.fromLTRB(20, 20, 20, 0), + child: Text( + listTitle, + style: new TextStyle( + fontSize: 23, fontWeight: FontWeight.bold), + ), + ), + + Container( + padding: EdgeInsets.fromLTRB(10, 10, 10, 0), + width: MediaQuery + .of(context) + .size + .width, + height: MediaQuery + .of(context) + .size + .height * 0.67, + + child: Material( + shadowColor: Colors.transparent, + color: Colors.transparent, + child: ListView.builder( + itemCount: organisationsList.length, + itemBuilder: (context, index) { + return Card( + child: ListTile( + leading: Icon(Icons.person), + title: Text(organisationsList[index].name, style: new TextStyle(fontSize: 18)), + subtitle: Text(organisationsList[index].postcode.toUpperCase()), + // trailing: Icon(Icons.arrow_forward_ios), + // onTap: _chosenOrg(organisationsList[index]), + onTap: (){ + Navigator.of(context).pop(organisationsList[index]); + }, + onLongPress: (){ + // show more details about the organisation in a new dialog + var moreInfo = _moreInfoDialog(context, organisationsList[index]); + moreInfo.whenComplete(null); + }, + ), + ); + }, + ), + ), + ), + ] : [ Container(), ], + ), + + // help button for if org not listed + // cancel and ok buttons + ], ), - - Column( - children: _orgsFetched ? [ - Container( - padding: EdgeInsets.fromLTRB(20, 20, 20, 0), - child: Text( - listTitle, - style: new TextStyle( - fontSize: 23, fontWeight: FontWeight.bold), - ), - ), - - Container( - padding: EdgeInsets.fromLTRB(10, 10, 10, 0), - width: MediaQuery - .of(context) - .size - .width, - height: MediaQuery - .of(context) - .size - .height * 0.67, - - child: Material( - shadowColor: Colors.transparent, - color: Colors.transparent, - child: ListView.builder( - itemCount: organisationsList.length, - itemBuilder: (context, index) { - return Card( - child: ListTile( - leading: Icon(Icons.person), - title: Text(organisationsList[index].name, style: new TextStyle(fontSize: 18)), - subtitle: Text(organisationsList[index].postcode.toUpperCase()), - // trailing: Icon(Icons.arrow_forward_ios), - // onTap: _chosenOrg(organisationsList[index]), - onTap: (){ - Navigator.of(context).pop(organisationsList[index]); - }, - onLongPress: (){ - // show more details about the organisation in a new dialog - var moreInfo = _moreInfoDialog(context, organisationsList[index]); - moreInfo.whenComplete(null); - }, - ), - ); - }, - ), - ), - ), - ] : [ Container(), ], - ), - - // help button for if org not listed - // cancel and ok buttons - - ], - ); + ); }, ); }, diff --git a/lib/pages/receipt_page_2.dart b/lib/pages/receipt_page_2.dart index 3244b56..1467d10 100644 --- a/lib/pages/receipt_page_2.dart +++ b/lib/pages/receipt_page_2.dart @@ -158,164 +158,173 @@ class ReceiptPage2State extends State { Container( padding: EdgeInsets.fromLTRB(25,15,15.0,0.0), - child: Row( - children: [ - Container( - child : Text( - "Date/Time", - style: TextStyle( - fontSize: 18, - color: Colors.black, - fontWeight: FontWeight.bold, + child: Tooltip( + message: "Date and time of transaction", + child: Row( + children: [ + Container( + child : Text( + "Date/Time", + style: TextStyle( + fontSize: 18, + color: Colors.black, + fontWeight: FontWeight.bold, + ), ), + width: 110, ), - width: 110, - ), - Container( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - height: 32.0, - child: RaisedButton( - onPressed: () { - showModalBottomSheet( - context: context, - builder: (BuildContext builder) { - return Container( - height: MediaQuery.of(context).copyWith().size.height / 3, - child: CupertinoDatePicker( - initialDateTime: transaction.date.isAfter(DateTime.now()) - ? DateTime.now() - : transaction.date, - onDateTimeChanged: (DateTime newDate) { - setState(() => { - newDate.isAfter(DateTime.now()) - ? transaction.date = DateTime.now() - : transaction.date = newDate, - }); - }, - use24hFormat: true, - maximumDate: DateTime.now(), - ), - ); - }); - }, - child: Text( - transaction.date == null - ? 'None set' - : transaction.date.year == DateTime.now().year - ? '${new DateFormat.MMMd().format(transaction.date)}' + ", " + '${new DateFormat.Hm().format(transaction.date)}' - : '${new DateFormat.MMMd().format(transaction.date)}' + " " + transaction.date.year.toString() + ", " + '${new DateFormat.Hm().format(transaction.date)}', - style: - TextStyle(color: Colors.white, fontSize: 18.0), + Container( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + height: 32.0, + child: RaisedButton( + onPressed: () { + showModalBottomSheet( + context: context, + builder: (BuildContext builder) { + return Container( + height: MediaQuery.of(context).copyWith().size.height / 3, + child: CupertinoDatePicker( + initialDateTime: transaction.date.isAfter(DateTime.now()) + ? DateTime.now() + : transaction.date, + onDateTimeChanged: (DateTime newDate) { + setState(() => { + newDate.isAfter(DateTime.now()) + ? transaction.date = DateTime.now() + : transaction.date = newDate, + }); + }, + use24hFormat: true, + maximumDate: DateTime.now(), + ), + ); + }); + }, + child: Text( + transaction.date == null + ? 'None set' + : transaction.date.year == DateTime.now().year + ? '${new DateFormat.MMMd().format(transaction.date)}' + ", " + '${new DateFormat.Hm().format(transaction.date)}' + : '${new DateFormat.MMMd().format(transaction.date)}' + " " + transaction.date.year.toString() + ", " + '${new DateFormat.Hm().format(transaction.date)}', + style: + TextStyle(color: Colors.white, fontSize: 18.0), + ), + color: Colors.blue, ), - color: Colors.blue, ), - ), - ], + ], + ), ), ), // Date/Time picker Container( padding: EdgeInsets.fromLTRB(25,15,15.0,0.0), - child: Row( - children: [ - Container( - child : Text( - "Payee", - style: TextStyle( - fontSize: 18, - color: Colors.black, - fontWeight: FontWeight.bold, + child: Tooltip( + message: "Transaction payee", + child: Row( + children: [ + Container( + child : Text( + "Payee", + style: TextStyle( + fontSize: 18, + color: Colors.black, + fontWeight: FontWeight.bold, + ), ), + width: 110, ), - width: 110, - ), - Container( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - height: 32.0, - child: RaisedButton( - onPressed: () { -// var popupListView = new PopupListView(); -// var dialog = popupListView.dialog(context, optionsList, "Choose Organization"); - var organisations = new FindOrganisations(); - var orgDialog = organisations.dialog(context); - orgDialog.then((organisation) { - try { - organisation.name.length; - transaction.organisation = organisation; -// debugPrint(organisation.name); - setState(() {}); - } catch(_) { - debugPrint("No organisation chosen."); - } - }); - }, - child: Text( - transaction.organisation.name == null - ? 'Find' - : transaction.organisation.name.length > 14 - ? transaction.organisation.name.substring(0,12) + "..." - : transaction.organisation.name, - style: - TextStyle(color: Colors.white, fontSize: 18.0), + Container( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + height: 32.0, + child: RaisedButton( + onPressed: () { + // var popupListView = new PopupListView(); + // var dialog = popupListView.dialog(context, optionsList, "Choose Organization"); + var organisations = new FindOrganisations(); + var orgDialog = organisations.dialog(context); + orgDialog.then((organisation) { + try { + organisation.name.length; + transaction.organisation = organisation; + // debugPrint(organisation.name); + setState(() {}); + } catch(_) { + debugPrint("No organisation chosen."); + } + }); + }, + child: Text( + transaction.organisation.name == null + ? 'Find' + : transaction.organisation.name.length > 14 + ? transaction.organisation.name.substring(0,12) + "..." + : transaction.organisation.name, + style: + TextStyle(color: Colors.white, fontSize: 18.0), + ), + color: Colors.blue, ), - color: Colors.blue, ), - ), - ], + ], + ), ), ), // Organisation picker Container( padding: EdgeInsets.fromLTRB(25,15,15.0,0.0), - child: Row( - children: [ - Container( - child : Text( - "Recurring", - style: TextStyle( - fontSize: 18, - color: Colors.black, - fontWeight: FontWeight.bold, + child: Tooltip( + message: "Transaction recrudescence", + child: Row( + children: [ + Container( + child : Text( + "Recurring", + style: TextStyle( + fontSize: 18, + color: Colors.black, + fontWeight: FontWeight.bold, + ), ), + width: 110, ), - width: 110, - ), - Container( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - height: 32.0, - child: RaisedButton( - onPressed: () { - showModalBottomSheet( - context: context, - builder: (BuildContext builder) { - return Container( - height: MediaQuery.of(context).copyWith().size.height / 3, - child: CupertinoPicker( - backgroundColor: Colors.white, - children: _sampleRecurringOptions.map((thisOption) => Text(thisOption)).toList(), - onSelectedItemChanged: ((newValue) { - transaction.recurring = _sampleRecurringOptions[newValue]; - setState(() {}); - }), - itemExtent: 32, - ), - ); - }); - }, - child: Text( - transaction.recurring == null - ? 'None' - : transaction.recurring, - style: - TextStyle(color: Colors.white, fontSize: 18.0), + Container( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + height: 32.0, + child: RaisedButton( + onPressed: () { + showModalBottomSheet( + context: context, + builder: (BuildContext builder) { + return Container( + height: MediaQuery.of(context).copyWith().size.height / 3, + child: CupertinoPicker( + backgroundColor: Colors.white, + children: _sampleRecurringOptions.map((thisOption) => Text(thisOption)).toList(), + onSelectedItemChanged: ((newValue) { + transaction.recurring = _sampleRecurringOptions[newValue]; + setState(() {}); + }), + itemExtent: 32, + ), + ); + }); + }, + child: Text( + transaction.recurring == null + ? 'None' + : transaction.recurring, + style: + TextStyle(color: Colors.white, fontSize: 18.0), + ), + color: Colors.blue, ), - color: Colors.blue, ), - ), - ], + ], + ), ), ), // Recurring picker @@ -338,33 +347,36 @@ class ReceiptPage2State extends State { Container( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), height: 32.0, - child: RaisedButton( - onPressed: () { - showModalBottomSheet( - context: context, - builder: (BuildContext builder) { - return Container( - height: MediaQuery.of(context).copyWith().size.height / 3, - child: CupertinoPicker( - backgroundColor: Colors.white, - children: _categories.map((thisOption) => Text(thisOption)).toList(), - onSelectedItemChanged: ((newValue) { - transaction.category = _categories[newValue]; - setState(() {}); - }), - itemExtent: 32, - ), - ); - }); - }, - child: Text( - transaction.category == null - ? 'None' - : transaction.category, - style: - TextStyle(color: Colors.white, fontSize: 18.0), + child: Tooltip( + message: "Category of transaction", + child: RaisedButton( + onPressed: () { + showModalBottomSheet( + context: context, + builder: (BuildContext builder) { + return Container( + height: MediaQuery.of(context).copyWith().size.height / 3, + child: CupertinoPicker( + backgroundColor: Colors.white, + children: _categories.map((thisOption) => Text(thisOption)).toList(), + onSelectedItemChanged: ((newValue) { + transaction.category = _categories[newValue]; + setState(() {}); + }), + itemExtent: 32, + ), + ); + }); + }, + child: Text( + transaction.category == null + ? 'None' + : transaction.category, + style: + TextStyle(color: Colors.white, fontSize: 18.0), + ), + color: Colors.blue, ), - color: Colors.blue, ), ), ], @@ -373,107 +385,118 @@ class ReceiptPage2State extends State { Container( padding: EdgeInsets.fromLTRB(25,15,15.0,0.0), - child: Row( - children: [ - Container( - child : Text( - "Essential", - style: TextStyle( - fontSize: 18, - color: Colors.black, - fontWeight: FontWeight.bold, + child: Tooltip( + message: "Essential or not", + child: Row( + children: [ + Container( + child : Text( + "Essential", + style: TextStyle( + fontSize: 18, + color: Colors.black, + fontWeight: FontWeight.bold, + ), + ), + width: 95, + ), + + Container( + height: 32.0, + child: Checkbox( + value: transaction.isEssential, + onChanged: ((value) { + setState(() => transaction.isEssential = value); + }), ), ), - width: 95, - ), - - Container( - height: 32.0, - child: Checkbox( - value: transaction.isEssential, - onChanged: ((value) { - setState(() => transaction.isEssential = value); - }), - ), - ), - ], + ], + ), ), ), // Essential Container( padding: EdgeInsets.fromLTRB(25,15,15.0,0.0), - child: Row( - children: [ - Container( - child : Text( - "Amount", - style: TextStyle( - fontSize: 18, - color: Colors.black, - fontWeight: FontWeight.bold, + child: Tooltip( + message: "Transaction amount", + child: Row( + children: [ + Container( + child : Text( + "Amount", + style: TextStyle( + fontSize: 18, + color: Colors.black, + fontWeight: FontWeight.bold, + ), ), + width: 110, ), - width: 110, - ), - Container( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - height: 32.0, - width: 100, - child: TextField( - controller: transaction.amount, - decoration: InputDecoration( - hintText: "0.00" + Container( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + height: 32.0, + width: 100, + child: TextField( + controller: transaction.amount, + decoration: InputDecoration( + hintText: "0.00" + ), + keyboardType: TextInputType.numberWithOptions(decimal: true, signed: true), ), - keyboardType: TextInputType.numberWithOptions(decimal: true, signed: true), ), - ), - ], + ], + ), ), ), // Amount picker Padding( padding: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 0.0), - child: Container( - height: 65.0, - child: RaisedButton( - onPressed: () { - try { - if (transaction.amount.text == "" || transaction.organisation.name == null) { - showDialog( - context: context, - builder: (BuildContext context) { - return _invalidDialog(context); - } - ); - } else { - if (double.tryParse(transaction.amount.text) != null && double.tryParse(transaction.amount.text) > 0) { - _submitReceipt(transaction); - } else { + child: Tooltip( + message: "Submit receipt", + child: Container( + height: 65.0, + child: RaisedButton( + onPressed: () { + try { + if (transaction.amount.text == "" || transaction.organisation.name == null) { showDialog( - context: context, - builder: (BuildContext context) { - return _invalidDialog(context); - } + context: context, + builder: (BuildContext context) { + return _invalidDialog(context); + } ); + } else { + if (double.tryParse(transaction.amount.text) != null && double.tryParse(transaction.amount.text) > 0) { + _submitReceipt(transaction); + } else { + showDialog( + context: context, + builder: (BuildContext context) { + return _invalidDialog(context); + } + ); + } } } - } - catch (_) { - showDialog( - context: context, - builder: (BuildContext context) { - return _invalidDialog(context); - } - ); - } - }, - child: Text("GO", - key: Key("goButton"), - style: - TextStyle(color: Colors.white, fontSize: 22.0)), - color: Colors.blue, + catch (_) { + showDialog( + context: context, + builder: (BuildContext context) { + return _invalidDialog(context); + } + ); + } + }, + + + child: Text("GO", + style: + TextStyle(color: Colors.white, fontSize: 22.0), + ), + color: Colors.blue, + ), ), ), ),