From d8c5a83827c24a8931da7f2b1fd78da66162bd7e Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 25 Mar 2017 00:01:43 +0100 Subject: Redesigned compose form --- .../features/compose/components/compose_form.jsx | 65 +++++++++-------- .../compose/components/emoji_picker_dropdown.jsx | 14 ++-- .../compose/components/privacy_dropdown.jsx | 83 ++++++++++++++++++++++ .../features/compose/components/private_toggle.jsx | 27 ------- .../compose/components/text_icon_button.jsx | 31 ++++++++ .../compose/components/unlisted_toggle.jsx | 32 --------- .../features/compose/components/upload_button.jsx | 2 +- .../features/compose/components/upload_form.jsx | 6 +- .../containers/privacy_dropdown_container.jsx | 17 +++++ .../containers/private_toggle_container.jsx | 17 ----- .../containers/sensitive_button_container.jsx | 49 +++++++++++++ .../containers/sensitive_toggle_container.jsx | 18 ----- .../containers/spoiler_button_container.jsx | 24 +++++++ .../containers/spoiler_toggle_container.jsx | 17 ----- .../containers/unlisted_toggle_container.jsx | 31 -------- .../components/features/compose/index.jsx | 1 - 16 files changed, 253 insertions(+), 181 deletions(-) create mode 100644 app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx delete mode 100644 app/assets/javascripts/components/features/compose/components/private_toggle.jsx create mode 100644 app/assets/javascripts/components/features/compose/components/text_icon_button.jsx delete mode 100644 app/assets/javascripts/components/features/compose/components/unlisted_toggle.jsx create mode 100644 app/assets/javascripts/components/features/compose/containers/privacy_dropdown_container.jsx delete mode 100644 app/assets/javascripts/components/features/compose/containers/private_toggle_container.jsx create mode 100644 app/assets/javascripts/components/features/compose/containers/sensitive_button_container.jsx delete mode 100644 app/assets/javascripts/components/features/compose/containers/sensitive_toggle_container.jsx create mode 100644 app/assets/javascripts/components/features/compose/containers/spoiler_button_container.jsx delete mode 100644 app/assets/javascripts/components/features/compose/containers/spoiler_toggle_container.jsx delete mode 100644 app/assets/javascripts/components/features/compose/containers/unlisted_toggle_container.jsx (limited to 'app/assets/javascripts/components/features/compose') 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 2a252af4b..330be5662 100644 --- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx +++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx @@ -3,19 +3,18 @@ import Button from '../../../components/button'; import PureRenderMixin from 'react-addons-pure-render-mixin'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ReplyIndicatorContainer from '../containers/reply_indicator_container'; -import UploadButton from './upload_button'; import AutosuggestTextarea from '../../../components/autosuggest_textarea'; -import AutosuggestAccountContainer from '../../compose/containers/autosuggest_account_container'; import { debounce } from 'react-decoration'; import UploadButtonContainer from '../containers/upload_button_container'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import Toggle from 'react-toggle'; import Collapsable from '../../../components/collapsable'; -import UnlistedToggleContainer from '../containers/unlisted_toggle_container'; -import SpoilerToggleContainer from '../containers/spoiler_toggle_container'; -import PrivateToggleContainer from '../containers/private_toggle_container'; -import SensitiveToggleContainer from '../containers/sensitive_toggle_container'; +import SpoilerButtonContainer from '../containers/spoiler_button_container'; +import PrivacyDropdownContainer from '../containers/privacy_dropdown_container'; +import SensitiveButtonContainer from '../containers/sensitive_button_container'; import EmojiPickerDropdown from './emoji_picker_dropdown'; +import UploadFormContainer from '../containers/upload_form_container'; +import TextIconButton from './text_icon_button'; const messages = defineMessages({ placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' }, @@ -156,33 +155,39 @@ const ComposeForm = React.createClass({ - - -
-
-
-
+
+ + + +
+ +
+ +
+ +
+
- + + +
-
- - - - +
+
+
); } diff --git a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx index 37e366203..471f0e1bb 100644 --- a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx +++ b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx @@ -13,6 +13,12 @@ const settings = { imagePathPNG: '/emoji/' }; +const style = { + position: 'absolute', + right: '5px', + top: '5px' +}; + const EmojiPickerDropdown = React.createClass({ propTypes: { @@ -35,12 +41,12 @@ const EmojiPickerDropdown = React.createClass({ const { intl } = this.props; return ( - - - 🙂 + + + 🙂 - + diff --git a/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx b/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx new file mode 100644 index 000000000..f582267f0 --- /dev/null +++ b/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx @@ -0,0 +1,83 @@ +import PureRenderMixin from 'react-addons-pure-render-mixin'; +import { FormattedMessage } from 'react-intl'; +import IconButton from '../../../components/icon_button'; + +const PrivacyDropdown = React.createClass({ + + propTypes: { + value: React.PropTypes.string.isRequired, + onChange: React.PropTypes.func.isRequired + }, + + getInitialState () { + return { + open: false + }; + }, + + mixins: [PureRenderMixin], + + handleToggle () { + this.setState({ open: !this.state.open }); + }, + + handleClick (value, e) { + e.preventDefault(); + this.setState({ open: false }); + this.props.onChange(value); + }, + + onGlobalClick (e) { + if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) { + this.setState({ open: false }); + } + }, + + componentDidMount () { + window.addEventListener('click', this.onGlobalClick); + window.addEventListener('touchstart', this.onGlobalClick); + }, + + componentWillUnmount () { + window.removeEventListener('click', this.onGlobalClick); + window.removeEventListener('touchstart', this.onGlobalClick); + }, + + setRef (c) { + this.node = c; + }, + + render () { + const { value, onChange } = this.props; + const { open } = this.state; + + const options = [ + { icon: 'globe', value: 'public', shortText: 'Public', longText: 'Anyone can see' }, + { icon: 'globe', value: 'unlisted', shortText: 'Unlisted', longText: 'Anyone can see' }, + { icon: 'lock', value: 'private', shortText: 'Private', longText: 'Followers can see' }, + { icon: 'send', value: 'direct', shortText: 'Direct', longText: 'Mentions can see' } + ]; + + const valueOption = options.find(item => item.value === value); + + return ( +
+
+
+ {options.map(item => +
+
+
+ {item.shortText} + {item.longText} +
+
+ )} +
+
+ ); + } + +}); + +export default PrivacyDropdown; diff --git a/app/assets/javascripts/components/features/compose/components/private_toggle.jsx b/app/assets/javascripts/components/features/compose/components/private_toggle.jsx deleted file mode 100644 index 902ee70ca..000000000 --- a/app/assets/javascripts/components/features/compose/components/private_toggle.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import PureRenderMixin from 'react-addons-pure-render-mixin'; -import { FormattedMessage } from 'react-intl'; -import Toggle from 'react-toggle'; - -const PrivateToggle = React.createClass({ - - propTypes: { - isPrivate: React.PropTypes.bool, - onChange: React.PropTypes.func.isRequired - }, - - mixins: [PureRenderMixin], - - render () { - const { isPrivate, onChange } = this.props; - - return ( - - ); - } - -}); - -export default PrivateToggle; diff --git a/app/assets/javascripts/components/features/compose/components/text_icon_button.jsx b/app/assets/javascripts/components/features/compose/components/text_icon_button.jsx new file mode 100644 index 000000000..e3ac63d87 --- /dev/null +++ b/app/assets/javascripts/components/features/compose/components/text_icon_button.jsx @@ -0,0 +1,31 @@ +import PureRenderMixin from 'react-addons-pure-render-mixin'; + +const TextIconButton = React.createClass({ + + propTypes: { + label: React.PropTypes.string.isRequired, + title: React.PropTypes.string, + active: React.PropTypes.bool, + onClick: React.PropTypes.func.isRequired + }, + + mixins: [PureRenderMixin], + + handleClick (e) { + e.preventDefault(); + this.props.onClick(); + }, + + render () { + const { label, title, active } = this.props; + + return ( + + ); + } + +}); + +export default TextIconButton; diff --git a/app/assets/javascripts/components/features/compose/components/unlisted_toggle.jsx b/app/assets/javascripts/components/features/compose/components/unlisted_toggle.jsx deleted file mode 100644 index 0745051eb..000000000 --- a/app/assets/javascripts/components/features/compose/components/unlisted_toggle.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import PureRenderMixin from 'react-addons-pure-render-mixin'; -import { FormattedMessage } from 'react-intl'; -import Toggle from 'react-toggle'; -import Collapsable from '../../../components/collapsable'; - -const UnlistedToggle = React.createClass({ - - propTypes: { - isPrivate: React.PropTypes.bool, - isUnlisted: React.PropTypes.bool, - isReplyToOther: React.PropTypes.bool, - onChangeListability: React.PropTypes.func.isRequired - }, - - mixins: [PureRenderMixin], - - render () { - const { isPrivate, isUnlisted, isReplyToOther, onChangeListability } = this.props; - - return ( - - - - ); - } - -}); - -export default UnlistedToggle; diff --git a/app/assets/javascripts/components/features/compose/components/upload_button.jsx b/app/assets/javascripts/components/features/compose/components/upload_button.jsx index 4c8181aa1..3089bde50 100644 --- a/app/assets/javascripts/components/features/compose/components/upload_button.jsx +++ b/app/assets/javascripts/components/features/compose/components/upload_button.jsx @@ -37,7 +37,7 @@ const UploadButton = React.createClass({ return (
- +
); diff --git a/app/assets/javascripts/components/features/compose/components/upload_form.jsx b/app/assets/javascripts/components/features/compose/components/upload_form.jsx index 1a01c2380..77590d90d 100644 --- a/app/assets/javascripts/components/features/compose/components/upload_form.jsx +++ b/app/assets/javascripts/components/features/compose/components/upload_form.jsx @@ -23,7 +23,7 @@ const UploadForm = React.createClass({ const { intl, media } = this.props; const uploads = media.map(attachment => -
+
{({ scale }) =>
@@ -35,9 +35,9 @@ const UploadForm = React.createClass({ ); return ( -
+
- {uploads} +
{uploads}
); } diff --git a/app/assets/javascripts/components/features/compose/containers/privacy_dropdown_container.jsx b/app/assets/javascripts/components/features/compose/containers/privacy_dropdown_container.jsx new file mode 100644 index 000000000..1eee8f84c --- /dev/null +++ b/app/assets/javascripts/components/features/compose/containers/privacy_dropdown_container.jsx @@ -0,0 +1,17 @@ +import { connect } from 'react-redux'; +import PrivacyDropdown from '../components/privacy_dropdown'; +import { changeComposeVisibility } from '../../../actions/compose'; + +const mapStateToProps = state => ({ + value: state.getIn(['compose', 'privacy']) +}); + +const mapDispatchToProps = dispatch => ({ + + onChange (value) { + dispatch(changeComposeVisibility(value)); + } + +}); + +export default connect(mapStateToProps, mapDispatchToProps)(PrivacyDropdown); diff --git a/app/assets/javascripts/components/features/compose/containers/private_toggle_container.jsx b/app/assets/javascripts/components/features/compose/containers/private_toggle_container.jsx deleted file mode 100644 index ee3596902..000000000 --- a/app/assets/javascripts/components/features/compose/containers/private_toggle_container.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import { connect } from 'react-redux'; -import PrivateToggle from '../components/private_toggle'; -import { changeComposeVisibility } from '../../../actions/compose'; - -const mapStateToProps = state => ({ - isPrivate: state.getIn(['compose', 'private']) -}); - -const mapDispatchToProps = dispatch => ({ - - onChange (e) { - dispatch(changeComposeVisibility(e.target.checked)); - } - -}); - -export default connect(mapStateToProps, mapDispatchToProps)(PrivateToggle); diff --git a/app/assets/javascripts/components/features/compose/containers/sensitive_button_container.jsx b/app/assets/javascripts/components/features/compose/containers/sensitive_button_container.jsx new file mode 100644 index 000000000..074b568f4 --- /dev/null +++ b/app/assets/javascripts/components/features/compose/containers/sensitive_button_container.jsx @@ -0,0 +1,49 @@ +import { connect } from 'react-redux'; +import TextIconButton from '../components/text_icon_button'; +import { changeComposeSensitivity } from '../../../actions/compose'; +import { Motion, spring } from 'react-motion'; +import { injectIntl, defineMessages } from 'react-intl'; + +const messages = defineMessages({ + title: { id: 'compose_form.sensitive', defaultMessage: 'Mark media as sensitive' } +}); + +const mapStateToProps = state => ({ + visible: state.getIn(['compose', 'media_attachments']).size > 0, + active: state.getIn(['compose', 'sensitive']) +}); + +const mapDispatchToProps = dispatch => ({ + + onClick () { + dispatch(changeComposeSensitivity()); + } + +}); + +const SensitiveButton = React.createClass({ + + propTypes: { + visible: React.PropTypes.bool, + active: React.PropTypes.bool, + onClick: React.PropTypes.func.isRequired, + intl: React.PropTypes.object.isRequired + }, + + render () { + const { visible, active, onClick, intl } = this.props; + + return ( + + {({ scale }) => +
+ +
+ } + + ); + } + +}); + +export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(SensitiveButton)); diff --git a/app/assets/javascripts/components/features/compose/containers/sensitive_toggle_container.jsx b/app/assets/javascripts/components/features/compose/containers/sensitive_toggle_container.jsx deleted file mode 100644 index 97b3361ba..000000000 --- a/app/assets/javascripts/components/features/compose/containers/sensitive_toggle_container.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import { connect } from 'react-redux'; -import SensitiveToggle from '../components/sensitive_toggle'; -import { changeComposeSensitivity } from '../../../actions/compose'; - -const mapStateToProps = state => ({ - hasMedia: state.getIn(['compose', 'media_attachments']).size > 0, - isSensitive: state.getIn(['compose', 'sensitive']) -}); - -const mapDispatchToProps = dispatch => ({ - - onChange (e) { - dispatch(changeComposeSensitivity(e.target.checked)); - } - -}); - -export default connect(mapStateToProps, mapDispatchToProps)(SensitiveToggle); diff --git a/app/assets/javascripts/components/features/compose/containers/spoiler_button_container.jsx b/app/assets/javascripts/components/features/compose/containers/spoiler_button_container.jsx new file mode 100644 index 000000000..61ac32b85 --- /dev/null +++ b/app/assets/javascripts/components/features/compose/containers/spoiler_button_container.jsx @@ -0,0 +1,24 @@ +import { connect } from 'react-redux'; +import TextIconButton from '../components/text_icon_button'; +import { changeComposeSpoilerness } from '../../../actions/compose'; +import { injectIntl, defineMessages } from 'react-intl'; + +const messages = defineMessages({ + title: { id: 'compose_form.spoiler', defaultMessage: 'Hide text behind content warning' } +}); + +const mapStateToProps = (state, { intl }) => ({ + label: 'CW', + title: intl.formatMessage(messages.title), + active: state.getIn(['compose', 'spoiler']) +}); + +const mapDispatchToProps = dispatch => ({ + + onClick () { + dispatch(changeComposeSpoilerness()); + } + +}); + +export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TextIconButton)); diff --git a/app/assets/javascripts/components/features/compose/containers/spoiler_toggle_container.jsx b/app/assets/javascripts/components/features/compose/containers/spoiler_toggle_container.jsx deleted file mode 100644 index 0bd4df759..000000000 --- a/app/assets/javascripts/components/features/compose/containers/spoiler_toggle_container.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import { connect } from 'react-redux'; -import SpoilerToggle from '../components/spoiler_toggle'; -import { changeComposeSpoilerness } from '../../../actions/compose'; - -const mapStateToProps = state => ({ - isSpoiler: state.getIn(['compose', 'spoiler']) -}); - -const mapDispatchToProps = dispatch => ({ - - onChange (e) { - dispatch(changeComposeSpoilerness(e.target.checked)); - } - -}); - -export default connect(mapStateToProps, mapDispatchToProps)(SpoilerToggle); diff --git a/app/assets/javascripts/components/features/compose/containers/unlisted_toggle_container.jsx b/app/assets/javascripts/components/features/compose/containers/unlisted_toggle_container.jsx deleted file mode 100644 index ceac903d9..000000000 --- a/app/assets/javascripts/components/features/compose/containers/unlisted_toggle_container.jsx +++ /dev/null @@ -1,31 +0,0 @@ -import { connect } from 'react-redux'; -import UnlistedToggle from '../components/unlisted_toggle'; -import { makeGetStatus } from '../../../selectors'; -import { changeComposeListability } from '../../../actions/compose'; - -const makeMapStateToProps = () => { - const getStatus = makeGetStatus(); - - const mapStateToProps = state => { - const status = getStatus(state, state.getIn(['compose', 'in_reply_to'])); - const me = state.getIn(['compose', 'me']); - - return { - isPrivate: state.getIn(['compose', 'private']), - isUnlisted: state.getIn(['compose', 'unlisted']), - isReplyToOther: status ? status.getIn(['account', 'id']) !== me : false - }; - }; - - return mapStateToProps; -}; - -const mapDispatchToProps = dispatch => ({ - - onChangeListability (e) { - dispatch(changeComposeListability(e.target.checked)); - } - -}); - -export default connect(makeMapStateToProps, mapDispatchToProps)(UnlistedToggle); diff --git a/app/assets/javascripts/components/features/compose/index.jsx b/app/assets/javascripts/components/features/compose/index.jsx index f6095c0c6..15e2c5809 100644 --- a/app/assets/javascripts/components/features/compose/index.jsx +++ b/app/assets/javascripts/components/features/compose/index.jsx @@ -30,7 +30,6 @@ const Compose = React.createClass({ - ); } -- cgit