feat: Improved chat bubble design and splash animations

This commit is contained in:
Christian Pauly 2021-05-16 11:06:46 +02:00
parent e6c20ddd18
commit 0b3734ff2b
2 changed files with 96 additions and 89 deletions

View File

@ -76,13 +76,20 @@ class Message extends StatelessWidget {
Expanded(
child: Container(
alignment: alignment,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 8),
padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
decoration: BoxDecoration(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Material(
color: color,
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
child: InkWell(
onHover: (b) => useMouse = true,
onTap: !useMouse && longPressSelect
? () => null
: () => onSelect(event),
onLongPress: !longPressSelect ? null : () => onSelect(event),
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
child: Container(
padding:
const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
constraints:
BoxConstraints(maxWidth: FluffyThemes.columnWidth * 1.5),
child: Stack(
@ -99,7 +106,10 @@ class Message extends StatelessWidget {
? snapshot.data
: Event(
eventId: event.relationshipEventId,
content: {'msgtype': 'm.text', 'body': '...'},
content: {
'msgtype': 'm.text',
'body': '...'
},
senderId: event.senderId,
type: 'm.room.message',
room: event.room,
@ -117,7 +127,8 @@ class Message extends StatelessWidget {
child: Container(
margin: EdgeInsets.symmetric(vertical: 4.0),
child: ReplyContent(replyEvent,
lightText: ownMessage, timeline: timeline),
lightText: ownMessage,
timeline: timeline),
),
),
);
@ -157,6 +168,8 @@ class Message extends StatelessWidget {
),
),
),
),
),
];
final avatarOrSizedBox = sameSender
? SizedBox(width: Avatar.defaultSize)
@ -197,21 +210,14 @@ class Message extends StatelessWidget {
container = row;
}
return InkWell(
onHover: (b) => useMouse = true,
onTap: !useMouse && longPressSelect ? () => null : () => onSelect(event),
splashColor: Theme.of(context).primaryColor.withAlpha(100),
onLongPress: !longPressSelect ? null : () => onSelect(event),
child: Container(
return Container(
color: selected
? Theme.of(context).primaryColor.withAlpha(100)
: Theme.of(context).primaryColor.withAlpha(0),
child: Padding(
padding:
EdgeInsets.only(left: 8.0, right: 8.0, bottom: 4.0, top: 4.0),
padding: EdgeInsets.only(left: 8.0, right: 8.0, bottom: 4.0, top: 4.0),
child: container,
),
),
);
}
}
@ -240,7 +246,7 @@ class _MetaRow extends StatelessWidget {
Text(
displayname,
style: TextStyle(
fontSize: 11 * AppConfig.fontSizeFactor,
fontSize: 10 * AppConfig.fontSizeFactor,
fontWeight: FontWeight.bold,
color: (Theme.of(context).brightness == Brightness.light
? displayname.darkColor
@ -252,8 +258,8 @@ class _MetaRow extends StatelessWidget {
Text(
event.originServerTs.localizedTime(context),
style: TextStyle(
color: color.withAlpha(200),
fontSize: 11 * AppConfig.fontSizeFactor,
color: color.withAlpha(164),
fontSize: 10 * AppConfig.fontSizeFactor,
),
),
if (event.hasAggregatedEvents(timeline, RelationshipTypes.edit))

View File

@ -17,14 +17,15 @@ class StateMessage extends StatelessWidget {
}
final int counter =
event.unsigned['im.fluffychat.collapsed_state_event_count'] ?? 0;
return InkWell(
onTap: counter != 0 ? () => unfold(event.eventId) : null,
child: Padding(
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
vertical: 4.0,
),
child: Center(
child: InkWell(
onTap: counter != 0 ? () => unfold(event.eventId) : null,
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(