treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Added inline spoiler button styles

lolsob-rspec
Anthony Bellew 2017-01-26 03:02:42 -07:00 committed by GitHub
parent 1c684c0888
commit 704713cea6
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} />