jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Message Select: New faster animation, lighter for incoming bubbles

This commit is contained in:
Scott Nonnenberg 2022-03-22 12:06:08 -07:00 committed by GitHub
parent 926a04d045
commit 67702254fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
stylesheets/_modules.scss
View File

@ -99,6 +99,21 @@
}
}
@keyframes module-message__highlight-lighter {
0% {
filter: none;
}
33% {
filter: brightness(76%);
}
66% {
filter: brightness(76%);
}
100% {
filter: none;
}
}
.module-message--outgoing {
flex-direction: row-reverse;
}
@ -315,7 +330,13 @@
.module-message__container--selected {
@include mouse-mode {
animation: module-message__highlight 1.2s linear;
animation: module-message__highlight 1.2s cubic-bezier(0.17, 0.17, 0, 1);
}
}
.module-message__container--selected-lighter {
@include mouse-mode {
animation: module-message__highlight-lighter 1.2s
cubic-bezier(0.17, 0.17, 0, 1);
}
}

9
ts/components/conversation/Message.tsx
View File

@ -2571,6 +2571,7 @@ export class Message extends React.PureComponent<Props, State> {
isTapToView,
isTapToViewExpired,
isTapToViewError,
text,
} = this.props;
const { isSelected } = this.state;
@ -2582,10 +2583,18 @@ export class Message extends React.PureComponent<Props, State> {
const isEmojiOnly = this.canRenderStickerLikeEmoji();
const isStickerLike = isSticker || isEmojiOnly;
// If it's a mostly-normal gray incoming text box, we don't want to darken it as much
const lighterSelect =
isSelected &&
direction === 'incoming' &&
!isStickerLike &&
(text || (!isVideo(attachments) && !isImage(attachments)));
const containerClassnames = classNames(
'module-message__container',
isGIF(attachments) ? 'module-message__container--gif' : null,
isSelected ? 'module-message__container--selected' : null,
lighterSelect ? 'module-message__container--selected-lighter' : null,
!isStickerLike ? `module-message__container--${direction}` : null,
isEmojiOnly ? 'module-message__container--emoji' : null,
isTapToView ? 'module-message__container--with-tap-to-view' : null,