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