diff --git a/lib/pages/address_book_views/subviews/address_book_filter_view.dart b/lib/pages/address_book_views/subviews/address_book_filter_view.dart index 35968621a..df779331e 100644 --- a/lib/pages/address_book_views/subviews/address_book_filter_view.dart +++ b/lib/pages/address_book_views/subviews/address_book_filter_view.dart @@ -5,7 +5,12 @@ import 'package:stackwallet/providers/ui/address_book_providers/address_book_fil import 'package:stackwallet/utilities/enums/coin_enum.dart'; import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/theme/stack_colors.dart'; +import 'package:stackwallet/utilities/util.dart'; +import 'package:stackwallet/widgets/conditional_parent.dart'; import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart'; +import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart'; +import 'package:stackwallet/widgets/desktop/primary_button.dart'; +import 'package:stackwallet/widgets/desktop/secondary_button.dart'; import 'package:stackwallet/widgets/rounded_white_container.dart'; class AddressBookFilterView extends ConsumerStatefulWidget { @@ -41,167 +46,224 @@ class _AddressBookFilterViewState extends ConsumerState { @override Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Theme.of(context).extension()!.background, - appBar: AppBar( - backgroundColor: Theme.of(context).extension()!.background, - leading: AppBarBackButton( - onPressed: () async { - Navigator.of(context).pop(); - }, - ), - title: Text( - "Filter addresses", - style: STextStyles.navBarTitle(context), - ), - ), - body: Padding( - padding: const EdgeInsets.all(12), - child: LayoutBuilder(builder: (builderContext, constraints) { - return SingleChildScrollView( - child: ConstrainedBox( - constraints: BoxConstraints( - minHeight: constraints.maxHeight, + final isDesktop = Util.isDesktop; + return ConditionalParent( + condition: !isDesktop, + builder: (child) { + return Scaffold( + backgroundColor: + Theme.of(context).extension()!.background, + appBar: AppBar( + backgroundColor: + Theme.of(context).extension()!.background, + leading: AppBarBackButton( + onPressed: () async { + Navigator.of(context).pop(); + }, + ), + title: Text( + "Filter addresses", + style: STextStyles.navBarTitle(context), + ), + ), + body: Padding( + padding: const EdgeInsets.all(12), + child: LayoutBuilder(builder: (builderContext, constraints) { + return SingleChildScrollView( + child: ConstrainedBox( + constraints: BoxConstraints( + minHeight: constraints.maxHeight, + ), + child: IntrinsicHeight( + child: Padding( + padding: const EdgeInsets.all(4), + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + RoundedWhiteContainer( + child: Text( + "Only selected cryptocurrency addresses will be displayed.", + style: STextStyles.itemSubtitle(context), + ), + ), + const SizedBox( + height: 12, + ), + Text( + "Select cryptocurrency", + style: STextStyles.smallMed12(context), + ), + const SizedBox( + height: 12, + ), + child, + ], + ), + ), + ), + ), + ); + }), + ), + ); + }, + child: ConditionalParent( + condition: isDesktop, + builder: (child) { + return Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Padding( + padding: const EdgeInsets.all(32), + child: Text( + "Select cryptocurrency", + style: STextStyles.desktopH3(context), + textAlign: TextAlign.center, + ), + ), + const DesktopDialogCloseButton(), + ], ), - child: IntrinsicHeight( - child: Padding( - padding: const EdgeInsets.all(4), - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - RoundedWhiteContainer( - child: Text( - "Only selected cryptocurrency addresses will be displayed.", - style: STextStyles.itemSubtitle(context), + Expanded( + child: LayoutBuilder( + builder: (context, constraints) { + return SingleChildScrollView( + scrollDirection: Axis.vertical, + child: ConstrainedBox( + constraints: BoxConstraints( + minHeight: constraints.maxHeight, + ), + child: IntrinsicHeight( + child: Column( + children: [ + Padding( + padding: + const EdgeInsets.symmetric(horizontal: 32), + child: child, + ), + ], + ), ), ), - const SizedBox( - height: 12, - ), - Text( - "Select cryptocurrency", - style: STextStyles.smallMed12(context), - ), - const SizedBox( - height: 12, - ), - RoundedWhiteContainer( - padding: const EdgeInsets.all(0), - child: Wrap( - children: [ - ..._coins.map( - (coin) => Row( - children: [ - GestureDetector( - onTap: () { - if (ref - .read(addressBookFilterProvider) - .coins - .contains(coin)) { - ref - .read(addressBookFilterProvider) - .remove(coin, true); - } else { + ); + }, + ), + ), + Padding( + padding: + const EdgeInsets.symmetric(horizontal: 32, vertical: 32), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + SecondaryButton( + width: 248, + desktopMed: true, + enabled: true, + label: "Cancel", + onPressed: () { + Navigator.of(context).pop(); + }, + ), + // const SizedBox(width: 16), + PrimaryButton( + width: 248, + desktopMed: true, + enabled: true, + label: "Apply", + onPressed: () { + Navigator.of(context).pop(); + }, + ), + ], + ), + ), + ], + ); + }, + child: RoundedWhiteContainer( + padding: const EdgeInsets.all(0), + child: Wrap( + children: [ + ..._coins.map( + (coin) => Row( + children: [ + GestureDetector( + onTap: () { + if (ref + .read(addressBookFilterProvider) + .coins + .contains(coin)) { + ref + .read(addressBookFilterProvider) + .remove(coin, true); + } else { + ref.read(addressBookFilterProvider).add(coin, true); + } + setState(() {}); + }, + child: Container( + color: Colors.transparent, + child: Padding( + padding: const EdgeInsets.all(12), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox( + height: 20, + width: 20, + child: Checkbox( + value: ref + .watch(addressBookFilterProvider + .select((value) => value.coins)) + .contains(coin), + onChanged: (value) { + if (value is bool) { + if (value) { ref .read(addressBookFilterProvider) .add(coin, true); + } else { + ref + .read(addressBookFilterProvider) + .remove(coin, true); } setState(() {}); - }, - child: Container( - color: Colors.transparent, - child: Padding( - padding: const EdgeInsets.all(12), - child: Row( - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - SizedBox( - height: 20, - width: 20, - child: Checkbox( - value: ref - .watch( - addressBookFilterProvider - .select((value) => - value.coins)) - .contains(coin), - onChanged: (value) { - if (value is bool) { - if (value) { - ref - .read( - addressBookFilterProvider) - .add(coin, true); - } else { - ref - .read( - addressBookFilterProvider) - .remove(coin, true); - } - setState(() {}); - } - }, - ), - ), - const SizedBox( - width: 12, - ), - Column( - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - Text( - coin.prettyName, - style: - STextStyles.largeMedium14( - context), - ), - const SizedBox( - height: 2, - ), - Text( - coin.ticker, - style: - STextStyles.itemSubtitle( - context), - ), - ], - ) - ], - ), - ), - ), + } + }, + ), + ), + const SizedBox( + width: 12, + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + coin.prettyName, + style: STextStyles.largeMedium14(context), + ), + const SizedBox( + height: 2, + ), + Text( + coin.ticker, + style: STextStyles.itemSubtitle(context), ), ], - ), - ), - ], + ) + ], + ), ), ), - const Spacer(), - // Row( - // children: [ - // TextButton( - // onPressed: () {}, - // child: Text("Cancel"), - // ), - // SizedBox( - // width: 16, - // ), - // TextButton( - // onPressed: () {}, - // child: Text("Cancel"), - // ), - // ], - // ) - ], - ), + ), + ], ), ), - ), - ); - }), + ], + ), + ), ), ); } diff --git a/lib/pages_desktop_specific/home/address_book_view/desktop_address_book.dart b/lib/pages_desktop_specific/home/address_book_view/desktop_address_book.dart index dd38b98a8..367671a3e 100644 --- a/lib/pages_desktop_specific/home/address_book_view/desktop_address_book.dart +++ b/lib/pages_desktop_specific/home/address_book_view/desktop_address_book.dart @@ -2,12 +2,14 @@ import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_svg/svg.dart'; import 'package:stackwallet/models/contact.dart'; +import 'package:stackwallet/pages/address_book_views/subviews/address_book_filter_view.dart'; import 'package:stackwallet/providers/global/wallets_provider.dart'; import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/constants.dart'; import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/theme/stack_colors.dart'; import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart'; +import 'package:stackwallet/widgets/desktop/desktop_dialog.dart'; import 'package:stackwallet/widgets/icon_widgets/x_icon.dart'; import 'package:stackwallet/widgets/rounded_white_container.dart'; import 'package:stackwallet/widgets/stack_text_field.dart'; @@ -34,6 +36,21 @@ class _DesktopAddressBook extends ConsumerState { String filter = ""; + Future selectCryptocurrency() async { + await showDialog( + context: context, + useSafeArea: false, + barrierDismissible: true, + builder: (context) { + return DesktopDialog( + maxHeight: 609, + maxWidth: 576, + child: AddressBookFilterView(), + ); + }, + ); + } + @override void initState() { _searchController = TextEditingController(); @@ -141,7 +158,9 @@ class _DesktopAddressBook extends ConsumerState { style: Theme.of(context) .extension()! .getDesktopMenuButtonColorSelected(context), - onPressed: () {}, + onPressed: () { + selectCryptocurrency(); + }, child: SizedBox( width: 200, height: 56,