When enabled, always display media in gallery. Also: click to reveal (#6692)
Fix #6677pull/379/head
parent
77406d3a09
commit
b79ab15859
|
@ -12,9 +12,15 @@ export default class Permalink extends React.PureComponent {
|
||||||
href: PropTypes.string.isRequired,
|
href: PropTypes.string.isRequired,
|
||||||
to: PropTypes.string.isRequired,
|
to: PropTypes.string.isRequired,
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
|
onInterceptClick: PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
||||||
handleClick = (e) => {
|
handleClick = e => {
|
||||||
|
if (this.props.onInterceptClick && this.props.onInterceptClick()) {
|
||||||
|
e.preventDefault();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (this.context.router && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
|
if (this.context.router && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.context.router.history.push(this.props.to);
|
this.context.router.history.push(this.props.to);
|
||||||
|
@ -22,7 +28,7 @@ export default class Permalink extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { href, children, className, ...other } = this.props;
|
const { href, children, className, onInterceptClick, ...other } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a target='_blank' href={href} onClick={this.handleClick} {...other} className={`permalink${className ? ' ' + className : ''}`}>
|
<a target='_blank' href={href} onClick={this.handleClick} {...other} className={`permalink${className ? ' ' + className : ''}`}>
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React from 'react';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
import Permalink from '../../../components/permalink';
|
import Permalink from '../../../components/permalink';
|
||||||
|
import { displaySensitiveMedia } from '../../../initial_state';
|
||||||
|
|
||||||
export default class MediaItem extends ImmutablePureComponent {
|
export default class MediaItem extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
@ -9,8 +10,22 @@ export default class MediaItem extends ImmutablePureComponent {
|
||||||
media: ImmutablePropTypes.map.isRequired,
|
media: ImmutablePropTypes.map.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
visible: !this.props.media.getIn(['status', 'sensitive']) || displaySensitiveMedia,
|
||||||
|
};
|
||||||
|
|
||||||
|
handleClick = () => {
|
||||||
|
if (!this.state.visible) {
|
||||||
|
this.setState({ visible: true });
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { media } = this.props;
|
const { media } = this.props;
|
||||||
|
const { visible } = this.state;
|
||||||
const status = media.get('status');
|
const status = media.get('status');
|
||||||
const focusX = media.getIn(['meta', 'focus', 'x']);
|
const focusX = media.getIn(['meta', 'focus', 'x']);
|
||||||
const focusY = media.getIn(['meta', 'focus', 'y']);
|
const focusY = media.getIn(['meta', 'focus', 'y']);
|
||||||
|
@ -18,21 +33,28 @@ export default class MediaItem extends ImmutablePureComponent {
|
||||||
const y = ((focusY / -2) + .5) * 100;
|
const y = ((focusY / -2) + .5) * 100;
|
||||||
const style = {};
|
const style = {};
|
||||||
|
|
||||||
let content;
|
let label, icon;
|
||||||
|
|
||||||
if (media.get('type') === 'gifv') {
|
if (media.get('type') === 'gifv') {
|
||||||
content = <span className='media-gallery__gifv__label'>GIF</span>;
|
label = <span className='media-gallery__gifv__label'>GIF</span>;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!status.get('sensitive')) {
|
if (visible) {
|
||||||
style.backgroundImage = `url(${media.get('preview_url')})`;
|
style.backgroundImage = `url(${media.get('preview_url')})`;
|
||||||
style.backgroundPosition = `${x}% ${y}%`;
|
style.backgroundPosition = `${x}% ${y}%`;
|
||||||
|
} else {
|
||||||
|
icon = (
|
||||||
|
<span className='account-gallery__item__icons'>
|
||||||
|
<i className='fa fa-eye-slash' />
|
||||||
|
</span>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='account-gallery__item'>
|
<div className='account-gallery__item'>
|
||||||
<Permalink to={`/statuses/${status.get('id')}`} href={status.get('url')} style={style}>
|
<Permalink to={`/statuses/${status.get('id')}`} href={status.get('url')} style={style} onInterceptClick={this.handleClick}>
|
||||||
{content}
|
{icon}
|
||||||
|
{label}
|
||||||
</Permalink>
|
</Permalink>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -4680,7 +4680,7 @@ a.status-card {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: inherit;
|
color: $ui-primary-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
|
@ -4688,6 +4688,7 @@ a.status-card {
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
color: $ui-secondary-color;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
|
@ -4699,6 +4700,14 @@ a.status-card {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__icons {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.account__section-headline {
|
.account__section-headline {
|
||||||
|
|
Loading…
Reference in New Issue