GitLab/fluffychat
2
0
Fork 0
mirror of https://gitlab.com/famedly/fluffychat.git synced 2024-11-24 04:59:26 +01:00
Code Issues Projects Releases Wiki Activity

feat: Improved chat bubble design and splash animations

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
lib/views/widgets/list_items/message.dart
View File

@ -76,62 +76,87 @@ 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), color: color,
decoration: BoxDecoration( borderRadius: BorderRadius.circular(AppConfig.borderRadius),
color: color, child: InkWell(
onHover: (b) => useMouse = true,
onTap: !useMouse && longPressSelect
? () => null
: () => onSelect(event),
onLongPress: !longPressSelect ? null : () => onSelect(event),
borderRadius: BorderRadius.circular(AppConfig.borderRadius), borderRadius: BorderRadius.circular(AppConfig.borderRadius),
), child: Container(
constraints: padding:
BoxConstraints(maxWidth: FluffyThemes.columnWidth * 1.5), const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
child: Stack( constraints:
children: <Widget>[ BoxConstraints(maxWidth: FluffyThemes.columnWidth * 1.5),
Column( child: Stack(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
if (event.relationshipType == RelationshipTypes.reply) Column(
FutureBuilder<Event>( mainAxisSize: MainAxisSize.min,
future: event.getReplyEvent(timeline), crossAxisAlignment: CrossAxisAlignment.start,
builder: (BuildContext context, snapshot) { children: <Widget>[
final replyEvent = snapshot.hasData if (event.relationshipType == RelationshipTypes.reply)
? snapshot.data FutureBuilder<Event>(
: Event( future: event.getReplyEvent(timeline),
eventId: event.relationshipEventId, builder: (BuildContext context, snapshot) {
content: {'msgtype': 'm.text', 'body': '...'}, final replyEvent = snapshot.hasData
senderId: event.senderId, ? snapshot.data
type: 'm.room.message', : Event(
room: event.room, eventId: event.relationshipEventId,
roomId: event.roomId, content: {
status: 1, 'msgtype': 'm.text',
originServerTs: DateTime.now(), 'body': '...'
); },
return InkWell( senderId: event.senderId,
onTap: () { type: 'm.room.message',
if (scrollToEventId != null) { room: event.room,
scrollToEventId(replyEvent.eventId); roomId: event.roomId,
} status: 1,
originServerTs: DateTime.now(),
);
return InkWell(
onTap: () {
if (scrollToEventId != null) {
scrollToEventId(replyEvent.eventId);
}
},
child: AbsorbPointer(
child: Container(
margin: EdgeInsets.symmetric(vertical: 4.0),
child: ReplyContent(replyEvent,
lightText: ownMessage,
timeline: timeline),
),
),
);
}, },
child: AbsorbPointer( ),
child: Container( MessageContent(
margin: EdgeInsets.symmetric(vertical: 4.0), displayEvent,
child: ReplyContent(replyEvent, textColor: textColor,
lightText: ownMessage, timeline: timeline), ),
), SizedBox(height: 3),
), Opacity(
); opacity: 0,
}, child: _MetaRow(
), event, // meta information should be from the unedited event
MessageContent( ownMessage,
displayEvent, textColor,
textColor: textColor, timeline,
displayEvent,
),
),
],
), ),
SizedBox(height: 3), Positioned(
Opacity( bottom: 0,
opacity: 0, right: ownMessage ? 0 : null,
left: !ownMessage ? 0 : null,
child: _MetaRow( child: _MetaRow(
event, // meta information should be from the unedited event event,
ownMessage, ownMessage,
textColor, textColor,
timeline, timeline,
@ -140,19 +165,7 @@ class Message extends StatelessWidget {
), ),
], ],
), ),
Positioned( ),
bottom: 0,
right: ownMessage ? 0 : null,
left: !ownMessage ? 0 : null,
child: _MetaRow(
event,
ownMessage,
textColor,
timeline,
displayEvent,
),
),
],
), ),
), ),
), ),
@ -197,20 +210,13 @@ class Message extends StatelessWidget {
container = row; container = row;
} }
return InkWell( return Container(
onHover: (b) => useMouse = true, color: selected
onTap: !useMouse && longPressSelect ? () => null : () => onSelect(event), ? Theme.of(context).primaryColor.withAlpha(100)
splashColor: Theme.of(context).primaryColor.withAlpha(100), : Theme.of(context).primaryColor.withAlpha(0),
onLongPress: !longPressSelect ? null : () => onSelect(event), child: Padding(
child: Container( padding: EdgeInsets.only(left: 8.0, right: 8.0, bottom: 4.0, top: 4.0),
color: selected child: container,
? 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),
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))

17
lib/views/widgets/list_items/state_message.dart
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, padding: const EdgeInsets.symmetric(
child: Padding( horizontal: 8.0,
padding: const EdgeInsets.symmetric( vertical: 4.0,
horizontal: 8.0, ),
vertical: 4.0, child: Center(
), child: InkWell(
child: Center( 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(