Refactor TopBar: remove unused imports, simplify layout, and integrate employee info display
This commit is contained in:
parent
c6f45b8852
commit
1f221194cf
@ -1,6 +1,3 @@
|
||||
import 'package:get/get.dart';
|
||||
import 'package:marco/helpers/services/localizations/language.dart';
|
||||
import 'package:marco/helpers/theme/app_notifier.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/theme/theme_customizer.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
@ -12,23 +9,36 @@ import 'package:marco/helpers/widgets/my_dashed_divider.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/helpers/widgets/my_text_style.dart';
|
||||
import 'package:marco/images.dart';
|
||||
import 'package:marco/widgets/custom_pop_menu.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_lucide/flutter_lucide.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:marco/helpers/services/storage/local_storage.dart';
|
||||
import 'package:marco/model/employee_info.dart';
|
||||
import 'package:marco/helpers/widgets/avatar.dart';
|
||||
|
||||
class TopBar extends StatefulWidget {
|
||||
const TopBar({
|
||||
super.key, // this.onMenuIconTap,
|
||||
});
|
||||
const TopBar({super.key});
|
||||
|
||||
@override
|
||||
_TopBarState createState() => _TopBarState();
|
||||
}
|
||||
|
||||
class _TopBarState extends State<TopBar> with SingleTickerProviderStateMixin, UIMixin {
|
||||
class _TopBarState extends State<TopBar>
|
||||
with SingleTickerProviderStateMixin, UIMixin {
|
||||
Function? languageHideFn;
|
||||
EmployeeInfo? employeeInfo;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_loadEmployeeInfo();
|
||||
}
|
||||
|
||||
void _loadEmployeeInfo() {
|
||||
setState(() {
|
||||
employeeInfo = LocalStorage.getEmployeeInfo();
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@ -70,7 +80,11 @@ class _TopBarState extends State<TopBar> with SingleTickerProviderStateMixin, UI
|
||||
LucideIcons.search,
|
||||
size: 14,
|
||||
)),
|
||||
prefixIconConstraints: BoxConstraints(minWidth: 36, maxWidth: 36, minHeight: 32, maxHeight: 32),
|
||||
prefixIconConstraints: BoxConstraints(
|
||||
minWidth: 36,
|
||||
maxWidth: 36,
|
||||
minHeight: 32,
|
||||
maxHeight: 32),
|
||||
contentPadding: MySpacing.xy(16, 12),
|
||||
isCollapsed: true,
|
||||
floatingLabelBehavior: FloatingLabelBehavior.never),
|
||||
@ -82,37 +96,6 @@ class _TopBarState extends State<TopBar> with SingleTickerProviderStateMixin, UI
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
InkWell(
|
||||
onTap: () {
|
||||
ThemeCustomizer.setTheme(ThemeCustomizer.instance.theme == ThemeMode.dark ? ThemeMode.light : ThemeMode.dark);
|
||||
},
|
||||
child: Icon(
|
||||
ThemeCustomizer.instance.theme == ThemeMode.dark ? LucideIcons.sun : LucideIcons.moon,
|
||||
size: 18,
|
||||
color: topBarTheme.onBackground,
|
||||
),
|
||||
),
|
||||
MySpacing.width(12),
|
||||
CustomPopupMenu(
|
||||
backdrop: true,
|
||||
hideFn: (hide) => languageHideFn = hide,
|
||||
onChange: (_) {},
|
||||
offsetX: -36,
|
||||
menu: Padding(
|
||||
padding: MySpacing.xy(8, 8),
|
||||
child: Center(
|
||||
child: ClipRRect(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
child: Image.asset(
|
||||
'assets/lang/${ThemeCustomizer.instance.currentLanguage.locale.languageCode}.jpg',
|
||||
width: 24,
|
||||
height: 18,
|
||||
fit: BoxFit.cover,
|
||||
))),
|
||||
),
|
||||
menuBuilder: (_) => buildLanguageSelector(),
|
||||
),
|
||||
MySpacing.width(6),
|
||||
CustomPopupMenu(
|
||||
backdrop: true,
|
||||
@ -140,16 +123,17 @@ class _TopBarState extends State<TopBar> with SingleTickerProviderStateMixin, UI
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
MyContainer.rounded(
|
||||
paddingAll: 0,
|
||||
child: Image.asset(
|
||||
Images.avatars[0],
|
||||
height: 28,
|
||||
width: 28,
|
||||
fit: BoxFit.cover,
|
||||
)),
|
||||
Avatar(
|
||||
firstName: employeeInfo?.firstName ?? 'First',
|
||||
lastName: employeeInfo?.lastName ?? 'Name',
|
||||
size: 31,
|
||||
),
|
||||
MySpacing.width(8),
|
||||
MyText.labelLarge("Den")
|
||||
MyText.labelSmall(
|
||||
"${employeeInfo?.firstName ?? 'First Name'} ${employeeInfo?.lastName ?? 'Last Name'}",
|
||||
fontWeight: 600,
|
||||
muted: true,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
@ -164,50 +148,15 @@ class _TopBarState extends State<TopBar> with SingleTickerProviderStateMixin, UI
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildLanguageSelector() {
|
||||
return MyContainer.bordered(
|
||||
padding: MySpacing.xy(8, 8),
|
||||
width: 125,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: Language.languages
|
||||
.map((language) => MyButton.text(
|
||||
padding: MySpacing.xy(8, 4),
|
||||
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||
splashColor: contentTheme.onBackground.withAlpha(20),
|
||||
onPressed: () async {
|
||||
languageHideFn?.call();
|
||||
// Language.changeLanguage(language);
|
||||
await Provider.of<AppNotifier>(context, listen: false).changeLanguage(language, notify: true);
|
||||
ThemeCustomizer.notify();
|
||||
setState(() {});
|
||||
},
|
||||
child: Row(
|
||||
children: [
|
||||
ClipRRect(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
child: Image.asset(
|
||||
'assets/lang/${language.locale.languageCode}.jpg',
|
||||
width: 18,
|
||||
height: 14,
|
||||
fit: BoxFit.cover,
|
||||
)),
|
||||
MySpacing.width(8),
|
||||
MyText.labelMedium(language.languageName)
|
||||
],
|
||||
),
|
||||
))
|
||||
.toList(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildNotifications() {
|
||||
Widget buildNotification(String title, String description) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [MyText.labelLarge(title), MySpacing.height(4), MyText.bodySmall(description)],
|
||||
children: [
|
||||
MyText.labelLarge(title),
|
||||
MySpacing.height(4),
|
||||
MyText.bodySmall(description)
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
@ -221,23 +170,29 @@ class _TopBarState extends State<TopBar> with SingleTickerProviderStateMixin, UI
|
||||
padding: MySpacing.xy(16, 12),
|
||||
child: MyText.titleMedium("Notification", fontWeight: 600),
|
||||
),
|
||||
MyDashedDivider(height: 1, color: theme.dividerColor, dashSpace: 4, dashWidth: 6),
|
||||
MyDashedDivider(
|
||||
height: 1, color: theme.dividerColor, dashSpace: 4, dashWidth: 6),
|
||||
Padding(
|
||||
padding: MySpacing.xy(16, 12),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
buildNotification("Your order is dispatched", "Order #5678 is on its way"),
|
||||
buildNotification("Missed Check-in",
|
||||
"You missed check-in for Project Alpha on 21 May 2025."),
|
||||
MySpacing.height(12),
|
||||
buildNotification("Account Security Alert", "New device logged into your account."),
|
||||
buildNotification("Approval Required",
|
||||
"Regularization request pending approval for 20 May 2025."),
|
||||
MySpacing.height(12),
|
||||
buildNotification("Event Reminder", "Your event 'Flutter Workshop' is tomorrow at 10:00 AM."),
|
||||
buildNotification("Attendance Reminder",
|
||||
"Please check out before 6:00 PM today."),
|
||||
MySpacing.height(12),
|
||||
buildNotification("Payment Successful", "Your payment of \$45 has been successfully processed."),
|
||||
buildNotification("Late Check-out",
|
||||
"Your last check-out on 19 May 2025 was late by 15 minutes."),
|
||||
],
|
||||
),
|
||||
),
|
||||
MyDashedDivider(height: 1, color: theme.dividerColor, dashSpace: 4, dashWidth: 6),
|
||||
MyDashedDivider(
|
||||
height: 1, color: theme.dividerColor, dashSpace: 4, dashWidth: 6),
|
||||
Padding(
|
||||
padding: MySpacing.xy(16, 0),
|
||||
child: Row(
|
||||
@ -324,111 +279,9 @@ class _TopBarState extends State<TopBar> with SingleTickerProviderStateMixin, UI
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(4),
|
||||
MyButton(
|
||||
onPressed: () => {},
|
||||
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||
borderRadiusAll: AppStyle.buttonRadius.medium,
|
||||
padding: MySpacing.xy(8, 4),
|
||||
splashColor: colorScheme.onSurface.withAlpha(20),
|
||||
backgroundColor: Colors.transparent,
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
LucideIcons.bell,
|
||||
size: 14,
|
||||
color: contentTheme.onBackground,
|
||||
),
|
||||
MySpacing.width(8),
|
||||
MyText.labelMedium(
|
||||
"Notifications",
|
||||
fontWeight: 600,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(4),
|
||||
MyButton(
|
||||
onPressed: () => {},
|
||||
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||
borderRadiusAll: AppStyle.buttonRadius.medium,
|
||||
padding: MySpacing.xy(8, 4),
|
||||
splashColor: colorScheme.onSurface.withAlpha(20),
|
||||
backgroundColor: Colors.transparent,
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
LucideIcons.message_circle,
|
||||
size: 14,
|
||||
color: contentTheme.onBackground,
|
||||
),
|
||||
MySpacing.width(8),
|
||||
MyText.labelMedium(
|
||||
"Messages",
|
||||
fontWeight: 600,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(4),
|
||||
MyButton(
|
||||
onPressed: () => {},
|
||||
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||
borderRadiusAll: AppStyle.buttonRadius.medium,
|
||||
padding: MySpacing.xy(8, 4),
|
||||
splashColor: colorScheme.onSurface.withAlpha(20),
|
||||
backgroundColor: Colors.transparent,
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
LucideIcons.circle_help,
|
||||
size: 14,
|
||||
color: contentTheme.onBackground,
|
||||
),
|
||||
MySpacing.width(8),
|
||||
MyText.labelMedium(
|
||||
"Help & Support",
|
||||
fontWeight: 600,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Divider(
|
||||
height: 1,
|
||||
thickness: 1,
|
||||
),
|
||||
Padding(
|
||||
padding: MySpacing.xy(8, 8),
|
||||
child: MyButton(
|
||||
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||
onPressed: () {
|
||||
languageHideFn?.call();
|
||||
Get.offNamed('/auth/login');
|
||||
},
|
||||
borderRadiusAll: AppStyle.buttonRadius.medium,
|
||||
padding: MySpacing.xy(8, 4),
|
||||
splashColor: contentTheme.danger.withAlpha(28),
|
||||
backgroundColor: Colors.transparent,
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
LucideIcons.log_out,
|
||||
size: 14,
|
||||
color: contentTheme.danger,
|
||||
),
|
||||
MySpacing.width(8),
|
||||
MyText.labelMedium(
|
||||
"Log out",
|
||||
fontWeight: 600,
|
||||
color: contentTheme.danger,
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
|
Loading…
x
Reference in New Issue
Block a user