diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2016-08-31 22:58:10 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2016-08-31 22:58:10 +0200 |
commit | dbae8062f4ff6dcad98c90f6654b27111806013a (patch) | |
tree | 68b423ac1d0c52b601dfac6838e26ce049323f57 /app/assets | |
parent | 1e0e17ba85deebd6763ed9414f3cc2e2a23e1dbd (diff) |
Replies in the compose form
Diffstat (limited to 'app/assets')
14 files changed, 246 insertions, 73 deletions
diff --git a/app/assets/javascripts/components/actions/compose.jsx b/app/assets/javascripts/components/actions/compose.jsx index 614ed1a89..cf5345078 100644 --- a/app/assets/javascripts/components/actions/compose.jsx +++ b/app/assets/javascripts/components/actions/compose.jsx @@ -5,6 +5,8 @@ export const COMPOSE_SUBMIT = 'COMPOSE_SUBMIT'; export const COMPOSE_SUBMIT_REQUEST = 'COMPOSE_SUBMIT_REQUEST'; export const COMPOSE_SUBMIT_SUCCESS = 'COMPOSE_SUBMIT_SUCCESS'; export const COMPOSE_SUBMIT_FAIL = 'COMPOSE_SUBMIT_FAIL'; +export const COMPOSE_REPLY = 'COMPOSE_REPLY'; +export const COMPOSE_REPLY_CANCEL = 'COMPOSE_REPLY_CANCEL'; export function changeCompose(text) { return { @@ -13,13 +15,26 @@ export function changeCompose(text) { }; } +export function replyCompose(payload) { + return { + type: COMPOSE_REPLY, + payload: payload + }; +} + +export function cancelReplyCompose() { + return { + type: COMPOSE_REPLY_CANCEL + }; +} + export function submitCompose() { return function (dispatch, getState) { dispatch(submitComposeRequest()); api(getState).post('/api/statuses', { status: getState().getIn(['compose', 'text'], ''), - in_reply_to_id: getState().getIn(['compose', 'in_reply_to_id'], null) + in_reply_to_id: getState().getIn(['compose', 'in_reply_to', 'id'], null) }).then(function (response) { dispatch(submitComposeSuccess(response.data)); }).catch(function (error) { diff --git a/app/assets/javascripts/components/components/avatar.jsx b/app/assets/javascripts/components/components/avatar.jsx index abbef72f8..6177683ba 100644 --- a/app/assets/javascripts/components/components/avatar.jsx +++ b/app/assets/javascripts/components/components/avatar.jsx @@ -3,15 +3,16 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; const Avatar = React.createClass({ propTypes: { - src: React.PropTypes.string.isRequired + src: React.PropTypes.string.isRequired, + size: React.PropTypes.number.isRequired }, mixins: [PureRenderMixin], render () { return ( - <div style={{ width: '48px', height: '48px', flex: '0 0 auto' }}> - <img src={this.props.src} width={48} height={48} alt='' style={{ display: 'block', borderRadius: '4px' }} /> + <div style={{ width: `${this.props.size}px`, height: `${this.props.size}px` }}> + <img src={this.props.src} width={this.props.size} height={this.props.size} alt='' style={{ display: 'block', borderRadius: '4px' }} /> </div> ); } diff --git a/app/assets/javascripts/components/components/button.jsx b/app/assets/javascripts/components/components/button.jsx index e70382142..9e276cbe8 100644 --- a/app/assets/javascripts/components/components/button.jsx +++ b/app/assets/javascripts/components/components/button.jsx @@ -5,14 +5,12 @@ const Button = React.createClass({ propTypes: { text: React.PropTypes.string.isRequired, onClick: React.PropTypes.func, - disabled: React.PropTypes.boolean + disabled: React.PropTypes.bool }, mixins: [PureRenderMixin], handleClick (e) { - e.preventDefault(); - if (!this.props.disabled) { this.props.onClick(); } @@ -20,9 +18,9 @@ const Button = React.createClass({ render () { return ( - <a href='#' onClick={this.handleClick} style={{ display: 'inline-block', position: 'relative', boxSizing: 'border-box', textAlign: 'center', border: '10px none', backgroundColor: '#2b90d9', color: '#fff', fontSize: '14px', fontWeight: '500', letterSpacing: '0', textTransform: 'uppercase', padding: '0 16px', height: '36px', cursor: 'pointer', lineHeight: '36px', borderRadius: '4px', textDecoration: 'none' }}> + <button className='button' disabled={this.props.disabled} onClick={this.handleClick} style={{ display: 'inline-block', position: 'relative', boxSizing: 'border-box', textAlign: 'center', border: '10px none', color: '#fff', fontSize: '14px', fontWeight: '500', letterSpacing: '0', textTransform: 'uppercase', padding: '0 16px', height: '36px', cursor: 'pointer', lineHeight: '36px', borderRadius: '4px', textDecoration: 'none' }}> {this.props.text} - </a> + </button> ); } diff --git a/app/assets/javascripts/components/components/composer_drawer.jsx b/app/assets/javascripts/components/components/composer_drawer.jsx index 8cc4afc99..25696f200 100644 --- a/app/assets/javascripts/components/components/composer_drawer.jsx +++ b/app/assets/javascripts/components/components/composer_drawer.jsx @@ -1,14 +1,18 @@ -import CharacterCounter from './character_counter'; -import Button from './button'; -import PureRenderMixin from 'react-addons-pure-render-mixin'; +import CharacterCounter from './character_counter'; +import Button from './button'; +import PureRenderMixin from 'react-addons-pure-render-mixin'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import ReplyIndicator from './reply_indicator'; const ComposerDrawer = React.createClass({ propTypes: { text: React.PropTypes.string.isRequired, - isSubmitting: React.PropTypes.boolean, + is_submitting: React.PropTypes.bool, + in_reply_to: ImmutablePropTypes.map, onChange: React.PropTypes.func.isRequired, - onSubmit: React.PropTypes.func.isRequired + onSubmit: React.PropTypes.func.isRequired, + onCancelReply: React.PropTypes.func.isRequired }, mixins: [PureRenderMixin], @@ -28,9 +32,17 @@ const ComposerDrawer = React.createClass({ }, render () { + let replyArea = ''; + + if (this.props.in_reply_to) { + replyArea = <ReplyIndicator status={this.props.in_reply_to} onCancel={this.props.onCancelReply} />; + } + return ( <div style={{ width: '280px', boxSizing: 'border-box', background: '#454b5e', margin: '10px', marginRight: '0', padding: '10px' }}> - <textarea disabled={this.props.isSubmitting} placeholder='What is on your mind?' value={this.props.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} style={{ display: 'block', boxSizing: 'border-box', width: '100%', height: '100px', background: '#fff', resize: 'none', border: 'none', color: '#282c37', padding: '10px', fontFamily: 'Roboto', fontSize: '14px' }} /> + {replyArea} + + <textarea disabled={this.props.isSubmitting} placeholder='What is on your mind?' value={this.props.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} className='compose-drawer__textarea' style={{ display: 'block', boxSizing: 'border-box', width: '100%', height: '100px', resize: 'none', border: 'none', color: '#282c37', padding: '10px', fontFamily: 'Roboto', fontSize: '14px', margin: '0' }} /> <div style={{ marginTop: '10px', overflow: 'hidden' }}> <div style={{ float: 'right' }}><Button text='Publish' onClick={this.handleSubmit} disabled={this.props.isSubmitting} /></div> diff --git a/app/assets/javascripts/components/components/display_name.jsx b/app/assets/javascripts/components/components/display_name.jsx deleted file mode 100644 index b63bfa5e3..000000000 --- a/app/assets/javascripts/components/components/display_name.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import ImmutablePropTypes from 'react-immutable-proptypes'; -import PureRenderMixin from 'react-addons-pure-render-mixin'; - -const DisplayName = React.createClass({ - - propTypes: { - account: ImmutablePropTypes.map.isRequired - }, - - mixins: [PureRenderMixin], - - render () { - var displayName = this.props.account.get('display_name', this.props.account.get('username')); - var acct = this.props.account.get('acct'); - var url = this.props.account.get('url'); - - return ( - <a href={url} style={{ display: 'inline-block', color: '#616b86', textDecoration: 'none', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '190px' }}> - <strong style={{ fontWeight: 'bold', color: '#fff' }}>{displayName}</strong> <span>{acct}</span> - </a> - ); - } - -}); - -export default DisplayName; diff --git a/app/assets/javascripts/components/components/icon_button.jsx b/app/assets/javascripts/components/components/icon_button.jsx new file mode 100644 index 000000000..c23f977e4 --- /dev/null +++ b/app/assets/javascripts/components/components/icon_button.jsx @@ -0,0 +1,35 @@ +import PureRenderMixin from 'react-addons-pure-render-mixin'; + +const IconButton = React.createClass({ + + propTypes: { + title: React.PropTypes.string.isRequired, + icon: React.PropTypes.string.isRequired, + onClick: React.PropTypes.func.isRequired, + size: React.PropTypes.number + }, + + getDefaultProps () { + return { + size: 18 + }; + }, + + mixins: [PureRenderMixin], + + handleClick (e) { + e.preventDefault(); + this.props.onClick(); + }, + + render () { + return ( + <a href='#' title={this.props.title} className='icon-button' onClick={this.handleClick} style={{ display: 'inline-block', fontSize: `${this.props.size}px`, width: `${this.props.size}px`, height: `${this.props.size}px`, lineHeight: `${this.props.size}px`}}> + <i className={`fa fa-fw fa-${this.props.icon}`}></i> + </a> + ); + } + +}); + +export default IconButton; diff --git a/app/assets/javascripts/components/components/relative_timestamp.jsx b/app/assets/javascripts/components/components/relative_timestamp.jsx index 35960a40a..5fcc5e5bb 100644 --- a/app/assets/javascripts/components/components/relative_timestamp.jsx +++ b/app/assets/javascripts/components/components/relative_timestamp.jsx @@ -48,7 +48,7 @@ const RelativeTimestamp = React.createClass({ render () { return ( - <span style={{ color: '#616b86' }}> + <span> {this.state.text} </span> ); diff --git a/app/assets/javascripts/components/components/reply_indicator.jsx b/app/assets/javascripts/components/components/reply_indicator.jsx new file mode 100644 index 000000000..2531b7f43 --- /dev/null +++ b/app/assets/javascripts/components/components/reply_indicator.jsx @@ -0,0 +1,40 @@ +import PureRenderMixin from 'react-addons-pure-render-mixin'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import Avatar from './avatar'; +import IconButton from './icon_button'; + +const ReplyIndicator = React.createClass({ + + propTypes: { + status: ImmutablePropTypes.map.isRequired, + onCancel: React.PropTypes.func.isRequired + }, + + mixins: [PureRenderMixin], + + handleClick () { + this.props.onCancel(); + }, + + render () { + let content = { __html: this.props.status.get('content') }; + + return ( + <div style={{ background: '#9baec8', padding: '10px' }}> + <div style={{ overflow: 'hidden', marginBottom: '5px' }}> + <div style={{ float: 'right', lineHeight: '24px' }}><IconButton title='Cancel' icon='times' onClick={this.handleClick} /></div> + + <a href={this.props.status.getIn(['account', 'url'])} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#282c37', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}> + <div style={{ float: 'left', marginRight: '5px' }}><Avatar size={24} src={this.props.status.getIn(['account', 'avatar'])} /></div> + <strong style={{ fontWeight: '500' }}>{this.props.status.getIn(['account', 'display_name'])}</strong> <span>@{this.props.status.getIn(['account', 'acct'])}</span> + </a> + </div> + + <div className='reply-indicator__content' dangerouslySetInnerHTML={content} /> + </div> + ); + } + +}); + +export default ReplyIndicator; diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx index 29b9ebd98..e9fd225a9 100644 --- a/app/assets/javascripts/components/components/status.jsx +++ b/app/assets/javascripts/components/components/status.jsx @@ -1,35 +1,50 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import Avatar from './avatar'; -import DisplayName from './display_name'; import RelativeTimestamp from './relative_timestamp'; import PureRenderMixin from 'react-addons-pure-render-mixin'; +import IconButton from './icon_button'; const Status = React.createClass({ propTypes: { - status: ImmutablePropTypes.map.isRequired + status: ImmutablePropTypes.map.isRequired, + onReply: React.PropTypes.func }, mixins: [PureRenderMixin], + handleReplyClick () { + this.props.onReply(this.props.status); + }, + render () { var content = { __html: this.props.status.get('content') }; var status = this.props.status; return ( - <div style={{ padding: '8px 10px', display: 'flex', flexDirection: 'row', borderBottom: '1px solid #363c4b', cursor: 'pointer' }}> - <Avatar src={status.getIn(['account', 'avatar'])} /> + <div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'pointer' }}> + <div style={{ fontSize: '15px' }}> + <div style={{ float: 'right' }}> + <a href={status.get('url')} className='status__relative-time' style={{ color: '#616b86' }}><RelativeTimestamp timestamp={status.get('created_at')} /></a> + </div> - <div style={{ flex: '1 1 auto', marginLeft: '10px' }}> - <div style={{ overflow: 'hidden', fontSize: '15px' }}> - <div style={{ float: 'right' }}> - <a href={status.get('url')} style={{ textDecoration: 'none' }}><RelativeTimestamp timestamp={status.get('created_at')} /></a> + <a href={status.getIn(['account', 'url'])} className='status__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#616b86' }}> + <div style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}> + <Avatar src={status.getIn(['account', 'avatar'])} size={48} /> </div> - <DisplayName account={status.get('account')} /> - </div> + <span style={{ display: 'inline-block', maxWidth: '100%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}> + <strong style={{ fontWeight: 'bold', color: '#fff' }}>{status.getIn(['account', 'display_name'])}</strong> <span>@{status.getIn(['account', 'acct'])}</span> + </span> + </a> + </div> + + <div className='status__content' dangerouslySetInnerHTML={content} /> - <div className='status__content' dangerouslySetInnerHTML={content} /> + <div style={{ marginTop: '10px', overflow: 'hidden' }}> + <div style={{ float: 'left', marginRight: '10px'}}><IconButton title='Reply' icon='reply' onClick={this.handleReplyClick} /></div> + <div style={{ float: 'left', marginRight: '10px'}}><IconButton title='Reblog' icon='retweet' /></div> + <div style={{ float: 'left'}}><IconButton title='Favourite' icon='star' /></div> </div> </div> ); diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx index 9ba08fb70..5a89d6d60 100644 --- a/app/assets/javascripts/components/components/status_list.jsx +++ b/app/assets/javascripts/components/components/status_list.jsx @@ -15,7 +15,7 @@ const StatusList = React.createClass({ <div style={{ overflowY: 'scroll', flex: '1 1 auto' }}> <div> {this.props.statuses.map((status) => { - return <Status key={status.get('id')} status={status} />; + return <Status key={status.get('id')} status={status} onReply={this.props.onReply} />; })} </div> </div> diff --git a/app/assets/javascripts/components/containers/composer_drawer_container.jsx b/app/assets/javascripts/components/containers/composer_drawer_container.jsx index 2a7344509..e9cef99b2 100644 --- a/app/assets/javascripts/components/containers/composer_drawer_container.jsx +++ b/app/assets/javascripts/components/containers/composer_drawer_container.jsx @@ -1,11 +1,12 @@ -import { connect } from 'react-redux'; -import ComposerDrawer from '../components/composer_drawer'; -import { changeCompose, submitCompose } from '../actions/compose'; +import { connect } from 'react-redux'; +import ComposerDrawer from '../components/composer_drawer'; +import { changeCompose, submitCompose, cancelReplyCompose } from '../actions/compose'; const mapStateToProps = function (state, props) { return { text: state.getIn(['compose', 'text']), - isSubmitting: state.getIn(['compose', 'isSubmitting']) + is_submitting: state.getIn(['compose', 'is_submitting']), + in_reply_to: state.getIn(['compose', 'in_reply_to']) }; }; @@ -17,6 +18,10 @@ const mapDispatchToProps = function (dispatch) { onSubmit: function () { dispatch(submitCompose()); + }, + + onCancelReply: function () { + dispatch(cancelReplyCompose()); } } }; diff --git a/app/assets/javascripts/components/containers/status_list_container.jsx b/app/assets/javascripts/components/containers/status_list_container.jsx index bbf8a8876..9cdd7f4c2 100644 --- a/app/assets/javascripts/components/containers/status_list_container.jsx +++ b/app/assets/javascripts/components/containers/status_list_container.jsx @@ -1,5 +1,6 @@ -import { connect } from 'react-redux'; -import StatusList from '../components/status_list'; +import { connect } from 'react-redux'; +import StatusList from '../components/status_list'; +import { replyCompose } from '../actions/compose'; const mapStateToProps = function (state, props) { return { @@ -7,4 +8,12 @@ const mapStateToProps = function (state, props) { }; }; -export default connect(mapStateToProps)(StatusList); +const mapDispatchToProps = function (dispatch) { + return { + onReply: function (status) { + dispatch(replyCompose(status)); + } + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(StatusList); diff --git a/app/assets/javascripts/components/reducers/compose.jsx b/app/assets/javascripts/components/reducers/compose.jsx index 93e0c7ebe..601cc6449 100644 --- a/app/assets/javascripts/components/reducers/compose.jsx +++ b/app/assets/javascripts/components/reducers/compose.jsx @@ -1,24 +1,32 @@ -import { COMPOSE_CHANGE, COMPOSE_SUBMIT_REQUEST, COMPOSE_SUBMIT_SUCCESS, COMPOSE_SUBMIT_FAIL } from '../actions/compose'; -import Immutable from 'immutable'; +import * as constants from '../actions/compose'; +import Immutable from 'immutable'; const initialState = Immutable.Map({ text: '', - in_reply_to_id: null, - isSubmitting: false + in_reply_to: null, + is_submitting: false }); export default function compose(state = initialState, action) { switch(action.type) { - case COMPOSE_CHANGE: + case constants.COMPOSE_CHANGE: return state.set('text', action.text); - case COMPOSE_SUBMIT_REQUEST: - return state.set('isSubmitting', true); - case COMPOSE_SUBMIT_SUCCESS: + case constants.COMPOSE_REPLY: return state.withMutations(map => { - map.set('text', '').set('isSubmitting', false); + map.set('in_reply_to', action.payload).set('text', `@${action.payload.getIn(['account', 'acct'])} `); }); - case COMPOSE_SUBMIT_FAIL: - return state.set('isSubmitting', false); + case constants.COMPOSE_REPLY_CANCEL: + return state.withMutations(map => { + map.set('in_reply_to', null).set('text', ''); + }); + case constants.COMPOSE_SUBMIT_REQUEST: + return state.set('is_submitting', true); + case constants.COMPOSE_SUBMIT_SUCCESS: + return state.withMutations(map => { + map.set('text', '').set('is_submitting', false),set('in_reply_to', null); + }); + case constants.COMPOSE_SUBMIT_FAIL: + return state.set('is_submitting', false); default: return state; } diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index b63ec7154..11f4cb49f 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -1,4 +1,38 @@ -.status__content { +.button { + background-color: #2b90d9; + + &:hover { + background-color: #489fde; + } + + &:disabled { + background-color: #9baec8; + } +} + +.icon-button { + color: #616b86; + cursor: pointer; + + &:hover { + color: #717b98; + } + + &.disabled { + color: #535b72; + cursor: default; + } +} + +.compose-drawer__textarea { + background: #fff; + + &:disabled { + background: #d9e1e8; + } +} + +.status__content, .reply-indicator__content { font-size: 15px; line-height: 20px; white-space: pre-wrap; @@ -24,3 +58,30 @@ } } } + +.reply-indicator__content { + color: #282c37; + font-size: 14px; + + a { + color: #535b72; + } +} + +.status__display-name, .status__relative-time { + text-decoration: none; +} + +.status__display-name, .reply-indicator__display-name { + &:hover { + strong { + text-decoration: underline; + } + } +} + +.status__relative-time { + &:hover { + text-decoration: underline; + } +} |