mirror of https://github.com/mastodon/mastodon.git
Change design of link previews in web UI (#26136)
parent
4d01d1a1ee
commit
6b2952d1dd
|
@ -12,6 +12,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
|
||||||
import { Blurhash } from 'mastodon/components/blurhash';
|
import { Blurhash } from 'mastodon/components/blurhash';
|
||||||
import { Icon } from 'mastodon/components/icon';
|
import { Icon } from 'mastodon/components/icon';
|
||||||
|
import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
|
||||||
import { useBlurhash } from 'mastodon/initial_state';
|
import { useBlurhash } from 'mastodon/initial_state';
|
||||||
|
|
||||||
const IDNA_PREFIX = 'xn--';
|
const IDNA_PREFIX = 'xn--';
|
||||||
|
@ -57,14 +58,9 @@ export default class Card extends PureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
card: ImmutablePropTypes.map,
|
card: ImmutablePropTypes.map,
|
||||||
onOpenMedia: PropTypes.func.isRequired,
|
onOpenMedia: PropTypes.func.isRequired,
|
||||||
compact: PropTypes.bool,
|
|
||||||
sensitive: PropTypes.bool,
|
sensitive: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
|
||||||
compact: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
previewLoaded: false,
|
previewLoaded: false,
|
||||||
embedded: false,
|
embedded: false,
|
||||||
|
@ -148,7 +144,7 @@ export default class Card extends PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { card, compact } = this.props;
|
const { card } = this.props;
|
||||||
const { embedded, revealed } = this.state;
|
const { embedded, revealed } = this.state;
|
||||||
|
|
||||||
if (card === null) {
|
if (card === null) {
|
||||||
|
@ -156,29 +152,24 @@ export default class Card extends PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
|
const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
|
||||||
const horizontal = (!compact && card.get('width') > card.get('height')) || card.get('type') !== 'link' || embedded;
|
|
||||||
const interactive = card.get('type') !== 'link';
|
const interactive = card.get('type') !== 'link';
|
||||||
const className = classnames('status-card', { horizontal, compact, interactive });
|
|
||||||
const title = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener noreferrer' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>;
|
|
||||||
const language = card.get('language') || '';
|
const language = card.get('language') || '';
|
||||||
|
|
||||||
const description = (
|
const description = (
|
||||||
<div className='status-card__content' lang={language}>
|
<div className='status-card__content' lang={language}>
|
||||||
{title}
|
<span className='status-card__host'>{provider}{card.get('published_at') && <> · <RelativeTimestamp timestamp={card.get('published_at')} /></>}</span>
|
||||||
{!(horizontal || compact) && <p className='status-card__description' title={card.get('description')}>{card.get('description')}</p>}
|
<strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>
|
||||||
<span className='status-card__host'>{provider}</span>
|
{card.get('author_name').length > 0 && <span className='status-card__author'><FormattedMessage id='link_preview.author' defaultMessage='By {name}' values={{ name: <strong>{card.get('author_name')}</strong> }} /></span>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const thumbnailStyle = {
|
const thumbnailStyle = {
|
||||||
visibility: revealed? null : 'hidden',
|
visibility: revealed ? null : 'hidden',
|
||||||
|
aspectRatio: `${card.get('width')} / ${card.get('height')}`
|
||||||
};
|
};
|
||||||
|
|
||||||
if (horizontal) {
|
let embed;
|
||||||
thumbnailStyle.aspectRatio = (compact && !embedded) ? '16 / 9' : `${card.get('width')} / ${card.get('height')}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
let embed = '';
|
|
||||||
let canvas = (
|
let canvas = (
|
||||||
<Blurhash
|
<Blurhash
|
||||||
className={classnames('status-card__image-preview', {
|
className={classnames('status-card__image-preview', {
|
||||||
|
@ -188,12 +179,15 @@ export default class Card extends PureComponent {
|
||||||
dummy={!useBlurhash}
|
dummy={!useBlurhash}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
let thumbnail = <img src={card.get('image')} alt='' style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
|
let thumbnail = <img src={card.get('image')} alt='' style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
|
||||||
|
|
||||||
let spoilerButton = (
|
let spoilerButton = (
|
||||||
<button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
|
<button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
|
||||||
<span className='spoiler-button__overlay__label'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
|
<span className='spoiler-button__overlay__label'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
|
||||||
spoilerButton = (
|
spoilerButton = (
|
||||||
<div className={classnames('spoiler-button', { 'spoiler-button--minified': revealed })}>
|
<div className={classnames('spoiler-button', { 'spoiler-button--minified': revealed })}>
|
||||||
{spoilerButton}
|
{spoilerButton}
|
||||||
|
@ -219,19 +213,20 @@ export default class Card extends PureComponent {
|
||||||
<div className='status-card__actions'>
|
<div className='status-card__actions'>
|
||||||
<div>
|
<div>
|
||||||
<button type='button' onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
|
<button type='button' onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
|
||||||
{horizontal && <a href={card.get('url')} target='_blank' rel='noopener noreferrer'><Icon id='external-link' /></a>}
|
<a href={card.get('url')} target='_blank' rel='noopener noreferrer'><Icon id='external-link' /></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!revealed && spoilerButton}
|
{!revealed && spoilerButton}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={className} ref={this.setRef} onClick={revealed ? null : this.handleReveal} role={revealed ? 'button' : null}>
|
<div className='status-card' ref={this.setRef} onClick={revealed ? null : this.handleReveal} role={revealed ? 'button' : null}>
|
||||||
{embed}
|
{embed}
|
||||||
{!compact && description}
|
<a href={card.get('url')} target='_blank' rel='noopener noreferrer'>{description}</a>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else if (card.get('image')) {
|
} else if (card.get('image')) {
|
||||||
|
@ -243,14 +238,14 @@ export default class Card extends PureComponent {
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
embed = (
|
embed = (
|
||||||
<div className='status-card__image'>
|
<div className='status-card__image' style={{ aspectRatio: '1.9 / 1' }}>
|
||||||
<Icon id='file-text' />
|
<Icon id='file-text' />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a href={card.get('url')} className={className} target='_blank' rel='noopener noreferrer' ref={this.setRef}>
|
<a href={card.get('url')} className='status-card' target='_blank' rel='noopener noreferrer' ref={this.setRef}>
|
||||||
{embed}
|
{embed}
|
||||||
{description}
|
{description}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -363,6 +363,7 @@
|
||||||
"lightbox.previous": "Previous",
|
"lightbox.previous": "Previous",
|
||||||
"limited_account_hint.action": "Show profile anyway",
|
"limited_account_hint.action": "Show profile anyway",
|
||||||
"limited_account_hint.title": "This profile has been hidden by the moderators of {domain}.",
|
"limited_account_hint.title": "This profile has been hidden by the moderators of {domain}.",
|
||||||
|
"link_preview.author": "By {name}",
|
||||||
"lists.account.add": "Add to list",
|
"lists.account.add": "Add to list",
|
||||||
"lists.account.remove": "Remove from list",
|
"lists.account.remove": "Remove from list",
|
||||||
"lists.delete": "Delete list",
|
"lists.delete": "Delete list",
|
||||||
|
|
|
@ -77,6 +77,10 @@ html {
|
||||||
background: $white;
|
background: $white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.column-header {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.column-header__button.active {
|
.column-header__button.active {
|
||||||
color: $ui-highlight-color;
|
color: $ui-highlight-color;
|
||||||
|
|
||||||
|
@ -414,7 +418,7 @@ html {
|
||||||
.column-header__collapsible-inner {
|
.column-header__collapsible-inner {
|
||||||
background: darken($ui-base-color, 4%);
|
background: darken($ui-base-color, 4%);
|
||||||
border: 1px solid lighten($ui-base-color, 8%);
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
border-top: 0;
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard__quick-access,
|
.dashboard__quick-access,
|
||||||
|
|
|
@ -5,7 +5,7 @@ $white: #ffffff;
|
||||||
$classic-base-color: #282c37;
|
$classic-base-color: #282c37;
|
||||||
$classic-primary-color: #9baec8;
|
$classic-primary-color: #9baec8;
|
||||||
$classic-secondary-color: #d9e1e8;
|
$classic-secondary-color: #d9e1e8;
|
||||||
$classic-highlight-color: #6364ff;
|
$classic-highlight-color: #858afa;
|
||||||
|
|
||||||
$blurple-600: #563acc; // Iris
|
$blurple-600: #563acc; // Iris
|
||||||
$blurple-500: #6364ff; // Brand purple
|
$blurple-500: #6364ff; // Brand purple
|
||||||
|
|
|
@ -252,13 +252,14 @@
|
||||||
|
|
||||||
&.overlayed {
|
&.overlayed {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
background: rgba($base-overlay-background, 0.6);
|
background: rgba($black, 0.65);
|
||||||
color: rgba($primary-text-color, 0.7);
|
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
|
||||||
|
color: rgba($white, 0.7);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: rgba($base-overlay-background, 0.9);
|
background: rgba($black, 0.9);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1352,6 +1353,10 @@ body > [data-popper-placement] {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.scrollable > div:first-child .detailed-status {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.detailed-status__meta {
|
.detailed-status__meta {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
color: $dark-text-color;
|
color: $dark-text-color;
|
||||||
|
@ -3504,12 +3509,10 @@ button.icon-button.active i.fa-retweet {
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-card {
|
.status-card {
|
||||||
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border: 1px solid lighten($ui-base-color, 8%);
|
color: $darker-text-color;
|
||||||
border-radius: 4px;
|
|
||||||
color: $dark-text-color;
|
|
||||||
margin-top: 14px;
|
margin-top: 14px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -3563,8 +3566,29 @@ button.icon-button.active i.fa-retweet {
|
||||||
a.status-card {
|
a.status-card {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover,
|
||||||
background: lighten($ui-base-color, 8%);
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
.status-card__title,
|
||||||
|
.status-card__host,
|
||||||
|
.status-card__author {
|
||||||
|
color: $highlight-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
.status-card__title,
|
||||||
|
.status-card__host,
|
||||||
|
.status-card__author {
|
||||||
|
color: $highlight-text-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3590,42 +3614,42 @@ a.status-card {
|
||||||
|
|
||||||
.status-card__title {
|
.status-card__title {
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: 500;
|
font-weight: 700;
|
||||||
margin-bottom: 5px;
|
font-size: 19px;
|
||||||
color: $darker-text-color;
|
line-height: 24px;
|
||||||
|
color: $primary-text-color;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-card__content {
|
.status-card__content {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 14px 14px 14px 8px;
|
padding: 15px 0;
|
||||||
}
|
padding-bottom: 0;
|
||||||
|
|
||||||
.status-card__description {
|
|
||||||
color: $darker-text-color;
|
|
||||||
overflow: hidden;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-card__host {
|
.status-card__host {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 5px;
|
font-size: 14px;
|
||||||
font-size: 13px;
|
margin-bottom: 8px;
|
||||||
overflow: hidden;
|
}
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
.status-card__author {
|
||||||
|
display: block;
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-card__image {
|
.status-card__image {
|
||||||
flex: 0 0 100px;
|
width: 100%;
|
||||||
background: lighten($ui-base-color, 8%);
|
background: lighten($ui-base-color, 8%);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
& > .fa {
|
& > .fa {
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
|
@ -3637,50 +3661,8 @@ a.status-card {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-card.horizontal {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
.status-card__image {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card__image-image,
|
|
||||||
.status-card__image-preview {
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card__title {
|
|
||||||
white-space: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card.compact {
|
|
||||||
border-color: lighten($ui-base-color, 4%);
|
|
||||||
|
|
||||||
&.interactive {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card__content {
|
|
||||||
padding: 8px;
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card__title {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card__image {
|
|
||||||
flex: 0 0 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a.status-card.compact:hover {
|
|
||||||
background-color: lighten($ui-base-color, 4%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card__image-image {
|
.status-card__image-image {
|
||||||
border-radius: 4px 0 0 4px;
|
border-radius: 8px;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -3691,7 +3673,7 @@ a.status-card.compact:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-card__image-preview {
|
.status-card__image-preview {
|
||||||
border-radius: 4px 0 0 4px;
|
border-radius: 8px;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
@ -124,6 +124,7 @@ class LinkDetailsExtractor
|
||||||
author_url: author_url || '',
|
author_url: author_url || '',
|
||||||
embed_url: embed_url || '',
|
embed_url: embed_url || '',
|
||||||
language: language,
|
language: language,
|
||||||
|
created_at: published_at,
|
||||||
}
|
}
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -159,6 +160,10 @@ class LinkDetailsExtractor
|
||||||
html_entities.decode(structured_data&.description || opengraph_tag('og:description') || meta_tag('description'))
|
html_entities.decode(structured_data&.description || opengraph_tag('og:description') || meta_tag('description'))
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def published_at
|
||||||
|
structured_data&.date_published || opengraph_tag('article:published_time')
|
||||||
|
end
|
||||||
|
|
||||||
def image
|
def image
|
||||||
valid_url_or_nil(opengraph_tag('og:image'))
|
valid_url_or_nil(opengraph_tag('og:image'))
|
||||||
end
|
end
|
||||||
|
|
|
@ -6,7 +6,7 @@ class REST::PreviewCardSerializer < ActiveModel::Serializer
|
||||||
attributes :url, :title, :description, :language, :type,
|
attributes :url, :title, :description, :language, :type,
|
||||||
:author_name, :author_url, :provider_name,
|
:author_name, :author_url, :provider_name,
|
||||||
:provider_url, :html, :width, :height,
|
:provider_url, :html, :width, :height,
|
||||||
:image, :embed_url, :blurhash
|
:image, :embed_url, :blurhash, :published_at
|
||||||
|
|
||||||
def image
|
def image
|
||||||
object.image? ? full_asset_url(object.image.url(:original)) : nil
|
object.image? ? full_asset_url(object.image.url(:original)) : nil
|
||||||
|
@ -15,4 +15,8 @@ class REST::PreviewCardSerializer < ActiveModel::Serializer
|
||||||
def html
|
def html
|
||||||
Sanitize.fragment(object.html, Sanitize::Config::MASTODON_OEMBED)
|
Sanitize.fragment(object.html, Sanitize::Config::MASTODON_OEMBED)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def published_at
|
||||||
|
object.created_at
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|
Loading…
Reference in New Issue