cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Merge pull request #541 from TrevInc/master 

Add brackets to visually distinguish show more / show less text
This commit is contained in:
Eugen 2017-01-26 11:07:42 +01:00 committed by GitHub
parent d53294b933 589837cfc7
commit c3a3ce8172
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,16 @@ 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: '#616b86',
borderRadius: '4px',
color: '#363c4b',
fontWeight: '500',
fontSize: '12px',
padding: '0 4px',
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 +103,7 @@ 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} />