Merge pull request #786 from cake-tech/CW-312-mac-os-settings-icon-to-be-a-toggle

MacOS settings icon to be a toggle

lib/di.dart

@@ -7,6 +7,7 @@ import 'package:cake_wallet/ionia/ionia_anypay.dart';
 import 'package:cake_wallet/ionia/ionia_gift_card.dart';
 import 'package:cake_wallet/ionia/ionia_tip.dart';
 import 'package:cake_wallet/src/screens/buy/onramper_page.dart';
+import 'package:cake_wallet/src/screens/dashboard/desktop_dashboard_page.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_wallet_selection_dropdown.dart';
 import 'package:cake_wallet/src/screens/dashboard/widgets/transactions_page.dart';
 import 'package:cake_wallet/src/screens/settings/display_settings_page.dart';
@@ -368,7 +369,12 @@ Future setup(
   getIt.registerFactory(() =>
    BalancePage(dashboardViewModel: getIt.get<DashboardViewModel>(), settingsStore: getIt.get<SettingsStore>()));
 
-  getIt.registerFactory<DashboardPage>(() => DashboardPage( balancePage: getIt.get<BalancePage>(), walletViewModel: getIt.get<DashboardViewModel>(), addressListViewModel: getIt.get<WalletAddressListViewModel>()));
+  getIt.registerFactory<DashboardPage>(() => DashboardPage(
+      balancePage: getIt.get<BalancePage>(), 
+      walletViewModel: getIt.get<DashboardViewModel>(), 
+      addressListViewModel: getIt.get<WalletAddressListViewModel>(),
+      desktopSidebarViewModel: getIt.get<DesktopSidebarViewModel>(),
+    ));
   getIt.registerFactory<TransactionsPage>(() => TransactionsPage(dashboardViewModel: getIt.get<DashboardViewModel>()));
   getIt.registerFactory<ReceivePage>(() => ReceivePage(
       addressListViewModel: getIt.get<WalletAddressListViewModel>()));

lib/src/screens/dashboard/dashboard_page.dart

@@ -25,21 +25,23 @@ import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:mobx/mobx.dart';
 import 'package:smooth_page_indicator/smooth_page_indicator.dart';
 import 'package:cake_wallet/main.dart';
+import 'package:cake_wallet/router.dart' as Router;
 
 class DashboardPage extends StatelessWidget {
   DashboardPage({
     required this.balancePage,
     required this.walletViewModel,
     required this.addressListViewModel,
+    required this.desktopSidebarViewModel,
   });
 
   final BalancePage balancePage;
   final DashboardViewModel walletViewModel;
   final WalletAddressListViewModel addressListViewModel;
+  final DesktopSidebarViewModel desktopSidebarViewModel;
 
   @override
   Widget build(BuildContext context) {
-    final desktopSidebarViewModel = getIt<DesktopSidebarViewModel>();
     return Scaffold(
       body: ResponsiveLayoutUtil.instance.isMobile(context)
           ? _DashboardPageView(
@@ -49,6 +51,7 @@ class DashboardPage extends StatelessWidget {
             )
           : DesktopSidebarWrapper(
               desktopSidebarViewModel: desktopSidebarViewModel,
+              dashboardViewModel: walletViewModel,
               child: DesktopDashboardPage(
                 desktopSidebarViewModel: desktopSidebarViewModel,
                 balancePage: balancePage,

lib/src/screens/dashboard/desktop_dashboard_page.dart

@@ -1,9 +1,6 @@
 import 'dart:async';
-import 'package:cake_wallet/di.dart';
-import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_wallet_selection_dropdown.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_dashboard_view.dart';
 import 'package:cake_wallet/generated/i18n.dart';
-import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/src/screens/yat_emoji_id.dart';
 import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
 import 'package:cake_wallet/themes/theme_base.dart';
@@ -13,9 +10,7 @@ import 'package:flutter/material.dart';
 import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart';
-import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator.dart';
 import 'package:cake_wallet/view_model/wallet_address_list/wallet_address_list_view_model.dart';
-import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:mobx/mobx.dart';
 import 'package:cake_wallet/main.dart';
 
@@ -34,64 +29,12 @@ class DesktopDashboardPage extends BasePage {
   @override
   Color get backgroundDarkColor => Colors.transparent;
 
-  @override
-  Widget Function(BuildContext, Widget) get rootWrapper =>
-      (BuildContext context, Widget scaffold) => Container(
-          decoration: BoxDecoration(
-              gradient: LinearGradient(colors: [
-            Theme.of(context).accentColor,
-            Theme.of(context).scaffoldBackgroundColor,
-            Theme.of(context).primaryColor,
-          ], begin: Alignment.topRight, end: Alignment.bottomLeft)),
-          child: scaffold);
 
   @override
   bool get resizeToAvoidBottomInset => false;
 
-  @override
-  Widget? leading(BuildContext context) => getIt<DesktopWalletSelectionDropDown>();
   
-  @override
-  Widget middle(BuildContext context) {
-    return SyncIndicator(
-        dashboardViewModel: walletViewModel,
-        onTap: () => Navigator.of(context, rootNavigator: true).pushNamed(Routes.connectionSync));
-  }
   
-  @override
-  Widget trailing(BuildContext context) {
-    final selectedIconPath = 'assets/images/desktop_transactions_solid_icon.png';
-    final unselectedIconPath = 'assets/images/desktop_transactions_outline_icon.png';
-
-    return InkWell(
-      onTap: () {
-        String? currentPath;
-
-        desktopKey.currentState?.popUntil((route) {
-          currentPath = route.settings.name;
-          return true;
-        });
-
-        if (currentPath == Routes.transactionsPage) {
-           desktopSidebarViewModel.resetSidebar();
-           return;   
-       }
-        desktopSidebarViewModel.onPageChange(SidebarItem.transactions);
-
-        desktopKey.currentState!.pushNamed(Routes.transactionsPage);
-      
-      },
-      child: Observer(
-        builder: (_) {
-          return Image.asset(
-            desktopSidebarViewModel.currentPage == SidebarItem.transactions
-                ? selectedIconPath
-                : unselectedIconPath,
-          );
-        },
-      ),
-    );
-  }
 
   final BalancePage balancePage;
   final DashboardViewModel walletViewModel;

lib/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu.dart

@@ -6,19 +6,21 @@ class SideMenu extends StatelessWidget {
     super.key,
     required this.topItems,
     required this.bottomItems,
+    required this.width,
   });
+  
   final List<SideMenuItem> topItems;
   final List<SideMenuItem> bottomItems;
+  final double width;
 
   @override
   Widget build(BuildContext context) {
     return Container(
       color: Colors.black.withOpacity(0.1),
-      width: 76,
+      width: width,
       height: MediaQuery.of(context).size.height,
       child: Column(
         children: [
-          SizedBox(height: 20),
           ...topItems,
           Spacer(),
           ...bottomItems,

lib/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu_item.dart

@@ -12,9 +12,7 @@ class SideMenuItem extends StatelessWidget {
   final String iconPath;
   final bool isSelected;
 
-  @override
+   Color _setColor(BuildContext context) {
-  Widget build(BuildContext context) {
-    Color _setColor() {
       if (isSelected) {
         return Theme.of(context).primaryTextTheme.headline6!.color!;
       } else {
@@ -22,6 +20,8 @@ class SideMenuItem extends StatelessWidget {
       }
     }
 
+  @override
+  Widget build(BuildContext context) {
     return InkWell(
       child: Padding(
         padding: EdgeInsets.all(20),
@@ -30,7 +30,7 @@ class SideMenuItem extends StatelessWidget {
           fit: BoxFit.cover,
           height: 30,
           width: 30,
-          color: _setColor(),
+          color: _setColor(context),
         ),
       ),
       onTap: () => onTap.call(),

lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart

@@ -1,23 +1,110 @@
+import 'package:cake_wallet/di.dart';
 import 'package:cake_wallet/routes.dart';
+import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_dashboard_view.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu_item.dart';
+import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_wallet_selection_dropdown.dart';
+import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator.dart';
+import 'package:cake_wallet/themes/theme_base.dart';
+import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
 import 'package:cake_wallet/view_model/dashboard/desktop_sidebar_view_model.dart';
 import 'package:flutter/material.dart';
-import 'package:cake_wallet/router.dart' as Router;
 import 'package:flutter_mobx/flutter_mobx.dart';
+import 'package:cake_wallet/router.dart' as Router;
 import 'package:mobx/mobx.dart';
 
-class DesktopSidebarWrapper extends StatelessWidget {
+class DesktopSidebarWrapper extends BasePage {
   final Widget child;
   final DesktopSidebarViewModel desktopSidebarViewModel;
+  final DashboardViewModel dashboardViewModel;
 
-  const DesktopSidebarWrapper({required this.child, required this.desktopSidebarViewModel});
+  DesktopSidebarWrapper({
+    required this.child,
+    required this.desktopSidebarViewModel,
+    required this.dashboardViewModel,
+  });
 
   @override
-  Widget build(BuildContext context) {
+  Color get backgroundLightColor =>
+      currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white;
+
+  @override
+  Color get backgroundDarkColor => Colors.transparent;
+
   final pageController = PageController();
 
+  final selectedIconPath = 'assets/images/desktop_transactions_solid_icon.png';
+  final unselectedIconPath = 'assets/images/desktop_transactions_outline_icon.png';
+  double get sideMenuWidth => 76.0;
+
+  @override
+  Widget Function(BuildContext, Widget) get rootWrapper =>
+      (BuildContext context, Widget scaffold) => Container(
+            decoration: BoxDecoration(
+              gradient: LinearGradient(
+                colors: [
+                  Theme.of(context).accentColor,
+                  Theme.of(context).scaffoldBackgroundColor,
+                  Theme.of(context).primaryColor,
+                ],
+                begin: Alignment.topRight,
+                end: Alignment.bottomLeft,
+              ),
+            ),
+            child: scaffold,
+          );
+
+  @override
+  Widget? leading(BuildContext context) => Padding(
+        padding: EdgeInsets.only(left: sideMenuWidth),
+        child: getIt<DesktopWalletSelectionDropDown>(),
+      );
+
+  @override
+  Widget middle(BuildContext context) {
+    return SyncIndicator(
+        dashboardViewModel: dashboardViewModel,
+        onTap: () => Navigator.of(context, rootNavigator: true).pushNamed(Routes.connectionSync));
+  }
+
+  @override
+  Widget trailing(BuildContext context) {
+    return InkWell(
+      onTap: () {
+        String? currentPath;
+
+        desktopKey.currentState?.popUntil((route) {
+          currentPath = route.settings.name;
+          return true;
+        });
+
+        switch (currentPath) {
+          case Routes.transactionsPage:
+            desktopSidebarViewModel.resetSidebar();
+            break;
+          default:
+            desktopSidebarViewModel.resetSidebar();
+            Future.delayed(Duration(milliseconds: 10), () {
+              desktopSidebarViewModel.onPageChange(SidebarItem.transactions);
+              desktopKey.currentState?.pushNamed(Routes.transactionsPage);
+            });
+        }
+      },
+      child: Observer(
+        builder: (_) {
+          return Image.asset(
+            desktopSidebarViewModel.currentPage == SidebarItem.transactions
+                ? selectedIconPath
+                : unselectedIconPath,
+          );
+        },
+      ),
+    );
+  }
+
+  @override
+  Widget body(BuildContext context) {
     reaction<SidebarItem>((_) => desktopSidebarViewModel.currentPage, (page) {
       String? currentPath;
 
@@ -33,11 +120,7 @@ class DesktopSidebarWrapper extends StatelessWidget {
         Navigator.of(desktopKey.currentContext!).pop();
       }
 
-      pageController.animateToPage(
+      pageController.jumpToPage(page.index);
-        page.index,
-        duration: Duration(milliseconds: 300),
-        curve: Curves.easeInOut,
-      );
     });
 
     return Row(
@@ -45,6 +128,7 @@ class DesktopSidebarWrapper extends StatelessWidget {
       children: [
         Observer(builder: (_) {
           return SideMenu(
+            width: sideMenuWidth,
             topItems: [
               SideMenuItem(
                 iconPath: 'assets/images/wallet_outline.png',
@@ -72,6 +156,7 @@ class DesktopSidebarWrapper extends StatelessWidget {
             children: [
               child,
               Container(
+                padding: EdgeInsets.all(20),
                 child: Navigator(
                   initialRoute: Routes.support,
                   onGenerateRoute: (settings) => Router.createRoute(settings),

lib/src/screens/settings/desktop_settings/dashboard_settings_page.dart

@@ -16,14 +16,12 @@ class DesktopSettingsPage extends StatefulWidget {
 }
 
 class _DesktopSettingsPageState extends State<DesktopSettingsPage> {
-  int itemCount = SettingActions.all.length;
+  final int itemCount = SettingActions.all.length;
   int? currentPage;
-  bool isTapped = false;
 
   void _onItemChange(int index) {
     setState(() {
       currentPage = index;
-      isTapped = true;
     });
   }
 
@@ -54,7 +52,7 @@ class _DesktopSettingsPageState extends State<DesktopSettingsPage> {
                           final isLastTile = index == itemCount;
                           return SettingActionButton(
                             isLastTile: isLastTile,
-                            selectionActive: isTapped,
+                            selectionActive: currentPage != null,
                             isSelected: currentPage == index,
                             isArrowVisible: true,
                             onTap: () {

lib/view_model/dashboard/desktop_sidebar_view_model.dart

@@ -3,13 +3,10 @@ import 'package:mobx/mobx.dart';
 part 'desktop_sidebar_view_model.g.dart';
 
 enum SidebarItem {
-  dashboard(0),
+  dashboard,
-  support(1),
+  support,
-  settings(2),
+  settings,
-  transactions(3);
+  transactions;
-
-  final int value;
-  const SidebarItem(this.value);
 }
 
 class DesktopSidebarViewModel = DesktopSidebarViewModelBase with _$DesktopSidebarViewModel;
@@ -23,6 +20,12 @@ abstract class DesktopSidebarViewModelBase with Store {
 
   @action
   void onPageChange(SidebarItem item) {
+    
+    if(currentPage == item){
+      resetSidebar();
+      
+      return;
+    }
     currentPage = item;
   }