desktop layout

This commit is contained in:
julian 2023-01-04 10:57:04 -06:00
parent 805beb109f
commit 930bdfca5e

View file

@ -15,7 +15,9 @@ import 'package:stackwallet/utilities/format.dart';
import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart'; import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/utilities/util.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/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/desktop_scaffold.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart'; import 'package:stackwallet/widgets/desktop/secondary_button.dart';
import 'package:stackwallet/widgets/icon_widgets/copy_icon.dart'; import 'package:stackwallet/widgets/icon_widgets/copy_icon.dart';
@ -57,210 +59,464 @@ class _PaynymHomeViewState extends ConsumerState<PaynymHomeView> {
return MasterScaffold( return MasterScaffold(
isDesktop: isDesktop, isDesktop: isDesktop,
appBar: AppBar( appBar: isDesktop
leading: AppBarBackButton( ? DesktopAppBar(
onPressed: () { isCompactHeight: true,
Navigator.of(context).pop(); background: Theme.of(context).extension<StackColors>()!.popupBG,
}, leading: Row(
), children: [
titleSpacing: 0, Padding(
title: Text( padding: const EdgeInsets.only(
"PayNym", left: 24,
style: STextStyles.navBarTitle(context), right: 20,
overflow: TextOverflow.ellipsis, ),
), child: AppBarIconButton(
actions: [ size: 32,
Padding( color: Theme.of(context)
padding: const EdgeInsets.symmetric(vertical: 6), .extension<StackColors>()!
child: AspectRatio( .textFieldDefaultBG,
aspectRatio: 1, shadows: const [],
child: AppBarIconButton( icon: SvgPicture.asset(
icon: SvgPicture.asset( Assets.svg.arrowLeft,
Assets.svg.circlePlusFilled, width: 18,
width: 20, height: 18,
height: 20, color: Theme.of(context)
color: Theme.of(context).extension<StackColors>()!.textDark, .extension<StackColors>()!
), .topNavIconPrimary,
onPressed: () { ),
Navigator.of(context).pushNamed( onPressed: Navigator.of(context).pop,
AddNewPaynymFollowView.routeName, ),
arguments: widget.walletId, ),
); SvgPicture.asset(
}, Assets.svg.user,
width: 32,
height: 32,
color: Theme.of(context).extension<StackColors>()!.textDark,
),
const SizedBox(
width: 10,
),
Text(
"PayNym",
style: STextStyles.desktopH3(context),
)
],
), ),
), trailing: Padding(
), padding: const EdgeInsets.only(right: 22),
Padding( child: MouseRegion(
padding: const EdgeInsets.symmetric(vertical: 6), cursor: SystemMouseCursors.click,
child: AspectRatio( child: GestureDetector(
aspectRatio: 1, onTap: () {
child: AppBarIconButton( Navigator.of(context).pushNamed(
icon: SvgPicture.asset( AddNewPaynymFollowView.routeName,
Assets.svg.circleQuestion, arguments: widget.walletId,
width: 20, );
height: 20,
color: Theme.of(context).extension<StackColors>()!.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;
}, },
); child: Container(
}, color: Colors.transparent,
child: PayNymBot( child: Padding(
paymentCodeString: ref padding: const EdgeInsets.all(10.0),
.watch(myPaynymAccountStateProvider.state) child: Row(
.state! children: [
.codes SvgPicture.asset(
.first Assets.svg.plus,
.code, width: 16,
height: 16,
color: Theme.of(context)
.extension<StackColors>()!
.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( titleSpacing: 0,
ref.watch(myPaynymAccountStateProvider.state).state!.nymName, title: Text(
style: STextStyles.desktopMenuItemSelected(context), "PayNym",
style: STextStyles.navBarTitle(context),
overflow: TextOverflow.ellipsis,
), ),
const SizedBox( actions: [
height: 4, Padding(
), padding: const EdgeInsets.symmetric(vertical: 6),
Text( child: AspectRatio(
Format.shorten( aspectRatio: 1,
child: AppBarIconButton(
icon: SvgPicture.asset(
Assets.svg.circlePlusFilled,
width: 20,
height: 20,
color: Theme.of(context)
.extension<StackColors>()!
.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<StackColors>()!
.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 ref
.watch(myPaynymAccountStateProvider.state) .watch(myPaynymAccountStateProvider.state)
.state! .state!
.codes .nymName,
.first style: STextStyles.desktopMenuItemSelected(context),
.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<StackColors>()!
.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( const SizedBox(
width: 13, height: 4,
), ),
Expanded( Text(
child: SecondaryButton( Format.shorten(
label: "Share", ref
buttonHeight: ButtonHeight.l, .watch(myPaynymAccountStateProvider.state)
iconSpacing: 4, .state!
icon: ShareIcon( .codes
width: 10, .first
height: 10, .code,
color: Theme.of(context) 12,
.extension<StackColors>()! 5),
.textDark, style: STextStyles.label(context),
),
onPressed: () {
// copy to clipboard
},
),
), ),
const SizedBox( const SizedBox(
width: 13, height: 11,
), ),
Expanded( Row(
child: SecondaryButton( children: [
label: "Address", Expanded(
buttonHeight: ButtonHeight.l, child: SecondaryButton(
iconSpacing: 4, label: "Copy",
icon: QrCodeIcon( buttonHeight: ButtonHeight.l,
width: 10, iconSpacing: 4,
height: 10, icon: CopyIcon(
color: Theme.of(context) width: 10,
.extension<StackColors>()! height: 10,
.textDark, color: Theme.of(context)
), .extension<StackColors>()!
onPressed: () { .textDark,
showDialog<void>(
context: context,
builder: (context) => PaynymQrPopup(
paynymAccount: ref
.read(myPaynymAccountStateProvider.state)
.state!,
), ),
); 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<StackColors>()!
.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<StackColors>()!
.textDark,
),
onPressed: () {
showDialog<void>(
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<StackColors>()!
.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<StackColors>()!
.textDark,
),
onPressed: () {
showDialog<void>(
context: context,
builder: (context) => PaynymQrPopup(
paynymAccount: ref
.read(myPaynymAccountStateProvider.state)
.state!,
),
);
},
),
],
),
),
),
if (!isDesktop)
const SizedBox( const SizedBox(
height: 24, height: 24,
), ),
SizedBox( ConditionalParent(
height: 40, 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( child: Toggle(
onColor: Theme.of(context).extension<StackColors>()!.popupBG, onColor: Theme.of(context).extension<StackColors>()!.popupBG,
onText: "Following", onText: "Following",
@ -275,29 +531,46 @@ class _PaynymHomeViewState extends ConsumerState<PaynymHomeView> {
}); });
}, },
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.blue, color: Colors.transparent,
borderRadius: BorderRadius.circular( borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius, 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( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Text( Text(
"Your PayNym contacts will appear here", "Your PayNym contacts will appear here",
style: STextStyles.label(context), style: isDesktop
? STextStyles.desktopTextExtraExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
)
: STextStyles.label(context),
), ),
], ],
), ),
), ),
], ),
), ],
), ),
), ),
); );