jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed story link preview tooltip fonts and avoid scaling them as the story scales

This commit is contained in:
Alvaro 2022-09-20 18:32:37 -06:00 committed by GitHub
parent 249f5c37fc
commit fe455a482f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 148 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
stylesheets/components/TextAttachment.scss
View File

@ -165,11 +165,12 @@
border-radius: 12px;
color: $color-white;
display: flex;
font-size: 30px;
font-size: 13px;
font-weight: 400;
justify-content: center;
line-height: 32px;
line-height: 18px;
max-width: 656px;
padding: 24px 32px;
padding: 12px;
position: absolute;
text-decoration: none;
z-index: $z-index-above-base;
@ -185,6 +186,11 @@
top: 100%;
}
&__title {
font-size: 14px;
font-weight: 600;
}
&__url {
margin-top: 4px;
max-width: 566px;

69
ts/components/TextAttachment.tsx
View File

@ -139,7 +139,10 @@ export const TextAttachment = ({
return (
<Measure bounds>
{({ contentRect, measureRef }) => (
{({ contentRect, measureRef }) => {
const scaleFactor = (contentRect.bounds?.height || 1) / 1280;
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
className="TextAttachment"
@ -157,11 +160,39 @@ export const TextAttachment = ({
ref={measureRef}
style={isThumbnail ? storyBackgroundColor : undefined}
>
{/*
The tooltip must be outside of the scaled area, as it should not scale with
the story, but it must be positioned using the scaled offset
*/}
{textAttachment.preview &&
textAttachment.preview.url &&
linkPreviewOffsetTop &&
!isThumbnail && (
<a
className="TextAttachment__preview__tooltip"
href={textAttachment.preview.url}
rel="noreferrer"
style={{
top: linkPreviewOffsetTop * scaleFactor - 89, // minus height of tooltip and some spacing
}}
target="_blank"
>
<div>
<div className="TextAttachment__preview__tooltip__title">
{i18n('TextAttachment__preview__link')}
</div>
<div className="TextAttachment__preview__tooltip__url">
{textAttachment.preview.url}
</div>
</div>
<div className="TextAttachment__preview__tooltip__arrow" />
</a>
)}
<div
className="TextAttachment__story"
style={{
...(isThumbnail ? {} : storyBackgroundColor),
transform: `scale(${(contentRect.bounds?.height || 1) / 1280})`,
transform: `scale(${scaleFactor})`,
}}
>
{(textContent || onChange) && (
@ -212,25 +243,6 @@ export const TextAttachment = ({
)}
{textAttachment.preview && textAttachment.preview.url && (
<>
{linkPreviewOffsetTop && !isThumbnail && (
<a
className="TextAttachment__preview__tooltip"
href={textAttachment.preview.url}
rel="noreferrer"
style={{
top: linkPreviewOffsetTop - 150,
}}
target="_blank"
>
<div>
<div>{i18n('TextAttachment__preview__link')}</div>
<div className="TextAttachment__preview__tooltip__url">
{textAttachment.preview.url}
</div>
</div>
<div className="TextAttachment__preview__tooltip__arrow" />
</a>
)}
<div
className={classNames('TextAttachment__preview-container', {
'TextAttachment__preview-container--large': Boolean(
@ -240,19 +252,25 @@ export const TextAttachment = ({
ref={linkPreview}
onFocus={() => {
if (!disableLinkPreviewPopup) {
setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
setLinkPreviewOffsetTop(
linkPreview?.current?.offsetTop
);
}
}}
onMouseOver={() => {
if (!disableLinkPreviewPopup) {
setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
setLinkPreviewOffsetTop(
linkPreview?.current?.offsetTop
);
}
}}
>
{onRemoveLinkPreview && (
<div className="TextAttachment__preview__remove">
<button
aria-label={i18n('Keyboard--remove-draft-link-preview')}
aria-label={i18n(
'Keyboard--remove-draft-link-preview'
)}
type="button"
onClick={onRemoveLinkPreview}
/>
@ -272,7 +290,8 @@ export const TextAttachment = ({
)}
</div>
</div>
)}
);
}}
</Measure>
);
};