Timeline: Spacing and message selection tweaks
This commit is contained in:
parent
63c7f9fd52
commit
0ccc7d7a7a
|
@ -84,6 +84,36 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes module-message__highlight {
|
||||
0% {
|
||||
filter: none;
|
||||
}
|
||||
33% {
|
||||
filter: brightness(50%);
|
||||
}
|
||||
66% {
|
||||
filter: brightness(50%);
|
||||
}
|
||||
100% {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
@ -143,7 +173,7 @@
|
|||
|
||||
.module-message--selected & {
|
||||
@include mouse-mode {
|
||||
background-color: $color-ultramarine;
|
||||
background-color: $color-gray-60;
|
||||
}
|
||||
@include dark-mouse-mode {
|
||||
background-color: $color-white;
|
||||
|
@ -152,7 +182,7 @@
|
|||
|
||||
.module-message:focus & {
|
||||
@include keyboard-mode {
|
||||
background-color: $color-ultramarine;
|
||||
background-color: $color-gray-60;
|
||||
}
|
||||
@include dark-keyboard-mode {
|
||||
background-color: $color-white;
|
||||
|
@ -298,12 +328,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.module-message--selected {
|
||||
.module-message__container--selected {
|
||||
@include mouse-mode {
|
||||
background: $color-selected-message-background-light;
|
||||
animation: module-message__highlight 1.2s cubic-bezier(0.17, 0.17, 0, 1);
|
||||
}
|
||||
@include dark-mouse-mode {
|
||||
background: $color-selected-message-background-dark;
|
||||
}
|
||||
.module-message__container--selected-lighter {
|
||||
@include mouse-mode {
|
||||
animation: module-message__highlight-lighter 1.2s
|
||||
cubic-bezier(0.17, 0.17, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -317,7 +350,7 @@
|
|||
}
|
||||
|
||||
.module-message__container--emoji {
|
||||
padding-top: 0;
|
||||
padding-top: 4px;
|
||||
|
||||
.module-message__text--outgoing {
|
||||
text-align: right;
|
||||
|
|
|
@ -110,7 +110,8 @@ const EXPIRED_DELAY = 600;
|
|||
const GROUP_AVATAR_SIZE = AvatarSize.TWENTY_EIGHT;
|
||||
const STICKER_SIZE = 200;
|
||||
const GIF_SIZE = 300;
|
||||
const SELECTED_TIMEOUT = 1000;
|
||||
// Note: this needs to match the animation time
|
||||
const SELECTED_TIMEOUT = 1200;
|
||||
const THREE_HOURS = 3 * 60 * 60 * 1000;
|
||||
const SENT_STATUSES = new Set<MessageStatusType>([
|
||||
'delivered',
|
||||
|
@ -2508,6 +2509,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
isTapToView,
|
||||
isTapToViewExpired,
|
||||
isTapToViewError,
|
||||
text,
|
||||
} = this.props;
|
||||
const { isSelected } = this.state;
|
||||
|
||||
|
@ -2519,12 +2521,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 && !isStickerLike
|
||||
? 'module-message__container--selected'
|
||||
: 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,
|
||||
|
|
|
@ -60,7 +60,7 @@ export async function sendGroupUpdate(
|
|||
untrustedConversationIds,
|
||||
});
|
||||
throw new Error(
|
||||
`Delete for everyone blocked because ${untrustedConversationIds.length} conversation(s) were untrusted. Failing this attempt.`
|
||||
`Group update blocked because ${untrustedConversationIds.length} conversation(s) were untrusted. Failing this attempt.`
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue