diff --git a/assets/icons/account_setting.svg b/assets/icons/account_setting.svg new file mode 100644 index 00000000..0b27b849 --- /dev/null +++ b/assets/icons/account_setting.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/icons/logo-grey.svg b/assets/icons/logo-grey.svg new file mode 100644 index 00000000..4f835d2d --- /dev/null +++ b/assets/icons/logo-grey.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/settings.svg b/assets/icons/settings.svg new file mode 100644 index 00000000..c626454d --- /dev/null +++ b/assets/icons/settings.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/sign_out.svg b/assets/icons/sign_out.svg new file mode 100644 index 00000000..5980d13e --- /dev/null +++ b/assets/icons/sign_out.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/utils/constants/assets.dart b/lib/utils/constants/assets.dart index 4ac64bb6..14f7a15e 100644 --- a/lib/utils/constants/assets.dart +++ b/lib/utils/constants/assets.dart @@ -168,4 +168,16 @@ class Assets { //assets/icons/2gang.svg static const String twoGang = 'assets/icons/2gang.svg'; + + //assets/icons/account_setting.svg + static const String accountSetting = 'assets/icons/account_setting.svg'; + + //assets/icons/settings.svg + static const String settings = 'assets/icons/settings.svg'; + + //assets/icons/sign_out.svg + static const String signOut = 'assets/icons/sign_out.svg'; + + //assets/icons/logo_grey.svg + static const String logoGrey = 'assets/icons/logo-grey.svg'; } diff --git a/lib/utils/user_drop_down_menu.dart b/lib/utils/user_drop_down_menu.dart new file mode 100644 index 00000000..dab01fd8 --- /dev/null +++ b/lib/utils/user_drop_down_menu.dart @@ -0,0 +1,224 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:go_router/go_router.dart'; +import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart'; +import 'package:syncrow_web/pages/auth/model/user_model.dart'; +import 'package:syncrow_web/pages/common/buttons/default_button.dart'; +import 'package:syncrow_web/utils/color_manager.dart'; +import 'package:syncrow_web/utils/constants/assets.dart'; +import 'package:syncrow_web/utils/constants/routes_const.dart'; +import 'package:syncrow_web/utils/extension/build_context_x.dart'; + +class UserDropdownMenu extends StatefulWidget { + const UserDropdownMenu({super.key, required this.user}); + final UserModel? user; + + @override + _UserDropdownMenuState createState() => _UserDropdownMenuState(); +} + +class _UserDropdownMenuState extends State { + bool _isDropdownOpen = false; + + void _toggleDropdown() { + setState(() { + _isDropdownOpen = !_isDropdownOpen; + }); + } + + @override + Widget build(BuildContext context) { + return Column( + mainAxisSize: MainAxisSize.min, + children: [ + GestureDetector( + onTap: () async { + _toggleDropdown(); + await _showPopupMenu(context); + setState(() { + _isDropdownOpen = false; + }); + }, + child: Transform.rotate( + angle: _isDropdownOpen ? -1.5708 : 1.5708, + child: const Icon( + Icons.arrow_forward_ios, + color: Colors.white, + size: 16, + ), + ), + ), + ], + ); + } + + Future _showPopupMenu(BuildContext context) async { + final RenderBox overlay = Overlay.of(context).context.findRenderObject() as RenderBox; + final RelativeRect position = RelativeRect.fromRect( + Rect.fromLTRB( + overlay.size.width, + 75, + 0, + overlay.size.height, + ), + Offset.zero & overlay.size, + ); + + await showMenu( + context: context, + position: position, + color: ColorsManager.whiteColors, + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.only( + bottomRight: Radius.circular(10), + bottomLeft: Radius.circular(10), + ), + ), + items: [ + PopupMenuItem( + onTap: () {}, + child: ListTile( + leading: SvgPicture.asset(Assets.accountSetting), + title: Text( + "Account Settings", + style: context.textTheme.bodyMedium, + ), + ), + ), + PopupMenuItem( + onTap: () {}, + child: ListTile( + leading: SvgPicture.asset(Assets.settings), + title: Text( + "Settings", + style: context.textTheme.bodyMedium, + ), + ), + ), + PopupMenuItem( + onTap: () { + showDialog( + context: context, + builder: (BuildContext context) { + final size = MediaQuery.of(context).size; + return AlertDialog( + alignment: Alignment.center, + content: SizedBox( + height: 250, + width: 500, + child: Padding( + padding: const EdgeInsets.all(40), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + SvgPicture.asset( + Assets.blackLogo, + height: 40, + width: 200, + ), + Padding( + padding: const EdgeInsets.only(top: 8.0), + child: Text( + 'Log out of your Syncrow account', + style: Theme.of(context).textTheme.bodyMedium!.copyWith( + fontSize: 14, + fontWeight: FontWeight.w400, + color: Colors.black, + ), + ), + ), + ListTile( + leading: SizedBox.square( + dimension: 80, + child: CircleAvatar( + backgroundColor: ColorsManager.whiteColors, + child: SizedBox.square( + dimension: 78, + child: SvgPicture.asset( + Assets.logoGrey, + fit: BoxFit.fitHeight, + height: 80, + ), + ), + ), + ), + title: Text( + '${widget.user?.firstName ?? ''} ${widget.user?.lastName}', + style: Theme.of(context).textTheme.titleMedium!.copyWith( + color: Colors.black, + fontWeight: FontWeight.bold, + fontSize: 20, + ), + ), + subtitle: Text( + ' ${widget.user?.email}', + style: Theme.of(context).textTheme.bodySmall!.copyWith( + color: Colors.black, + ), + ), + ), + ], + ), + ), + ), + actionsAlignment: MainAxisAlignment.center, + actions: [ + SizedBox( + width: 200, + child: GestureDetector( + onTap: () { + context.pop(); + }, + child: DefaultButton( + backgroundColor: ColorsManager.boxColor, + elevation: 1, + child: Text( + 'Cancel', + style: Theme.of(context).textTheme.bodyMedium!.copyWith( + fontSize: 12, + color: Colors.black, + ), + ), + ), + ), + ), + const SizedBox( + height: 10, + ), + GestureDetector( + onTap: () { + AuthBloc.logout(); + context.go(RoutesConst.auth); + }, + child: SizedBox( + width: 200, + child: DefaultButton( + elevation: 1, + child: Text( + 'Logout', + style: + Theme.of(context).textTheme.bodyMedium!.copyWith(fontSize: 12, color: Colors.white), + ), + ), + ), + ), + ]); + }, + ); + }, + child: ListTile( + leading: SvgPicture.asset(Assets.signOut), + title: Text( + "Log Out", + style: context.textTheme.bodyMedium, + ), + ), + ), + ], + ).then((value) { + setState(() { + _isDropdownOpen = false; + }); + }); + } +} diff --git a/lib/web_layout/web_app_bar.dart b/lib/web_layout/web_app_bar.dart index 1052a23d..777b0931 100644 --- a/lib/web_layout/web_app_bar.dart +++ b/lib/web_layout/web_app_bar.dart @@ -1,14 +1,12 @@ import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; -import 'package:go_router/go_router.dart'; -import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart'; -import 'package:syncrow_web/pages/common/buttons/default_button.dart'; -import 'package:syncrow_web/pages/common/custom_dialog.dart'; +import 'package:flutter_svg/flutter_svg.dart'; import 'package:syncrow_web/pages/home/bloc/home_bloc.dart'; import 'package:syncrow_web/pages/home/bloc/home_state.dart'; import 'package:syncrow_web/utils/color_manager.dart'; -import 'package:syncrow_web/utils/constants/routes_const.dart'; +import 'package:syncrow_web/utils/constants/assets.dart'; import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart'; +import 'package:syncrow_web/utils/user_drop_down_menu.dart'; class WebAppBar extends StatefulWidget { final Widget? title; @@ -58,15 +56,15 @@ class _WebAppBarState extends State with HelperResponsiveLayout { if (widget.rightBody != null) widget.rightBody!, Row( children: [ - const SizedBox.square( + SizedBox.square( dimension: 40, child: CircleAvatar( - backgroundColor: Colors.white, + backgroundColor: ColorsManager.whiteColors, child: SizedBox.square( dimension: 35, - child: CircleAvatar( - backgroundColor: Colors.grey, - child: FlutterLogo(), + child: SvgPicture.asset( + Assets.logoGrey, + fit: BoxFit.cover, ), ), ), @@ -112,15 +110,15 @@ class _WebAppBarState extends State with HelperResponsiveLayout { const SizedBox( width: 10, ), - const SizedBox.square( + SizedBox.square( dimension: 40, child: CircleAvatar( - backgroundColor: Colors.white, + backgroundColor: ColorsManager.whiteColors, child: SizedBox.square( dimension: 35, - child: CircleAvatar( - backgroundColor: Colors.grey, - child: FlutterLogo(), + child: SvgPicture.asset( + Assets.logoGrey, + fit: BoxFit.cover, ), ), ), @@ -136,54 +134,55 @@ class _WebAppBarState extends State with HelperResponsiveLayout { const SizedBox( width: 10, ), - GestureDetector( - onTap: () { - showCustomDialog( - context: context, - barrierDismissible: true, - title: 'Logout', - message: 'Are you sure you want to logout?', - actions: [ - GestureDetector( - onTap: () { - AuthBloc.logout(); - context.go(RoutesConst.auth); - }, - child: DefaultButton( - child: Text( - 'Ok', - style: Theme.of(context) - .textTheme - .bodyMedium! - .copyWith(fontSize: 12, color: Colors.white), - ), - ), - ), - const SizedBox( - height: 10, - ), - GestureDetector( - onTap: () { - context.pop(); - }, - child: DefaultButton( - child: Text( - 'Cancel', - style: Theme.of(context) - .textTheme - .bodyMedium! - .copyWith(fontSize: 12, color: Colors.white), - ), - ), - ), - ], - ); - }, - child: const Icon( - Icons.logout, - color: ColorsManager.whiteColors, - ), - ) + UserDropdownMenu(user: user), + // GestureDetector( + // onTap: () { + // showCustomDialog( + // context: context, + // barrierDismissible: true, + // title: 'Logout', + // message: 'Are you sure you want to logout?', + // actions: [ + // GestureDetector( + // onTap: () { + // AuthBloc.logout(); + // context.go(RoutesConst.auth); + // }, + // child: DefaultButton( + // child: Text( + // 'Ok', + // style: Theme.of(context) + // .textTheme + // .bodyMedium! + // .copyWith(fontSize: 12, color: Colors.white), + // ), + // ), + // ), + // const SizedBox( + // height: 10, + // ), + // GestureDetector( + // onTap: () { + // context.pop(); + // }, + // child: DefaultButton( + // child: Text( + // 'Cancel', + // style: Theme.of(context) + // .textTheme + // .bodyMedium! + // .copyWith(fontSize: 12, color: Colors.white), + // ), + // ), + // ), + // ], + // ); + // }, + // child: const Icon( + // Icons.logout, + // color: ColorsManager.whiteColors, + // ), + // ) ], ), ],