diff --git a/lib/pages_desktop_specific/desktop_home_view.dart b/lib/pages_desktop_specific/desktop_home_view.dart index 3be2f7e08..3ef490512 100644 --- a/lib/pages_desktop_specific/desktop_home_view.dart +++ b/lib/pages_desktop_specific/desktop_home_view.dart @@ -6,8 +6,8 @@ import 'package:stackwallet/pages_desktop_specific/desktop_menu.dart'; import 'package:stackwallet/pages_desktop_specific/my_stack_view/my_stack_view.dart'; import 'package:stackwallet/pages_desktop_specific/notifications/desktop_notifications_view.dart'; import 'package:stackwallet/pages_desktop_specific/settings/desktop_settings_view.dart'; -import 'package:stackwallet/pages_desktop_specific/settings/support_and_about_view/desktop_about_view.dart'; -import 'package:stackwallet/pages_desktop_specific/settings/support_and_about_view/desktop_support_view.dart'; +import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/desktop_about_view.dart'; +import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/desktop_support_view.dart'; import 'package:stackwallet/providers/desktop/current_desktop_menu_item.dart'; import 'package:stackwallet/providers/global/auto_swb_service_provider.dart'; import 'package:stackwallet/providers/global/notifications_provider.dart'; @@ -32,13 +32,13 @@ class DesktopHomeView extends ConsumerStatefulWidget { } class _DesktopHomeViewState extends ConsumerState { - final GlobalKey key = GlobalKey(); + final GlobalKey myStackViewNavKey = GlobalKey(); late final Navigator myStackViewNav; @override void initState() { myStackViewNav = Navigator( - key: key, + key: myStackViewNavKey, onGenerateRoute: RouteGenerator.generateRoute, initialRoute: MyStackView.routeName, ); @@ -87,7 +87,7 @@ class _DesktopHomeViewState extends ConsumerState { void onMenuSelectionWillChange(DesktopMenuItemId newKey) { if (prev == DesktopMenuItemId.myStack && prev == newKey) { - Navigator.of(key.currentContext!) + Navigator.of(myStackViewNavKey.currentContext!) .popUntil(ModalRoute.withName(MyStackView.routeName)); if (ref.read(currentWalletIdProvider.state).state != null) { final managerProvider = ref diff --git a/lib/pages_desktop_specific/desktop_menu.dart b/lib/pages_desktop_specific/desktop_menu.dart index 152c14cac..4ea9dff7c 100644 --- a/lib/pages_desktop_specific/desktop_menu.dart +++ b/lib/pages_desktop_specific/desktop_menu.dart @@ -138,22 +138,7 @@ class _DesktopMenuState extends ConsumerState { children: [ DesktopMenuItem( duration: duration, - icon: SvgPicture.asset( - Assets.svg.walletDesktop, - width: 20, - height: 20, - color: DesktopMenuItemId.myStack == - ref - .watch(currentDesktopMenuItemProvider.state) - .state - ? Theme.of(context) - .extension()! - .accentColorDark - : Theme.of(context) - .extension()! - .accentColorDark - .withOpacity(0.8), - ), + icon: const DesktopMyStackIcon(), label: "My Stack", value: DesktopMenuItemId.myStack, onChanged: updateSelectedMenuItem, @@ -164,22 +149,7 @@ class _DesktopMenuState extends ConsumerState { ), DesktopMenuItem( duration: duration, - icon: SvgPicture.asset( - Assets.svg.exchangeDesktop, - width: 20, - height: 20, - color: DesktopMenuItemId.exchange == - ref - .watch(currentDesktopMenuItemProvider.state) - .state - ? Theme.of(context) - .extension()! - .accentColorDark - : Theme.of(context) - .extension()! - .accentColorDark - .withOpacity(0.8), - ), + icon: const DesktopExchangeIcon(), label: "Exchange", value: DesktopMenuItemId.exchange, onChanged: updateSelectedMenuItem, @@ -201,22 +171,7 @@ class _DesktopMenuState extends ConsumerState { ), DesktopMenuItem( duration: duration, - icon: SvgPicture.asset( - Assets.svg.addressBookDesktop, - width: 20, - height: 20, - color: DesktopMenuItemId.addressBook == - ref - .watch(currentDesktopMenuItemProvider.state) - .state - ? Theme.of(context) - .extension()! - .accentColorDark - : Theme.of(context) - .extension()! - .accentColorDark - .withOpacity(0.8), - ), + icon: const DesktopAddressBookIcon(), label: "Address Book", value: DesktopMenuItemId.addressBook, onChanged: updateSelectedMenuItem, @@ -227,22 +182,7 @@ class _DesktopMenuState extends ConsumerState { ), DesktopMenuItem( duration: duration, - icon: SvgPicture.asset( - Assets.svg.gear, - width: 20, - height: 20, - color: DesktopMenuItemId.settings == - ref - .watch(currentDesktopMenuItemProvider.state) - .state - ? Theme.of(context) - .extension()! - .accentColorDark - : Theme.of(context) - .extension()! - .accentColorDark - .withOpacity(0.8), - ), + icon: const DesktopSettingsIcon(), label: "Settings", value: DesktopMenuItemId.settings, onChanged: updateSelectedMenuItem, @@ -253,22 +193,7 @@ class _DesktopMenuState extends ConsumerState { ), DesktopMenuItem( duration: duration, - icon: SvgPicture.asset( - Assets.svg.messageQuestion, - width: 20, - height: 20, - color: DesktopMenuItemId.support == - ref - .watch(currentDesktopMenuItemProvider.state) - .state - ? Theme.of(context) - .extension()! - .accentColorDark - : Theme.of(context) - .extension()! - .accentColorDark - .withOpacity(0.8), - ), + icon: const DesktopSupportIcon(), label: "Support", value: DesktopMenuItemId.support, onChanged: updateSelectedMenuItem, @@ -279,22 +204,7 @@ class _DesktopMenuState extends ConsumerState { ), DesktopMenuItem( duration: duration, - icon: SvgPicture.asset( - Assets.svg.aboutDesktop, - width: 20, - height: 20, - color: DesktopMenuItemId.about == - ref - .watch(currentDesktopMenuItemProvider.state) - .state - ? Theme.of(context) - .extension()! - .accentColorDark - : Theme.of(context) - .extension()! - .accentColorDark - .withOpacity(0.8), - ), + icon: const DesktopAboutIcon(), label: "About", value: DesktopMenuItemId.about, onChanged: updateSelectedMenuItem, @@ -304,15 +214,7 @@ class _DesktopMenuState extends ConsumerState { DesktopMenuItem( duration: duration, labelLength: 123, - icon: SvgPicture.asset( - Assets.svg.exitDesktop, - width: 20, - height: 20, - color: Theme.of(context) - .extension()! - .accentColorDark - .withOpacity(0.8), - ), + icon: const DesktopExitIcon(), label: "Exit", value: 7, onChanged: (_) { diff --git a/lib/pages_desktop_specific/desktop_menu_item.dart b/lib/pages_desktop_specific/desktop_menu_item.dart index 60adaf118..e75f3410f 100644 --- a/lib/pages_desktop_specific/desktop_menu_item.dart +++ b/lib/pages_desktop_specific/desktop_menu_item.dart @@ -15,18 +15,51 @@ class DMIController { } } -class DesktopNotificationsIcon extends ConsumerStatefulWidget { +class DesktopMyStackIcon extends ConsumerWidget { + const DesktopMyStackIcon({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context, WidgetRef ref) { + return SvgPicture.asset( + Assets.svg.walletDesktop, + width: 20, + height: 20, + color: DesktopMenuItemId.myStack == + ref.watch(currentDesktopMenuItemProvider.state).state + ? Theme.of(context).extension()!.accentColorDark + : Theme.of(context) + .extension()! + .accentColorDark + .withOpacity(0.8), + ); + } +} + +class DesktopExchangeIcon extends ConsumerWidget { + const DesktopExchangeIcon({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context, WidgetRef ref) { + return SvgPicture.asset( + Assets.svg.exchangeDesktop, + width: 20, + height: 20, + color: DesktopMenuItemId.exchange == + ref.watch(currentDesktopMenuItemProvider.state).state + ? Theme.of(context).extension()!.accentColorDark + : Theme.of(context) + .extension()! + .accentColorDark + .withOpacity(0.8), + ); + } +} + +class DesktopNotificationsIcon extends ConsumerWidget { const DesktopNotificationsIcon({Key? key}) : super(key: key); @override - ConsumerState createState() => - _DesktopNotificationsIconState(); -} - -class _DesktopNotificationsIconState - extends ConsumerState { - @override - Widget build(BuildContext context) { + Widget build(BuildContext context, WidgetRef ref) { return SvgPicture.asset( ref.watch(notificationsProvider .select((value) => value.hasUnreadNotifications)) @@ -48,6 +81,103 @@ class _DesktopNotificationsIconState } } +class DesktopAddressBookIcon extends ConsumerWidget { + const DesktopAddressBookIcon({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context, WidgetRef ref) { + return SvgPicture.asset( + Assets.svg.addressBookDesktop, + width: 20, + height: 20, + color: DesktopMenuItemId.addressBook == + ref.watch(currentDesktopMenuItemProvider.state).state + ? Theme.of(context).extension()!.accentColorDark + : Theme.of(context) + .extension()! + .accentColorDark + .withOpacity(0.8), + ); + } +} + +class DesktopSettingsIcon extends ConsumerWidget { + const DesktopSettingsIcon({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context, WidgetRef ref) { + return SvgPicture.asset( + Assets.svg.gear, + width: 20, + height: 20, + color: DesktopMenuItemId.settings == + ref.watch(currentDesktopMenuItemProvider.state).state + ? Theme.of(context).extension()!.accentColorDark + : Theme.of(context) + .extension()! + .accentColorDark + .withOpacity(0.8), + ); + } +} + +class DesktopSupportIcon extends ConsumerWidget { + const DesktopSupportIcon({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context, WidgetRef ref) { + return SvgPicture.asset( + Assets.svg.messageQuestion, + width: 20, + height: 20, + color: DesktopMenuItemId.support == + ref.watch(currentDesktopMenuItemProvider.state).state + ? Theme.of(context).extension()!.accentColorDark + : Theme.of(context) + .extension()! + .accentColorDark + .withOpacity(0.8), + ); + } +} + +class DesktopAboutIcon extends ConsumerWidget { + const DesktopAboutIcon({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context, WidgetRef ref) { + return SvgPicture.asset( + Assets.svg.aboutDesktop, + width: 20, + height: 20, + color: DesktopMenuItemId.about == + ref.watch(currentDesktopMenuItemProvider.state).state + ? Theme.of(context).extension()!.accentColorDark + : Theme.of(context) + .extension()! + .accentColorDark + .withOpacity(0.8), + ); + } +} + +class DesktopExitIcon extends ConsumerWidget { + const DesktopExitIcon({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context, WidgetRef ref) { + return SvgPicture.asset( + Assets.svg.exitDesktop, + width: 20, + height: 20, + color: Theme.of(context) + .extension()! + .accentColorDark + .withOpacity(0.8), + ); + } +} + class DesktopMenuItem extends ConsumerStatefulWidget { const DesktopMenuItem({ Key? key, diff --git a/lib/pages_desktop_specific/my_stack_view/my_stack_view.dart b/lib/pages_desktop_specific/my_stack_view/my_stack_view.dart index c7b9f8814..47ffdf4fe 100644 --- a/lib/pages_desktop_specific/my_stack_view/my_stack_view.dart +++ b/lib/pages_desktop_specific/my_stack_view/my_stack_view.dart @@ -27,29 +27,9 @@ class _MyStackViewState extends ConsumerState { return Background( child: Column( children: [ - DesktopAppBar( + const DesktopAppBar( isCompactHeight: true, - leading: Row( - children: [ - const SizedBox( - width: 24, - ), - SizedBox( - width: 32, - height: 32, - child: SvgPicture.asset( - Assets.svg.stackIcon(context), - ), - ), - const SizedBox( - width: 12, - ), - Text( - "My Stack", - style: STextStyles.desktopH3(context), - ) - ], - ), + leading: DesktopMyStackTitle(), ), Expanded( child: hasWallets ? const MyWallets() : const EmptyWallets(), @@ -59,3 +39,32 @@ class _MyStackViewState extends ConsumerState { ); } } + +class DesktopMyStackTitle extends StatelessWidget { + const DesktopMyStackTitle({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Row( + children: [ + const SizedBox( + width: 24, + ), + SizedBox( + width: 32, + height: 32, + child: SvgPicture.asset( + Assets.svg.stackIcon(context), + ), + ), + const SizedBox( + width: 12, + ), + Text( + "My Stack", + style: STextStyles.desktopH3(context), + ) + ], + ); + } +} diff --git a/lib/pages_desktop_specific/settings/desktop_settings_view.dart b/lib/pages_desktop_specific/settings/desktop_settings_view.dart index f04d030dd..0c5f1c4e3 100644 --- a/lib/pages_desktop_specific/settings/desktop_settings_view.dart +++ b/lib/pages_desktop_specific/settings/desktop_settings_view.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:stackwallet/pages_desktop_specific/settings/settings_menu.dart'; import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/advanced_settings/advanced_settings.dart'; import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/appearance_settings.dart'; import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/backup_and_restore/backup_and_restore_settings.dart'; @@ -7,7 +8,6 @@ import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/curren import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/language_settings/language_settings.dart'; import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/nodes_settings.dart'; import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/security_settings.dart'; -import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/settings_menu.dart'; import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/syncing_preferences_settings.dart'; import 'package:stackwallet/route_generator.dart'; import 'package:stackwallet/utilities/text_styles.dart'; @@ -26,7 +26,6 @@ class DesktopSettingsView extends ConsumerStatefulWidget { } class _DesktopSettingsViewState extends ConsumerState { - int currentViewIndex = 0; final List contentViews = [ const Navigator( key: Key("settingsBackupRestoreDesktopKey"), @@ -70,12 +69,6 @@ class _DesktopSettingsViewState extends ConsumerState { ), //advanced ]; - void onMenuSelectionChanged(int newIndex) { - setState(() { - currentViewIndex = newIndex; - }); - } - @override Widget build(BuildContext context) { return DesktopScaffold( @@ -83,28 +76,36 @@ class _DesktopSettingsViewState extends ConsumerState { appBar: DesktopAppBar( isCompactHeight: true, leading: Row( - children: [ - const SizedBox( + children: const [ + SizedBox( width: 24, height: 24, ), - Text( - "Settings", - style: STextStyles.desktopH3(context), - ) + DesktopSettingsTitle(), ], ), ), body: Row( children: [ - SettingsMenu( - onSelectionChanged: onMenuSelectionChanged, - ), + const SettingsMenu(), Expanded( - child: contentViews[currentViewIndex], + child: contentViews[ + ref.watch(selectedSettingsMenuItemStateProvider.state).state], ), ], ), ); } } + +class DesktopSettingsTitle extends StatelessWidget { + const DesktopSettingsTitle({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Text( + "Settings", + style: STextStyles.desktopH3(context), + ); + } +} diff --git a/lib/pages_desktop_specific/settings/settings_menu.dart b/lib/pages_desktop_specific/settings/settings_menu.dart new file mode 100644 index 000000000..79881c1c8 --- /dev/null +++ b/lib/pages_desktop_specific/settings/settings_menu.dart @@ -0,0 +1,233 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:stackwallet/pages_desktop_specific/settings/settings_menu_item.dart'; +import 'package:stackwallet/utilities/assets.dart'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; + +final selectedSettingsMenuItemStateProvider = StateProvider((_) => 0); + +class SettingsMenu extends ConsumerStatefulWidget { + const SettingsMenu({ + Key? key, + }) : super(key: key); + + @override + ConsumerState createState() => _SettingsMenuState(); +} + +class _SettingsMenuState extends ConsumerState { + final List labels = [ + "Backup and restore", + "Security", + "Currency", + "Language", + "Nodes", + "Syncing preferences", + "Appearance", + "Advanced", + ]; + + @override + Widget build(BuildContext context) { + debugPrint("BUILD: $runtimeType"); + + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsets.only(left: 15), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + for (int i = 0; i < labels.length; i++) + Column( + mainAxisSize: MainAxisSize.min, + children: [ + if (i > 0) + const SizedBox( + height: 2, + ), + SettingsMenuItem( + icon: SvgPicture.asset( + Assets.svg.polygon, + width: 11, + height: 11, + color: ref + .watch(selectedSettingsMenuItemStateProvider + .state) + .state == + i + ? Theme.of(context) + .extension()! + .accentColorBlue + : Colors.transparent, + ), + label: labels[i], + value: i, + group: ref + .watch(selectedSettingsMenuItemStateProvider.state) + .state, + onChanged: (newValue) => ref + .read(selectedSettingsMenuItemStateProvider.state) + .state = newValue, + ), + ], + ) + + // SettingsMenuItem( + // icon: SvgPicture.asset( + // Assets.svg.polygon, + // width: 11, + // height: 11, + // color: selectedMenuItem == 0 + // ? Theme.of(context) + // .extension()! + // .accentColorBlue + // : Colors.transparent, + // ), + // 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, + // color: selectedMenuItem == 1 + // ? Theme.of(context) + // .extension()! + // .accentColorBlue + // : Colors.transparent, + // ), + // label: "Security", + // value: 1, + // group: selectedMenuItem, + // onChanged: updateSelectedMenuItem, + // ), + // const SizedBox( + // height: 2, + // ), + // SettingsMenuItem( + // icon: SvgPicture.asset( + // Assets.svg.polygon, + // width: 11, + // height: 11, + // color: selectedMenuItem == 2 + // ? Theme.of(context) + // .extension()! + // .accentColorBlue + // : Colors.transparent, + // ), + // label: "Currency", + // value: 2, + // group: selectedMenuItem, + // onChanged: updateSelectedMenuItem, + // ), + // const SizedBox( + // height: 2, + // ), + // SettingsMenuItem( + // icon: SvgPicture.asset( + // Assets.svg.polygon, + // width: 11, + // height: 11, + // color: selectedMenuItem == 3 + // ? Theme.of(context) + // .extension()! + // .accentColorBlue + // : Colors.transparent, + // ), + // label: "Language", + // value: 3, + // group: selectedMenuItem, + // onChanged: updateSelectedMenuItem, + // ), + // const SizedBox( + // height: 2, + // ), + // SettingsMenuItem( + // icon: SvgPicture.asset( + // Assets.svg.polygon, + // width: 11, + // height: 11, + // color: selectedMenuItem == 4 + // ? Theme.of(context) + // .extension()! + // .accentColorBlue + // : Colors.transparent, + // ), + // label: "Nodes", + // value: 4, + // group: selectedMenuItem, + // onChanged: updateSelectedMenuItem, + // ), + // const SizedBox( + // height: 2, + // ), + // SettingsMenuItem( + // icon: SvgPicture.asset( + // Assets.svg.polygon, + // width: 11, + // height: 11, + // color: selectedMenuItem == 5 + // ? Theme.of(context) + // .extension()! + // .accentColorBlue + // : Colors.transparent, + // ), + // label: "Syncing preferences", + // value: 5, + // group: selectedMenuItem, + // onChanged: updateSelectedMenuItem, + // ), + // const SizedBox( + // height: 2, + // ), + // SettingsMenuItem( + // icon: SvgPicture.asset( + // Assets.svg.polygon, + // width: 11, + // height: 11, + // color: selectedMenuItem == 6 + // ? Theme.of(context) + // .extension()! + // .accentColorBlue + // : Colors.transparent, + // ), + // label: "Appearance", + // value: 6, + // group: selectedMenuItem, + // onChanged: updateSelectedMenuItem, + // ), + // const SizedBox( + // height: 2, + // ), + // SettingsMenuItem( + // icon: SvgPicture.asset( + // Assets.svg.polygon, + // width: 11, + // height: 11, + // color: selectedMenuItem == 7 + // ? Theme.of(context) + // .extension()! + // .accentColorBlue + // : Colors.transparent, + // ), + // label: "Advanced", + // value: 7, + // group: selectedMenuItem, + // onChanged: updateSelectedMenuItem, + // ), + ], + ), + ), + ], + ); + } +} diff --git a/lib/pages_desktop_specific/settings/settings_menu/appearance_settings.dart b/lib/pages_desktop_specific/settings/settings_menu/appearance_settings.dart index bfd5f3b61..8486e64f6 100644 --- a/lib/pages_desktop_specific/settings/settings_menu/appearance_settings.dart +++ b/lib/pages_desktop_specific/settings/settings_menu/appearance_settings.dart @@ -8,9 +8,6 @@ import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/constants.dart'; import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/theme/color_theme.dart'; -import 'package:stackwallet/utilities/theme/dark_colors.dart'; -import 'package:stackwallet/utilities/theme/light_colors.dart'; -import 'package:stackwallet/utilities/theme/ocean_breeze_colors.dart'; import 'package:stackwallet/utilities/theme/stack_colors.dart'; import 'package:stackwallet/widgets/custom_buttons/draggable_switch_button.dart'; import 'package:stackwallet/widgets/rounded_white_container.dart'; @@ -27,19 +24,6 @@ class AppearanceOptionSettings extends ConsumerStatefulWidget { class _AppearanceOptionSettings extends ConsumerState { - // late bool isLight; - - // @override - // void initState() { - // - // super.initState(); - // } - // - // @override - // void dispose() { - // super.dispose(); - // } - @override Widget build(BuildContext context) { debugPrint("BUILD: $runtimeType"); @@ -166,335 +150,121 @@ class ThemeToggle extends ConsumerStatefulWidget { Key? key, }) : super(key: key); - // final bool externalCallsEnabled; - // final void Function(bool)? onChanged; - @override ConsumerState createState() => _ThemeToggle(); } class _ThemeToggle extends ConsumerState { - // late bool externalCallsEnabled; - - late String _selectedTheme; - - @override - void initState() { - _selectedTheme = - DB.instance.get(boxName: DB.boxNameTheme, key: "colorScheme") - as String? ?? - "light"; - - super.initState(); + String assetNameFor(ThemeType type) { + switch (type) { + case ThemeType.light: + return Assets.svg.themeLight; + case ThemeType.dark: + return Assets.svg.themeDark; + case ThemeType.oceanBreeze: + return Assets.svg.themeOcean; + } } @override Widget build(BuildContext context) { return Row( children: [ - MaterialButton( - splashColor: Colors.transparent, - hoverColor: Colors.transparent, - padding: const EdgeInsets.all(0), - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - onPressed: () { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.light.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - LightColors(), - ); - - setState(() { - _selectedTheme = "light"; - }); - }, - child: SizedBox( - width: 200, - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Container( - decoration: BoxDecoration( - border: Border.all( - width: 2.5, - color: _selectedTheme == "light" - ? Theme.of(context) - .extension()! - .infoItemIcons - : Theme.of(context).extension()!.popupBG, - ), - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - child: SvgPicture.asset( - Assets.svg.themeLight, - ), - ), + for (int i = 0; i < ThemeType.values.length; i++) + Row( + mainAxisSize: MainAxisSize.min, + children: [ + if (i > 0) const SizedBox( - height: 12, + width: 10, ), - Row( - children: [ - SizedBox( - width: 20, - height: 20, - child: Radio( - activeColor: Theme.of(context) - .extension()! - .radioButtonIconEnabled, - value: "light", - groupValue: _selectedTheme, - onChanged: (newValue) { - if (newValue is String && newValue == "light") { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.light.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - LightColors(), - ); - - setState(() { - _selectedTheme = "light"; - }); - } - }, - ), - ), - const SizedBox( - width: 14, - ), - Text( - "Light", - style: - STextStyles.desktopTextExtraSmall(context).copyWith( - color: Theme.of(context) - .extension()! - .textDark, - ), - ), - ], - ), - ], - ), - ), - ), - const SizedBox( - width: 10, - ), - MaterialButton( - splashColor: Colors.transparent, - hoverColor: Colors.transparent, - padding: const EdgeInsets.all(0), - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - onPressed: () { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.oceanBreeze.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - OceanBreezeColors(), - ); - - setState(() { - _selectedTheme = "oceanBreeze"; - }); - }, - child: SizedBox( - width: 200, - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Container( - decoration: BoxDecoration( - border: Border.all( - width: 2.5, - color: _selectedTheme == "oceanBreeze" - ? Theme.of(context) - .extension()! - .infoItemIcons - : Theme.of(context).extension()!.popupBG, - ), - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, + MouseRegion( + cursor: SystemMouseCursors.click, + child: GestureDetector( + onTap: () { + if (ref.read(colorThemeProvider.state).state.themeType != + ThemeType.values[i]) { + DB.instance.put( + boxName: DB.boxNameTheme, + key: "colorScheme", + value: ThemeType.values[i].name, + ); + ref.read(colorThemeProvider.state).state = + StackColors.fromStackColorTheme( + ThemeType.values[i].colorTheme); + } + }, + child: Container( + width: 200, + color: Colors.transparent, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + decoration: BoxDecoration( + border: Border.all( + width: 2.5, + color: ref + .read(colorThemeProvider.state) + .state + .themeType == + ThemeType.values[i] + ? Theme.of(context) + .extension()! + .infoItemIcons + : Theme.of(context) + .extension()! + .popupBG, + ), + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + child: SvgPicture.asset( + assetNameFor(ThemeType.values[i]), + ), + ), + const SizedBox( + height: 12, + ), + Row( + children: [ + SizedBox( + width: 20, + height: 20, + child: Radio( + activeColor: Theme.of(context) + .extension()! + .radioButtonIconEnabled, + value: ThemeType.values[i], + groupValue: ref + .read(colorThemeProvider.state) + .state + .themeType, + onChanged: (_) {}, + ), + ), + const SizedBox( + width: 14, + ), + Text( + ThemeType.values[i].prettyName, + style: STextStyles.desktopTextExtraSmall(context) + .copyWith( + color: Theme.of(context) + .extension()! + .textDark, + ), + ), + ], + ), + ], ), ), - child: SvgPicture.asset( - Assets.svg.themeOcean, - ), ), - const SizedBox( - height: 12, - ), - Row( - children: [ - SizedBox( - width: 20, - height: 20, - child: Radio( - activeColor: Theme.of(context) - .extension()! - .radioButtonIconEnabled, - value: "oceanBreeze", - groupValue: _selectedTheme, - onChanged: (newValue) { - if (newValue is String && newValue == "oceanBreeze") { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.oceanBreeze.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - OceanBreezeColors(), - ); - - setState(() { - _selectedTheme = "oceanBreeze"; - }); - } - }, - ), - ), - const SizedBox( - width: 14, - ), - Text( - "Ocean Breeze", - style: - STextStyles.desktopTextExtraSmall(context).copyWith( - color: Theme.of(context) - .extension()! - .textDark, - ), - ), - ], - ), - ], - ), + ) + ], ), - ), - const SizedBox( - width: 10, - ), - MaterialButton( - splashColor: Colors.transparent, - hoverColor: Colors.transparent, - padding: const EdgeInsets.all(0), - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - onPressed: () { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.dark.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - DarkColors(), - ); - - setState(() { - _selectedTheme = "dark"; - }); - }, - child: SizedBox( - width: 200, - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Container( - decoration: BoxDecoration( - border: Border.all( - width: 2.5, - color: _selectedTheme == "dark" - ? Theme.of(context) - .extension()! - .infoItemIcons - : Theme.of(context).extension()!.popupBG, - ), - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - child: SvgPicture.asset( - Assets.svg.themeDark, - ), - ), - const SizedBox( - height: 12, - ), - Row( - children: [ - SizedBox( - width: 20, - height: 20, - child: Radio( - activeColor: Theme.of(context) - .extension()! - .radioButtonIconEnabled, - value: "dark", - groupValue: _selectedTheme, - onChanged: (newValue) { - if (newValue is String && newValue == "dark") { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.dark.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - DarkColors(), - ); - - setState(() { - _selectedTheme = "dark"; - }); - } - }, - ), - ), - const SizedBox( - width: 14, - ), - Text( - "Dark", - style: - STextStyles.desktopTextExtraSmall(context).copyWith( - color: Theme.of(context) - .extension()! - .textDark, - ), - ), - ], - ), - ], - ), - ), - ), ], ); } diff --git a/lib/pages_desktop_specific/settings/support_and_about_view/desktop_about_view.dart b/lib/pages_desktop_specific/settings/settings_menu/desktop_about_view.dart similarity index 100% rename from lib/pages_desktop_specific/settings/support_and_about_view/desktop_about_view.dart rename to lib/pages_desktop_specific/settings/settings_menu/desktop_about_view.dart diff --git a/lib/pages_desktop_specific/settings/support_and_about_view/desktop_support_view.dart b/lib/pages_desktop_specific/settings/settings_menu/desktop_support_view.dart similarity index 100% rename from lib/pages_desktop_specific/settings/support_and_about_view/desktop_support_view.dart rename to lib/pages_desktop_specific/settings/settings_menu/desktop_support_view.dart diff --git a/lib/pages_desktop_specific/settings/settings_menu/settings_menu.dart b/lib/pages_desktop_specific/settings/settings_menu/settings_menu.dart deleted file mode 100644 index 58b02e92f..000000000 --- a/lib/pages_desktop_specific/settings/settings_menu/settings_menu.dart +++ /dev/null @@ -1,200 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_riverpod/flutter_riverpod.dart'; -import 'package:flutter_svg/svg.dart'; -import 'package:stackwallet/pages_desktop_specific/settings/settings_menu_item.dart'; -import 'package:stackwallet/utilities/assets.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 Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Padding( - padding: const EdgeInsets.only(left: 15), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SettingsMenuItem( - icon: SvgPicture.asset( - Assets.svg.polygon, - width: 11, - height: 11, - color: selectedMenuItem == 0 - ? Theme.of(context) - .extension()! - .accentColorBlue - : Colors.transparent, - ), - 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, - color: selectedMenuItem == 1 - ? Theme.of(context) - .extension()! - .accentColorBlue - : Colors.transparent, - ), - label: "Security", - value: 1, - group: selectedMenuItem, - onChanged: updateSelectedMenuItem, - ), - const SizedBox( - height: 2, - ), - SettingsMenuItem( - icon: SvgPicture.asset( - Assets.svg.polygon, - width: 11, - height: 11, - color: selectedMenuItem == 2 - ? Theme.of(context) - .extension()! - .accentColorBlue - : Colors.transparent, - ), - label: "Currency", - value: 2, - group: selectedMenuItem, - onChanged: updateSelectedMenuItem, - ), - const SizedBox( - height: 2, - ), - SettingsMenuItem( - icon: SvgPicture.asset( - Assets.svg.polygon, - width: 11, - height: 11, - color: selectedMenuItem == 3 - ? Theme.of(context) - .extension()! - .accentColorBlue - : Colors.transparent, - ), - label: "Language", - value: 3, - group: selectedMenuItem, - onChanged: updateSelectedMenuItem, - ), - const SizedBox( - height: 2, - ), - SettingsMenuItem( - icon: SvgPicture.asset( - Assets.svg.polygon, - width: 11, - height: 11, - color: selectedMenuItem == 4 - ? Theme.of(context) - .extension()! - .accentColorBlue - : Colors.transparent, - ), - label: "Nodes", - value: 4, - group: selectedMenuItem, - onChanged: updateSelectedMenuItem, - ), - const SizedBox( - height: 2, - ), - SettingsMenuItem( - icon: SvgPicture.asset( - Assets.svg.polygon, - width: 11, - height: 11, - color: selectedMenuItem == 5 - ? Theme.of(context) - .extension()! - .accentColorBlue - : Colors.transparent, - ), - label: "Syncing preferences", - value: 5, - group: selectedMenuItem, - onChanged: updateSelectedMenuItem, - ), - const SizedBox( - height: 2, - ), - SettingsMenuItem( - icon: SvgPicture.asset( - Assets.svg.polygon, - width: 11, - height: 11, - color: selectedMenuItem == 6 - ? Theme.of(context) - .extension()! - .accentColorBlue - : Colors.transparent, - ), - label: "Appearance", - value: 6, - group: selectedMenuItem, - onChanged: updateSelectedMenuItem, - ), - const SizedBox( - height: 2, - ), - SettingsMenuItem( - icon: SvgPicture.asset( - Assets.svg.polygon, - width: 11, - height: 11, - color: selectedMenuItem == 7 - ? Theme.of(context) - .extension()! - .accentColorBlue - : Colors.transparent, - ), - label: "Advanced", - value: 7, - group: selectedMenuItem, - onChanged: updateSelectedMenuItem, - ), - ], - ), - ), - ], - ); - } -} diff --git a/lib/pages_desktop_specific/settings/settings_menu_item.dart b/lib/pages_desktop_specific/settings/settings_menu_item.dart index d317c509a..28ddffb50 100644 --- a/lib/pages_desktop_specific/settings/settings_menu_item.dart +++ b/lib/pages_desktop_specific/settings/settings_menu_item.dart @@ -33,7 +33,7 @@ class SettingsMenuItem extends StatelessWidget { onChanged(value); }, child: Padding( - padding: EdgeInsets.symmetric( + padding: const EdgeInsets.symmetric( vertical: 16, horizontal: 16, ), diff --git a/lib/route_generator.dart b/lib/route_generator.dart index 9f44f1be0..2e7c63b53 100644 --- a/lib/route_generator.dart +++ b/lib/route_generator.dart @@ -104,13 +104,12 @@ import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/advanc import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/appearance_settings.dart'; import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/backup_and_restore/backup_and_restore_settings.dart'; import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/currency_settings/currency_settings.dart'; +import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/desktop_about_view.dart'; +import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/desktop_support_view.dart'; import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/language_settings/language_settings.dart'; import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/nodes_settings.dart'; import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/security_settings.dart'; -import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/settings_menu.dart'; import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/syncing_preferences_settings.dart'; -import 'package:stackwallet/pages_desktop_specific/settings/support_and_about_view/desktop_about_view.dart'; -import 'package:stackwallet/pages_desktop_specific/settings/support_and_about_view/desktop_support_view.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'; @@ -1061,14 +1060,6 @@ class RouteGenerator { } return _routeError("${settings.name} invalid args: ${args.toString()}"); - case SettingsMenu.routeName: - return getRoute( - shouldUseMaterialRoute: useMaterialPageRoute, - builder: (_) => SettingsMenu( - onSelectionChanged: (int) {}, - ), - settings: RouteSettings(name: settings.name)); - case BackupRestoreSettings.routeName: return getRoute( shouldUseMaterialRoute: useMaterialPageRoute, diff --git a/lib/utilities/theme/color_theme.dart b/lib/utilities/theme/color_theme.dart index 4a480491c..e8b491e71 100644 --- a/lib/utilities/theme/color_theme.dart +++ b/lib/utilities/theme/color_theme.dart @@ -1,5 +1,8 @@ import 'package:flutter/material.dart'; import 'package:stackwallet/utilities/enums/coin_enum.dart'; +import 'package:stackwallet/utilities/theme/dark_colors.dart'; +import 'package:stackwallet/utilities/theme/light_colors.dart'; +import 'package:stackwallet/utilities/theme/ocean_breeze_colors.dart'; enum ThemeType { light, @@ -7,6 +10,30 @@ enum ThemeType { oceanBreeze, } +extension ThemeTypeExt on ThemeType { + StackColorTheme get colorTheme { + switch (this) { + case ThemeType.light: + return LightColors(); + case ThemeType.dark: + return DarkColors(); + case ThemeType.oceanBreeze: + return OceanBreezeColors(); + } + } + + String get prettyName { + switch (this) { + case ThemeType.light: + return "Light"; + case ThemeType.dark: + return "Dark"; + case ThemeType.oceanBreeze: + return "Ocean Breeze"; + } + } +} + abstract class StackColorTheme { ThemeType get themeType;