Skip to content

Commit

Permalink
TF-2421 Update new UI for app bar email list view
Browse files Browse the repository at this point in the history
Signed-off-by: dab246 <[email protected]>
  • Loading branch information
dab246 committed Jan 5, 2024
1 parent 2d840f4 commit 062c124
Show file tree
Hide file tree
Showing 19 changed files with 281 additions and 336 deletions.
5 changes: 5 additions & 0 deletions assets/images/ic_mailbox_menu.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 0 additions & 5 deletions assets/images/ic_menu_mailbox.svg

This file was deleted.

1 change: 0 additions & 1 deletion core/lib/core.dart
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ export 'presentation/views/floating_button/scrolling_floating_button_animated.da
export 'presentation/views/html_viewer/html_content_viewer_on_web_widget.dart';
export 'presentation/views/html_viewer/html_content_viewer_widget.dart';
export 'presentation/views/image/avatar_builder.dart';
export 'presentation/views/image/icon_builder.dart';
export 'presentation/views/list/sliver_grid_delegate_fixed_height.dart';
export 'presentation/views/list/tree_view.dart';
export 'presentation/views/loading/cupertino_loading_widget.dart';
Expand Down
2 changes: 1 addition & 1 deletion core/lib/presentation/resources/image_paths.dart
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ class ImagePaths {
String get icAvatarPersonal => _getImagePath('ic_avatar_personal.svg');
String get icAvatarPersonalDelivering => _getImagePath('ic_avatar_personal_delivering.svg');
String get icDialogOfflineMode => _getImagePath('ic_dialog_offline_mode.svg');
String get icMenuMailbox => _getImagePath('ic_menu_mailbox.svg');
String get icMailboxMenu => _getImagePath('ic_mailbox_menu.svg');
String get icDelivering => _getImagePath('ic_delivering.svg');
String get icError => _getImagePath('ic_error.svg');
String get icConnectedInternet => _getImagePath('ic_connected_internet.svg');
Expand Down
13 changes: 11 additions & 2 deletions core/lib/presentation/utils/theme_utils.dart
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,17 @@ class ThemeUtils {
fontSize: 17,
letterSpacing: -0.15,
),
bodyMedium: TextStyle(color: AppColor.baseTextColor),
bodySmall: TextStyle(color: AppColor.baseTextColor),
titleLarge: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 28
),
bodyMedium: TextStyle(
fontWeight: FontWeight.w500,
),
bodySmall: TextStyle(
fontWeight: FontWeight.w500
),
headlineLarge: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 32,
Expand Down
157 changes: 65 additions & 92 deletions core/lib/presentation/views/image/avatar_builder.dart
Original file line number Diff line number Diff line change
@@ -1,105 +1,78 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:flutter/material.dart';

typedef OnTapAvatarActionClick = void Function();
typedef OnTapAvatarActionWithPositionClick = void Function(RelativeRect? position);
typedef OnTapActionClick = void Function();
typedef OnTapWithPositionAction = void Function(RelativeRect position);

class AvatarBuilder {
class AvatarBuilder extends StatelessWidget {
final String? text;
final double? size;
final Color? bgColor;
final Color? textColor;
final OnTapActionClick? onTapAction;
final OnTapWithPositionAction? onTapWithPositionAction;
final List<Color>? avatarColors;
final List<BoxShadow>? boxShadows;
final TextStyle? textStyle;

BuildContext? _context;
Key? _key;
String? _text;
double? _size;
Color? _bgColor;
Color? _textColor;
OnTapAvatarActionClick? _onTapAvatarActionClick;
OnTapAvatarActionWithPositionClick? _onTapAvatarActionWithPositionClick;
List<Color>? _avatarColors;
List<BoxShadow>? _boxShadows;
TextStyle? _textStyle;
const AvatarBuilder({
super.key,
this.text,
this.size,
this.bgColor,
this.textColor,
this.onTapAction,
this.onTapWithPositionAction,
this.avatarColors,
this.boxShadows,
this.textStyle
});

void key(Key key) {
_key = key;
}

void context(BuildContext context) {
_context = context;
}

void size(double size) {
_size = size;
}

void text(String text) {
_text = text;
}

void backgroundColor(Color bgColor) {
_bgColor = bgColor;
}

void textColor(Color textColor) {
_textColor = textColor;
}

void avatarColor(List<Color>? avatarColors) {
_avatarColors = avatarColors;
}

void addBoxShadows(List<BoxShadow>? boxShadows) {
_boxShadows = boxShadows;
}

void addTextStyle(TextStyle? textStyle) {
_textStyle = textStyle;
}

void addOnTapActionClick(OnTapAvatarActionClick onTapAvatarActionClick) {
_onTapAvatarActionClick = onTapAvatarActionClick;
}

void addOnTapAvatarActionWithPositionClick(OnTapAvatarActionWithPositionClick onTapAvatarActionWithPositionClick) {
_onTapAvatarActionWithPositionClick = onTapAvatarActionWithPositionClick;
}

Widget build() {
return InkWell(
onTap: () => _onTapAvatarActionClick != null ? _onTapAvatarActionClick!.call() : null,
onTapDown: (detail) {
if (_onTapAvatarActionWithPositionClick != null && _context != null) {
final screenSize = MediaQuery.of(_context!).size;
final offset = detail.globalPosition;
final position = RelativeRect.fromLTRB(
offset.dx,
offset.dy,
screenSize.width - offset.dx,
screenSize.height - offset.dy,
);
_onTapAvatarActionWithPositionClick?.call(position);
}
},
borderRadius: BorderRadius.circular((_size ?? 40) / 2),
child: Container(
key: _key,
width: _size ?? 40,
height: _size ?? 40,
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
@override
Widget build(BuildContext context) {
return Material(
type: MaterialType.transparency,
child: InkWell(
onTap: onTapAction,
onTapDown: (detail) {
if (onTapWithPositionAction != null) {
final screenSize = MediaQuery.of(context).size;
final offset = detail.globalPosition;
final position = RelativeRect.fromLTRB(
offset.dx,
offset.dy,
screenSize.width - offset.dx,
screenSize.height - offset.dy,
);
onTapWithPositionAction!(position);
}
},
customBorder: const CircleBorder(),
child: Container(
width: size ?? 40,
height: size ?? 40,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular((_size ?? 40) * 0.5),
border: Border.all(color: Colors.transparent),
boxShadow: _boxShadows ?? [],
gradient: _avatarColors?.isNotEmpty == true
? LinearGradient(begin: Alignment.topCenter, end: Alignment.bottomCenter, tileMode: TileMode.decal, colors: _avatarColors ?? [])
: null,
color: _bgColor ?? AppColor.avatarColor
decoration: ShapeDecoration(
shape: const CircleBorder(),
shadows: boxShadows ?? [],
gradient: avatarColors?.isNotEmpty == true
? LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
tileMode: TileMode.decal,
colors: avatarColors ?? [])
: null,
color: bgColor ?? AppColor.avatarColor
),
child: Text(
_text ?? '',
style: _textStyle ?? TextStyle(fontSize: 20, color: _textColor ?? AppColor.avatarTextColor, fontWeight: FontWeight.w500)
text ?? '',
style: textStyle ?? Theme.of(context).textTheme.bodyMedium?.copyWith(
fontSize: 20,
color: textColor ?? AppColor.avatarTextColor
)
)
),
),
);
}
}
}
55 changes: 0 additions & 55 deletions core/lib/presentation/views/image/icon_builder.dart

This file was deleted.

21 changes: 11 additions & 10 deletions lib/features/base/widget/email_avatar_builder.dart
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,16 @@ class EmailAvatarBuilder extends StatelessWidget {

@override
Widget build(BuildContext context) {
return (AvatarBuilder()
..text(emailSelected.getAvatarText())
..size(48)
..addTextStyle(const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 21,
color: Colors.white))
..backgroundColor(AppColor.colorAvatar)
..avatarColor(emailSelected.avatarColors))
.build();
return AvatarBuilder(
text: emailSelected.getAvatarText(),
size: 48,
textStyle: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 21,
color: Colors.white
),
bgColor: AppColor.colorAvatar,
avatarColors: emailSelected.avatarColors,
);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -84,15 +84,16 @@ class EmailAddressBottomSheetBuilder {
width: 24,
height: 24,
fit: BoxFit.fill))),
(AvatarBuilder()
..text(_emailAddress.asString().firstLetterToUpperCase)
..size(64)
..addTextStyle(const TextStyle(
fontWeight: FontWeight.w600,
fontSize: 23,
color: Colors.white))
..avatarColor(_emailAddress.avatarColors))
.build(),
AvatarBuilder(
text: _emailAddress.asString().firstLetterToUpperCase,
size: 64,
textStyle: const TextStyle(
fontWeight: FontWeight.w600,
fontSize: 23,
color: Colors.white
),
avatarColors: _emailAddress.avatarColors,
),
if (_emailAddress.displayName.isNotEmpty)
Padding(
padding: const EdgeInsets.only(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,16 +60,21 @@ class EmailAddressDialogBuilder extends StatelessWidget {
width: 24,
height: 24,
fit: BoxFit.fill))),
Padding(padding: const EdgeInsets.symmetric(horizontal: 16),
child: Center(child: (AvatarBuilder()
..text(_emailAddress.asString().firstLetterToUpperCase)
..size(64)
..addTextStyle(const TextStyle(
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Center(
child: AvatarBuilder(
text: _emailAddress.asString().firstLetterToUpperCase,
size: 64,
textStyle: const TextStyle(
fontWeight: FontWeight.w600,
fontSize: 23,
color: Colors.white))
..avatarColor(_emailAddress.avatarColors))
.build())),
color: Colors.white
),
avatarColors: _emailAddress.avatarColors,
)
)
),
if (_emailAddress.displayName.isNotEmpty)
Padding(
padding: const EdgeInsets.only(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,20 @@ class UserInformationWidget extends StatelessWidget {
padding: padding ?? const EdgeInsetsDirectional.only(start: 16, end: 4, top: 16, bottom: 16),
decoration: BoxDecoration(border: border),
child: Row(children: [
(AvatarBuilder()
..text(userProfile != null ? userProfile!.getAvatarText() : '')
..backgroundColor(Colors.white)
..textColor(Colors.black)
..addBoxShadows([const BoxShadow(
color: AppColor.colorShadowBgContentEmail,
spreadRadius: 1, blurRadius: 1, offset: Offset(0, 0.5))])
..size(PlatformInfo.isWeb ? 48 : 56))
.build(),
AvatarBuilder(
text: userProfile?.getAvatarText() ?? '',
size: PlatformInfo.isWeb ? 48 : 56,
textColor: Colors.black,
bgColor: Colors.white,
boxShadows: const [
BoxShadow(
color: AppColor.colorShadowBgContentEmail,
spreadRadius: 1,
blurRadius: 1,
offset: Offset(0, 0.5)
)
]
),
const SizedBox(width: 16),
Expanded(child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
Expand Down
Loading

0 comments on commit 062c124

Please sign in to comment.