diff options
Diffstat (limited to 'app/assets/javascripts/components/features/compose')
5 files changed, 27 insertions, 109 deletions
diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx index 32bdeaeca..b16731c05 100644 --- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx +++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx @@ -8,7 +8,8 @@ import Autosuggest from 'react-autosuggest'; import AutosuggestAccountContainer from '../../compose/containers/autosuggest_account_container'; import { debounce } from 'react-decoration'; import UploadButtonContainer from '../containers/upload_button_container'; -import { defineMessages, injectIntl } from 'react-intl'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import Toggle from 'react-toggle'; const messages = defineMessages({ placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' }, @@ -54,7 +55,8 @@ const textareaStyle = { padding: '10px', fontFamily: 'Roboto', fontSize: '14px', - margin: '0' + margin: '0', + resize: 'vertical' }; const renderInputComponent = inputProps => ( @@ -67,6 +69,7 @@ const ComposeForm = React.createClass({ text: React.PropTypes.string.isRequired, suggestion_token: React.PropTypes.string, suggestions: React.PropTypes.array, + sensitive: React.PropTypes.bool, is_submitting: React.PropTypes.bool, is_uploading: React.PropTypes.bool, in_reply_to: ImmutablePropTypes.map, @@ -75,7 +78,8 @@ const ComposeForm = React.createClass({ onCancelReply: React.PropTypes.func.isRequired, onClearSuggestions: React.PropTypes.func.isRequired, onFetchSuggestions: React.PropTypes.func.isRequired, - onSuggestionSelected: React.PropTypes.func.isRequired + onSuggestionSelected: React.PropTypes.func.isRequired, + onChangeSensitivity: React.PropTypes.func.isRequired }, mixins: [PureRenderMixin], @@ -139,6 +143,10 @@ const ComposeForm = React.createClass({ this.autosuggest = c; }, + handleChangeSensitivity (e) { + this.props.onChangeSensitivity(e.target.checked); + }, + render () { const { intl } = this.props; let replyArea = ''; @@ -178,6 +186,11 @@ const ComposeForm = React.createClass({ <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={this.props.text} /></div> <UploadButtonContainer style={{ paddingTop: '4px' }} /> </div> + + <label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', marginTop: '10px', borderTop: '1px solid #616b86', paddingTop: '10px' }}> + <Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} /> + <span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.sensitive' defaultMessage='Mark content as sensitive' /></span> + </label> </div> ); } diff --git a/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx b/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx deleted file mode 100644 index 6850629ba..000000000 --- a/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx +++ /dev/null @@ -1,86 +0,0 @@ -import PureRenderMixin from 'react-addons-pure-render-mixin'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import AccountContainer from '../../../containers/account_container'; -import { FormattedMessage } from 'react-intl'; - -const outerStyle = { - position: 'relative' -}; - -const headerStyle = { - fontSize: '14px', - fontWeight: '500', - display: 'block', - padding: '10px', - color: '#9baec8', - background: '#454b5e', - overflow: 'hidden' -}; - -const nextStyle = { - display: 'inline-block', - float: 'right', - fontWeight: '400', - color: '#2b90d9' -}; - -const SuggestionsBox = React.createClass({ - - propTypes: { - accountIds: ImmutablePropTypes.list, - perWindow: React.PropTypes.number - }, - - getInitialState () { - return { - index: 0 - }; - }, - - getDefaultProps () { - return { - perWindow: 2 - }; - }, - - mixins: [PureRenderMixin], - - handleNextClick (e) { - e.preventDefault(); - - let newIndex = this.state.index + 1; - - if (this.props.accountIds.skip(this.props.perWindow * newIndex).size === 0) { - newIndex = 0; - } - - this.setState({ index: newIndex }); - }, - - render () { - const { accountIds, perWindow } = this.props; - - if (!accountIds || accountIds.size === 0) { - return <div />; - } - - let nextLink = ''; - - if (accountIds.size > perWindow) { - nextLink = <a href='#' style={nextStyle} onClick={this.handleNextClick}><FormattedMessage id='suggestions_box.refresh' defaultMessage='Refresh' /></a>; - } - - return ( - <div style={outerStyle}> - <strong style={headerStyle}> - <FormattedMessage id='suggestions_box.who_to_follow' defaultMessage='Who to follow' /> {nextLink} - </strong> - - {accountIds.skip(perWindow * this.state.index).take(perWindow).map(accountId => <AccountContainer key={accountId} id={accountId} withNote={false} />)} - </div> - ); - } - -}); - -export default SuggestionsBox; diff --git a/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx b/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx index 87bcd6b99..9897f6505 100644 --- a/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx +++ b/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx @@ -6,7 +6,8 @@ import { cancelReplyCompose, clearComposeSuggestions, fetchComposeSuggestions, - selectComposeSuggestion + selectComposeSuggestion, + changeComposeSensitivity } from '../../../actions/compose'; import { makeGetStatus } from '../../../selectors'; @@ -18,6 +19,7 @@ const makeMapStateToProps = () => { text: state.getIn(['compose', 'text']), suggestion_token: state.getIn(['compose', 'suggestion_token']), suggestions: state.getIn(['compose', 'suggestions']).toJS(), + sensitive: state.getIn(['compose', 'sensitive']), is_submitting: state.getIn(['compose', 'is_submitting']), is_uploading: state.getIn(['compose', 'is_uploading']), in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to'])) @@ -51,6 +53,10 @@ const mapDispatchToProps = function (dispatch) { onSuggestionSelected (position, accountId) { dispatch(selectComposeSuggestion(position, accountId)); + }, + + onChangeSensitivity (checked) { + dispatch(changeComposeSensitivity(checked)); } } }; diff --git a/app/assets/javascripts/components/features/compose/containers/suggestions_container.jsx b/app/assets/javascripts/components/features/compose/containers/suggestions_container.jsx deleted file mode 100644 index 944ceed85..000000000 --- a/app/assets/javascripts/components/features/compose/containers/suggestions_container.jsx +++ /dev/null @@ -1,8 +0,0 @@ -import { connect } from 'react-redux'; -import SuggestionsBox from '../components/suggestions_box'; - -const mapStateToProps = (state) => ({ - accountIds: state.getIn(['user_lists', 'suggestions']) -}); - -export default connect(mapStateToProps)(SuggestionsBox); diff --git a/app/assets/javascripts/components/features/compose/index.jsx b/app/assets/javascripts/components/features/compose/index.jsx index 5c1b22e00..4017c8949 100644 --- a/app/assets/javascripts/components/features/compose/index.jsx +++ b/app/assets/javascripts/components/features/compose/index.jsx @@ -3,9 +3,7 @@ import ComposeFormContainer from './containers/compose_form_container'; import UploadFormContainer from './containers/upload_form_container'; import NavigationContainer from './containers/navigation_container'; import PureRenderMixin from 'react-addons-pure-render-mixin'; -import SuggestionsContainer from './containers/suggestions_container'; import SearchContainer from './containers/search_container'; -import { fetchSuggestions } from '../../actions/suggestions'; import { connect } from 'react-redux'; import { mountCompose, unmountCompose } from '../../actions/compose'; @@ -19,7 +17,6 @@ const Compose = React.createClass({ componentDidMount () { this.props.dispatch(mountCompose()); - this.props.dispatch(fetchSuggestions()); }, componentWillUnmount () { @@ -29,14 +26,10 @@ const Compose = React.createClass({ render () { return ( <Drawer> - <div style={{ flex: '1 1 auto' }}> - <SearchContainer /> - <NavigationContainer /> - <ComposeFormContainer /> - <UploadFormContainer /> - </div> - - <SuggestionsContainer /> + <SearchContainer /> + <NavigationContainer /> + <ComposeFormContainer /> + <UploadFormContainer /> </Drawer> ); } |