mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
feat: fix other types of messages now that there is no box around
This commit is contained in:
parent
7c80f9e233
commit
30e3cb8755
|
@ -27,7 +27,7 @@
|
|||
margin: 4px 16px;
|
||||
padding: 4px;
|
||||
|
||||
border-radius: $border-radius-message-box;
|
||||
border-radius: var(--border-radius-message-box);
|
||||
|
||||
align-self: flex-start;
|
||||
|
||||
|
|
|
@ -62,6 +62,17 @@
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-radius: var(--border-radius-message-box);
|
||||
|
||||
.module-message__container--outgoing & {
|
||||
color: var(--color-sent-message-text);
|
||||
background: var(--color-sent-message-background);
|
||||
}
|
||||
|
||||
.module-message__container--incoming & {
|
||||
color: var(--color-received-message-text);
|
||||
background: var(--color-received-message-background);
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__generic-attachment__icon-container {
|
||||
|
@ -88,7 +99,7 @@
|
|||
}
|
||||
|
||||
.module-message__generic-attachment__icon__extension {
|
||||
font-size: 10px;
|
||||
font-size: 9px;
|
||||
line-height: 13px;
|
||||
letter-spacing: 0.1px;
|
||||
text-transform: uppercase;
|
||||
|
@ -115,7 +126,6 @@
|
|||
}
|
||||
|
||||
.module-message__generic-attachment__file-name {
|
||||
color: $color-gray-90;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-weight: 300;
|
||||
|
@ -127,14 +137,6 @@
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.module-message__generic-attachment__file-size,
|
||||
.module-message__generic-attachment__file-name--outgoing,
|
||||
.module-message__generic-attachment__file-size--incoming,
|
||||
.module-message__generic-attachment__file-size--outgoing,
|
||||
.module-message__generic-attachment__file-name--incoming {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.module-message__generic-attachment__file-size {
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
|
@ -148,7 +150,7 @@
|
|||
}
|
||||
|
||||
.module-message__link-preview__content {
|
||||
padding: 8px;
|
||||
padding: 0 0 5px 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
|
@ -781,20 +783,7 @@
|
|||
}
|
||||
|
||||
.module-image--soft-corners {
|
||||
border-radius: $border-radius-message-box;
|
||||
}
|
||||
|
||||
.module-image__border-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.module-image__border-overlay--dark {
|
||||
background-color: $color-black-02;
|
||||
border-radius: var(--border-radius-message-box);
|
||||
}
|
||||
|
||||
.module-image__loading-placeholder {
|
||||
|
@ -858,8 +847,8 @@
|
|||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 2;
|
||||
background-image: url('../images/x-shadow-16.svg');
|
||||
}
|
||||
|
|
|
@ -89,8 +89,8 @@
|
|||
|
||||
.module-quote-container {
|
||||
margin-bottom: 5px;
|
||||
margin-top: 10px;
|
||||
padding-left: 10px;
|
||||
margin-top: var(--margins-xs);
|
||||
min-width: 300px; // just because even with the quoted content is small it doesn't look very good
|
||||
}
|
||||
|
||||
.module-quote--no-click {
|
||||
|
|
|
@ -323,29 +323,18 @@ textarea {
|
|||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
pre {
|
||||
backdrop-filter: brightness(0.8);
|
||||
padding: $session-margin-xs;
|
||||
}
|
||||
|
||||
.module-message__container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
min-width: 30px;
|
||||
// To limit messages with things forcing them wider, like long attachment names
|
||||
max-width: calc(100vw - 380px - 100px);
|
||||
max-width: calc(100vw - 380px - 50px);
|
||||
align-items: center;
|
||||
}
|
||||
label {
|
||||
user-select: none;
|
||||
}
|
||||
.module-message__attachment-container {
|
||||
// Entirely to ensure that images are centered if they aren't full width of bubble
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.conversation-header {
|
||||
.module-avatar img {
|
||||
|
|
|
@ -239,6 +239,3 @@ $session-transition-duration: 0.25s;
|
|||
// //////////////////////////////////////////////
|
||||
|
||||
$composition-container-height: 60px;
|
||||
|
||||
$padding-message-content: 7px 13px; // FIXME to move to SessionTheme
|
||||
$border-radius-message-box: 16px; // FIXME to move to SessionTheme
|
||||
|
|
|
@ -349,8 +349,8 @@ $rhap_font-family: inherit !default;
|
|||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
background: var(--color-accent);
|
||||
padding: $padding-message-content;
|
||||
border-radius: $border-radius-message-box;
|
||||
padding: var(--padding-message-content);
|
||||
border-radius: var(--border-radius-message-box);
|
||||
|
||||
svg {
|
||||
transition: fill $session-transition-duration;
|
||||
|
|
|
@ -27,7 +27,11 @@
|
|||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
max-width: 65%;
|
||||
max-width: 95%;
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
max-width: 65%;
|
||||
}
|
||||
|
||||
&__text-error {
|
||||
font-style: italic;
|
||||
|
@ -42,8 +46,8 @@
|
|||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
|
||||
padding: $padding-message-content;
|
||||
border-radius: $border-radius-message-box;
|
||||
padding: var(--padding-message-content);
|
||||
border-radius: var(--border-radius-message-box);
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
|
|
|
@ -5,6 +5,7 @@ import { Spinner } from '../basic/Spinner';
|
|||
import { AttachmentType, AttachmentTypeWithPath } from '../../types/Attachment';
|
||||
import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
|
||||
import { useDisableDrag } from '../../hooks/useDisableDrag';
|
||||
import styled from 'styled-components';
|
||||
|
||||
type Props = {
|
||||
alt: string;
|
||||
|
@ -20,7 +21,7 @@ type Props = {
|
|||
|
||||
darkOverlay?: boolean;
|
||||
playIconOverlay?: boolean;
|
||||
softCorners?: boolean;
|
||||
softCorners: boolean;
|
||||
forceSquare?: boolean;
|
||||
attachmentIndex?: number;
|
||||
|
||||
|
@ -29,6 +30,16 @@ type Props = {
|
|||
onError?: () => void;
|
||||
};
|
||||
|
||||
const StyledOverlay = styled.div<Pick<Props, 'darkOverlay' | 'softCorners'>>`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: ${props => (props.darkOverlay ? '#0008' : 'unset')};
|
||||
`;
|
||||
|
||||
export const Image = (props: Props) => {
|
||||
// tslint:disable-next-line max-func-body-length cyclomatic-complexity
|
||||
const {
|
||||
|
@ -133,12 +144,10 @@ export const Image = (props: Props) => {
|
|||
onDragStart={disableDrag}
|
||||
/>
|
||||
) : null}
|
||||
<div
|
||||
className={classNames(
|
||||
'module-image__border-overlay',
|
||||
softCorners ? 'module-image--soft-corners' : null,
|
||||
darkOverlay ? 'module-image__border-overlay--dark' : null
|
||||
)}
|
||||
<StyledOverlay
|
||||
className={classNames(softCorners ? 'module-image--soft-corners' : null)}
|
||||
darkOverlay={darkOverlay}
|
||||
softCorners={softCorners}
|
||||
/>
|
||||
{closeButton ? (
|
||||
<div
|
||||
|
|
|
@ -92,6 +92,7 @@ export const SessionQuotedMessageComposition = () => {
|
|||
height={100}
|
||||
width={100}
|
||||
url={firstImageAttachment.thumbnail.objectUrl}
|
||||
softCorners={false}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
|
@ -11,6 +11,10 @@ const StyledTrustSenderUI = styled.div`
|
|||
padding-inline: var(--margins-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
|
||||
border-radius: var(--border-radius-message-box);
|
||||
background: var(--color-received-message-background);
|
||||
`;
|
||||
|
||||
const ClickToDownload = styled.div`
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
import classNames from 'classnames';
|
||||
import React, { useCallback } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { clone } from 'lodash';
|
||||
import { Data } from '../../../../data/data';
|
||||
import { MessageRenderingProps } from '../../../../models/messageType';
|
||||
import { MessageModelType, MessageRenderingProps } from '../../../../models/messageType';
|
||||
import {
|
||||
PropsForAttachment,
|
||||
showLightBox,
|
||||
|
@ -30,6 +29,7 @@ import { AudioPlayerWithEncryptedFile } from '../../H5AudioPlayer';
|
|||
import { ImageGrid } from '../../ImageGrid';
|
||||
import { LightBoxOptions } from '../../SessionConversation';
|
||||
import { ClickToTrustSender } from './ClickToTrustSender';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export type MessageAttachmentSelectorProps = Pick<
|
||||
MessageRenderingProps,
|
||||
|
@ -50,6 +50,14 @@ type Props = {
|
|||
};
|
||||
// tslint:disable: use-simple-attributes
|
||||
|
||||
const StyledAttachmentContainer = styled.div<{ messageDirection: MessageModelType }>`
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: ${props => (props.messageDirection === 'incoming' ? 'flex-start' : 'flex-end')};
|
||||
`;
|
||||
|
||||
// tslint:disable-next-line max-func-body-length cyclomatic-complexity
|
||||
export const MessageAttachment = (props: Props) => {
|
||||
const { messageId, imageBroken, handleImageError } = props;
|
||||
|
@ -121,15 +129,16 @@ export const MessageAttachment = (props: Props) => {
|
|||
(isVideo(attachments) && hasVideoScreenshot(attachments)))
|
||||
) {
|
||||
return (
|
||||
<div className={classNames('module-message__attachment-container')}>
|
||||
<StyledAttachmentContainer messageDirection={direction}>
|
||||
<ImageGrid
|
||||
attachments={attachments}
|
||||
onError={handleImageError}
|
||||
onClickAttachment={onClickOnImageGrid}
|
||||
/>
|
||||
</div>
|
||||
</StyledAttachmentContainer>
|
||||
);
|
||||
} else if (!firstAttachment.pending && !firstAttachment.error && isAudio(attachments)) {
|
||||
}
|
||||
if (!firstAttachment.pending && !firstAttachment.error && isAudio(attachments)) {
|
||||
return (
|
||||
<div
|
||||
role="main"
|
||||
|
@ -149,52 +158,35 @@ export const MessageAttachment = (props: Props) => {
|
|||
/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
const { pending, fileName, fileSize, contentType } = firstAttachment;
|
||||
const extension = getExtensionForDisplay({ contentType, fileName });
|
||||
}
|
||||
const { pending, fileName, fileSize, contentType } = firstAttachment;
|
||||
const extension = getExtensionForDisplay({ contentType, fileName });
|
||||
|
||||
return (
|
||||
<div className={classNames('module-message__generic-attachment')}>
|
||||
{pending ? (
|
||||
<div className="module-message__generic-attachment__spinner-container">
|
||||
<Spinner size="small" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="module-message__generic-attachment__icon-container">
|
||||
<div
|
||||
role="button"
|
||||
className="module-message__generic-attachment__icon"
|
||||
onClick={onClickOnGenericAttachment}
|
||||
>
|
||||
{extension ? (
|
||||
<div className="module-message__generic-attachment__icon__extension">
|
||||
{extension}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="module-message__generic-attachment__text">
|
||||
return (
|
||||
<div className="module-message__generic-attachment">
|
||||
{pending ? (
|
||||
<div className="module-message__generic-attachment__spinner-container">
|
||||
<Spinner size="small" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="module-message__generic-attachment__icon-container">
|
||||
<div
|
||||
className={classNames(
|
||||
'module-message__generic-attachment__file-name',
|
||||
`module-message__generic-attachment__file-name--${direction}`
|
||||
)}
|
||||
role="button"
|
||||
className="module-message__generic-attachment__icon"
|
||||
onClick={onClickOnGenericAttachment}
|
||||
>
|
||||
{fileName}
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
'module-message__generic-attachment__file-size',
|
||||
`module-message__generic-attachment__file-size--${direction}`
|
||||
)}
|
||||
>
|
||||
{fileSize}
|
||||
{extension ? (
|
||||
<div className="module-message__generic-attachment__icon__extension">{extension}</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="module-message__generic-attachment__text">
|
||||
<div className="module-message__generic-attachment__file-name">{fileName}</div>
|
||||
<div className="module-message__generic-attachment__file-size">{fileSize}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function attachmentIsAttachmentTypeWithPath(attac: any): attac is AttachmentTypeWithPath {
|
||||
|
|
|
@ -9,6 +9,7 @@ import { AddNewLines } from '../../AddNewLines';
|
|||
import { Emojify } from '../../Emojify';
|
||||
import { LinkPreviews } from '../../../../util/linkPreviews';
|
||||
import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const linkify = LinkifyIt();
|
||||
|
||||
|
@ -88,6 +89,12 @@ const JsxSelectable = (jsx: JSX.Element): JSX.Element => {
|
|||
);
|
||||
};
|
||||
|
||||
const StyledPre = styled.pre`
|
||||
backdrop-filter: brightness(0.8);
|
||||
padding: var(--margins-xs);
|
||||
user-select: text;
|
||||
`;
|
||||
|
||||
export const MessageBody = (props: Props) => {
|
||||
const { text, disableJumbomoji, disableLinks, isGroup } = props;
|
||||
const sizeClass: SizeClassType = disableJumbomoji ? 'default' : getEmojiSizeClass(text);
|
||||
|
@ -105,7 +112,7 @@ export const MessageBody = (props: Props) => {
|
|||
}
|
||||
|
||||
if (text && text.startsWith('```') && text.endsWith('```') && text.length > 6) {
|
||||
return <pre className="text-selectable">{text.substring(4, text.length - 3)}</pre>;
|
||||
return <StyledPre>{text.substring(4, text.length - 3)}</StyledPre>;
|
||||
}
|
||||
|
||||
return JsxSelectable(
|
||||
|
|
|
@ -48,6 +48,8 @@ const StyledMessageOpaqueContent = styled.div<{ messageDirection: MessageModelTy
|
|||
props.messageDirection === 'incoming'
|
||||
? 'var(--color-received-message-background)'
|
||||
: 'var(--color-sent-message-background)'};
|
||||
align-self: ${props => (props.messageDirection === 'incoming' ? 'flex-start' : 'flex-end')};
|
||||
|
||||
padding: 7px 13px; // FIXME
|
||||
border-radius: 16px; //FIXME
|
||||
`;
|
||||
|
@ -142,6 +144,11 @@ export const MessageContent = (props: Props) => {
|
|||
threshold={0}
|
||||
rootMargin="500px 0px 500px 0px"
|
||||
triggerOnce={false}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 'var(--margins-xs)',
|
||||
}}
|
||||
>
|
||||
<IsMessageVisibleContext.Provider value={isMessageVisible}>
|
||||
{hasContentAfterAttachmentAndQuote ? (
|
||||
|
|
|
@ -20,8 +20,8 @@ import { MessageStatus } from './MessageStatus';
|
|||
|
||||
export type MessageContentWithStatusSelectorProps = Pick<
|
||||
MessageRenderingProps,
|
||||
'direction' | 'isDeleted' | 'isTrustedForAttachmentDownload'
|
||||
> & { hasAttachments: boolean };
|
||||
'direction' | 'isDeleted'
|
||||
>;
|
||||
|
||||
type Props = {
|
||||
messageId: string;
|
||||
|
@ -87,7 +87,7 @@ export const MessageContentWithStatuses = (props: Props) => {
|
|||
if (!contentProps) {
|
||||
return null;
|
||||
}
|
||||
const { direction, isDeleted, hasAttachments, isTrustedForAttachmentDownload } = contentProps;
|
||||
const { direction, isDeleted } = contentProps;
|
||||
const isIncoming = direction === 'incoming';
|
||||
|
||||
const [popupReaction, setPopupReaction] = useState('');
|
||||
|
@ -112,9 +112,6 @@ export const MessageContentWithStatuses = (props: Props) => {
|
|||
role="button"
|
||||
onClick={onClickOnMessageOuterContainer}
|
||||
onDoubleClickCapture={onDoubleClickReplyToMessage}
|
||||
style={{
|
||||
width: hasAttachments && isTrustedForAttachmentDownload ? 'min-content' : 'auto',
|
||||
}}
|
||||
data-testid={dataTestId}
|
||||
>
|
||||
<MessageStatus
|
||||
|
|
|
@ -334,10 +334,16 @@ export const SessionGlobalStyles = createGlobalStyle`
|
|||
--margins-md: 15px;
|
||||
--margins-lg: 20px;
|
||||
|
||||
/* PADDING */
|
||||
--padding-message-content: 7px 13px;
|
||||
--border-radius-message-box: 16px;
|
||||
|
||||
/* ANIMATIONS */
|
||||
--default-duration: '0.25s';
|
||||
|
||||
/* FILTERS */
|
||||
--filter-session-text: ${lightFilterSessionText};
|
||||
|
||||
/* BORDERS */
|
||||
--border-unread: ${lightUnreadBorder};
|
||||
--border-session: ${lightColorSessionBorder};
|
||||
|
@ -348,6 +354,7 @@ export const SessionGlobalStyles = createGlobalStyle`
|
|||
/* COLORS NOT CHANGING BETWEEN THEMES */
|
||||
--color-warning: ${warning};
|
||||
--color-destructive: ${destructive};
|
||||
|
||||
/* COLORS */
|
||||
--color-accent: ${lightColorAccent};
|
||||
--color-accent-button: ${lightColorAccentButton};
|
||||
|
@ -360,7 +367,6 @@ export const SessionGlobalStyles = createGlobalStyle`
|
|||
--color-session-shadow: ${lightColorSessionShadow};
|
||||
--color-compose-view-button-background: ${lightColorComposeViewBg};
|
||||
--color-sent-message-background: ${lightColorSentMessageBg};
|
||||
// TODO: this might be wrong text colour. Something happened during merge.
|
||||
--color-sent-message-text: ${black};
|
||||
--color-clickable-hovered: ${lightColorClickableHovered};
|
||||
--color-session-border: ${lightColorSessionBorderColor};
|
||||
|
|
|
@ -1111,8 +1111,7 @@ export const getMessageContentWithStatusesSelectorProps = createSelector(
|
|||
}
|
||||
|
||||
const msgProps: MessageContentWithStatusSelectorProps = {
|
||||
hasAttachments: Boolean(props.propsForMessage.attachments?.length) || false,
|
||||
...pick(props.propsForMessage, ['direction', 'isDeleted', 'isTrustedForAttachmentDownload']),
|
||||
...pick(props.propsForMessage, ['direction', 'isDeleted']),
|
||||
};
|
||||
|
||||
return msgProps;
|
||||
|
|
Loading…
Reference in a new issue