fix: link preview rendering
This commit is contained in:
parent
e62c1599a5
commit
f4c91d0c91
|
@ -147,15 +147,26 @@
|
|||
|
||||
.module-message__link-preview {
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: white;
|
||||
color: black;
|
||||
border-radius: var(--border-radius-message-box);
|
||||
margin: var(--padding-link-preview);
|
||||
|
||||
.module-image {
|
||||
margin: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__link-preview__content {
|
||||
padding: 0 0 5px 0;
|
||||
padding: 0 0 var(--margins-xs) 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
flex-grow: 1;
|
||||
border: 1px solid $color-black-015;
|
||||
margin-left: var(--margins-sm);
|
||||
}
|
||||
|
||||
.module-message__link-preview__image_container {
|
||||
|
|
|
@ -281,26 +281,4 @@
|
|||
}
|
||||
}
|
||||
|
||||
$session-highlight-message-shadow: 0px 0px 10px 1px $session-color-green;
|
||||
|
||||
@keyframes remove-box-shadow {
|
||||
0% {
|
||||
box-shadow: none;
|
||||
}
|
||||
10% {
|
||||
box-shadow: $session-highlight-message-shadow;
|
||||
}
|
||||
75% {
|
||||
box-shadow: $session-highlight-message-shadow;
|
||||
}
|
||||
100% {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.flash-green-once {
|
||||
animation-name: remove-box-shadow;
|
||||
animation-timing-function: linear;
|
||||
animation-duration: 2s;
|
||||
box-shadow: $session-highlight-message-shadow;
|
||||
}
|
||||
|
|
|
@ -186,7 +186,7 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
|
|||
if (messageId !== undefined) {
|
||||
this.timeoutResetQuotedScroll = global.setTimeout(() => {
|
||||
window.inboxStore?.dispatch(quotedMessageToAnimate(undefined));
|
||||
}, 2000); // should match .flash-green-once
|
||||
}, 1000); // should match StyledMessageOpaqueContent
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@ import { MessageLinkPreview } from './MessageLinkPreview';
|
|||
import { MessageQuote } from './MessageQuote';
|
||||
import { MessageText } from './MessageText';
|
||||
import { ScrollToLoadedMessageContext } from '../../SessionMessagesListContainer';
|
||||
import styled from 'styled-components';
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
export type MessageContentSelectorProps = Pick<
|
||||
MessageRenderingProps,
|
||||
|
@ -42,7 +42,10 @@ function onClickOnMessageInnerContainer(event: React.MouseEvent<HTMLDivElement>)
|
|||
}
|
||||
}
|
||||
|
||||
const StyledMessageOpaqueContent = styled.div<{ messageDirection: MessageModelType }>`
|
||||
const StyledMessageOpaqueContent = styled.div<{
|
||||
messageDirection: MessageModelType;
|
||||
highlight: boolean;
|
||||
}>`
|
||||
background: ${props =>
|
||||
props.messageDirection === 'incoming'
|
||||
? 'var(--color-received-message-background)'
|
||||
|
@ -51,6 +54,36 @@ const StyledMessageOpaqueContent = styled.div<{ messageDirection: MessageModelTy
|
|||
|
||||
padding: var(--padding-message-content);
|
||||
border-radius: var(--border-radius-message-box);
|
||||
|
||||
@keyframes highlight {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
25% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
75% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
${props => {
|
||||
return props.highlight
|
||||
? css`
|
||||
animation-name: highlight;
|
||||
animation-timing-function: linear;
|
||||
animation-duration: 1s;
|
||||
border-radius: 'var(--border-radius-message-box)';
|
||||
`
|
||||
: '';
|
||||
}}
|
||||
}
|
||||
`;
|
||||
|
||||
export const IsMessageVisibleContext = createContext(false);
|
||||
|
@ -128,11 +161,7 @@ export const MessageContent = (props: Props) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'module-message__container',
|
||||
`module-message__container--${direction}`,
|
||||
flashGreen && 'flash-green-once'
|
||||
)}
|
||||
className={classNames('module-message__container', `module-message__container--${direction}`)}
|
||||
role="button"
|
||||
onClick={onClickOnMessageInnerContainer}
|
||||
title={toolTipTitle}
|
||||
|
@ -151,7 +180,7 @@ export const MessageContent = (props: Props) => {
|
|||
>
|
||||
<IsMessageVisibleContext.Provider value={isMessageVisible}>
|
||||
{hasContentAfterAttachmentAndQuote && (
|
||||
<StyledMessageOpaqueContent messageDirection={direction}>
|
||||
<StyledMessageOpaqueContent messageDirection={direction} highlight={flashGreen}>
|
||||
{!isDeleted && (
|
||||
<>
|
||||
<MessageQuote messageId={props.messageId} />
|
||||
|
|
|
@ -48,7 +48,7 @@ const StyledUnreadCounter = styled.div`
|
|||
font-weight: bold;
|
||||
border-radius: var(--margins-sm);
|
||||
background-color: var(--color-request-banner-unread-background);
|
||||
margin-left: 10px;
|
||||
margin-left: var(--margins-sm);
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
line-height: 25px;
|
||||
|
|
|
@ -332,7 +332,9 @@ export const SessionGlobalStyles = createGlobalStyle`
|
|||
--margins-lg: 20px;
|
||||
|
||||
/* PADDING */
|
||||
// TODO Theming
|
||||
--padding-message-content: 7px 13px;
|
||||
--padding-link-preview: -7px -13px 7px -13px; // bottom has positive value because a link preview has always a body below
|
||||
--border-radius-message-box: 16px;
|
||||
|
||||
/* SIZES */
|
||||
|
|
Loading…
Reference in New Issue