mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2024-11-18 10:11:03 +00:00
295 lines
11 KiB
Dart
295 lines
11 KiB
Dart
import 'dart:io';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
|
import 'package:stackwallet/pages_desktop_specific/home/desktop_menu_item.dart';
|
|
import 'package:stackwallet/utilities/assets.dart';
|
|
import 'package:stackwallet/utilities/text_styles.dart';
|
|
import 'package:stackwallet/utilities/theme/stack_colors.dart';
|
|
|
|
enum DesktopMenuItemId {
|
|
myStack,
|
|
exchange,
|
|
notifications,
|
|
addressBook,
|
|
settings,
|
|
support,
|
|
about,
|
|
}
|
|
|
|
class DesktopMenu extends ConsumerStatefulWidget {
|
|
const DesktopMenu({
|
|
Key? key,
|
|
required this.onSelectionChanged,
|
|
}) : super(key: key);
|
|
|
|
final void Function(DesktopMenuItemId)? onSelectionChanged;
|
|
|
|
@override
|
|
ConsumerState<DesktopMenu> createState() => _DesktopMenuState();
|
|
}
|
|
|
|
class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|
static const expandedWidth = 225.0;
|
|
static const minimizedWidth = 72.0;
|
|
|
|
double _width = expandedWidth;
|
|
DesktopMenuItemId selectedMenuItem = DesktopMenuItemId.myStack;
|
|
|
|
void updateSelectedMenuItem(DesktopMenuItemId idKey) {
|
|
setState(() {
|
|
selectedMenuItem = idKey;
|
|
});
|
|
widget.onSelectionChanged?.call(idKey);
|
|
}
|
|
|
|
void toggleMinimize() {
|
|
setState(() {
|
|
_width = _width == expandedWidth ? minimizedWidth : expandedWidth;
|
|
});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Material(
|
|
color: Theme.of(context).extension<StackColors>()!.popupBG,
|
|
child: SizedBox(
|
|
width: _width,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
SizedBox(
|
|
height: _width == expandedWidth ? 22 : 25,
|
|
),
|
|
SizedBox(
|
|
width: _width == expandedWidth ? 70 : 32,
|
|
height: _width == expandedWidth ? 70 : 32,
|
|
child: SvgPicture.asset(
|
|
Assets.svg.stackIcon(context),
|
|
),
|
|
),
|
|
const SizedBox(
|
|
height: 10,
|
|
),
|
|
Text(
|
|
_width == expandedWidth ? "Stack Wallet" : "",
|
|
style: STextStyles.desktopH2(context).copyWith(
|
|
fontSize: 18,
|
|
height: 23.4 / 18,
|
|
),
|
|
),
|
|
const SizedBox(
|
|
height: 60,
|
|
),
|
|
Expanded(
|
|
child: SizedBox(
|
|
width: _width == expandedWidth
|
|
? _width - 32 // 16 padding on either side
|
|
: _width - 16, // 8 padding on either side
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
DesktopMenuItem(
|
|
icon: SvgPicture.asset(
|
|
Assets.svg.walletDesktop,
|
|
width: 20,
|
|
height: 20,
|
|
color: DesktopMenuItemId.myStack == selectedMenuItem
|
|
? Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textDark
|
|
: Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textDark
|
|
.withOpacity(0.8),
|
|
),
|
|
label: "My Stack",
|
|
value: DesktopMenuItemId.myStack,
|
|
group: selectedMenuItem,
|
|
onChanged: updateSelectedMenuItem,
|
|
iconOnly: _width == minimizedWidth,
|
|
),
|
|
const SizedBox(
|
|
height: 2,
|
|
),
|
|
// DesktopMenuItem(
|
|
// icon: SvgPicture.asset(
|
|
// Assets.svg.exchangeDesktop,
|
|
// width: 20,
|
|
// height: 20,
|
|
// color: DesktopMenuItemId.exchange == selectedMenuItem
|
|
// ? Theme.of(context)
|
|
// .extension<StackColors>()!
|
|
// .textDark
|
|
// : Theme.of(context)
|
|
// .extension<StackColors>()!
|
|
// .textDark
|
|
// .withOpacity(0.8),
|
|
// ),
|
|
// label: "Exchange",
|
|
// value: DesktopMenuItemId.exchange,
|
|
// group: selectedMenuItem,
|
|
// onChanged: updateSelectedMenuItem,
|
|
// iconOnly: _width == minimizedWidth,
|
|
// ),
|
|
// const SizedBox(
|
|
// height: 2,
|
|
// ),
|
|
DesktopMenuItem(
|
|
icon: SvgPicture.asset(
|
|
Assets.svg.bell,
|
|
width: 20,
|
|
height: 20,
|
|
color:
|
|
DesktopMenuItemId.notifications == selectedMenuItem
|
|
? Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textDark
|
|
: Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textDark
|
|
.withOpacity(0.8),
|
|
),
|
|
label: "Notifications",
|
|
value: DesktopMenuItemId.notifications,
|
|
group: selectedMenuItem,
|
|
onChanged: updateSelectedMenuItem,
|
|
iconOnly: _width == minimizedWidth,
|
|
),
|
|
const SizedBox(
|
|
height: 2,
|
|
),
|
|
DesktopMenuItem(
|
|
icon: SvgPicture.asset(
|
|
Assets.svg.addressBookDesktop,
|
|
width: 20,
|
|
height: 20,
|
|
color: DesktopMenuItemId.addressBook == selectedMenuItem
|
|
? Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textDark
|
|
: Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textDark
|
|
.withOpacity(0.8),
|
|
),
|
|
label: "Address Book",
|
|
value: DesktopMenuItemId.addressBook,
|
|
group: selectedMenuItem,
|
|
onChanged: updateSelectedMenuItem,
|
|
iconOnly: _width == minimizedWidth,
|
|
),
|
|
const SizedBox(
|
|
height: 2,
|
|
),
|
|
DesktopMenuItem(
|
|
icon: SvgPicture.asset(
|
|
Assets.svg.gear,
|
|
width: 20,
|
|
height: 20,
|
|
color: DesktopMenuItemId.settings == selectedMenuItem
|
|
? Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textDark
|
|
: Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textDark
|
|
.withOpacity(0.8),
|
|
),
|
|
label: "Settings",
|
|
value: DesktopMenuItemId.settings,
|
|
group: selectedMenuItem,
|
|
onChanged: updateSelectedMenuItem,
|
|
iconOnly: _width == minimizedWidth,
|
|
),
|
|
const SizedBox(
|
|
height: 2,
|
|
),
|
|
DesktopMenuItem(
|
|
icon: SvgPicture.asset(
|
|
Assets.svg.messageQuestion,
|
|
width: 20,
|
|
height: 20,
|
|
color: DesktopMenuItemId.support == selectedMenuItem
|
|
? Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textDark
|
|
: Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textDark
|
|
.withOpacity(0.8),
|
|
),
|
|
label: "Support",
|
|
value: DesktopMenuItemId.support,
|
|
group: selectedMenuItem,
|
|
onChanged: updateSelectedMenuItem,
|
|
iconOnly: _width == minimizedWidth,
|
|
),
|
|
const SizedBox(
|
|
height: 2,
|
|
),
|
|
DesktopMenuItem(
|
|
icon: SvgPicture.asset(
|
|
Assets.svg.aboutDesktop,
|
|
width: 20,
|
|
height: 20,
|
|
color: DesktopMenuItemId.about == selectedMenuItem
|
|
? Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textDark
|
|
: Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textDark
|
|
.withOpacity(0.8),
|
|
),
|
|
label: "About",
|
|
value: DesktopMenuItemId.about,
|
|
group: selectedMenuItem,
|
|
onChanged: updateSelectedMenuItem,
|
|
iconOnly: _width == minimizedWidth,
|
|
),
|
|
const Spacer(),
|
|
DesktopMenuItem(
|
|
icon: SvgPicture.asset(
|
|
Assets.svg.exitDesktop,
|
|
width: 20,
|
|
height: 20,
|
|
color: Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textDark
|
|
.withOpacity(0.8),
|
|
),
|
|
label: "Exit",
|
|
value: 7,
|
|
group: selectedMenuItem,
|
|
onChanged: (_) {
|
|
// todo: save stuff/ notify before exit?
|
|
exit(0);
|
|
},
|
|
iconOnly: _width == minimizedWidth,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
Row(
|
|
children: [
|
|
const Spacer(),
|
|
IconButton(
|
|
splashRadius: 18,
|
|
onPressed: toggleMinimize,
|
|
icon: SvgPicture.asset(
|
|
Assets.svg.minimize,
|
|
height: 12,
|
|
width: 12,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|