Adjust menu navigation

This commit is contained in:
Hillel Coren 2022-05-23 11:53:01 +03:00
parent 349d071c2b
commit 71c08d7cb5
3 changed files with 101 additions and 89 deletions

View File

@ -104,7 +104,8 @@ const kProductPlans = [
const double kMobileLayoutWidth = 700; const double kMobileLayoutWidth = 700;
const double kMobileDialogPadding = 12; const double kMobileDialogPadding = 12;
const double kDrawerWidth = 272; const double kDrawerWidthMobile = 272;
const double kDrawerWidthDesktop = 220;
const double kTableColumnGap = 16; const double kTableColumnGap = 16;
const double kTopBottomBarHeight = 50; const double kTopBottomBarHeight = 50;
const double kDialogWidth = 400; const double kDialogWidth = 400;

View File

@ -49,7 +49,7 @@ class HistoryDrawer extends StatelessWidget {
} }
return SizedBox( return SizedBox(
width: kDrawerWidth, width: kDrawerWidthMobile,
child: Drawer( child: Drawer(
child: Scaffold( child: Scaffold(
appBar: AppBar( appBar: AppBar(

View File

@ -255,7 +255,11 @@ class MenuDrawer extends StatelessWidget {
return FocusTraversalGroup( return FocusTraversalGroup(
child: Container( child: Container(
width: state.isMenuCollapsed ? 65 : kDrawerWidth, width: state.isMenuCollapsed
? 65
: isDesktop(context)
? kDrawerWidthDesktop
: kDrawerWidthMobile,
child: Drawer( child: Drawer(
child: SafeArea( child: SafeArea(
child: Column( child: Column(
@ -565,7 +569,7 @@ class DrawerTile extends StatefulWidget {
} }
class _DrawerTileState extends State<DrawerTile> { class _DrawerTileState extends State<DrawerTile> {
//bool _isHovered = false; bool _isHovered = false;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -643,43 +647,76 @@ class _DrawerTileState extends State<DrawerTile> {
} }
} }
Widget trailingWidget; final onTap = () {
if (!state.isMenuCollapsed) { if (widget.entityType != null) {
if (widget.title == localization.dashboard) { viewEntitiesByType(
trailingWidget = IconButton( entityType: widget.entityType,
icon: Icon(
Icons.search,
color: textColor,
),
onPressed: () {
if (isMobile(context)) {
navigator.pop();
}
store.dispatch(ViewDashboard(
filter: uiState.mainRoute == 'dashboard' && uiState.filter == ''
? null
: ''));
},
); );
} else if (userCompany.canCreate(widget.entityType)) { } else {
trailingWidget = IconButton( widget.onTap();
tooltip: prefState.enableTooltips ? widget.iconTooltip : null, }
icon: Icon( };
Icons.add_circle_outline,
color: textColor, final onLongPress = () {
), if (widget.onLongPress != null) {
onPressed: () { widget.onLongPress();
if (isMobile(context)) { } else if (widget.entityType != null) {
navigator.pop(); createEntityByType(
} context: context,
createEntityByType( entityType: widget.entityType,
context: context, applyFilter: false,
entityType: widget.entityType,
applyFilter: false,
);
},
); );
} }
};
if (state.isMenuCollapsed) {
return InkWell(
onTap: onTap,
onLongPress: onLongPress,
child: SizedBox(
height: 40,
child: Icon(
widget.icon,
color: textColor,
),
));
}
Widget iconWidget;
if (widget.title == localization.dashboard) {
iconWidget = IconButton(
icon: Icon(
Icons.search,
color: textColor,
),
onPressed: () {
if (isMobile(context)) {
navigator.pop();
}
store.dispatch(ViewDashboard(
filter: uiState.mainRoute == 'dashboard' && uiState.filter == ''
? null
: ''));
},
);
} else if (userCompany.canCreate(widget.entityType)) {
iconWidget = IconButton(
tooltip: prefState.enableTooltips ? widget.iconTooltip : null,
icon: Icon(
Icons.add_circle_outline,
color: textColor,
),
onPressed: () {
if (isMobile(context)) {
navigator.pop();
}
createEntityByType(
context: context,
entityType: widget.entityType,
applyFilter: false,
);
},
);
} }
bool isLoading = false; bool isLoading = false;
@ -695,56 +732,30 @@ class _DrawerTileState extends State<DrawerTile> {
opacity: isSelected ? 1 : .8, opacity: isSelected ? 1 : .8,
child: ListTile( child: ListTile(
dense: true, dense: true,
leading: Padding( leading: _isHovered && isDesktop(context) && iconWidget != null
padding: const EdgeInsets.only(left: 4), ? iconWidget
child: isLoading : isLoading
? SizedBox( ? SizedBox(
child: CircularProgressIndicator(), child: CircularProgressIndicator(),
width: 22, width: 22,
height: 22, height: 22,
)
: Icon(
widget.icon,
size: 22,
color: textColor,
),
),
title: state.isMenuCollapsed
? SizedBox()
: Text(
widget.title,
key: ValueKey('menu_${widget.title}'),
style: Theme.of(context).textTheme.bodyText1.copyWith(
fontSize: 14,
color: textColor,
),
),
onTap: () {
if (widget.entityType != null) {
viewEntitiesByType(
entityType: widget.entityType,
);
} else {
widget.onTap();
}
},
onLongPress: () => widget.onLongPress != null
? widget.onLongPress()
: widget.entityType != null
? createEntityByType(
context: context,
entityType: widget.entityType,
applyFilter: false,
) )
: null, : IconButton(
/* icon: Icon(widget.icon),
trailing: _isHovered || color: textColor,
!RendererBinding.instance.mouseTracker.mouseIsConnected onPressed: onTap,
? trailingWidget ),
: null, title: Text(
widget.title,
*/ key: ValueKey('menu_${widget.title}'),
trailing: state.isMenuCollapsed ? null : trailingWidget, style: Theme.of(context).textTheme.bodyText1.copyWith(
fontSize: 14,
color: textColor,
),
),
onTap: onTap,
onLongPress: onLongPress,
trailing: isMobile(context) ? iconWidget : null,
), ),
), ),
); );
@ -757,8 +768,8 @@ class _DrawerTileState extends State<DrawerTile> {
} }
return MouseRegion( return MouseRegion(
//onEnter: (event) => setState(() => _isHovered = true), onEnter: (event) => setState(() => _isHovered = true),
//onExit: (event) => setState(() => _isHovered = false), onExit: (event) => setState(() => _isHovered = false),
child: child, child: child,
); );
} }