diff --git a/lib/pages_desktop_specific/home/desktop_home_view.dart b/lib/pages_desktop_specific/home/desktop_home_view.dart index 666db74b3..eaeea75a8 100644 --- a/lib/pages_desktop_specific/home/desktop_home_view.dart +++ b/lib/pages_desktop_specific/home/desktop_home_view.dart @@ -4,8 +4,6 @@ import 'package:stackwallet/pages_desktop_specific/home/desktop_menu.dart'; import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/my_stack_view.dart'; import 'package:stackwallet/utilities/cfcolors.dart'; -final homeContent = Provider((ref) => const MyStackView()); - class DesktopHomeView extends ConsumerStatefulWidget { const DesktopHomeView({Key? key}) : super(key: key); @@ -16,14 +14,50 @@ class DesktopHomeView extends ConsumerStatefulWidget { } class _DesktopHomeViewState extends ConsumerState { + int currentViewIndex = 0; + final List contentViews = [ + const MyStackView( + key: Key("myStackViewKey"), + ), + Container( + color: Colors.green, + ), + Container( + color: Colors.red, + ), + Container( + color: Colors.orange, + ), + Container( + color: Colors.yellow, + ), + Container( + color: Colors.blue, + ), + Container( + color: Colors.pink, + ), + Container( + color: Colors.purple, + ), + ]; + + void onMenuSelectionChanged(int newIndex) { + setState(() { + currentViewIndex = newIndex; + }); + } + @override Widget build(BuildContext context) { return Material( - color: CFColors.almostWhite, + color: CFColors.background, child: Row( children: [ - const DesktopMenu(), - Expanded(child: ref.watch(homeContent)), + DesktopMenu( + onSelectionChanged: onMenuSelectionChanged, + ), + Expanded(child: contentViews[currentViewIndex]), ], ), ); diff --git a/lib/pages_desktop_specific/home/desktop_menu.dart b/lib/pages_desktop_specific/home/desktop_menu.dart index 647e5a708..027fbfb2d 100644 --- a/lib/pages_desktop_specific/home/desktop_menu.dart +++ b/lib/pages_desktop_specific/home/desktop_menu.dart @@ -1,25 +1,41 @@ import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:stackwallet/pages_desktop_specific/home/desktop_menu_item.dart'; import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/cfcolors.dart'; import 'package:stackwallet/utilities/text_styles.dart'; -class DesktopMenu extends StatefulWidget { - const DesktopMenu({Key? key}) : super(key: key); +class DesktopMenu extends ConsumerStatefulWidget { + const DesktopMenu({ + Key? key, + required this.onSelectionChanged, + }) : super(key: key); + + final void Function(int)? onSelectionChanged; @override - State createState() => _DesktopMenuState(); + ConsumerState createState() => _DesktopMenuState(); } -class _DesktopMenuState extends State { - double _width = 225; +class _DesktopMenuState extends ConsumerState { + static const expandedWidth = 225.0; + static const minimizedWidth = 72.0; + + double _width = expandedWidth; int selectedMenuItem = 0; void updateSelectedMenuItem(int index) { setState(() { selectedMenuItem = index; }); + widget.onSelectionChanged?.call(index); + } + + void toggleMinimize() { + setState(() { + _width = _width == expandedWidth ? minimizedWidth : expandedWidth; + }); } @override @@ -31,12 +47,12 @@ class _DesktopMenuState extends State { child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ - const SizedBox( - height: 22, + SizedBox( + height: _width == expandedWidth ? 22 : 25, ), SizedBox( - width: 70, - height: 70, + width: _width == expandedWidth ? 70 : 32, + height: _width == expandedWidth ? 70 : 32, child: SvgPicture.asset( Assets.svg.stackIcon, ), @@ -45,7 +61,7 @@ class _DesktopMenuState extends State { height: 10, ), Text( - "Stack Wallet", + _width == expandedWidth ? "Stack Wallet" : "", style: STextStyles.desktopH2.copyWith( fontSize: 18, height: 23.4 / 18, @@ -55,7 +71,9 @@ class _DesktopMenuState extends State { height: 60, ), SizedBox( - width: _width - 32, // 16 padding on either side + width: _width == expandedWidth + ? _width - 32 // 16 padding on either side + : _width - 16, // 8 padding on either side child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ @@ -69,6 +87,10 @@ class _DesktopMenuState extends State { value: 0, group: selectedMenuItem, onChanged: updateSelectedMenuItem, + iconOnly: _width == minimizedWidth, + ), + const SizedBox( + height: 2, ), DesktopMenuItem( icon: SvgPicture.asset( @@ -80,6 +102,10 @@ class _DesktopMenuState extends State { value: 1, group: selectedMenuItem, onChanged: updateSelectedMenuItem, + iconOnly: _width == minimizedWidth, + ), + const SizedBox( + height: 2, ), DesktopMenuItem( icon: SvgPicture.asset( @@ -91,6 +117,10 @@ class _DesktopMenuState extends State { value: 2, group: selectedMenuItem, onChanged: updateSelectedMenuItem, + iconOnly: _width == minimizedWidth, + ), + const SizedBox( + height: 2, ), DesktopMenuItem( icon: SvgPicture.asset( @@ -102,6 +132,10 @@ class _DesktopMenuState extends State { value: 3, group: selectedMenuItem, onChanged: updateSelectedMenuItem, + iconOnly: _width == minimizedWidth, + ), + const SizedBox( + height: 2, ), DesktopMenuItem( icon: SvgPicture.asset( @@ -113,6 +147,10 @@ class _DesktopMenuState extends State { value: 4, group: selectedMenuItem, onChanged: updateSelectedMenuItem, + iconOnly: _width == minimizedWidth, + ), + const SizedBox( + height: 2, ), DesktopMenuItem( icon: SvgPicture.asset( @@ -124,6 +162,10 @@ class _DesktopMenuState extends State { value: 5, group: selectedMenuItem, onChanged: updateSelectedMenuItem, + iconOnly: _width == minimizedWidth, + ), + const SizedBox( + height: 2, ), DesktopMenuItem( icon: SvgPicture.asset( @@ -135,6 +177,10 @@ class _DesktopMenuState extends State { value: 6, group: selectedMenuItem, onChanged: updateSelectedMenuItem, + iconOnly: _width == minimizedWidth, + ), + const SizedBox( + height: 2, ), DesktopMenuItem( icon: SvgPicture.asset( @@ -146,10 +192,27 @@ class _DesktopMenuState extends State { value: 7, group: selectedMenuItem, onChanged: updateSelectedMenuItem, + iconOnly: _width == minimizedWidth, ), ], ), ), + const Spacer(), + Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + const Spacer(), + IconButton( + splashRadius: 18, + onPressed: toggleMinimize, + icon: SvgPicture.asset( + Assets.svg.minimize, + height: 12, + width: 12, + ), + ), + ], + ) ], ), ), diff --git a/lib/pages_desktop_specific/home/desktop_menu_item.dart b/lib/pages_desktop_specific/home/desktop_menu_item.dart index ec7f15921..d2f8169a4 100644 --- a/lib/pages_desktop_specific/home/desktop_menu_item.dart +++ b/lib/pages_desktop_specific/home/desktop_menu_item.dart @@ -10,6 +10,7 @@ class DesktopMenuItem extends StatelessWidget { required this.value, required this.group, required this.onChanged, + required this.iconOnly, }) : super(key: key); final Widget icon; @@ -17,6 +18,7 @@ class DesktopMenuItem extends StatelessWidget { final T value; final T group; final void Function(T) onChanged; + final bool iconOnly; @override Widget build(BuildContext context) { @@ -28,22 +30,26 @@ class DesktopMenuItem extends StatelessWidget { onChanged(value); }, child: Padding( - padding: const EdgeInsets.symmetric( + padding: EdgeInsets.symmetric( vertical: 16, - horizontal: 16, + horizontal: iconOnly ? 0 : 16, ), child: Row( + mainAxisAlignment: + iconOnly ? MainAxisAlignment.center : MainAxisAlignment.start, children: [ icon, - const SizedBox( - width: 12, - ), - Text( - label, - style: value == group - ? STextStyles.desktopMenuItemSelected - : STextStyles.desktopMenuItem, - ), + if (!iconOnly) + const SizedBox( + width: 12, + ), + if (!iconOnly) + Text( + label, + style: value == group + ? STextStyles.desktopMenuItemSelected + : STextStyles.desktopMenuItem, + ), ], ), ), diff --git a/lib/utilities/assets.dart b/lib/utilities/assets.dart index 72ceac3ca..034ae7d8d 100644 --- a/lib/utilities/assets.dart +++ b/lib/utilities/assets.dart @@ -110,6 +110,9 @@ class _SVG { String get firo => "assets/svg/coin_icons/Firo.svg"; String get monero => "assets/svg/coin_icons/Monero.svg"; + // desktop specific + String get minimize => "assets/svg/minimize.svg"; + // TODO provide proper assets String get bitcoinTestnet => "assets/svg/coin_icons/Bitcoin.svg"; String get firoTestnet => "assets/svg/coin_icons/Firo.svg"; diff --git a/pubspec.yaml b/pubspec.yaml index e5e69fb1b..69d1bb256 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -278,6 +278,8 @@ flutter: - assets/svg/socials/reddit-alien-brands.svg - assets/svg/socials/twitter-brands.svg - assets/svg/socials/telegram-brands.svg + # desktop specific + - assets/svg/minimize.svg # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware.