From 134087bfc4c18c3482e49d6b1e7a16b9f0a78032 Mon Sep 17 00:00:00 2001 From: julian Date: Thu, 17 Nov 2022 13:15:57 -0600 Subject: [PATCH] desktop add contact popup tweaks --- .../subviews/add_address_book_entry_view.dart | 375 ++++++------------ .../new_contact_address_entry_form.dart | 2 +- 2 files changed, 121 insertions(+), 256 deletions(-) diff --git a/lib/pages/address_book_views/subviews/add_address_book_entry_view.dart b/lib/pages/address_book_views/subviews/add_address_book_entry_view.dart index 0007f3d81..bb93c68d8 100644 --- a/lib/pages/address_book_views/subviews/add_address_book_entry_view.dart +++ b/lib/pages/address_book_views/subviews/add_address_book_entry_view.dart @@ -21,6 +21,8 @@ import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart'; import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart'; import 'package:stackwallet/widgets/desktop/desktop_dialog.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/emoji_select_sheet.dart'; import 'package:stackwallet/widgets/icon_widgets/x_icon.dart'; import 'package:stackwallet/widgets/stack_text_field.dart'; @@ -191,33 +193,6 @@ class _AddAddressBookEntryViewState style: STextStyles.desktopH3(context), textAlign: TextAlign.center, ), - // const SizedBox(width: 10), - // AppBarIconButton( - // key: - // const Key("addAddressBookEntryFavoriteButtonKey"), - // size: 36, - // shadows: const [], - // color: Theme.of(context) - // .extension()! - // .background, - // icon: SvgPicture.asset( - // Assets.svg.star, - // color: _isFavorite - // ? Theme.of(context) - // .extension()! - // .favoriteStarActive - // : Theme.of(context) - // .extension()! - // .favoriteStarInactive, - // width: 20, - // height: 20, - // ), - // onPressed: () { - // setState(() { - // _isFavorite = !_isFavorite; - // }); - // }, - // ), ], ), ), @@ -226,7 +201,11 @@ class _AddAddressBookEntryViewState ), Expanded( child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 10), + padding: const EdgeInsets.only( + left: 10, + right: 10, + bottom: 32, + ), child: child, ), ), @@ -239,16 +218,17 @@ class _AddAddressBookEntryViewState padding: const EdgeInsets.symmetric(horizontal: 12), child: SingleChildScrollView( controller: scrollController, - padding: const EdgeInsets.only( + padding: EdgeInsets.only( // top: 8, left: 4, right: 4, - bottom: 16, + bottom: isDesktop ? 0 : 16, ), child: ConstrainedBox( constraints: BoxConstraints( // subtract top and bottom padding set in parent - minHeight: constraint.maxHeight - 16, // - 8, + minHeight: + constraint.maxHeight - (isDesktop ? 0 : 16), // - 8, ), child: IntrinsicHeight( child: Column( @@ -259,38 +239,21 @@ class _AddAddressBookEntryViewState mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - GestureDetector( - onTap: () { - if (_selectedEmoji != null) { - setState(() { - _selectedEmoji = null; - }); - return; - } + SizedBox( + height: 56, + width: 56, + child: MouseRegion( + cursor: SystemMouseCursors.click, + child: GestureDetector( + onTap: () { + if (_selectedEmoji != null) { + setState(() { + _selectedEmoji = null; + }); + return; + } - ///TODO if desktop make dialog - !isDesktop - ? showModalBottomSheet( - backgroundColor: - Colors.transparent, - context: context, - shape: - const RoundedRectangleBorder( - borderRadius: - BorderRadius.vertical( - top: Radius.circular(20), - ), - ), - builder: (_) => - const EmojiSelectSheet(), - ).then((value) { - if (value is Emoji) { - setState(() { - _selectedEmoji = value; - }); - } - }) - : showDialog( + showDialog( context: context, builder: (context) { return const DesktopDialog( @@ -307,77 +270,80 @@ class _AddAddressBookEntryViewState ), ); }).then((value) { - if (value is Emoji) { - setState(() { - _selectedEmoji = value; - }); - } - }); - }, - child: SizedBox( - height: 56, - width: 56, - child: Stack( - children: [ - Container( - height: 56, - width: 56, - decoration: BoxDecoration( - borderRadius: - BorderRadius.circular(24), - color: Theme.of(context) - .extension()! - .textFieldActiveBG, - ), - child: Center( - child: _selectedEmoji == null - ? SvgPicture.asset( - Assets.svg.user, - height: 30, - width: 30, - ) - : Text( - _selectedEmoji!.char, - style: STextStyles - .pageTitleH1(context), - ), - ), - ), - Align( - alignment: Alignment.bottomRight, - child: Container( - height: 14, - width: 14, + if (value is Emoji) { + setState(() { + _selectedEmoji = value; + }); + } + }); + }, + child: Stack( + children: [ + Container( + height: 56, + width: 56, decoration: BoxDecoration( - borderRadius: - BorderRadius.circular(14), - color: Theme.of(context) - .extension()! - .accentColorDark), + borderRadius: + BorderRadius.circular(100), + color: Theme.of(context) + .extension()! + .textFieldActiveBG, + ), child: Center( child: _selectedEmoji == null ? SvgPicture.asset( - Assets.svg.plus, - color: Theme.of(context) - .extension< - StackColors>()! - .textWhite, - width: 12, - height: 12, + Assets.svg.user, + height: 30, + width: 30, ) - : SvgPicture.asset( - Assets.svg.thickX, - color: Theme.of(context) - .extension< - StackColors>()! - .textWhite, - width: 8, - height: 8, + : Text( + _selectedEmoji!.char, + style: STextStyles + .pageTitleH1( + context), ), ), ), - ) - ], + Align( + alignment: Alignment.bottomRight, + child: Container( + height: 14, + width: 14, + decoration: BoxDecoration( + borderRadius: + BorderRadius.circular( + 14), + color: Theme.of(context) + .extension< + StackColors>()! + .accentColorDark), + child: Center( + child: _selectedEmoji == null + ? SvgPicture.asset( + Assets.svg.plus, + color: Theme.of( + context) + .extension< + StackColors>()! + .textWhite, + width: 12, + height: 12, + ) + : SvgPicture.asset( + Assets.svg.thickX, + color: Theme.of( + context) + .extension< + StackColors>()! + .textWhite, + width: 8, + height: 8, + ), + ), + ), + ) + ], + ), ), ), ), @@ -453,100 +419,23 @@ class _AddAddressBookEntryViewState return; } - ///TODO if desktop make dialog - !isDesktop - ? showModalBottomSheet( - backgroundColor: - Colors.transparent, - context: context, - shape: - const RoundedRectangleBorder( - borderRadius: - BorderRadius.vertical( - top: Radius.circular(20), - ), - ), - builder: (_) => - const EmojiSelectSheet(), - ).then((value) { - if (value is Emoji) { - setState(() { - _selectedEmoji = value; - }); - } - }) - : showDialog( - context: context, - builder: (context) { - return DesktopDialog( - maxHeight: 700, - maxWidth: 700, - child: Column( - children: [ - Row( - children: [ - Padding( - padding: - const EdgeInsets - .all(32), - child: Text( - "Select emoji", - style: STextStyles - .desktopH3( - context), - textAlign: - TextAlign - .center, - ), - ), - ], - ), - Expanded( - child: LayoutBuilder( - builder: (context, - constraints) { - return SingleChildScrollView( - scrollDirection: - Axis.vertical, - child: - ConstrainedBox( - constraints: - BoxConstraints( - minHeight: - constraints - .maxHeight, - minWidth: - constraints - .maxWidth, - ), - child: - IntrinsicHeight( - child: Column( - children: const [ - Padding( - padding: - EdgeInsets.symmetric(horizontal: 32), - // child: - // EmojiSelectSheet(), - ), - ], - ), - ), - ), - ); - }, - ), - ), - ], - ), - ); - }).then((value) { - if (value is Emoji) { - setState(() { - _selectedEmoji = value; - }); - } - }); + showModalBottomSheet( + backgroundColor: Colors.transparent, + context: context, + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.vertical( + top: Radius.circular(20), + ), + ), + builder: (_) => + const EmojiSelectSheet(), + ).then((value) { + if (value is Emoji) { + setState(() { + _selectedEmoji = value; + }); + } + }); }, child: SizedBox( height: 48, @@ -734,22 +623,16 @@ class _AddAddressBookEntryViewState Row( children: [ Expanded( - child: TextButton( - style: Theme.of(context) - .extension()! - .getSecondaryEnabledButtonColor(context), - child: Text( - "Cancel", - style: STextStyles.button(context).copyWith( - color: Theme.of(context) - .extension()! - .accentColorDark), - ), + child: SecondaryButton( + label: "Cancel", + buttonHeight: isDesktop ? ButtonHeight.m : null, onPressed: () async { - if (FocusScope.of(context).hasFocus) { + if (!isDesktop && + FocusScope.of(context).hasFocus) { FocusScope.of(context).unfocus(); await Future.delayed( - const Duration(milliseconds: 75)); + const Duration(milliseconds: 75), + ); } if (mounted) { Navigator.of(context).pop(); @@ -776,16 +659,11 @@ class _AddAddressBookEntryViewState bool shouldEnableSave = validForms && nameExists; - return TextButton( - style: shouldEnableSave - ? Theme.of(context) - .extension()! - .getPrimaryEnabledButtonColor( - context) - : Theme.of(context) - .extension()! - .getPrimaryDisabledButtonColor( - context), + return PrimaryButton( + label: "Save", + buttonHeight: + isDesktop ? ButtonHeight.m : null, + enabled: shouldEnableSave, onPressed: shouldEnableSave ? () async { if (FocusScope.of(context) @@ -827,19 +705,6 @@ class _AddAddressBookEntryViewState } } : null, - child: Text( - "Save", - style: - STextStyles.button(context).copyWith( - color: shouldEnableSave - ? Theme.of(context) - .extension()! - .buttonTextPrimary - : Theme.of(context) - .extension()! - .buttonTextPrimaryDisabled, - ), - ), ); }, ), diff --git a/lib/pages/address_book_views/subviews/new_contact_address_entry_form.dart b/lib/pages/address_book_views/subviews/new_contact_address_entry_form.dart index b6cf0aad4..f49547858 100644 --- a/lib/pages/address_book_views/subviews/new_contact_address_entry_form.dart +++ b/lib/pages/address_book_views/subviews/new_contact_address_entry_form.dart @@ -253,7 +253,7 @@ class _NewContactAddressEntryFormState }, child: const ClipboardIcon(), ), - if (ref.watch(addressEntryDataProvider(widget.id) + if (!Util.isDesktop && ref.watch(addressEntryDataProvider(widget.id) .select((value) => value.address)) == null) TextFieldIconButton(