diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2017-02-05 04:11:14 +0100 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-02-05 04:11:14 +0100 |
commit | b5bf807a3472c5d70c729b6d678b5152301d4bef (patch) | |
tree | 1b0e8f7fe49b49c8e912faf742aa3af4e00ce91e /app/assets | |
parent | fb6aa7ad5ce79ae0738ebf1cada0e834c33b0ef2 (diff) |
Remove react-dnd as it was interfering with text selection. Move content
warning mentions preview into area where actual content would be
Diffstat (limited to 'app/assets')
3 files changed, 14 insertions, 24 deletions
diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx index 1531e071c..edaee1756 100644 --- a/app/assets/javascripts/components/components/status_content.jsx +++ b/app/assets/javascripts/components/components/status_content.jsx @@ -97,11 +97,12 @@ 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) { + let mentionsPlaceholder = ''; + 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> @@ -110,13 +111,18 @@ const StatusContent = React.createClass({ const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />; + if (hidden) { + mentionsPlaceholder = <div>{mentionLinks}</div>; + } + return ( <div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> - <p style={{ marginBottom: hidden ? '0px' : '' }} > - {mentionLinks} + <p style={{ marginBottom: hidden && mentionLinks.size === 0 ? '0px' : '' }} > <span dangerouslySetInnerHTML={spoilerContent} /> <a className='status__content__spoiler-link' style={spoilerStyle} onClick={this.handleSpoilerClick}>{toggleText}</a> </p> + {mentionsPlaceholder} + <div style={{ display: hidden ? 'none' : 'block' }} dangerouslySetInnerHTML={content} /> </div> ); diff --git a/app/assets/javascripts/components/features/ui/components/column.jsx b/app/assets/javascripts/components/features/ui/components/column.jsx index b33383428..2eafe5a8f 100644 --- a/app/assets/javascripts/components/features/ui/components/column.jsx +++ b/app/assets/javascripts/components/features/ui/components/column.jsx @@ -1,6 +1,5 @@ import ColumnHeader from './column_header'; import PureRenderMixin from 'react-addons-pure-render-mixin'; -import { DragSource } from 'react-dnd'; const easingOutQuint = (x, t, b, c, d) => c*((t=t/d-1)*t*t*t*t + 1) + b; @@ -37,22 +36,9 @@ const style = { flexDirection: 'column' }; -const columnSource = { - beginDrag (props) { - return {}; - } -}; - -const collect = (connect, monitor) => ({ - connectDragSource: connect.dragSource(), - isDragging: monitor.isDragging() -}); - const Column = React.createClass({ propTypes: { - connectDragSource: React.PropTypes.func.isRequired, - isDragging: React.PropTypes.bool.isRequired, heading: React.PropTypes.string, icon: React.PropTypes.string, children: React.PropTypes.node @@ -72,7 +58,7 @@ const Column = React.createClass({ }, render () { - const { heading, icon, children, connectDragSource, isDragging } = this.props; + const { heading, icon, children } = this.props; let header = ''; @@ -80,8 +66,8 @@ const Column = React.createClass({ header = <ColumnHeader icon={icon} type={heading} onClick={this.handleHeaderClick} />; } - return connectDragSource( - <div className='column' style={{...style, opacity: isDragging ? '0.5' : '1' }} onWheel={this.handleWheel}> + return ( + <div className='column' style={style} onWheel={this.handleWheel}> {header} {children} </div> @@ -90,4 +76,4 @@ const Column = React.createClass({ }); -export default DragSource('column', columnSource, collect)(Column); +export default Column; diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx index de0c054ba..da44434b1 100644 --- a/app/assets/javascripts/components/features/ui/index.jsx +++ b/app/assets/javascripts/components/features/ui/index.jsx @@ -13,8 +13,6 @@ import { debounce } from 'react-decoration'; import { uploadCompose } from '../../actions/compose'; import { refreshTimeline } from '../../actions/timelines'; import { refreshNotifications } from '../../actions/notifications'; -import { DragDropContext } from 'react-dnd'; -import HTML5Backend from 'react-dnd-html5-backend'; const UI = React.createClass({ @@ -105,4 +103,4 @@ const UI = React.createClass({ }); -export default connect()(DragDropContext(HTML5Backend)(UI)); +export default connect()(UI); |