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

View File

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