fix: handle overflows for users with a long name

This commit is contained in:
Freek van de Ven 2024-06-14 15:47:24 +02:00
parent d13a8013ac
commit d46c83e847
3 changed files with 39 additions and 58 deletions

View file

@ -3,6 +3,7 @@
- fix bug where you could make multiple groups quickly by routing back to the previous screen - fix bug where you could make multiple groups quickly by routing back to the previous screen
- fix bug where you would route back to the user selection screen insterad of routing back to the chat overview screen - fix bug where you would route back to the user selection screen insterad of routing back to the chat overview screen
- Add onPopInvoked callback to the userstory to add custom behaviour for the back button on the chatscreen - Add onPopInvoked callback to the userstory to add custom behaviour for the back button on the chatscreen
- Handle overflows for users with a long name.
## 3.0.0 ## 3.0.0

View file

@ -46,6 +46,8 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var theme = Theme.of(context);
var isNewDate = widget.previousMessage != null && var isNewDate = widget.previousMessage != null &&
widget.message.timestamp.day != widget.previousMessage?.timestamp.day; widget.message.timestamp.day != widget.previousMessage?.timestamp.day;
var isSameSender = widget.previousMessage == null || var isSameSender = widget.previousMessage == null ||
@ -54,7 +56,6 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
widget.message.timestamp.minute == widget.message.timestamp.minute ==
widget.previousMessage?.timestamp.minute; widget.previousMessage?.timestamp.minute;
var hasHeader = isNewDate || isSameSender; var hasHeader = isNewDate || isSameSender;
var theme = Theme.of(context);
return Padding( return Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
top: isNewDate || isSameSender ? 25.0 : 0, top: isNewDate || isSameSender ? 25.0 : 0,
@ -69,8 +70,7 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
), ),
child: Padding( child: Padding(
padding: const EdgeInsets.only(left: 10.0), padding: const EdgeInsets.only(left: 10.0),
child: widget.message.sender.imageUrl != null && child: widget.message.sender.imageUrl?.isNotEmpty ?? false
widget.message.sender.imageUrl!.isNotEmpty
? ChatImage( ? ChatImage(
image: widget.message.sender.imageUrl!, image: widget.message.sender.imageUrl!,
) )
@ -92,27 +92,24 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
children: [ children: [
if (isNewDate || isSameSender) if (isNewDate || isSameSender) ...[
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
if (widget.usernameBuilder != null) Expanded(
widget.usernameBuilder!( child: widget.usernameBuilder?.call(
widget.message.sender.fullName ?? "", widget.message.sender.fullName ?? "",
) ) ??
else Text(
Text( widget.message.sender.fullName ??
widget.message.sender.fullName ?? widget.translations.anonymousUser,
widget.translations.anonymousUser, style: TextStyle(
style: TextStyle( fontSize: 16,
fontSize: 16, fontWeight: FontWeight.w800,
fontWeight: FontWeight.w800, color: theme.textTheme.labelMedium?.color,
color: Theme.of(context) ),
.textTheme ),
.labelMedium ),
?.color,
),
),
Padding( Padding(
padding: const EdgeInsets.only(top: 5.0), padding: const EdgeInsets.only(top: 5.0),
child: Text( child: Text(
@ -129,6 +126,7 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
), ),
], ],
), ),
],
Padding( Padding(
padding: const EdgeInsets.only(top: 3.0), padding: const EdgeInsets.only(top: 3.0),
child: widget.message is ChatTextMessageModel child: widget.message is ChatTextMessageModel
@ -141,10 +139,7 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
(widget.message as ChatTextMessageModel).text, (widget.message as ChatTextMessageModel).text,
style: TextStyle( style: TextStyle(
fontSize: 16, fontSize: 16,
color: Theme.of(context) color: theme.textTheme.labelMedium?.color,
.textTheme
.labelMedium
?.color,
), ),
), ),
), ),

View file

@ -167,6 +167,12 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
future: widget.service.chatOverviewService.getChatById(widget.chatId), future: widget.service.chatOverviewService.getChatById(widget.chatId),
builder: (context, AsyncSnapshot<ChatModel> snapshot) { builder: (context, AsyncSnapshot<ChatModel> snapshot) {
var chatModel = snapshot.data; var chatModel = snapshot.data;
var chatTitle = (chatModel is GroupChatModel)
? chatModel.title
: (chatModel is PersonalChatModel)
? chatModel.user.firstName ?? widget.translations.anonymousUser
: "";
return Scaffold( return Scaffold(
backgroundColor: theme.colorScheme.surface, backgroundColor: theme.colorScheme.surface,
appBar: AppBar( appBar: AppBar(
@ -184,36 +190,12 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
), ),
title: GestureDetector( title: GestureDetector(
onTap: () => widget.onPressChatTitle.call(context, chatModel!), onTap: () => widget.onPressChatTitle.call(context, chatModel!),
child: Row( child: widget.chatTitleBuilder?.call(chatTitle) ??
mainAxisSize: MainAxisSize.min, Text(
children: chat == null chatTitle,
? [] style: theme.appBarTheme.titleTextStyle,
: [ overflow: TextOverflow.ellipsis,
Padding( ),
padding: (chatModel is GroupChatModel)
? const EdgeInsets.only(left: 15.5)
: EdgeInsets.zero,
child: widget.chatTitleBuilder != null
? widget.chatTitleBuilder!.call(
(chatModel is GroupChatModel)
? chatModel.title
: (chatModel is PersonalChatModel)
? chatModel.user.firstName ??
widget.translations.anonymousUser
: "",
)
: Text(
(chatModel is GroupChatModel)
? chatModel.title
: (chatModel is PersonalChatModel)
? chatModel.user.firstName ??
widget.translations.anonymousUser
: "",
style: theme.appBarTheme.titleTextStyle,
),
),
],
),
), ),
), ),
body: Stack( body: Stack(
@ -251,7 +233,7 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
reverse: detailRows.isNotEmpty, reverse: detailRows.isNotEmpty,
padding: const EdgeInsets.only(top: 24.0), padding: const EdgeInsets.only(top: 24.0),
children: [ children: [
if (detailRows.isEmpty && !showIndicator) if (detailRows.isEmpty && !showIndicator) ...[
Center( Center(
child: Text( child: Text(
(chatModel is GroupChatModel) (chatModel is GroupChatModel)
@ -262,12 +244,13 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
style: theme.textTheme.bodySmall, style: theme.textTheme.bodySmall,
), ),
), ),
],
...detailRows, ...detailRows,
], ],
), ),
), ),
), ),
if (chatModel != null) if (chatModel != null) ...[
ChatBottom( ChatBottom(
chat: chatModel, chat: chatModel,
messageInputBuilder: widget.options.messageInputBuilder, messageInputBuilder: widget.options.messageInputBuilder,
@ -277,12 +260,13 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
iconColor: widget.iconColor, iconColor: widget.iconColor,
iconDisabledColor: widget.iconDisabledColor, iconDisabledColor: widget.iconDisabledColor,
), ),
],
SizedBox( SizedBox(
height: widget.textfieldBottomPadding, height: widget.textfieldBottomPadding,
), ),
], ],
), ),
if (showIndicator) if (showIndicator) ...[
widget.loadingWidgetBuilder?.call(context) ?? widget.loadingWidgetBuilder?.call(context) ??
const Column( const Column(
children: [ children: [
@ -295,6 +279,7 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
), ),
], ],
), ),
],
], ],
), ),
); );