From b46fb829d1d6364f74a5ab5a0deecdf6d95b0ef3 Mon Sep 17 00:00:00 2001 From: ryleedavis Date: Thu, 6 Oct 2022 12:20:24 -0600 Subject: [PATCH 1/7] page for settings options --- .../home/desktop_settings_view.dart | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) 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 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], + ), + ], + ), + ); + } +} From 548b0e727e738c8219add09113585993f0761d86 Mon Sep 17 00:00:00 2001 From: ryleedavis Date: Thu, 6 Oct 2022 12:25:36 -0600 Subject: [PATCH 2/7] basic desktop settings view --- lib/pages_desktop_specific/home/settings_menu_item.dart | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/pages_desktop_specific/home/settings_menu_item.dart b/lib/pages_desktop_specific/home/settings_menu_item.dart index 125e50e73..2359d5e4d 100644 --- a/lib/pages_desktop_specific/home/settings_menu_item.dart +++ b/lib/pages_desktop_specific/home/settings_menu_item.dart @@ -21,6 +21,7 @@ class SettingsMenuItem 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()! From 7120c9ec4e661110c5f8b32bbb2418900ff6fc42 Mon Sep 17 00:00:00 2001 From: ryleedavis Date: Thu, 6 Oct 2022 12:26:12 -0600 Subject: [PATCH 3/7] added required onSelectionChanged param --- lib/route_generator.dart | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/route_generator.dart b/lib/route_generator.dart index 121aca797..acbf968af 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 ===================================== From 09641167fb607fa5f524196a99e68ce624363d82 Mon Sep 17 00:00:00 2001 From: ryleedavis Date: Thu, 6 Oct 2022 17:43:00 -0600 Subject: [PATCH 4/7] added settings options and padding --- .../home/settings_menu/settings_menu.dart | 177 +++++++++++++++++- 1 file changed, 169 insertions(+), 8 deletions(-) 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..32e2d9e3e 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,170 @@ class SettingsMenu extends ConsumerStatefulWidget { } class _SettingsMenuState extends ConsumerState { + 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()!.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: 0, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + ), + const SizedBox( + height: 2, + ), + SettingsMenuItem( + icon: SvgPicture.asset( + Assets.svg.polygon, + width: 11, + height: 11, + ), + label: "Currency", + value: 0, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + ), + const SizedBox( + height: 2, + ), + SettingsMenuItem( + icon: SvgPicture.asset( + Assets.svg.polygon, + width: 11, + height: 11, + ), + label: "Language", + value: 0, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + ), + const SizedBox( + height: 2, + ), + SettingsMenuItem( + icon: SvgPicture.asset( + Assets.svg.polygon, + width: 11, + height: 11, + ), + label: "Nodes", + value: 0, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + ), + const SizedBox( + height: 2, + ), + SettingsMenuItem( + icon: SvgPicture.asset( + Assets.svg.polygon, + width: 11, + height: 11, + ), + label: "Syncing preferences", + value: 0, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + ), + const SizedBox( + height: 2, + ), + SettingsMenuItem( + icon: SvgPicture.asset( + Assets.svg.polygon, + width: 11, + height: 11, + ), + label: "Appearance", + value: 0, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + ), + const SizedBox( + height: 2, + ), + SettingsMenuItem( + icon: SvgPicture.asset( + Assets.svg.polygon, + width: 11, + height: 11, + ), + label: "Advanced", + value: 0, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + ), + ], + ), + ), + ], + ), + ], + ), ), - ], + ), ); } } From ebc9c15c3dbd1ba2484ca36bab6f0bd8fca6fe15 Mon Sep 17 00:00:00 2001 From: ryleedavis Date: Thu, 6 Oct 2022 18:23:49 -0600 Subject: [PATCH 5/7] option text color changes on selection --- .../home/settings_menu_item.dart | 4 +- lib/utilities/text_styles.dart | 38 +++++++++++++++++++ 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/lib/pages_desktop_specific/home/settings_menu_item.dart b/lib/pages_desktop_specific/home/settings_menu_item.dart index 2359d5e4d..b35ab1c23 100644 --- a/lib/pages_desktop_specific/home/settings_menu_item.dart +++ b/lib/pages_desktop_specific/home/settings_menu_item.dart @@ -47,8 +47,8 @@ class SettingsMenuItem 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/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: From fac914e4ee5ac278b0abab35eb15be4d531f5e5e Mon Sep 17 00:00:00 2001 From: ryleedavis Date: Thu, 6 Oct 2022 18:24:57 -0600 Subject: [PATCH 6/7] button color background --- lib/pages_desktop_specific/home/settings_menu_item.dart | 4 ++-- lib/utilities/theme/stack_colors.dart | 7 +++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/lib/pages_desktop_specific/home/settings_menu_item.dart b/lib/pages_desktop_specific/home/settings_menu_item.dart index b35ab1c23..d317c509a 100644 --- a/lib/pages_desktop_specific/home/settings_menu_item.dart +++ b/lib/pages_desktop_specific/home/settings_menu_item.dart @@ -25,10 +25,10 @@ class SettingsMenuItem extends StatelessWidget { style: value == group ? Theme.of(context) .extension()! - .getDesktopMenuButtonColorSelected(context) + .getDesktopSettingsButtonColor(context) : Theme.of(context) .extension()! - .getDesktopMenuButtonColor(context), + .getDesktopSettingsButtonColor(context), onPressed: () { onChanged(value); }, 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 { textFieldDefaultBG, ), ); + + ButtonStyle? getDesktopSettingsButtonColor(BuildContext context) => + Theme.of(context).textButtonTheme.style?.copyWith( + backgroundColor: MaterialStateProperty.all( + background, + ), + ); } From ac9413d376cfc44c94c8a995a2429f48e64385c9 Mon Sep 17 00:00:00 2001 From: ryleedavis Date: Thu, 6 Oct 2022 18:31:29 -0600 Subject: [PATCH 7/7] value numbers allow text color to change on selection --- .../home/settings_menu/settings_menu.dart | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) 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 32e2d9e3e..de800b51f 100644 --- a/lib/pages_desktop_specific/home/settings_menu/settings_menu.dart +++ b/lib/pages_desktop_specific/home/settings_menu/settings_menu.dart @@ -33,8 +33,6 @@ class _SettingsMenuState extends ConsumerState { @override Widget build(BuildContext context) { - // // TODO: implement build - // throw UnimplementedError(); debugPrint("BUILD: $runtimeType"); return Material( @@ -89,7 +87,7 @@ class _SettingsMenuState extends ConsumerState { height: 11, ), label: "Security", - value: 0, + value: 1, group: selectedMenuItem, onChanged: updateSelectedMenuItem, ), @@ -103,7 +101,7 @@ class _SettingsMenuState extends ConsumerState { height: 11, ), label: "Currency", - value: 0, + value: 2, group: selectedMenuItem, onChanged: updateSelectedMenuItem, ), @@ -117,7 +115,7 @@ class _SettingsMenuState extends ConsumerState { height: 11, ), label: "Language", - value: 0, + value: 3, group: selectedMenuItem, onChanged: updateSelectedMenuItem, ), @@ -131,7 +129,7 @@ class _SettingsMenuState extends ConsumerState { height: 11, ), label: "Nodes", - value: 0, + value: 4, group: selectedMenuItem, onChanged: updateSelectedMenuItem, ), @@ -145,7 +143,7 @@ class _SettingsMenuState extends ConsumerState { height: 11, ), label: "Syncing preferences", - value: 0, + value: 5, group: selectedMenuItem, onChanged: updateSelectedMenuItem, ), @@ -159,7 +157,7 @@ class _SettingsMenuState extends ConsumerState { height: 11, ), label: "Appearance", - value: 0, + value: 6, group: selectedMenuItem, onChanged: updateSelectedMenuItem, ), @@ -173,7 +171,7 @@ class _SettingsMenuState extends ConsumerState { height: 11, ), label: "Advanced", - value: 0, + value: 7, group: selectedMenuItem, onChanged: updateSelectedMenuItem, ),