From 930bdfca5e497bcf3947c212250a906b752f4164 Mon Sep 17 00:00:00 2001 From: julian Date: Wed, 4 Jan 2023 10:57:04 -0600 Subject: [PATCH] desktop layout --- lib/pages/paynym/paynym_home_view.dart | 651 ++++++++++++++++++------- 1 file changed, 462 insertions(+), 189 deletions(-) diff --git a/lib/pages/paynym/paynym_home_view.dart b/lib/pages/paynym/paynym_home_view.dart index d5b044ddc..a0affc473 100644 --- a/lib/pages/paynym/paynym_home_view.dart +++ b/lib/pages/paynym/paynym_home_view.dart @@ -15,7 +15,9 @@ import 'package:stackwallet/utilities/format.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_app_bar.dart'; import 'package:stackwallet/widgets/desktop/desktop_scaffold.dart'; import 'package:stackwallet/widgets/desktop/secondary_button.dart'; import 'package:stackwallet/widgets/icon_widgets/copy_icon.dart'; @@ -57,210 +59,464 @@ class _PaynymHomeViewState extends ConsumerState { return MasterScaffold( isDesktop: isDesktop, - appBar: AppBar( - leading: AppBarBackButton( - onPressed: () { - Navigator.of(context).pop(); - }, - ), - titleSpacing: 0, - title: Text( - "PayNym", - style: STextStyles.navBarTitle(context), - overflow: TextOverflow.ellipsis, - ), - actions: [ - Padding( - padding: const EdgeInsets.symmetric(vertical: 6), - child: AspectRatio( - aspectRatio: 1, - child: AppBarIconButton( - icon: SvgPicture.asset( - Assets.svg.circlePlusFilled, - width: 20, - height: 20, - color: Theme.of(context).extension()!.textDark, - ), - onPressed: () { - Navigator.of(context).pushNamed( - AddNewPaynymFollowView.routeName, - arguments: widget.walletId, - ); - }, + appBar: isDesktop + ? DesktopAppBar( + isCompactHeight: true, + background: Theme.of(context).extension()!.popupBG, + leading: Row( + children: [ + Padding( + padding: const EdgeInsets.only( + left: 24, + right: 20, + ), + child: AppBarIconButton( + size: 32, + color: Theme.of(context) + .extension()! + .textFieldDefaultBG, + shadows: const [], + icon: SvgPicture.asset( + Assets.svg.arrowLeft, + width: 18, + height: 18, + color: Theme.of(context) + .extension()! + .topNavIconPrimary, + ), + onPressed: Navigator.of(context).pop, + ), + ), + SvgPicture.asset( + Assets.svg.user, + width: 32, + height: 32, + color: Theme.of(context).extension()!.textDark, + ), + const SizedBox( + width: 10, + ), + Text( + "PayNym", + style: STextStyles.desktopH3(context), + ) + ], ), - ), - ), - Padding( - padding: const EdgeInsets.symmetric(vertical: 6), - child: AspectRatio( - aspectRatio: 1, - child: AppBarIconButton( - icon: SvgPicture.asset( - Assets.svg.circleQuestion, - width: 20, - height: 20, - color: Theme.of(context).extension()!.textDark, - ), - onPressed: () { - // todo info ? - }, - ), - ), - ), - const SizedBox( - width: 4, - ), - ], - ), - body: SafeArea( - child: Padding( - padding: const EdgeInsets.all(16), - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - GestureDetector( - onTap: () { - secretCount++; - if (secretCount > 5) { - debugPrint( - "My Account: ${ref.read(myPaynymAccountStateProvider.state).state}"); - debugPrint( - "My Account: ${ref.read(myPaynymAccountStateProvider.state).state!.following}"); - secretCount = 0; - } - - timer ??= Timer( - const Duration(milliseconds: 1500), - () { - secretCount = 0; - timer = null; + trailing: Padding( + padding: const EdgeInsets.only(right: 22), + child: MouseRegion( + cursor: SystemMouseCursors.click, + child: GestureDetector( + onTap: () { + Navigator.of(context).pushNamed( + AddNewPaynymFollowView.routeName, + arguments: widget.walletId, + ); }, - ); - }, - child: PayNymBot( - paymentCodeString: ref - .watch(myPaynymAccountStateProvider.state) - .state! - .codes - .first - .code, + child: Container( + color: Colors.transparent, + child: Padding( + padding: const EdgeInsets.all(10.0), + child: Row( + children: [ + SvgPicture.asset( + Assets.svg.plus, + width: 16, + height: 16, + color: Theme.of(context) + .extension()! + .textDark, + ), + const SizedBox( + width: 8, + ), + Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + "Follow", + style: + STextStyles.desktopButtonSecondaryEnabled( + context) + .copyWith( + fontSize: 16, + ), + ), + const SizedBox( + height: 2, + ), + ], + ), + ], + ), + ), + ), + ), ), ), - const SizedBox( - height: 10, + ) + : AppBar( + leading: AppBarBackButton( + onPressed: () { + Navigator.of(context).pop(); + }, ), - Text( - ref.watch(myPaynymAccountStateProvider.state).state!.nymName, - style: STextStyles.desktopMenuItemSelected(context), + titleSpacing: 0, + title: Text( + "PayNym", + style: STextStyles.navBarTitle(context), + overflow: TextOverflow.ellipsis, ), - const SizedBox( - height: 4, - ), - Text( - Format.shorten( + actions: [ + Padding( + padding: const EdgeInsets.symmetric(vertical: 6), + child: AspectRatio( + aspectRatio: 1, + child: AppBarIconButton( + icon: SvgPicture.asset( + Assets.svg.circlePlusFilled, + width: 20, + height: 20, + color: Theme.of(context) + .extension()! + .textDark, + ), + onPressed: () { + Navigator.of(context).pushNamed( + AddNewPaynymFollowView.routeName, + arguments: widget.walletId, + ); + }, + ), + ), + ), + Padding( + padding: const EdgeInsets.symmetric(vertical: 6), + child: AspectRatio( + aspectRatio: 1, + child: AppBarIconButton( + icon: SvgPicture.asset( + Assets.svg.circleQuestion, + width: 20, + height: 20, + color: Theme.of(context) + .extension()! + .textDark, + ), + onPressed: () { + // todo info ? + }, + ), + ), + ), + const SizedBox( + width: 4, + ), + ], + ), + body: ConditionalParent( + condition: !isDesktop, + builder: (child) => SafeArea( + child: Padding( + padding: const EdgeInsets.all(16), + child: child, + ), + ), + child: Column( + crossAxisAlignment: + isDesktop ? CrossAxisAlignment.start : CrossAxisAlignment.center, + children: [ + if (!isDesktop) + Column( + mainAxisSize: MainAxisSize.min, + children: [ + GestureDetector( + onTap: () { + secretCount++; + if (secretCount > 5) { + debugPrint( + "My Account: ${ref.read(myPaynymAccountStateProvider.state).state}"); + debugPrint( + "My Account: ${ref.read(myPaynymAccountStateProvider.state).state!.following}"); + secretCount = 0; + } + + timer ??= Timer( + const Duration(milliseconds: 1500), + () { + secretCount = 0; + timer = null; + }, + ); + }, + child: PayNymBot( + paymentCodeString: ref + .watch(myPaynymAccountStateProvider.state) + .state! + .codes + .first + .code, + ), + ), + const SizedBox( + height: 10, + ), + Text( ref .watch(myPaynymAccountStateProvider.state) .state! - .codes - .first - .code, - 12, - 5), - style: STextStyles.label(context), - ), - const SizedBox( - height: 11, - ), - Row( - children: [ - Expanded( - child: SecondaryButton( - label: "Copy", - buttonHeight: ButtonHeight.l, - iconSpacing: 4, - icon: CopyIcon( - width: 10, - height: 10, - color: Theme.of(context) - .extension()! - .textDark, - ), - onPressed: () async { - await Clipboard.setData( - ClipboardData( - text: ref - .read(myPaynymAccountStateProvider.state) - .state! - .codes - .first - .code, - ), - ); - unawaited( - showFloatingFlushBar( - type: FlushBarType.info, - message: "Copied to clipboard", - iconAsset: Assets.svg.copy, - context: context, - ), - ); - }, - ), + .nymName, + style: STextStyles.desktopMenuItemSelected(context), ), const SizedBox( - width: 13, + height: 4, ), - Expanded( - child: SecondaryButton( - label: "Share", - buttonHeight: ButtonHeight.l, - iconSpacing: 4, - icon: ShareIcon( - width: 10, - height: 10, - color: Theme.of(context) - .extension()! - .textDark, - ), - onPressed: () { - // copy to clipboard - }, - ), + Text( + Format.shorten( + ref + .watch(myPaynymAccountStateProvider.state) + .state! + .codes + .first + .code, + 12, + 5), + style: STextStyles.label(context), ), const SizedBox( - width: 13, + height: 11, ), - Expanded( - child: SecondaryButton( - label: "Address", - buttonHeight: ButtonHeight.l, - iconSpacing: 4, - icon: QrCodeIcon( - width: 10, - height: 10, - color: Theme.of(context) - .extension()! - .textDark, - ), - onPressed: () { - showDialog( - context: context, - builder: (context) => PaynymQrPopup( - paynymAccount: ref - .read(myPaynymAccountStateProvider.state) - .state!, + Row( + children: [ + Expanded( + child: SecondaryButton( + label: "Copy", + buttonHeight: ButtonHeight.l, + iconSpacing: 4, + icon: CopyIcon( + width: 10, + height: 10, + color: Theme.of(context) + .extension()! + .textDark, ), - ); - }, - ), + onPressed: () async { + await Clipboard.setData( + ClipboardData( + text: ref + .read(myPaynymAccountStateProvider.state) + .state! + .codes + .first + .code, + ), + ); + unawaited( + showFloatingFlushBar( + type: FlushBarType.info, + message: "Copied to clipboard", + iconAsset: Assets.svg.copy, + context: context, + ), + ); + }, + ), + ), + const SizedBox( + width: 13, + ), + Expanded( + child: SecondaryButton( + label: "Share", + buttonHeight: ButtonHeight.l, + iconSpacing: 4, + icon: ShareIcon( + width: 10, + height: 10, + color: Theme.of(context) + .extension()! + .textDark, + ), + onPressed: () { + // copy to clipboard + }, + ), + ), + const SizedBox( + width: 13, + ), + Expanded( + child: SecondaryButton( + label: "Address", + buttonHeight: ButtonHeight.l, + iconSpacing: 4, + icon: QrCodeIcon( + width: 10, + height: 10, + color: Theme.of(context) + .extension()! + .textDark, + ), + onPressed: () { + showDialog( + context: context, + builder: (context) => PaynymQrPopup( + paynymAccount: ref + .read(myPaynymAccountStateProvider.state) + .state!, + ), + ); + }, + ), + ), + ], ), ], ), + if (isDesktop) + Padding( + padding: const EdgeInsets.all(24), + child: RoundedWhiteContainer( + padding: const EdgeInsets.all(16), + child: Row( + children: [ + const SizedBox( + width: 4, + ), + GestureDetector( + onTap: () { + secretCount++; + if (secretCount > 5) { + debugPrint( + "My Account: ${ref.read(myPaynymAccountStateProvider.state).state}"); + debugPrint( + "My Account: ${ref.read(myPaynymAccountStateProvider.state).state!.following}"); + secretCount = 0; + } + + timer ??= Timer( + const Duration(milliseconds: 1500), + () { + secretCount = 0; + timer = null; + }, + ); + }, + child: PayNymBot( + paymentCodeString: ref + .watch(myPaynymAccountStateProvider.state) + .state! + .codes + .first + .code, + ), + ), + const SizedBox( + width: 16, + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + ref + .watch(myPaynymAccountStateProvider.state) + .state! + .nymName, + style: STextStyles.desktopH3(context), + ), + const SizedBox( + height: 4, + ), + Text( + Format.shorten( + ref + .watch(myPaynymAccountStateProvider.state) + .state! + .codes + .first + .code, + 12, + 5), + style: + STextStyles.desktopTextExtraExtraSmall(context), + ), + ], + ), + const Spacer(), + SecondaryButton( + label: "Copy", + buttonHeight: ButtonHeight.l, + width: 160, + icon: CopyIcon( + width: 18, + height: 18, + color: Theme.of(context) + .extension()! + .textDark, + ), + onPressed: () async { + await Clipboard.setData( + ClipboardData( + text: ref + .read(myPaynymAccountStateProvider.state) + .state! + .codes + .first + .code, + ), + ); + unawaited( + showFloatingFlushBar( + type: FlushBarType.info, + message: "Copied to clipboard", + iconAsset: Assets.svg.copy, + context: context, + ), + ); + }, + ), + const SizedBox( + width: 16, + ), + SecondaryButton( + label: "Address", + width: 160, + buttonHeight: ButtonHeight.l, + icon: QrCodeIcon( + width: 18, + height: 18, + color: Theme.of(context) + .extension()! + .textDark, + ), + onPressed: () { + showDialog( + context: context, + builder: (context) => PaynymQrPopup( + paynymAccount: ref + .read(myPaynymAccountStateProvider.state) + .state!, + ), + ); + }, + ), + ], + ), + ), + ), + if (!isDesktop) const SizedBox( height: 24, ), - SizedBox( - height: 40, + ConditionalParent( + condition: isDesktop, + builder: (child) => Padding( + padding: const EdgeInsets.only(left: 24), + child: child, + ), + child: SizedBox( + height: isDesktop ? 56 : 40, + width: isDesktop ? 490 : null, child: Toggle( onColor: Theme.of(context).extension()!.popupBG, onText: "Following", @@ -275,29 +531,46 @@ class _PaynymHomeViewState extends ConsumerState { }); }, decoration: BoxDecoration( - color: Colors.blue, + color: Colors.transparent, borderRadius: BorderRadius.circular( Constants.size.circularBorderRadius, ), ), ), ), - const SizedBox( - height: 16, + ), + SizedBox( + height: isDesktop ? 20 : 16, + ), + ConditionalParent( + condition: isDesktop, + builder: (child) => Padding( + padding: const EdgeInsets.only(left: 24), + child: SizedBox( + width: 490, + child: child, + ), ), - RoundedWhiteContainer( + child: RoundedWhiteContainer( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( "Your PayNym contacts will appear here", - style: STextStyles.label(context), + style: isDesktop + ? STextStyles.desktopTextExtraExtraSmall(context) + .copyWith( + color: Theme.of(context) + .extension()! + .textSubtitle1, + ) + : STextStyles.label(context), ), ], ), ), - ], - ), + ), + ], ), ), );