diff --git a/lib/pages_desktop_specific/home/desktop_home_view.dart b/lib/pages_desktop_specific/home/desktop_home_view.dart index adfcdfb6a..4ca78894b 100644 --- a/lib/pages_desktop_specific/home/desktop_home_view.dart +++ b/lib/pages_desktop_specific/home/desktop_home_view.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:stackwallet/pages_desktop_specific/home/desktop_menu.dart'; import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/my_stack_view.dart'; +import 'package:stackwallet/pages_desktop_specific/home/settings_menu/settings_menu.dart'; import 'package:stackwallet/route_generator.dart'; import 'package:stackwallet/utilities/theme/stack_colors.dart'; @@ -30,8 +31,9 @@ class _DesktopHomeViewState extends ConsumerState { Container( color: Colors.orange, ), - Container( - color: Colors.yellow, + const Navigator( + onGenerateRoute: RouteGenerator.generateRoute, + initialRoute: SettingsMenu.routeName, ), Container( color: Colors.blue, diff --git a/lib/pages_desktop_specific/home/desktop_settings_view.dart b/lib/pages_desktop_specific/home/desktop_settings_view.dart new file mode 100644 index 000000000..bfe9272f2 --- /dev/null +++ b/lib/pages_desktop_specific/home/desktop_settings_view.dart @@ -0,0 +1,68 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:stackwallet/pages_desktop_specific/home/settings_menu/settings_menu.dart'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; + +class DesktopSettingsView extends ConsumerStatefulWidget { + const DesktopSettingsView({Key? key}) : super(key: key); + + static const String routeName = "/desktopSettings"; + + @override + ConsumerState createState() => + _DesktopSettingsViewState(); +} + +class _DesktopSettingsViewState extends ConsumerState { + int currentViewIndex = 0; + final List contentViews = [ + Container( + color: Colors.lime, + ), //b+r + Container( + color: Colors.green, + ), //security + Container( + color: Colors.red, + ), //currency + Container( + color: Colors.orange, + ), //language + Container( + color: Colors.yellow, + ), //nodes + Container( + color: Colors.blue, + ), //syncing prefs + Container( + color: Colors.pink, + ), //appearance + Container( + color: Colors.purple, + ), //advanced + ]; + + void onMenuSelectionChanged(int newIndex) { + setState(() { + currentViewIndex = newIndex; + }); + } + + // will have a row with two items: SettingsMenu and settings contentxd + @override + Widget build(BuildContext context) { + return Material( + color: Theme.of(context).extension()!.background, + child: Row( + children: [ + SettingsMenu( + onSelectionChanged: onMenuSelectionChanged, + ), + Expanded( + child: contentViews[currentViewIndex], + ), + ], + ), + ); + } +} diff --git a/lib/pages_desktop_specific/home/settings_menu/backup_and_restore.dart b/lib/pages_desktop_specific/home/settings_menu/backup_and_restore.dart new file mode 100644 index 000000000..e69de29bb diff --git a/lib/pages_desktop_specific/home/settings_menu/settings_menu.dart b/lib/pages_desktop_specific/home/settings_menu/settings_menu.dart new file mode 100644 index 000000000..de800b51f --- /dev/null +++ b/lib/pages_desktop_specific/home/settings_menu/settings_menu.dart @@ -0,0 +1,189 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:stackwallet/pages_desktop_specific/home/settings_menu_item.dart'; +import 'package:stackwallet/utilities/assets.dart'; +import 'package:stackwallet/utilities/text_styles.dart'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; + +class SettingsMenu extends ConsumerStatefulWidget { + const SettingsMenu({ + Key? key, + required this.onSelectionChanged, + }) : super(key: key); + + final void Function(int)? + onSelectionChanged; //is a function that takes in an int and returns void/.; + + static const String routeName = "/settingsMenu"; + + @override + ConsumerState createState() => _SettingsMenuState(); +} + +class _SettingsMenuState extends ConsumerState { + int selectedMenuItem = 0; + + void updateSelectedMenuItem(int index) { + setState(() { + selectedMenuItem = index; + }); + widget.onSelectionChanged?.call(index); + } + + @override + Widget build(BuildContext context) { + debugPrint("BUILD: $runtimeType"); + + return Material( + color: Theme.of(context).extension()!.background, + child: SizedBox( + width: 300, + child: Padding( + padding: const EdgeInsets.fromLTRB(24.0, 10.0, 0, 0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox( + height: 20, + // width: 300, + ), + Text( + "Settings", + style: STextStyles.desktopH3(context).copyWith( + fontSize: 24, + ), + ), + Row( + children: [ + Padding( + padding: const EdgeInsets.fromLTRB( + 3.0, + 30.0, + 55.0, + 0, + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SettingsMenuItem( + icon: SvgPicture.asset( + Assets.svg.polygon, + width: 11, + height: 11, + ), + label: "Backup and restore", + value: 0, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + ), + const SizedBox( + height: 2, + ), + SettingsMenuItem( + icon: SvgPicture.asset( + Assets.svg.polygon, + width: 11, + height: 11, + ), + label: "Security", + value: 1, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + ), + const SizedBox( + height: 2, + ), + SettingsMenuItem( + icon: SvgPicture.asset( + Assets.svg.polygon, + width: 11, + height: 11, + ), + label: "Currency", + value: 2, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + ), + const SizedBox( + height: 2, + ), + SettingsMenuItem( + icon: SvgPicture.asset( + Assets.svg.polygon, + width: 11, + height: 11, + ), + label: "Language", + value: 3, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + ), + const SizedBox( + height: 2, + ), + SettingsMenuItem( + icon: SvgPicture.asset( + Assets.svg.polygon, + width: 11, + height: 11, + ), + label: "Nodes", + value: 4, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + ), + const SizedBox( + height: 2, + ), + SettingsMenuItem( + icon: SvgPicture.asset( + Assets.svg.polygon, + width: 11, + height: 11, + ), + label: "Syncing preferences", + value: 5, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + ), + const SizedBox( + height: 2, + ), + SettingsMenuItem( + icon: SvgPicture.asset( + Assets.svg.polygon, + width: 11, + height: 11, + ), + label: "Appearance", + value: 6, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + ), + const SizedBox( + height: 2, + ), + SettingsMenuItem( + icon: SvgPicture.asset( + Assets.svg.polygon, + width: 11, + height: 11, + ), + label: "Advanced", + value: 7, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + ), + ], + ), + ), + ], + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/pages_desktop_specific/home/settings_menu_item.dart b/lib/pages_desktop_specific/home/settings_menu_item.dart new file mode 100644 index 000000000..d317c509a --- /dev/null +++ b/lib/pages_desktop_specific/home/settings_menu_item.dart @@ -0,0 +1,58 @@ +import 'package:flutter/material.dart'; +import 'package:stackwallet/utilities/text_styles.dart'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; + +class SettingsMenuItem extends StatelessWidget { + const SettingsMenuItem({ + Key? key, + required this.icon, + required this.label, + required this.value, + required this.group, + required this.onChanged, + }) : super(key: key); + + final Widget icon; + final String label; + final T value; + final T group; + final void Function(T) onChanged; + + @override + Widget build(BuildContext context) { + return TextButton( + //if val == group, then button is selected, otherwise unselected + style: value == group + ? Theme.of(context) + .extension()! + .getDesktopSettingsButtonColor(context) + : Theme.of(context) + .extension()! + .getDesktopSettingsButtonColor(context), + onPressed: () { + onChanged(value); + }, + child: Padding( + padding: EdgeInsets.symmetric( + vertical: 16, + horizontal: 16, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + icon, + const SizedBox( + width: 12, + ), + Text( + label, + style: value == group //checks if option is selected + ? STextStyles.settingsMenuItemSelected(context) + : STextStyles.settingsMenuItem(context), + ), + ], + ), + ), + ); + } +} diff --git a/lib/pages_desktop_specific/home/settings_view/settings_view.dart b/lib/pages_desktop_specific/home/settings_view/settings_view.dart deleted file mode 100644 index c308f2962..000000000 --- a/lib/pages_desktop_specific/home/settings_view/settings_view.dart +++ /dev/null @@ -1,20 +0,0 @@ -import 'package:flutter/cupertino.dart'; -import 'package:flutter_riverpod/flutter_riverpod.dart'; - -class SettingsView extends ConsumerStatefulWidget { - const SettingsView({Key? key}) : super(key: key); - - static const String routeName = "/settingsView"; - - @override - ConsumerState createState() => _SettingsView(); -} - -class _SettingsView extends ConsumerState { - @override - Widget build(BuildContext context) { - debugPrint("BUILD: $runtimeType"); - // TODO: implement build - throw UnimplementedError(); - } -} diff --git a/lib/route_generator.dart b/lib/route_generator.dart index 5764e22a0..aa99164f4 100644 --- a/lib/route_generator.dart +++ b/lib/route_generator.dart @@ -84,7 +84,9 @@ import 'package:stackwallet/pages/wallet_view/wallet_view.dart'; import 'package:stackwallet/pages/wallets_view/wallets_view.dart'; import 'package:stackwallet/pages_desktop_specific/create_password/create_password_view.dart'; import 'package:stackwallet/pages_desktop_specific/home/desktop_home_view.dart'; +import 'package:stackwallet/pages_desktop_specific/home/desktop_settings_view.dart'; import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/my_stack_view.dart'; +import 'package:stackwallet/pages_desktop_specific/home/settings_menu/settings_menu.dart'; import 'package:stackwallet/services/coins/manager.dart'; import 'package:stackwallet/services/event_bus/events/global/node_connection_status_changed_event.dart'; import 'package:stackwallet/services/event_bus/events/global/wallet_sync_status_changed_event.dart'; @@ -948,12 +950,26 @@ class RouteGenerator { builder: (_) => const DesktopHomeView(), settings: RouteSettings(name: settings.name)); + case DesktopSettingsView.routeName: + return getRoute( + shouldUseMaterialRoute: useMaterialPageRoute, + builder: (_) => const DesktopSettingsView(), + settings: RouteSettings(name: settings.name)); + case MyStackView.routeName: return getRoute( shouldUseMaterialRoute: useMaterialPageRoute, builder: (_) => const MyStackView(), settings: RouteSettings(name: settings.name)); + case SettingsMenu.routeName: + return getRoute( + shouldUseMaterialRoute: useMaterialPageRoute, + builder: (_) => SettingsMenu( + onSelectionChanged: (int) {}, + ), + settings: RouteSettings(name: settings.name)); + // == End of desktop specific routes ===================================== default: diff --git a/lib/utilities/text_styles.dart b/lib/utilities/text_styles.dart index 21a1ee488..c3a6929fe 100644 --- a/lib/utilities/text_styles.dart +++ b/lib/utilities/text_styles.dart @@ -793,6 +793,44 @@ class STextStyles { } } + static TextStyle settingsMenuItem(BuildContext context) { + switch (_theme(context).themeType) { + case ThemeType.light: + return GoogleFonts.inter( + color: _theme(context).textDark.withOpacity(0.5), + fontWeight: FontWeight.w500, + fontSize: 16, + height: 20.8 / 16, + ); + case ThemeType.dark: + return GoogleFonts.inter( + color: _theme(context).textDark.withOpacity(0.5), + fontWeight: FontWeight.w500, + fontSize: 16, + height: 20.8 / 16, + ); + } + } + + static TextStyle settingsMenuItemSelected(BuildContext context) { + switch (_theme(context).themeType) { + case ThemeType.light: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 16, + height: 20.8 / 16, + ); + case ThemeType.dark: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 16, + height: 20.8 / 16, + ); + } + } + static TextStyle stepIndicator(BuildContext context) { switch (_theme(context).themeType) { case ThemeType.light: diff --git a/lib/utilities/theme/stack_colors.dart b/lib/utilities/theme/stack_colors.dart index c6ee28892..c5aaac8c0 100644 --- a/lib/utilities/theme/stack_colors.dart +++ b/lib/utilities/theme/stack_colors.dart @@ -1501,4 +1501,14 @@ class StackColors extends ThemeExtension { textFieldDefaultBG, ), ); + + ButtonStyle? getDesktopSettingsButtonColor(BuildContext context) => + Theme.of(context).textButtonTheme.style?.copyWith( + backgroundColor: MaterialStateProperty.all( + background, + ), + overlayColor: MaterialStateProperty.all( + Colors.transparent, + ), + ); }