Merge pull request #1204 from GetStream/feat/animate-pinned-color
feat(ui): animate pinned message color
This commit is contained in:
@@ -9,6 +9,11 @@
|
||||
- [[#996]](https://github.com/GetStream/stream-chat-flutter/issues/996) Videos break bottom photo
|
||||
carousal.
|
||||
|
||||
✅ Added
|
||||
|
||||
- [[#1011]](https://github.com/GetStream/stream-chat-flutter/issues/1011) Animate the background
|
||||
color of pinned messages.
|
||||
|
||||
## 4.2.0
|
||||
|
||||
🐞 Fixed
|
||||
|
||||
@@ -596,26 +596,29 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
|
||||
|
||||
final showReactions = _shouldShowReactions;
|
||||
|
||||
final onMessageTap = widget.onMessageTap;
|
||||
|
||||
return Material(
|
||||
type: widget.message.pinned && widget.showPinHighlight
|
||||
? MaterialType.card
|
||||
: MaterialType.transparency,
|
||||
type: MaterialType.transparency,
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(seconds: 1),
|
||||
color: widget.message.pinned && widget.showPinHighlight
|
||||
? _streamChatTheme.colorTheme.highlight
|
||||
: null,
|
||||
: _streamChatTheme.colorTheme.barsBg.withOpacity(0),
|
||||
child: Portal(
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
widget.onMessageTap!(widget.message);
|
||||
},
|
||||
onTap: onMessageTap == null
|
||||
? null
|
||||
: () => onMessageTap(widget.message),
|
||||
onLongPress: widget.message.isDeleted && !isFailedState
|
||||
? null
|
||||
: () => onLongPress(context),
|
||||
child: Padding(
|
||||
padding: widget.padding ?? const EdgeInsets.all(8),
|
||||
child: FractionallySizedBox(
|
||||
alignment:
|
||||
widget.reverse ? Alignment.centerRight : Alignment.centerLeft,
|
||||
alignment: widget.reverse
|
||||
? Alignment.centerRight
|
||||
: Alignment.centerLeft,
|
||||
widthFactor: 0.78,
|
||||
child: Column(
|
||||
crossAxisAlignment: widget.reverse
|
||||
@@ -655,7 +658,8 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
|
||||
_buildUserAvatar(),
|
||||
const SizedBox(width: 4),
|
||||
],
|
||||
if (widget.showUserAvatar == DisplayWidget.hide)
|
||||
if (widget.showUserAvatar ==
|
||||
DisplayWidget.hide)
|
||||
SizedBox(width: avatarWidth + 4),
|
||||
Flexible(
|
||||
child: PortalTarget(
|
||||
@@ -704,18 +708,18 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
|
||||
child: (widget.message.isDeleted &&
|
||||
!isFailedState)
|
||||
? Container(
|
||||
// ignore: lines_longer_than_80_chars
|
||||
margin: EdgeInsets.symmetric(
|
||||
margin:
|
||||
EdgeInsets.symmetric(
|
||||
horizontal:
|
||||
// ignore: lines_longer_than_80_chars
|
||||
widget.showUserAvatar ==
|
||||
// ignore: lines_longer_than_80_chars
|
||||
DisplayWidget
|
||||
.gone
|
||||
DisplayWidget.gone
|
||||
? 0
|
||||
: 4.0,
|
||||
),
|
||||
child: StreamDeletedMessage(
|
||||
// ignore: lines_longer_than_80_chars
|
||||
borderRadiusGeometry: widget
|
||||
.borderRadiusGeometry,
|
||||
borderSide:
|
||||
@@ -728,7 +732,8 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
|
||||
: Card(
|
||||
clipBehavior: Clip.hardEdge,
|
||||
elevation: 0,
|
||||
margin: EdgeInsets.symmetric(
|
||||
margin:
|
||||
EdgeInsets.symmetric(
|
||||
horizontal: (isFailedState
|
||||
? 15.0
|
||||
: 0.0) +
|
||||
@@ -756,15 +761,17 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
|
||||
.borderRadiusGeometry ??
|
||||
BorderRadius.zero,
|
||||
),
|
||||
color: _getBackgroundColor(),
|
||||
color: _backgroundColor,
|
||||
child: Column(
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.end,
|
||||
CrossAxisAlignment
|
||||
.end,
|
||||
mainAxisSize:
|
||||
MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
if (hasQuotedMessage)
|
||||
_buildQuotedMessage(),
|
||||
// ignore: lines_longer_than_80_chars
|
||||
if (hasNonUrlAttachments)
|
||||
_parseAttachments(),
|
||||
if (!isGiphy)
|
||||
@@ -773,7 +780,8 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
|
||||
),
|
||||
),
|
||||
),
|
||||
if (widget.showReactionPickerIndicator)
|
||||
if (widget
|
||||
.showReactionPickerIndicator)
|
||||
Positioned(
|
||||
right: widget.reverse ? null : 4,
|
||||
left: widget.reverse ? 4 : null,
|
||||
@@ -802,7 +810,9 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
|
||||
],
|
||||
),
|
||||
if (showBottomRow)
|
||||
SizedBox(height: context.textScaleFactor * 18.0),
|
||||
SizedBox(
|
||||
height: context.textScaleFactor * 18.0,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -811,8 +821,9 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
|
||||
padding: EdgeInsets.only(
|
||||
left: !widget.reverse ? bottomRowPadding : 0,
|
||||
right: widget.reverse ? bottomRowPadding : 0,
|
||||
bottom:
|
||||
isPinned && widget.showPinHighlight ? 6.0 : 0.0,
|
||||
bottom: isPinned && widget.showPinHighlight
|
||||
? 6.0
|
||||
: 0.0,
|
||||
),
|
||||
child: widget.bottomRowBuilder?.call(
|
||||
context,
|
||||
@@ -835,6 +846,7 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1343,12 +1355,8 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
StreamSvgIcon.pin(
|
||||
size: 16,
|
||||
),
|
||||
const SizedBox(
|
||||
width: 4,
|
||||
),
|
||||
StreamSvgIcon.pin(size: 16),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
context.translations.pinnedByUserText(
|
||||
pinnedBy: pinnedBy,
|
||||
@@ -1367,7 +1375,7 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
|
||||
|
||||
bool get isPinned => widget.message.pinned;
|
||||
|
||||
Color? _getBackgroundColor() {
|
||||
Color? get _backgroundColor {
|
||||
if (hasQuotedMessage) {
|
||||
return widget.messageTheme.messageBackgroundColor;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user