sunoru/mastodon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Redesigned compose form

Browse source
This commit is contained in:
Eugen Rochko 2017-03-25 00:01:43 +01:00
parent 9bf4c34919
commit d8c5a83827
21 changed files with 477 additions and 218 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/assets/javascripts/components/features/compose/containers/private_toggle_container.jsx → app/assets/javascripts/components/features/compose/containers/privacy_dropdown_container.jsx
View file

@ -1,17 +1,17 @@
import { connect } from 'react-redux';
import PrivateToggle from '../components/private_toggle';
import PrivacyDropdown from '../components/privacy_dropdown';
import { changeComposeVisibility } from '../../../actions/compose';
const mapStateToProps = state => ({
isPrivate: state.getIn(['compose', 'private'])
value: state.getIn(['compose', 'privacy'])
});
const mapDispatchToProps = dispatch => ({
onChange (e) {
dispatch(changeComposeVisibility(e.target.checked));
onChange (value) {
dispatch(changeComposeVisibility(value));
}
});
export default connect(mapStateToProps, mapDispatchToProps)(PrivateToggle);
export default connect(mapStateToProps, mapDispatchToProps)(PrivacyDropdown);

49
app/assets/javascripts/components/features/compose/containers/sensitive_button_container.jsx Normal file
View file

@ -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 (
<Motion defaultStyle={{ scale: 0.87 }} style={{ scale: spring(visible ? 1 : 0.87, { stiffness: 200, damping: 3 }) }}>
{({ scale }) =>
<div style={{ display: visible ? 'block' : 'none', transform: `translateZ(0) scale(${scale})` }}>
<TextIconButton onClick={onClick} label='NSFW' title={intl.formatMessage(messages.title)} active={active} />
</div>
}
</Motion>
);
}
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(SensitiveButton));

18
app/assets/javascripts/components/features/compose/containers/sensitive_toggle_container.jsx
View file

@ -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);

24
app/assets/javascripts/components/features/compose/containers/spoiler_button_container.jsx Normal file
View file

@ -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));

17
app/assets/javascripts/components/features/compose/containers/spoiler_toggle_container.jsx
View file

@ -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);

31
app/assets/javascripts/components/features/compose/containers/unlisted_toggle_container.jsx
View file

@ -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);