mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2024-12-23 11:59:30 +00:00
minimize toggle desktop menu options
This commit is contained in:
parent
42ec269ee2
commit
6e84f8b253
5 changed files with 135 additions and 27 deletions
|
@ -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<Widget>((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<DesktopHomeView> {
|
||||
int currentViewIndex = 0;
|
||||
final List<Widget> 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]),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
|
|
@ -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<DesktopMenu> createState() => _DesktopMenuState();
|
||||
ConsumerState<DesktopMenu> createState() => _DesktopMenuState();
|
||||
}
|
||||
|
||||
class _DesktopMenuState extends State<DesktopMenu> {
|
||||
double _width = 225;
|
||||
class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
||||
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<DesktopMenu> {
|
|||
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<DesktopMenu> {
|
|||
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<DesktopMenu> {
|
|||
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<DesktopMenu> {
|
|||
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<DesktopMenu> {
|
|||
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<DesktopMenu> {
|
|||
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<DesktopMenu> {
|
|||
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<DesktopMenu> {
|
|||
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<DesktopMenu> {
|
|||
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<DesktopMenu> {
|
|||
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<DesktopMenu> {
|
|||
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,
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
|
@ -10,6 +10,7 @@ class DesktopMenuItem<T> 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<T> 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<T> 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,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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.
|
||||
|
|
Loading…
Reference in a new issue