diff options
Diffstat (limited to 'app/assets')
| -rw-r--r-- | app/assets/javascripts/components/components/column_collapsable.jsx | 2 | ||||
| -rw-r--r-- | app/assets/javascripts/components/components/status_content.jsx | 11 |
2 files changed, 11 insertions, 2 deletions
diff --git a/app/assets/javascripts/components/components/column_collapsable.jsx b/app/assets/javascripts/components/components/column_collapsable.jsx index 203dc5e0c..90c561bce 100644 --- a/app/assets/javascripts/components/components/column_collapsable.jsx +++ b/app/assets/javascripts/components/components/column_collapsable.jsx @@ -47,7 +47,7 @@ const ColumnCollapsable = React.createClass({ <Motion defaultStyle={{ opacity: 0, height: 0 }} style={{ opacity: spring(collapsed ? 0 : 100), height: spring(collapsed ? 0 : fullHeight, collapsed ? undefined : { stiffness: 150, damping: 9 }) }}> {({ opacity, height }) => - <div style={{ overflow: 'hidden', height: `${height}px`, opacity: opacity / 100 }}> + <div style={{ overflow: height === fullHeight ? 'auto' : 'hidden', height: `${height}px`, opacity: opacity / 100, maxHeight: '70vh' }}> {children} </div> } diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx index 44346fabc..1531e071c 100644 --- a/app/assets/javascripts/components/components/status_content.jsx +++ b/app/assets/javascripts/components/components/status_content.jsx @@ -3,6 +3,7 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import escapeTextContentForBrowser from 'react/lib/escapeTextContentForBrowser'; import emojify from '../emoji'; import { FormattedMessage } from 'react-intl'; +import Permalink from './permalink'; const spoilerStyle = { display: 'inline-block', @@ -96,16 +97,24 @@ const StatusContent = React.createClass({ const { status } = this.props; const { hidden } = this.state; + const content = { __html: emojify(status.get('content')) }; const spoilerContent = { __html: emojify(escapeTextContentForBrowser(status.get('spoiler_text', ''))) }; if (status.get('spoiler_text').length > 0) { + const mentionLinks = status.get('mentions').map(item => ( + <Permalink to={`/accounts/${item.get('id')}`} href={item.get('url')} key={item.get('id')} className='mention'> + @<span>{item.get('username')}</span> + </Permalink> + )).reduce((aggregate, item) => [...aggregate, item, ' '], []) + const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />; return ( <div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> <p style={{ marginBottom: hidden ? '0px' : '' }} > - <span dangerouslySetInnerHTML={spoilerContent} /> <a className='status__content__spoiler-link' style={spoilerStyle} onClick={this.handleSpoilerClick}>{toggleText}</a> + {mentionLinks} + <span dangerouslySetInnerHTML={spoilerContent} /> <a className='status__content__spoiler-link' style={spoilerStyle} onClick={this.handleSpoilerClick}>{toggleText}</a> </p> <div style={{ display: hidden ? 'none' : 'block' }} dangerouslySetInnerHTML={content} /> |