diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index f7b11b558..f3ad5c529 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -152,10 +152,17 @@ background: white; color: black; border-radius: var(--border-radius-message-box); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + background-color: white; // TODO theming update // var(--message-link-preview-background-color) margin: var(--padding-link-preview); .module-image { - margin: -1px; + margin-bottom: 0; + border-radius: 0; + margin-top: -1px; + margin-left: -1px; + border-top-left-radius: var(--border-radius-message-box); } &__text { @@ -164,25 +171,23 @@ } .module-message__link-preview__content { - padding: 0 0 var(--margins-xs) 0; display: flex; flex-direction: row; align-items: center; flex-grow: 1; - margin-left: var(--margins-sm); } .module-message__link-preview__image_container { - margin: -2px; margin-inline-end: 8px; display: inline-block; } .module-message__link-preview__icon_container { + display: flex; + justify-content: center; flex: initial; - min-width: 54px; - width: 54px; - max-height: 54px; + width: 100px; + height: 100px; position: relative; margin-left: -2px; margin-inline-end: 8px; diff --git a/ts/components/conversation/message/message-content/MessageLinkPreview.tsx b/ts/components/conversation/message/message-content/MessageLinkPreview.tsx index df808902b..82715f5d8 100644 --- a/ts/components/conversation/message/message-content/MessageLinkPreview.tsx +++ b/ts/components/conversation/message/message-content/MessageLinkPreview.tsx @@ -1,13 +1,14 @@ import classNames from 'classnames'; import React from 'react'; import { isImageAttachment } from '../../../../types/Attachment'; -import { ImageGrid } from '../../ImageGrid'; import { Image } from '../../Image'; import { MessageRenderingProps } from '../../../../models/messageType'; import { useDispatch, useSelector } from 'react-redux'; -import { getMessageLinkPreviewProps } from '../../../../state/selectors/conversations'; +import { + getIsMessageSelectionMode, + getMessageLinkPreviewProps, +} from '../../../../state/selectors/conversations'; import { SessionIcon } from '../../../icon'; -import { MINIMUM_LINK_PREVIEW_IMAGE_WIDTH } from '../message-item/Message'; import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm'; export type MessageLinkPreviewSelectorProps = Pick< @@ -20,9 +21,12 @@ type Props = { messageId: string; }; +const linkPreviewsImageSize = 100; + export const MessageLinkPreview = (props: Props) => { const selected = useSelector(state => getMessageLinkPreviewProps(state as any, props.messageId)); const dispatch = useDispatch(); + const isMessageSelectionMode = useSelector(getIsMessageSelectionMode); if (!selected) { return null; @@ -44,10 +48,11 @@ export const MessageLinkPreview = (props: Props) => { } const previewHasImage = first.image && isImageAttachment(first.image); - const width = first.image && first.image.width; - const isFullSizeImage = width && width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH; function openLinkFromPreview() { + if (isMessageSelectionMode) { + return; + } if (previews?.length && previews[0].url) { showLinkVisitWarningDialog(previews[0].url, dispatch); } @@ -59,23 +64,20 @@ export const MessageLinkPreview = (props: Props) => { className={classNames('module-message__link-preview')} onClick={openLinkFromPreview} > - {first.image && previewHasImage && isFullSizeImage ? ( - - ) : null}
- {first.image && previewHasImage && !isFullSizeImage ? ( + {previewHasImage ? (
{window.i18n('previewThumbnail',
- ) : !first.image || !previewHasImage ? ( + ) : (
@@ -83,7 +85,7 @@ export const MessageLinkPreview = (props: Props) => {
- ) : null} + )}
{first.title}
{first.domain}
diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index 5da6e4444..beb27fa88 100644 --- a/ts/state/selectors/conversations.ts +++ b/ts/state/selectors/conversations.ts @@ -647,6 +647,11 @@ export const getSelectedMessageIds = createSelector( (state: ConversationsStateType): Array => state.selectedMessageIds ); +export const getIsMessageSelectionMode = createSelector( + getSelectedMessageIds, + (state: Array): boolean => Boolean(state.length) +); + export const getLightBoxOptions = createSelector( getConversations, (state: ConversationsStateType): LightBoxOptions | undefined => state.lightBox diff --git a/ts/window.d.ts b/ts/window.d.ts index 8df9899ac..70de3a572 100644 --- a/ts/window.d.ts +++ b/ts/window.d.ts @@ -43,7 +43,7 @@ declare global { }; }; SessionSnodeAPI: SessionSnodeAPI; - onLogin: any; + onLogin: (pw: string) => Promise; persistStore?: Persistor; restart: any; getSeedNodeList: () => Array | undefined;