mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Link preview UI improvements

Browse source
This commit is contained in:
Josh Perez 2023-02-03 17:21:07 -05:00 committed by GitHub
parent f329d9234a
commit fd6834588c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
stylesheets/components/CompositionInput.scss
View file

@ -108,6 +108,7 @@
&--link-preview { &--link-preview {
min-height: 110px; min-height: 110px;
max-height: 200px; max-height: 200px;
padding-top: 0;
} }
} }
@ -203,7 +204,8 @@ div.CompositionInput__link-preview {
border-radius: 8px; border-radius: 8px;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: space-between; justify-content: space-between;
margin-bottom: 4px; margin: 6px;
min-height: 74px;
overflow: hidden; overflow: hidden;
@include dark-theme { @include dark-theme {
@ -223,6 +225,10 @@ div.CompositionInput__link-preview {
padding-left: 12px; padding-left: 12px;
padding-top: 8px; padding-top: 8px;
} }
&__no-image {
margin-right: 0;
}
} }
button.CompositionInput__link-preview__close-button { button.CompositionInput__link-preview__close-button {

18
ts/components/CompositionInput.tsx
View file

@ -695,6 +695,14 @@ export function CompositionInput(props: Props): React.ReactElement {
ref={ref} ref={ref}
data-testid="CompositionInput" data-testid="CompositionInput"
> >
{conversationId && linkPreviewLoading && linkPreviewResult && (
<StagedLinkPreview
{...linkPreviewResult}
moduleClassName="CompositionInput__link-preview"
i18n={i18n}
onClose={() => onCloseLinkPreview?.(conversationId)}
/>
)}
{children} {children}
<div <div
ref={ ref={
@ -706,21 +714,13 @@ export function CompositionInput(props: Props): React.ReactElement {
onScroll={onScroll} onScroll={onScroll}
className={classNames( className={classNames(
getClassName('__input__scroller'), getClassName('__input__scroller'),
linkPreviewResult !large && linkPreviewResult
? getClassName('__input__scroller--link-preview') ? getClassName('__input__scroller--link-preview')
: null, : null,
large ? getClassName('__input__scroller--large') : null, large ? getClassName('__input__scroller--large') : null,
children ? getClassName('__input--with-children') : null children ? getClassName('__input--with-children') : null
)} )}
> >
{conversationId && linkPreviewLoading && linkPreviewResult && (
<StagedLinkPreview
{...linkPreviewResult}
moduleClassName="CompositionInput__link-preview"
i18n={i18n}
onClose={() => onCloseLinkPreview?.(conversationId)}
/>
)}
{reactQuill} {reactQuill}
{emojiCompletionElement} {emojiCompletionElement}
{mentionCompletionElement} {mentionCompletionElement}

6
ts/state/ducks/conversations.ts
View file

@ -134,10 +134,7 @@ import { isNotNil } from '../../util/isNotNil';
import { PanelType } from '../../types/Panels'; import { PanelType } from '../../types/Panels';
import { startConversation } from '../../util/startConversation'; import { startConversation } from '../../util/startConversation';
import { UUIDKind } from '../../types/UUID'; import { UUIDKind } from '../../types/UUID';
import { import { removeLinkPreview } from '../../services/LinkPreview';
removeLinkPreview,
suspendLinkPreviews,
} from '../../services/LinkPreview';
import type { import type {
ReplaceAttachmentsActionType, ReplaceAttachmentsActionType,
SetFocusActionType, SetFocusActionType,
@ -3670,7 +3667,6 @@ function onConversationClosed(
} }
removeLinkPreview(conversationId); removeLinkPreview(conversationId);
suspendLinkPreviews();
dispatch({ dispatch({
type: CONVERSATION_UNLOADED, type: CONVERSATION_UNLOADED,