Fixed story link preview tooltip fonts and avoid scaling them as the story scales
This commit is contained in:
Alvaro
GitHub
parent
249f5c37fc
commit
fe455a482f
2 changed files with 148 additions and 123 deletions
|
|
@ -165,11 +165,12 @@
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 30px;
|
font-size: 13px;
|
||||||
|
font-weight: 400;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
line-height: 32px;
|
line-height: 18px;
|
||||||
max-width: 656px;
|
max-width: 656px;
|
||||||
padding: 24px 32px;
|
padding: 12px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
z-index: $z-index-above-base;
|
z-index: $z-index-above-base;
|
||||||
|
|
@ -185,6 +186,11 @@
|
||||||
top: 100%;
|
top: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
&__url {
|
&__url {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
max-width: 566px;
|
max-width: 566px;
|
||||||
|
|
|
||||||
|
|
@ -139,140 +139,159 @@ export const TextAttachment = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Measure bounds>
|
<Measure bounds>
|
||||||
{({ contentRect, measureRef }) => (
|
{({ contentRect, measureRef }) => {
|
||||||
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
const scaleFactor = (contentRect.bounds?.height || 1) / 1280;
|
||||||
<div
|
|
||||||
className="TextAttachment"
|
return (
|
||||||
onClick={() => {
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
||||||
if (linkPreviewOffsetTop) {
|
|
||||||
setLinkPreviewOffsetTop(undefined);
|
|
||||||
}
|
|
||||||
onClick?.();
|
|
||||||
}}
|
|
||||||
onKeyUp={ev => {
|
|
||||||
if (ev.key === 'Escape' && linkPreviewOffsetTop) {
|
|
||||||
setLinkPreviewOffsetTop(undefined);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
ref={measureRef}
|
|
||||||
style={isThumbnail ? storyBackgroundColor : undefined}
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
className="TextAttachment__story"
|
className="TextAttachment"
|
||||||
style={{
|
onClick={() => {
|
||||||
...(isThumbnail ? {} : storyBackgroundColor),
|
if (linkPreviewOffsetTop) {
|
||||||
transform: `scale(${(contentRect.bounds?.height || 1) / 1280})`,
|
setLinkPreviewOffsetTop(undefined);
|
||||||
|
}
|
||||||
|
onClick?.();
|
||||||
}}
|
}}
|
||||||
|
onKeyUp={ev => {
|
||||||
|
if (ev.key === 'Escape' && linkPreviewOffsetTop) {
|
||||||
|
setLinkPreviewOffsetTop(undefined);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
ref={measureRef}
|
||||||
|
style={isThumbnail ? storyBackgroundColor : undefined}
|
||||||
>
|
>
|
||||||
{(textContent || onChange) && (
|
{/*
|
||||||
<div
|
The tooltip must be outside of the scaled area, as it should not scale with
|
||||||
className={classNames('TextAttachment__text', {
|
the story, but it must be positioned using the scaled offset
|
||||||
'TextAttachment__text--with-bg': Boolean(
|
*/}
|
||||||
textAttachment.textBackgroundColor
|
{textAttachment.preview &&
|
||||||
),
|
textAttachment.preview.url &&
|
||||||
})}
|
linkPreviewOffsetTop &&
|
||||||
style={{
|
!isThumbnail && (
|
||||||
backgroundColor: textAttachment.textBackgroundColor
|
<a
|
||||||
? getHexFromNumber(textAttachment.textBackgroundColor)
|
className="TextAttachment__preview__tooltip"
|
||||||
: 'transparent',
|
href={textAttachment.preview.url}
|
||||||
}}
|
rel="noreferrer"
|
||||||
>
|
style={{
|
||||||
{onChange ? (
|
top: linkPreviewOffsetTop * scaleFactor - 89, // minus height of tooltip and some spacing
|
||||||
<TextareaAutosize
|
}}
|
||||||
className="TextAttachment__text__container TextAttachment__text__textarea"
|
target="_blank"
|
||||||
disabled={!isEditingText}
|
>
|
||||||
onChange={ev => onChange(ev.currentTarget.value)}
|
<div>
|
||||||
placeholder={i18n('TextAttachment__placeholder')}
|
<div className="TextAttachment__preview__tooltip__title">
|
||||||
ref={textEditorRef}
|
{i18n('TextAttachment__preview__link')}
|
||||||
style={getTextStyles(
|
|
||||||
textContent,
|
|
||||||
textAttachment.textForegroundColor,
|
|
||||||
textAttachment.textStyle,
|
|
||||||
i18n
|
|
||||||
)}
|
|
||||||
value={textContent}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
className="TextAttachment__text__container"
|
|
||||||
style={getTextStyles(
|
|
||||||
textContent,
|
|
||||||
textAttachment.textForegroundColor,
|
|
||||||
textAttachment.textStyle,
|
|
||||||
i18n
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Emojify
|
|
||||||
text={textContent}
|
|
||||||
renderNonEmoji={renderNewLines}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{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>
|
||||||
<div className="TextAttachment__preview__tooltip__arrow" />
|
<div className="TextAttachment__preview__tooltip__url">
|
||||||
</a>
|
{textAttachment.preview.url}
|
||||||
)}
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="TextAttachment__preview__tooltip__arrow" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
className="TextAttachment__story"
|
||||||
|
style={{
|
||||||
|
...(isThumbnail ? {} : storyBackgroundColor),
|
||||||
|
transform: `scale(${scaleFactor})`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{(textContent || onChange) && (
|
||||||
<div
|
<div
|
||||||
className={classNames('TextAttachment__preview-container', {
|
className={classNames('TextAttachment__text', {
|
||||||
'TextAttachment__preview-container--large': Boolean(
|
'TextAttachment__text--with-bg': Boolean(
|
||||||
textAttachment.preview.title
|
textAttachment.textBackgroundColor
|
||||||
),
|
),
|
||||||
})}
|
})}
|
||||||
ref={linkPreview}
|
style={{
|
||||||
onFocus={() => {
|
backgroundColor: textAttachment.textBackgroundColor
|
||||||
if (!disableLinkPreviewPopup) {
|
? getHexFromNumber(textAttachment.textBackgroundColor)
|
||||||
setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
|
: 'transparent',
|
||||||
}
|
|
||||||
}}
|
|
||||||
onMouseOver={() => {
|
|
||||||
if (!disableLinkPreviewPopup) {
|
|
||||||
setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{onRemoveLinkPreview && (
|
{onChange ? (
|
||||||
<div className="TextAttachment__preview__remove">
|
<TextareaAutosize
|
||||||
<button
|
className="TextAttachment__text__container TextAttachment__text__textarea"
|
||||||
aria-label={i18n('Keyboard--remove-draft-link-preview')}
|
disabled={!isEditingText}
|
||||||
type="button"
|
onChange={ev => onChange(ev.currentTarget.value)}
|
||||||
onClick={onRemoveLinkPreview}
|
placeholder={i18n('TextAttachment__placeholder')}
|
||||||
|
ref={textEditorRef}
|
||||||
|
style={getTextStyles(
|
||||||
|
textContent,
|
||||||
|
textAttachment.textForegroundColor,
|
||||||
|
textAttachment.textStyle,
|
||||||
|
i18n
|
||||||
|
)}
|
||||||
|
value={textContent}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className="TextAttachment__text__container"
|
||||||
|
style={getTextStyles(
|
||||||
|
textContent,
|
||||||
|
textAttachment.textForegroundColor,
|
||||||
|
textAttachment.textStyle,
|
||||||
|
i18n
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Emojify
|
||||||
|
text={textContent}
|
||||||
|
renderNonEmoji={renderNewLines}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<StagedLinkPreview
|
|
||||||
domain={getDomain(String(textAttachment.preview.url))}
|
|
||||||
i18n={i18n}
|
|
||||||
image={textAttachment.preview.image}
|
|
||||||
imageSize={textAttachment.preview.title ? 144 : 72}
|
|
||||||
moduleClassName="TextAttachment__preview"
|
|
||||||
title={textAttachment.preview.title || undefined}
|
|
||||||
url={textAttachment.preview.url}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
)}
|
||||||
)}
|
{textAttachment.preview && textAttachment.preview.url && (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={classNames('TextAttachment__preview-container', {
|
||||||
|
'TextAttachment__preview-container--large': Boolean(
|
||||||
|
textAttachment.preview.title
|
||||||
|
),
|
||||||
|
})}
|
||||||
|
ref={linkPreview}
|
||||||
|
onFocus={() => {
|
||||||
|
if (!disableLinkPreviewPopup) {
|
||||||
|
setLinkPreviewOffsetTop(
|
||||||
|
linkPreview?.current?.offsetTop
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onMouseOver={() => {
|
||||||
|
if (!disableLinkPreviewPopup) {
|
||||||
|
setLinkPreviewOffsetTop(
|
||||||
|
linkPreview?.current?.offsetTop
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{onRemoveLinkPreview && (
|
||||||
|
<div className="TextAttachment__preview__remove">
|
||||||
|
<button
|
||||||
|
aria-label={i18n(
|
||||||
|
'Keyboard--remove-draft-link-preview'
|
||||||
|
)}
|
||||||
|
type="button"
|
||||||
|
onClick={onRemoveLinkPreview}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<StagedLinkPreview
|
||||||
|
domain={getDomain(String(textAttachment.preview.url))}
|
||||||
|
i18n={i18n}
|
||||||
|
image={textAttachment.preview.image}
|
||||||
|
imageSize={textAttachment.preview.title ? 144 : 72}
|
||||||
|
moduleClassName="TextAttachment__preview"
|
||||||
|
title={textAttachment.preview.title || undefined}
|
||||||
|
url={textAttachment.preview.url}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
)}
|
}}
|
||||||
</Measure>
|
</Measure>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue