import ImmutablePropTypes from 'react-immutable-proptypes';
import { injectIntl, defineMessages } from 'react-intl';
-// Mastodon imports //
-import IconButton from '../../../../mastodon/components/icon_button';
-
// Our imports //
import ComposeAdvancedOptionsToggle from './toggle';
+import ComposeDropdown from '../dropdown/index';
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
{ id: 'advanced_options.icon_title', defaultMessage: 'Advanced options' },
});
-const iconStyle = {
- height : null,
- lineHeight : '27px',
-};
-
/*
Implementation:
intl : PropTypes.object.isRequired,
};
- state = {
- open: false,
- };
-
-/*
-
-### `onToggleDropdown()`
-
-This function toggles the opening and closing of the advanced options
-dropdown.
-
-*/
-
- onToggleDropdown = () => {
- this.setState({ open: !this.state.open });
- };
-
-/*
-
-### `onGlobalClick(e)`
-
-This function closes the advanced options dropdown if you click
-anywhere else on the screen.
-
-*/
-
- onGlobalClick = (e) => {
- if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) {
- this.setState({ open: false });
- }
- }
-
-/*
-
-### `componentDidMount()`, `componentWillUnmount()`
-
-This function closes the advanced options dropdown if you click
-anywhere else on the screen.
-
-*/
-
- componentDidMount () {
- window.addEventListener('click', this.onGlobalClick);
- window.addEventListener('touchstart', this.onGlobalClick);
- }
- componentWillUnmount () {
- window.removeEventListener('click', this.onGlobalClick);
- window.removeEventListener('touchstart', this.onGlobalClick);
- }
-
-/*
-
-### `setRef(c)`
-
-`setRef()` stores a reference to the dropdown's `<div> in `this.node`.
-
-*/
-
- setRef = (c) => {
- this.node = c;
- }
/*
*/
render () {
- const { open } = this.state;
const { intl, values } = this.props;
/*
Finally, we can render our component.
*/
-
return (
- <div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'open' : ''} ${anyEnabled ? 'active' : ''} `}>
- <div className='advanced-options-dropdown__value'>
- <IconButton
- className='advanced-options-dropdown__value'
- title={intl.formatMessage(messages.advanced_options_icon_title)}
- icon='ellipsis-h' active={open || anyEnabled}
- size={18}
- style={iconStyle}
- onClick={this.onToggleDropdown}
- />
- </div>
- <div className='advanced-options-dropdown__dropdown'>
- {optionElems}
- </div>
- </div>
+ <ComposeDropdown
+ title={intl.formatMessage(messages.advanced_options_icon_title)}
+ icon='home'
+ highlight={anyEnabled}
+ >
+ {optionElems}
+ </ComposeDropdown>
);
}
--- /dev/null
+// Package imports //
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl, defineMessages } from 'react-intl';
+
+// Our imports //
+import ComposeDropdown from '../dropdown/index';
+import { uploadCompose } from '../../../../mastodon/actions/compose';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { openModal } from '../../../../mastodon/actions/modal';
+
+// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+const messages = defineMessages({
+ upload :
+ { id: 'compose.attach.upload', defaultMessage: 'Upload a file' },
+ doodle :
+ { id: 'compose.attach.doodle', defaultMessage: 'Draw something' },
+ attach :
+ { id: 'compose.attach', defaultMessage: 'Attach...' },
+});
+
+const mapStateToProps = state => ({
+ // This horrible expression is copied from vanilla upload_button_container
+ disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')),
+ resetFileKey: state.getIn(['compose', 'resetFileKey']),
+ acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']),
+});
+
+const mapDispatchToProps = dispatch => ({
+ onSelectFile (files) {
+ dispatch(uploadCompose(files));
+ },
+ onOpenDoodle () {
+ dispatch(openModal('DOODLE', { noEsc: true }));
+ },
+});
+
+@injectIntl
+@connect(mapStateToProps, mapDispatchToProps)
+export default class ComposeAttachOptions extends ImmutablePureComponent {
+
+ static propTypes = {
+ intl : PropTypes.object.isRequired,
+ resetFileKey: PropTypes.number,
+ acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired,
+ disabled: PropTypes.bool,
+ onSelectFile: PropTypes.func.isRequired,
+ onOpenDoodle: PropTypes.func.isRequired,
+ };
+
+ handleItemClick = bt => {
+ if (bt === 'upload') {
+ this.fileElement.click();
+ }
+
+ if (bt === 'doodle') {
+ this.props.onOpenDoodle();
+ }
+
+ this.dropdown.setState({ open: false });
+ };
+
+ handleFileChange = (e) => {
+ if (e.target.files.length > 0) {
+ this.props.onSelectFile(e.target.files);
+ }
+ }
+
+ setFileRef = (c) => {
+ this.fileElement = c;
+ }
+
+ setDropdownRef = (c) => {
+ this.dropdown = c;
+ }
+
+ render () {
+ const { intl, resetFileKey, disabled, acceptContentTypes } = this.props;
+
+ const options = [
+ { icon: 'cloud-upload', text: messages.upload, name: 'upload' },
+ { icon: 'paint-brush', text: messages.doodle, name: 'doodle' },
+ ];
+
+ const optionElems = options.map((item) => {
+ const hdl = () => this.handleItemClick(item.name);
+ return (
+ <div
+ role='button'
+ tabIndex='0'
+ key={item.name}
+ onClick={hdl}
+ className='privacy-dropdown__option'
+ >
+ <div className='privacy-dropdown__option__icon'>
+ <i className={`fa fa-fw fa-${item.icon}`} />
+ </div>
+
+ <div className='privacy-dropdown__option__content'>
+ <strong>{intl.formatMessage(item.text)}</strong>
+ </div>
+ </div>
+ );
+ });
+
+ return (
+ <div>
+ <ComposeDropdown
+ title={intl.formatMessage(messages.attach)}
+ icon='paperclip'
+ disabled={disabled}
+ ref={this.setDropdownRef}
+ >
+ {optionElems}
+ </ComposeDropdown>
+ <input
+ key={resetFileKey}
+ ref={this.setFileRef}
+ type='file'
+ multiple={false}
+ accept={acceptContentTypes.toArray().join(',')}
+ onChange={this.handleFileChange}
+ disabled={disabled}
+ style={{ display: 'none' }}
+ />
+ </div>
+ );
+ }
+
+}
--- /dev/null
+// Package imports //
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// Mastodon imports //
+import IconButton from '../../../../mastodon/components/icon_button';
+
+const iconStyle = {
+ height : null,
+ lineHeight : '27px',
+};
+
+export default class ComposeDropdown extends React.PureComponent {
+
+ static propTypes = {
+ title: PropTypes.string.isRequired,
+ icon: PropTypes.string,
+ highlight: PropTypes.bool,
+ disabled: PropTypes.bool,
+ children: PropTypes.arrayOf(PropTypes.node).isRequired,
+ };
+
+ state = {
+ open: false,
+ };
+
+ 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);
+ }
+
+ onToggleDropdown = () => {
+ if (this.props.disabled) return;
+ this.setState({ open: !this.state.open });
+ };
+
+ setRef = (c) => {
+ this.node = c;
+ };
+
+ render () {
+ const { open } = this.state;
+ let { highlight, title, icon, disabled } = this.props;
+
+ if (!icon) icon = 'ellipsis-h';
+
+ return (
+ <div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'open' : ''} ${highlight ? 'active' : ''} `}>
+ <div className='advanced-options-dropdown__value'>
+ <IconButton
+ className={'inverted'}
+ title={title}
+ icon={icon} active={open || highlight}
+ size={18}
+ style={iconStyle}
+ disabled={disabled}
+ onClick={this.onToggleDropdown}
+ />
+ </div>
+ <div className='advanced-options-dropdown__dropdown'>
+ {this.props.children}
+ </div>
+ </div>
+ );
+ }
+
+}
import PropTypes from 'prop-types';
import ReplyIndicatorContainer from '../containers/reply_indicator_container';
import AutosuggestTextarea from '../../../components/autosuggest_textarea';
-import UploadButtonContainer from '../containers/upload_button_container';
-import DoodleButtonContainer from '../containers/doodle_button_container';
import { defineMessages, injectIntl } from 'react-intl';
import Collapsable from '../../../components/collapsable';
import SpoilerButtonContainer from '../containers/spoiler_button_container';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { length } from 'stringz';
import { countableText } from '../util/counter';
+import ComposeAttachOptions from '../../../../glitch/components/compose/attach_options/index';
const messages = defineMessages({
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
</div>
<div className='compose-form__buttons'>
- <UploadButtonContainer />
- <DoodleButtonContainer />
- <PrivacyDropdownContainer />
- <ComposeAdvancedOptionsContainer />
+ <ComposeAttachOptions />
<SensitiveButtonContainer />
+ <div className='compose-form__buttons-separator' />
+ <PrivacyDropdownContainer />
<SpoilerButtonContainer />
+ <ComposeAdvancedOptionsContainer />
</div>
<div className='compose-form__publish'>
+++ /dev/null
-import React from 'react';
-import IconButton from '../../../components/icon_button';
-import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-const messages = defineMessages({
- doodle: { id: 'doodle_button.label', defaultMessage: 'Add a drawing' },
-});
-
-const iconStyle = {
- height: null,
- lineHeight: '27px',
-};
-
-@injectIntl
-export default class UploadButton extends ImmutablePureComponent {
-
- static propTypes = {
- disabled: PropTypes.bool,
- onOpenCanvas: PropTypes.func.isRequired,
- style: PropTypes.object,
- intl: PropTypes.object.isRequired,
- };
-
- handleClick = () => {
- this.props.onOpenCanvas();
- }
-
- render () {
-
- const { intl, disabled } = this.props;
-
- return (
- <div className='compose-form__upload-button'>
- <IconButton icon='pencil' title={intl.formatMessage(messages.doodle)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle} />
- </div>
- );
- }
-
-}
+++ /dev/null
-import { connect } from 'react-redux';
-import DoodleButton from '../components/doodle_button';
-import { openModal } from '../../../actions/modal';
-
-const mapStateToProps = state => ({
- disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')),
-});
-
-const mapDispatchToProps = dispatch => ({
- onOpenCanvas () {
- dispatch(openModal('DOODLE', { noEsc: true }));
- },
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(DoodleButton);
}
}
+.compose-form__buttons-separator {
+ border-left: 1px solid #c3c3c3;
+ margin: 0 3px;
+}
+
.compose-form__upload-button-icon {
line-height: 27px;
}
cat aescling's git repositories / mastodon.git / commitdiff