feat: link message reply done
This commit is contained in:
parent
80689bbe22
commit
d7200abfab
|
@ -1061,66 +1061,6 @@
|
|||
@include color-svg('../images/plus-36.svg', var(--button-icon-stroke-color));
|
||||
}
|
||||
|
||||
// Module: Staged Link Preview
|
||||
|
||||
.module-staged-link-preview {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
|
||||
min-height: 65px;
|
||||
margin: var(--margins-xs);
|
||||
}
|
||||
.module-staged-link-preview--is-loading {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.module-staged-link-preview__loading {
|
||||
color: var(--text-primary-color);
|
||||
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.module-staged-link-preview__icon-container {
|
||||
margin-inline-end: 8px;
|
||||
padding: var(--margins-sm);
|
||||
}
|
||||
.module-staged-link-preview__content {
|
||||
margin-inline-end: 20px;
|
||||
padding: var(--margins-sm);
|
||||
}
|
||||
.module-staged-link-preview__title {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.module-staged-link-preview__location {
|
||||
margin-top: 4px;
|
||||
font-size: var(--font-size-xs);
|
||||
height: 16px;
|
||||
letter-spacing: 0.25px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.module-staged-link-preview__close-button {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
@include color-svg('../images/x-16.svg', var(--button-icon-stroke-color));
|
||||
}
|
||||
|
||||
// Module: Left Pane
|
||||
|
||||
.module-left-pane {
|
||||
|
|
|
@ -102,7 +102,7 @@ export const SessionQuotedMessageComposition = () => {
|
|||
height={100}
|
||||
width={100}
|
||||
url={getAbsoluteAttachmentPath((firstImageAttachment as any).thumbnail.path)}
|
||||
softCorners={false}
|
||||
softCorners={true}
|
||||
/>
|
||||
) : hasAudioAttachment ? (
|
||||
<div style={{ margin: '0 var(--margins-xs) 0 0' }}>
|
||||
|
@ -127,6 +127,7 @@ export const SessionQuotedMessageComposition = () => {
|
|||
iconSize="small"
|
||||
onClick={removeQuotedMessage}
|
||||
margin={'0 var(--margins-sm) 0 0'}
|
||||
aria-label={window.i18n('close')}
|
||||
/>
|
||||
</QuotedMessageComposition>
|
||||
);
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { Image } from './Image';
|
||||
|
||||
|
@ -7,6 +6,9 @@ import { SessionSpinner } from '../basic/SessionSpinner';
|
|||
import { StagedLinkPreviewImage } from './composition/CompositionBox';
|
||||
import { isImage } from '../../types/MIME';
|
||||
import { fromArrayBufferToBase64 } from '../../session/utils/String';
|
||||
import styled from 'styled-components';
|
||||
import { Flex } from '../basic/Flex';
|
||||
import { SessionIconButton } from '../icon';
|
||||
|
||||
type Props = {
|
||||
isLoaded: boolean;
|
||||
|
@ -18,10 +20,37 @@ type Props = {
|
|||
onClose: (url: string) => void;
|
||||
};
|
||||
|
||||
// Note Similar to QuotedMessageComposition
|
||||
const StyledStagedLinkPreview = styled(Flex)`
|
||||
position: relative;
|
||||
/* Same height as a loaded Image Attachment */
|
||||
min-height: 132px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
`;
|
||||
|
||||
const StyledImage = styled.div`
|
||||
div {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledText = styled(Flex)`
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
font-weight: bold;
|
||||
margin: 0 0 0 var(--margins-sm);
|
||||
`;
|
||||
|
||||
export const StagedLinkPreview = (props: Props) => {
|
||||
const { isLoaded, onClose, title, image, domain, url } = props;
|
||||
|
||||
const isContentTypeImage = image && isImage(image.contentType);
|
||||
|
||||
if (isLoaded && !(title && domain)) {
|
||||
return null;
|
||||
}
|
||||
|
@ -33,42 +62,47 @@ export const StagedLinkPreview = (props: Props) => {
|
|||
: '';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'module-staged-link-preview',
|
||||
isLoading ? 'module-staged-link-preview--is-loading' : null
|
||||
)}
|
||||
<StyledStagedLinkPreview
|
||||
container={true}
|
||||
justifyContent={isLoading ? 'center' : 'space-between'}
|
||||
alignItems="center"
|
||||
width={'100%'}
|
||||
padding={'var(--margins-md)'}
|
||||
>
|
||||
{isLoading ? <SessionSpinner loading={isLoading} /> : null}
|
||||
{isLoaded && image && isContentTypeImage ? (
|
||||
<div className="module-staged-link-preview__icon-container">
|
||||
<Image
|
||||
alt={window.i18n('stagedPreviewThumbnail', [domain || ''])}
|
||||
softCorners={true}
|
||||
height={72}
|
||||
width={72}
|
||||
url={dataToRender}
|
||||
attachment={image as any}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{isLoaded ? (
|
||||
<div className="module-staged-link-preview__content">
|
||||
<div className="module-staged-link-preview__title">{title}</div>
|
||||
|
||||
<div className="module-staged-link-preview__footer">
|
||||
<div className="module-staged-link-preview__location">{domain}</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
className="module-staged-link-preview__close-button"
|
||||
<Flex
|
||||
container={true}
|
||||
justifyContent={isLoading ? 'center' : 'flex-start'}
|
||||
alignItems={'center'}
|
||||
>
|
||||
{isLoading ? <SessionSpinner loading={isLoading} /> : null}
|
||||
{isLoaded && image && isContentTypeImage ? (
|
||||
<StyledImage>
|
||||
<Image
|
||||
alt={window.i18n('stagedPreviewThumbnail', [domain || ''])}
|
||||
attachment={image as any}
|
||||
height={100}
|
||||
width={100}
|
||||
url={dataToRender}
|
||||
softCorners={true}
|
||||
/>
|
||||
</StyledImage>
|
||||
) : null}
|
||||
{isLoaded ? <StyledText>{title}</StyledText> : null}
|
||||
</Flex>
|
||||
<SessionIconButton
|
||||
iconType="exit"
|
||||
iconColor="var(--chat-buttons-icon-color)"
|
||||
iconSize="small"
|
||||
onClick={() => {
|
||||
onClose(url || '');
|
||||
}}
|
||||
margin={'0 var(--margins-sm) 0 0'}
|
||||
aria-label={window.i18n('close')}
|
||||
style={{
|
||||
position: isLoading ? 'absolute' : undefined,
|
||||
right: isLoading ? 'var(--margins-sm)' : undefined,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</StyledStagedLinkPreview>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue