mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2024-09-29 09:51:09 +00:00
desktop layout
This commit is contained in:
julian
parent
805beb109f
commit
930bdfca5e
1 changed files with 462 additions and 189 deletions
|
|
@ -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<PaynymHomeView> {
|
|||
|
||||
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<StackColors>()!.textDark,
|
||||
),
|
||||
onPressed: () {
|
||||
Navigator.of(context).pushNamed(
|
||||
AddNewPaynymFollowView.routeName,
|
||||
arguments: widget.walletId,
|
||||
);
|
||||
},
|
||||
appBar: isDesktop
|
||||
? DesktopAppBar(
|
||||
isCompactHeight: true,
|
||||
background: Theme.of(context).extension<StackColors>()!.popupBG,
|
||||
leading: Row(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 24,
|
||||
right: 20,
|
||||
),
|
||||
child: AppBarIconButton(
|
||||
size: 32,
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textFieldDefaultBG,
|
||||
shadows: const [],
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.arrowLeft,
|
||||
width: 18,
|
||||
height: 18,
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.topNavIconPrimary,
|
||||
),
|
||||
onPressed: Navigator.of(context).pop,
|
||||
),
|
||||
),
|
||||
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),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
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: 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<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(
|
||||
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<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
|
||||
.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<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,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
.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<StackColors>()!
|
||||
.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<StackColors>()!
|
||||
.textDark,
|
||||
),
|
||||
onPressed: () {
|
||||
showDialog<void>(
|
||||
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<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: 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(
|
||||
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<StackColors>()!.popupBG,
|
||||
onText: "Following",
|
||||
|
|
@ -275,29 +531,46 @@ class _PaynymHomeViewState extends ConsumerState<PaynymHomeView> {
|
|||
});
|
||||
},
|
||||
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<StackColors>()!
|
||||
.textSubtitle1,
|
||||
)
|
||||
: STextStyles.label(context),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue