Unfloyded/Legamunt
0
0
Fork 0
Code 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

65
app/assets/javascripts/components/features/compose/components/compose_form.jsx
View file

@ -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({
<ReplyIndicatorContainer />
<AutosuggestTextarea
ref={this.setAutosuggestTextarea}
placeholder={intl.formatMessage(messages.placeholder)}
disabled={disabled}
value={this.props.text}
onChange={this.handleChange}
suggestions={this.props.suggestions}
onKeyDown={this.handleKeyDown}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
onSuggestionSelected={this.onSuggestionSelected}
onPaste={onPaste}
/>
<div style={{ position: 'relative' }}>
<AutosuggestTextarea
ref={this.setAutosuggestTextarea}
placeholder={intl.formatMessage(messages.placeholder)}
disabled={disabled}
value={this.props.text}
onChange={this.handleChange}
suggestions={this.props.suggestions}
onKeyDown={this.handleKeyDown}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
onSuggestionSelected={this.onSuggestionSelected}
onPaste={onPaste}
/>
<div style={{ marginTop: '10px', overflow: 'hidden' }}>
<div style={{ float: 'right' }}><Button text={publishText} onClick={this.handleSubmit} disabled={disabled} /></div>
<div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={[this.props.spoiler_text, this.props.text].join('')} /></div>
<div style={{ display: 'flex', paddingTop: '4px' }}>
<UploadButtonContainer />
<EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
</div>
<EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
</div>
<SpoilerToggleContainer />
<PrivateToggleContainer />
<UnlistedToggleContainer />
<SensitiveToggleContainer />
<div className='compose-form__modifiers'>
<UploadFormContainer />
</div>
<div style={{ display: 'flex' }}>
<div className='compose-form__buttons'>
<UploadButtonContainer />
<PrivacyDropdownContainer />
<SensitiveButtonContainer />
<SpoilerButtonContainer />
</div>
<div style={{ paddingTop: '10px', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={[this.props.spoiler_text, this.props.text].join('')} /></div>
<div style={{ paddingTop: '10px' }}><Button text={publishText} onClick={this.handleSubmit} disabled={disabled} /></div>
</div>
</div>
);
}

14
app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx
View file

@ -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 (
<Dropdown ref={this.setRef} style={{ marginLeft: '5px' }}>
<DropdownTrigger className='icon-button emoji-button' title={intl.formatMessage(messages.emoji)} style={{ fontSize: `24px`, width: `24px`, lineHeight: `24px`, display: 'block', marginLeft: '2px' }}>
<img className="emojione" alt="🙂" src="/emoji/1f642.png" />
<Dropdown ref={this.setRef} style={style}>
<DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)} style={{ fontSize: `24px`, width: `24px`, lineHeight: `24px`, display: 'block', marginLeft: '2px' }}>
<img className="emojione" alt="🙂" src="/emoji/1f602.png" />
</DropdownTrigger>
<DropdownContent>
<DropdownContent className='dropdown__left'>
<EmojiPicker emojione={settings} onChange={this.handleChange} />
</DropdownContent>
</Dropdown>

83
app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx Normal file
View file

@ -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 (
<div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}>
<div className='privacy-dropdown__value'><IconButton icon={valueOption.icon} size={22} active={open} inverted onClick={this.handleToggle} /></div>
<div className='privacy-dropdown__dropdown'>
{options.map(item =>
<div key={item.value} onClick={this.handleClick.bind(this, item.value)} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}>
<div className='privacy-dropdown__option__icon'><i className={`fa fa-fw fa-${item.icon}`} /></div>
<div className='privacy-dropdown__option__content'>
<strong>{item.shortText}</strong>
{item.longText}
</div>
</div>
)}
</div>
</div>
);
}
});
export default PrivacyDropdown;

27
app/assets/javascripts/components/features/compose/components/private_toggle.jsx
View file

@ -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 (
<label className='compose-form__label with-border'>
<Toggle checked={isPrivate} onChange={onChange} />
<span className='compose-form__label__text'><FormattedMessage id='compose_form.private' defaultMessage='Mark as private' /></span>
</label>
);
}
});
export default PrivateToggle;

31
app/assets/javascripts/components/features/compose/components/text_icon_button.jsx Normal file
View file

@ -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 (
<button title={title} aria-label={title} className={`text-icon-button ${active ? 'active' : ''}`} onClick={this.handleClick}>
{label}
</button>
);
}
});
export default TextIconButton;

32
app/assets/javascripts/components/features/compose/components/unlisted_toggle.jsx
View file

@ -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 (
<Collapsable isVisible={!(isPrivate || isReplyToOther)} fullHeight={39.5}>
<label className='compose-form__label'>
<Toggle checked={isUnlisted} onChange={onChangeListability} />
<span className='compose-form__label__text'><FormattedMessage id='compose_form.unlisted' defaultMessage='Do not display on public timelines' /></span>
</label>
</Collapsable>
);
}
});
export default UnlistedToggle;

2
app/assets/javascripts/components/features/compose/components/upload_button.jsx
View file

@ -37,7 +37,7 @@ const UploadButton = React.createClass({
return (
<div style={this.props.style}>
<IconButton icon='photo' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} size={24} />
<IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} size={22} inverted />
<input key={resetFileKey} ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={disabled} style={{ display: 'none' }} />
</div>
);

6
app/assets/javascripts/components/features/compose/components/upload_form.jsx
View file

@ -23,7 +23,7 @@ const UploadForm = React.createClass({
const { intl, media } = this.props;
const uploads = media.map(attachment =>
<div key={attachment.get('id')} style={{ marginBottom: '10px' }}>
<div key={attachment.get('id')} style={{ margin: '5px', flex: '1 1 0' }}>
<Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
{({ scale }) =>
<div style={{ transform: `translateZ(0) scale(${scale})`, width: '100%', height: '100px', borderRadius: '4px', background: `url(${attachment.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }}>
@ -35,9 +35,9 @@ const UploadForm = React.createClass({
);
return (
<div style={{ marginBottom: '20px', padding: '10px', overflow: 'hidden', flexShrink: '0' }}>
<div style={{ overflow: 'hidden' }}>
<UploadProgressContainer />
{uploads}
<div style={{ display: 'flex', padding: '5px' }}>{uploads}</div>
</div>
);
}

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

1
app/assets/javascripts/components/features/compose/index.jsx
View file

@ -30,7 +30,6 @@ const Compose = React.createClass({
<SearchContainer />
<NavigationContainer />
<ComposeFormContainer />
<UploadFormContainer />
</Drawer>
);
}