sforkowany z mirror/soapbox
Display large emojis when it's the only thing in the status
rodzic
3afdef38b9
commit
60872c9f67
|
@ -12,6 +12,16 @@ import { addGreentext } from 'soapbox/utils/greentext';
|
||||||
|
|
||||||
const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
|
const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
|
||||||
|
|
||||||
|
const justEmojis = (node, limit = 10) => {
|
||||||
|
if (!node) return false;
|
||||||
|
if (node.textContent.replaceAll(' ', '') !== '') return false;
|
||||||
|
const emojis = [...node.querySelectorAll('img.emojione')];
|
||||||
|
if (emojis.length > limit) return false;
|
||||||
|
const images = [...node.querySelectorAll('img')];
|
||||||
|
if (images.length > emojis.length) return false;
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
greentext: getSoapboxConfig(state).get('greentext'),
|
greentext: getSoapboxConfig(state).get('greentext'),
|
||||||
});
|
});
|
||||||
|
@ -88,14 +98,18 @@ class StatusContent extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
refresh = () => {
|
||||||
this.setCollapse();
|
this.setCollapse();
|
||||||
this._updateStatusLinks();
|
this._updateStatusLinks();
|
||||||
|
this.setState({ justEmojis: justEmojis(this.node) });
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.refresh();
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate() {
|
componentDidUpdate() {
|
||||||
this.setCollapse();
|
this.refresh();
|
||||||
this._updateStatusLinks();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMentionClick = (mention, e) => {
|
onMentionClick = (mention, e) => {
|
||||||
|
@ -171,6 +185,7 @@ class StatusContent extends React.PureComponent {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { status } = this.props;
|
const { status } = this.props;
|
||||||
|
const { justEmojis } = this.state;
|
||||||
|
|
||||||
if (status.get('content').length === 0) {
|
if (status.get('content').length === 0) {
|
||||||
return null;
|
return null;
|
||||||
|
@ -185,6 +200,7 @@ class StatusContent extends React.PureComponent {
|
||||||
'status__content--with-action': this.props.onClick && this.context.router,
|
'status__content--with-action': this.props.onClick && this.context.router,
|
||||||
'status__content--with-spoiler': status.get('spoiler_text').length > 0,
|
'status__content--with-spoiler': status.get('spoiler_text').length > 0,
|
||||||
'status__content--collapsed': this.state.collapsed === true,
|
'status__content--collapsed': this.state.collapsed === true,
|
||||||
|
'status__content--big': justEmojis,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (isRtl(status.get('search_index'))) {
|
if (isRtl(status.get('search_index'))) {
|
||||||
|
@ -250,7 +266,9 @@ class StatusContent extends React.PureComponent {
|
||||||
<div
|
<div
|
||||||
tabIndex='0'
|
tabIndex='0'
|
||||||
ref={this.setRef}
|
ref={this.setRef}
|
||||||
className='status__content'
|
className={classnames('status__content', {
|
||||||
|
'status__content--big': justEmojis,
|
||||||
|
})}
|
||||||
style={directionStyle}
|
style={directionStyle}
|
||||||
dangerouslySetInnerHTML={content}
|
dangerouslySetInnerHTML={content}
|
||||||
lang={status.get('language')}
|
lang={status.get('language')}
|
||||||
|
|
|
@ -36,6 +36,13 @@
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
margin: -1px 0 0;
|
margin: -1px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--big {
|
||||||
|
img.emojione {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-player,
|
.video-player,
|
||||||
|
|
|
@ -66,6 +66,16 @@
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--big {
|
||||||
|
font-size: 32px !important;
|
||||||
|
line-height: normal !important;
|
||||||
|
|
||||||
|
img.emojione {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status__content > ul,
|
.status__content > ul,
|
||||||
|
|
Ładowanie…
Reference in New Issue