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 5835c80cd..0007f3d81 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 @@ -191,33 +191,33 @@ 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; - }); - }, - ), + // 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; + // }); + // }, + // ), ], ), ), @@ -225,10 +225,11 @@ class _AddAddressBookEntryViewState ], ), Expanded( - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 10), - child: child, - )), + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 10), + child: child, + ), + ), ], ); }, @@ -292,66 +293,17 @@ class _AddAddressBookEntryViewState : showDialog( context: context, builder: (context) { - return DesktopDialog( + return const 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(), - ), - ], - ), - ), - ), - ); - }, - ), - ), - ], + maxWidth: 600, + child: Padding( + padding: EdgeInsets.only( + left: 32, + right: 20, + top: 32, + bottom: 32, + ), + child: EmojiSelectSheet(), ), ); }).then((value) { diff --git a/lib/widgets/emoji_select_sheet.dart b/lib/widgets/emoji_select_sheet.dart index 85a90fec8..7bf02e967 100644 --- a/lib/widgets/emoji_select_sheet.dart +++ b/lib/widgets/emoji_select_sheet.dart @@ -4,6 +4,9 @@ import 'package:flutter_riverpod/flutter_riverpod.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/utilities/util.dart'; +import 'package:stackwallet/widgets/conditional_parent.dart'; +import 'package:stackwallet/widgets/desktop/secondary_button.dart'; class EmojiSelectSheet extends ConsumerWidget { const EmojiSelectSheet({ @@ -16,7 +19,9 @@ class EmojiSelectSheet extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { - final size = MediaQuery.of(context).size; + final isDesktop = Util.isDesktop; + + final size = isDesktop ? const Size(600, 700) : MediaQuery.of(context).size; final double maxHeight = size.height * 0.60; final double availableWidth = size.width - (2 * horizontalPadding); final int emojisPerRow = @@ -24,90 +29,115 @@ class EmojiSelectSheet extends ConsumerWidget { final itemCount = Emoji.all().length; - return Container( - decoration: BoxDecoration( - color: Theme.of(context).extension()!.popupBG, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(20), + return ConditionalParent( + condition: !isDesktop, + builder: (child) => Container( + decoration: BoxDecoration( + color: Theme.of(context).extension()!.popupBG, + borderRadius: const BorderRadius.vertical( + top: Radius.circular(20), + ), + ), + child: LimitedBox( + maxHeight: maxHeight, + child: Padding( + padding: EdgeInsets.only( + left: horizontalPadding, + right: horizontalPadding, + top: 10, + bottom: 0, + ), + child: child, + ), ), ), - child: LimitedBox( - maxHeight: maxHeight, - child: Padding( - padding: EdgeInsets.only( - left: horizontalPadding, - right: horizontalPadding, - top: 10, - bottom: 0, - ), - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - Center( - child: Container( - decoration: BoxDecoration( - color: Theme.of(context) - .extension()! - .textFieldDefaultBG, - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + if (!isDesktop) + Center( + child: Container( + decoration: BoxDecoration( + color: Theme.of(context) + .extension()! + .textFieldDefaultBG, + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, ), - width: 60, - height: 4, ), + width: 60, + height: 4, ), - const SizedBox( - height: 36, - ), - Text( - "Select emoji", - style: STextStyles.pageTitleH2(context), - textAlign: TextAlign.left, - ), - const SizedBox( - height: 16, - ), - Flexible( - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Flexible( - child: GridView.builder( - itemCount: itemCount, - gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: emojisPerRow, - ), - itemBuilder: (context, index) { - final emoji = Emoji.all()[index]; - return GestureDetector( - onTap: () { - Navigator.of(context).pop(emoji); - }, - child: Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(100), - color: Colors.transparent, - ), - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Text(emoji.char), - ), - ), - ); - }, - ), - ) - ], - ), - ), - const SizedBox( - height: 24, - ), - ], + ), + if (!isDesktop) + const SizedBox( + height: 36, + ), + Text( + "Select emoji", + style: isDesktop + ? STextStyles.desktopH3(context) + : STextStyles.pageTitleH2(context), + textAlign: TextAlign.left, ), - ), + SizedBox( + height: isDesktop ? 28 : 16, + ), + Flexible( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Flexible( + child: GridView.builder( + itemCount: itemCount, + gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: emojisPerRow, + ), + itemBuilder: (context, index) { + final emoji = Emoji.all()[index]; + return GestureDetector( + onTap: () { + Navigator.of(context).pop(emoji); + }, + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(100), + color: Colors.transparent, + ), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text( + emoji.char, + style: isDesktop + ? STextStyles.desktopTextSmall(context) + : null, + ), + ), + ), + ); + }, + ), + ) + ], + ), + ), + SizedBox( + height: isDesktop ? 20 : 24, + ), + if (isDesktop) + Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + SecondaryButton( + label: "Cancel", + width: 248, + buttonHeight: ButtonHeight.l, + onPressed: Navigator.of(context).pop, + ), + ], + ), + ], ), ); }