specter/mastodon
1
0
Fork 0
forked from fedi/mastodon
Code Pull requests Activity

Added inline spoiler button styles

Browse source
This commit is contained in:
Anthony Bellew 2017-01-26 03:02:42 -07:00 committed by GitHub
parent d944946c52
commit 8f18c8f9ad
1 changed files with 11 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/assets/javascripts/components/components/status_content.jsx
View file

@ -86,6 +86,15 @@ const StatusContent = React.createClass({
const content = { __html: emojify(status.get('content')) }; const content = { __html: emojify(status.get('content')) };
const spoilerContent = { __html: emojify(status.get('spoiler_text', '')) }; const spoilerContent = { __html: emojify(status.get('spoiler_text', '')) };
const spoilerStyle = {
backgroundColor: '#fff',
borderRadius: '0 4px',
color: '#363c4b',
fontWeight: '500',
fontSize: '12px',
textTransform: 'uppercase'
};
if (status.get('spoiler_text').length > 0) { if (status.get('spoiler_text').length > 0) {
const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />; const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />;
@ -93,7 +102,8 @@ const StatusContent = React.createClass({
return ( return (
<div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> <div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
<p style={{ marginBottom: hidden ? '0px' : '' }} > <p style={{ marginBottom: hidden ? '0px' : '' }} >
<span dangerouslySetInnerHTML={spoilerContent} /> <a onClick={this.handleSpoilerClick}>[{toggleText}]</a> <span dangerouslySetInnerHTML={spoilerContent} />
<a style={spoilerStyle} onClick={this.handleSpoilerClick}>[{toggleText}]</a>
</p> </p>
<div style={{ display: hidden ? 'none' : 'block' }} dangerouslySetInnerHTML={content} /> <div style={{ display: hidden ? 'none' : 'block' }} dangerouslySetInnerHTML={content} />