diff --git a/lib/pages_desktop_specific/home/desktop_settings_view.dart b/lib/pages_desktop_specific/home/desktop_settings_view.dart index e69de29bb..bfe9272f2 100644 --- a/lib/pages_desktop_specific/home/desktop_settings_view.dart +++ 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<DesktopSettingsView> createState() => + _DesktopSettingsViewState(); +} + +class _DesktopSettingsViewState extends ConsumerState<DesktopSettingsView> { + int currentViewIndex = 0; + final List<Widget> 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<StackColors>()!.background, + child: Row( + children: [ + SettingsMenu( + onSelectionChanged: onMenuSelectionChanged, + ), + Expanded( + child: contentViews[currentViewIndex], + ), + ], + ), + ); + } +} diff --git a/lib/pages_desktop_specific/home/settings_menu/settings_menu.dart b/lib/pages_desktop_specific/home/settings_menu/settings_menu.dart index a567c510d..de800b51f 100644 --- a/lib/pages_desktop_specific/home/settings_menu/settings_menu.dart +++ b/lib/pages_desktop_specific/home/settings_menu/settings_menu.dart @@ -1,8 +1,19 @@ 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}) : super(key: key); + 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"; @@ -11,20 +22,168 @@ class SettingsMenu extends ConsumerStatefulWidget { } class _SettingsMenuState extends ConsumerState<SettingsMenu> { + int selectedMenuItem = 0; + + void updateSelectedMenuItem(int index) { + setState(() { + selectedMenuItem = index; + }); + widget.onSelectionChanged?.call(index); + } + @override Widget build(BuildContext context) { - // // TODO: implement build - // throw UnimplementedError(); debugPrint("BUILD: $runtimeType"); - return Column( - children: [ - Container( - width: 32, - height: 32, - decoration: BoxDecoration(color: Colors.teal), + return Material( + color: Theme.of(context).extension<StackColors>()!.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 index 125e50e73..d317c509a 100644 --- a/lib/pages_desktop_specific/home/settings_menu_item.dart +++ b/lib/pages_desktop_specific/home/settings_menu_item.dart @@ -21,13 +21,14 @@ class SettingsMenuItem<T> extends StatelessWidget { @override Widget build(BuildContext context) { return TextButton( + //if val == group, then button is selected, otherwise unselected style: value == group ? Theme.of(context) .extension<StackColors>()! - .getDesktopMenuButtonColorSelected(context) + .getDesktopSettingsButtonColor(context) : Theme.of(context) .extension<StackColors>()! - .getDesktopMenuButtonColor(context), + .getDesktopSettingsButtonColor(context), onPressed: () { onChanged(value); }, @@ -46,8 +47,8 @@ class SettingsMenuItem<T> extends StatelessWidget { Text( label, style: value == group //checks if option is selected - ? STextStyles.desktopMenuItemSelected(context) - : STextStyles.desktopMenuItem(context), + ? STextStyles.settingsMenuItemSelected(context) + : STextStyles.settingsMenuItem(context), ), ], ), diff --git a/lib/route_generator.dart b/lib/route_generator.dart index 643b8cecf..9742733b5 100644 --- a/lib/route_generator.dart +++ b/lib/route_generator.dart @@ -944,7 +944,9 @@ class RouteGenerator { case SettingsMenu.routeName: return getRoute( shouldUseMaterialRoute: useMaterialPageRoute, - builder: (_) => const SettingsMenu(), + builder: (_) => SettingsMenu( + onSelectionChanged: (int) {}, + ), settings: RouteSettings(name: settings.name)); // == End of desktop specific routes ===================================== 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..7790a9f82 100644 --- a/lib/utilities/theme/stack_colors.dart +++ b/lib/utilities/theme/stack_colors.dart @@ -1501,4 +1501,11 @@ class StackColors extends ThemeExtension<StackColors> { textFieldDefaultBG, ), ); + + ButtonStyle? getDesktopSettingsButtonColor(BuildContext context) => + Theme.of(context).textButtonTheme.style?.copyWith( + backgroundColor: MaterialStateProperty.all<Color>( + background, + ), + ); }