in `this.node`.
-
-*/
-
- setRef = (c) => {
- this.node = c;
- }
/*
@@ -171,7 +103,6 @@ anywhere else on the screen.
*/
render () {
- const { open } = this.state;
const { intl, values } = this.props;
/*
@@ -218,23 +149,14 @@ toggle as its `key` so that React can keep track of it.
Finally, we can render our component.
*/
-
return (
-
-
-
-
-
- {optionElems}
-
-
+
+ {optionElems}
+
);
}
diff --git a/app/javascript/glitch/components/compose/attach_options/index.js b/app/javascript/glitch/components/compose/attach_options/index.js
new file mode 100644
index 00000000000..4340972f01e
--- /dev/null
+++ b/app/javascript/glitch/components/compose/attach_options/index.js
@@ -0,0 +1,133 @@
+// 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 (
+
+
+
+
+
+
+ {intl.formatMessage(item.text)}
+
+
+ );
+ });
+
+ return (
+
+
+ {optionElems}
+
+
+
+ );
+ }
+
+}
diff --git a/app/javascript/glitch/components/compose/dropdown/index.js b/app/javascript/glitch/components/compose/dropdown/index.js
new file mode 100644
index 00000000000..5f6467155a7
--- /dev/null
+++ b/app/javascript/glitch/components/compose/dropdown/index.js
@@ -0,0 +1,77 @@
+// 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 (
+
+
+
+
+
+ {this.props.children}
+
+
+ );
+ }
+
+}
diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js
index 17f5bde4b3c..4b393bf8be5 100644
--- a/app/javascript/mastodon/features/compose/components/compose_form.js
+++ b/app/javascript/mastodon/features/compose/components/compose_form.js
@@ -5,8 +5,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
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';
@@ -20,6 +18,7 @@ import { isMobile } from '../../../is_mobile';
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?' },
@@ -241,12 +240,12 @@ export default class ComposeForm extends ImmutablePureComponent {
diff --git a/app/javascript/mastodon/features/compose/components/doodle_button.js b/app/javascript/mastodon/features/compose/components/doodle_button.js
deleted file mode 100644
index 0af02458fc8..00000000000
--- a/app/javascript/mastodon/features/compose/components/doodle_button.js
+++ /dev/null
@@ -1,41 +0,0 @@
-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 (
-
-
-
- );
- }
-
-}
diff --git a/app/javascript/mastodon/features/compose/containers/doodle_button_container.js b/app/javascript/mastodon/features/compose/containers/doodle_button_container.js
deleted file mode 100644
index 5ada4514f8d..00000000000
--- a/app/javascript/mastodon/features/compose/containers/doodle_button_container.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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);
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 6fe17958136..306a0457db8 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -322,6 +322,11 @@
}
}
+.compose-form__buttons-separator {
+ border-left: 1px solid #c3c3c3;
+ margin: 0 3px;
+}
+
.compose-form__upload-button-icon {
line-height: 27px;
}