From 992debc86ae98a2635af18551c20fd31cf0a10f7 Mon Sep 17 00:00:00 2001 From: julian Date: Wed, 26 Oct 2022 15:04:04 -0600 Subject: [PATCH] desktop menu icons update and exit functionality implemented --- assets/svg/about-desktop.svg | 3 + assets/svg/address-book-desktop.svg | 3 + assets/svg/exchange-desktop.svg | 3 + assets/svg/exit-desktop.svg | 3 + assets/svg/wallet-desktop.svg | 3 + .../home/desktop_home_view.dart | 3 - .../home/desktop_menu.dart | 303 +++++++++++------- lib/utilities/assets.dart | 5 + pubspec.yaml | 5 + 9 files changed, 208 insertions(+), 123 deletions(-) create mode 100644 assets/svg/about-desktop.svg create mode 100644 assets/svg/address-book-desktop.svg create mode 100644 assets/svg/exchange-desktop.svg create mode 100644 assets/svg/exit-desktop.svg create mode 100644 assets/svg/wallet-desktop.svg diff --git a/assets/svg/about-desktop.svg b/assets/svg/about-desktop.svg new file mode 100644 index 000000000..a80067d9c --- /dev/null +++ b/assets/svg/about-desktop.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svg/address-book-desktop.svg b/assets/svg/address-book-desktop.svg new file mode 100644 index 000000000..fb85e3e11 --- /dev/null +++ b/assets/svg/address-book-desktop.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svg/exchange-desktop.svg b/assets/svg/exchange-desktop.svg new file mode 100644 index 000000000..8eacfa84e --- /dev/null +++ b/assets/svg/exchange-desktop.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svg/exit-desktop.svg b/assets/svg/exit-desktop.svg new file mode 100644 index 000000000..abba264cd --- /dev/null +++ b/assets/svg/exit-desktop.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svg/wallet-desktop.svg b/assets/svg/wallet-desktop.svg new file mode 100644 index 000000000..0b0acdae3 --- /dev/null +++ b/assets/svg/wallet-desktop.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/pages_desktop_specific/home/desktop_home_view.dart b/lib/pages_desktop_specific/home/desktop_home_view.dart index 41f4b5041..6aa104081 100644 --- a/lib/pages_desktop_specific/home/desktop_home_view.dart +++ b/lib/pages_desktop_specific/home/desktop_home_view.dart @@ -43,9 +43,6 @@ class _DesktopHomeViewState extends ConsumerState { Container( color: Colors.pink, ), - Container( - color: Colors.purple, - ), ]; void onMenuSelectionChanged(int newIndex) { diff --git a/lib/pages_desktop_specific/home/desktop_menu.dart b/lib/pages_desktop_specific/home/desktop_menu.dart index b71c20f6e..7409a4156 100644 --- a/lib/pages_desktop_specific/home/desktop_menu.dart +++ b/lib/pages_desktop_specific/home/desktop_menu.dart @@ -1,3 +1,5 @@ +import 'dart:io'; + import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_svg/flutter_svg.dart'; @@ -70,136 +72,197 @@ class _DesktopMenuState extends ConsumerState { const SizedBox( height: 60, ), - SizedBox( - width: _width == expandedWidth - ? _width - 32 // 16 padding on either side - : _width - 16, // 8 padding on either side - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - DesktopMenuItem( - icon: SvgPicture.asset( - Assets.svg.walletFa, - width: 20, - height: 20, + Expanded( + child: SizedBox( + width: _width == expandedWidth + ? _width - 32 // 16 padding on either side + : _width - 16, // 8 padding on either side + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + DesktopMenuItem( + icon: SvgPicture.asset( + Assets.svg.walletDesktop, + width: 20, + height: 20, + color: 0 == selectedMenuItem + ? Theme.of(context) + .extension()! + .textDark + : Theme.of(context) + .extension()! + .textDark + .withOpacity(0.8), + ), + label: "My Stack", + value: 0, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + iconOnly: _width == minimizedWidth, ), - label: "My Stack", - value: 0, - group: selectedMenuItem, - onChanged: updateSelectedMenuItem, - iconOnly: _width == minimizedWidth, - ), - const SizedBox( - height: 2, - ), - DesktopMenuItem( - icon: SvgPicture.asset( - Assets.svg.exchange3, - width: 20, - height: 20, + const SizedBox( + height: 2, ), - label: "Exchange", - value: 1, - group: selectedMenuItem, - onChanged: updateSelectedMenuItem, - iconOnly: _width == minimizedWidth, - ), - const SizedBox( - height: 2, - ), - DesktopMenuItem( - icon: SvgPicture.asset( - Assets.svg.bell, - width: 20, - height: 20, + DesktopMenuItem( + icon: SvgPicture.asset( + Assets.svg.exchangeDesktop, + width: 20, + height: 20, + color: 1 == selectedMenuItem + ? Theme.of(context) + .extension()! + .textDark + : Theme.of(context) + .extension()! + .textDark + .withOpacity(0.8), + ), + label: "Exchange", + value: 1, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + iconOnly: _width == minimizedWidth, ), - label: "Notifications", - value: 2, - group: selectedMenuItem, - onChanged: updateSelectedMenuItem, - iconOnly: _width == minimizedWidth, - ), - const SizedBox( - height: 2, - ), - DesktopMenuItem( - icon: SvgPicture.asset( - Assets.svg.addressBook2, - width: 20, - height: 20, + const SizedBox( + height: 2, ), - label: "Address Book", - value: 3, - group: selectedMenuItem, - onChanged: updateSelectedMenuItem, - iconOnly: _width == minimizedWidth, - ), - const SizedBox( - height: 2, - ), - DesktopMenuItem( - icon: SvgPicture.asset( - Assets.svg.gear, - width: 20, - height: 20, + DesktopMenuItem( + icon: SvgPicture.asset( + Assets.svg.bell, + width: 20, + height: 20, + color: 2 == selectedMenuItem + ? Theme.of(context) + .extension()! + .textDark + : Theme.of(context) + .extension()! + .textDark + .withOpacity(0.8), + ), + label: "Notifications", + value: 2, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + iconOnly: _width == minimizedWidth, ), - label: "Settings", - value: 4, - group: selectedMenuItem, - onChanged: updateSelectedMenuItem, - iconOnly: _width == minimizedWidth, - ), - const SizedBox( - height: 2, - ), - DesktopMenuItem( - icon: SvgPicture.asset( - Assets.svg.messageQuestion, - width: 20, - height: 20, + const SizedBox( + height: 2, ), - label: "Support", - value: 5, - group: selectedMenuItem, - onChanged: updateSelectedMenuItem, - iconOnly: _width == minimizedWidth, - ), - const SizedBox( - height: 2, - ), - DesktopMenuItem( - icon: SvgPicture.asset( - Assets.svg.messageQuestion, - width: 20, - height: 20, + DesktopMenuItem( + icon: SvgPicture.asset( + Assets.svg.addressBookDesktop, + width: 20, + height: 20, + color: 3 == selectedMenuItem + ? Theme.of(context) + .extension()! + .textDark + : Theme.of(context) + .extension()! + .textDark + .withOpacity(0.8), + ), + label: "Address Book", + value: 3, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + iconOnly: _width == minimizedWidth, ), - label: "About", - value: 6, - group: selectedMenuItem, - onChanged: updateSelectedMenuItem, - iconOnly: _width == minimizedWidth, - ), - const SizedBox( - height: 2, - ), - DesktopMenuItem( - icon: SvgPicture.asset( - Assets.svg.messageQuestion, - width: 20, - height: 20, + const SizedBox( + height: 2, ), - label: "Exit", - value: 7, - group: selectedMenuItem, - onChanged: updateSelectedMenuItem, - iconOnly: _width == minimizedWidth, - ), - ], + DesktopMenuItem( + icon: SvgPicture.asset( + Assets.svg.gear, + width: 20, + height: 20, + color: 4 == selectedMenuItem + ? Theme.of(context) + .extension()! + .textDark + : Theme.of(context) + .extension()! + .textDark + .withOpacity(0.8), + ), + label: "Settings", + value: 4, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + iconOnly: _width == minimizedWidth, + ), + const SizedBox( + height: 2, + ), + DesktopMenuItem( + icon: SvgPicture.asset( + Assets.svg.messageQuestion, + width: 20, + height: 20, + color: 5 == selectedMenuItem + ? Theme.of(context) + .extension()! + .textDark + : Theme.of(context) + .extension()! + .textDark + .withOpacity(0.8), + ), + label: "Support", + value: 5, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + iconOnly: _width == minimizedWidth, + ), + const SizedBox( + height: 2, + ), + DesktopMenuItem( + icon: SvgPicture.asset( + Assets.svg.aboutDesktop, + width: 20, + height: 20, + color: 6 == selectedMenuItem + ? Theme.of(context) + .extension()! + .textDark + : Theme.of(context) + .extension()! + .textDark + .withOpacity(0.8), + ), + label: "About", + value: 6, + group: selectedMenuItem, + onChanged: updateSelectedMenuItem, + iconOnly: _width == minimizedWidth, + ), + const Spacer(), + DesktopMenuItem( + icon: SvgPicture.asset( + Assets.svg.exitDesktop, + width: 20, + height: 20, + color: Theme.of(context) + .extension()! + .textDark + .withOpacity(0.8), + ), + label: "Exit", + value: 7, + group: selectedMenuItem, + onChanged: (_) { + // todo: save stuff/ notify before exit? + exit(0); + }, + iconOnly: _width == minimizedWidth, + ), + ], + ), ), ), - const Spacer(), Row( - mainAxisAlignment: MainAxisAlignment.end, children: [ const Spacer(), IconButton( @@ -212,7 +275,7 @@ class _DesktopMenuState extends ConsumerState { ), ), ], - ) + ), ], ), ), diff --git a/lib/utilities/assets.dart b/lib/utilities/assets.dart index 2ada80a5d..ebe2d9848 100644 --- a/lib/utilities/assets.dart +++ b/lib/utilities/assets.dart @@ -139,6 +139,11 @@ class _SVG { String get anonymize => "assets/svg/tx-icon-anonymize.svg"; String get anonymizePending => "assets/svg/tx-icon-anonymize-pending.svg"; String get anonymizeFailed => "assets/svg/tx-icon-anonymize-failed.svg"; + String get addressBookDesktop => "assets/svg/address-book-desktop.svg"; + String get exchangeDesktop => "assets/svg/exchange-desktop.svg"; + String get aboutDesktop => "assets/svg/about-desktop.svg"; + String get walletDesktop => "assets/svg/wallet-desktop.svg"; + String get exitDesktop => "assets/svg/exit-desktop.svg"; String get ellipse1 => "assets/svg/Ellipse-43.svg"; String get ellipse2 => "assets/svg/Ellipse-42.svg"; diff --git a/pubspec.yaml b/pubspec.yaml index 35fbecf3f..aabf3f3de 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -301,6 +301,11 @@ flutter: - assets/svg/node-circle.svg - assets/svg/dark/dark-theme.svg - assets/svg/light/light-mode.svg + - assets/svg/address-book-desktop.svg + - assets/svg/about-desktop.svg + - assets/svg/exchange-desktop.svg + - assets/svg/wallet-desktop.svg + - assets/svg/exit-desktop.svg # coin icons - assets/svg/coin_icons/Bitcoin.svg - assets/svg/coin_icons/Bitcoincash.svg