new tootbox look and removed old doodle button files

app/javascript/glitch/components/compose/attach_options/index.js

@@ -1,10 +1,15 @@
 //  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';
 
 //  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 
@@ -17,21 +22,63 @@ const messages = defineMessages({
     { 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
-export default class ComposeAttachOptions extends React.PureComponent {
+@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,
   };
 
-  handleClick = e => {
-    const bt = e.target.datset.index;
-    //TODO
+  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 } = this.props;
+    const { intl, resetFileKey, disabled, acceptContentTypes } = this.props;
 
     const options = [
       { icon: 'cloud-upload', text: messages.upload, name: 'upload' },
@@ -39,13 +86,13 @@ export default class ComposeAttachOptions extends React.PureComponent {
     ];
 
     const optionElems = options.map((item) => {
+      const hdl = () => this.handleItemClick(item.name);
       return (
         <div
           role='button'
           tabIndex='0'
           key={item.name}
-          data-index={item.name}
-          onClick={this.handleClick}
+          onClick={hdl}
           className='privacy-dropdown__option'
         >
           <div className='privacy-dropdown__option__icon'>
@@ -53,19 +100,33 @@ export default class ComposeAttachOptions extends React.PureComponent {
           </div>
 
           <div className='privacy-dropdown__option__content'>
-            <strong>{item.text}</strong>
+            <strong>{intl.formatMessage(item.text)}</strong>
           </div>
         </div>
       );
     });
 
     return (
-      <ComposeDropdown
-        title={intl.formatMessage(messages.attach)}
-        icon='paperclip'
-      >
-        {optionElems}
-      </ComposeDropdown>
+      <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>
     );
   }
 

app/javascript/glitch/components/compose/dropdown/index.js

@@ -16,6 +16,7 @@ export default class ComposeDropdown extends React.PureComponent {
     title: PropTypes.string.isRequired,
     icon: PropTypes.string,
     highlight: PropTypes.bool,
+    disabled: PropTypes.bool,
     children: PropTypes.arrayOf(PropTypes.node).isRequired,
   };
 
@@ -39,6 +40,7 @@ export default class ComposeDropdown extends React.PureComponent {
   }
 
   onToggleDropdown = () => {
+    if (this.props.disabled) return;
     this.setState({ open: !this.state.open });
   };
 
@@ -48,7 +50,7 @@ export default class ComposeDropdown extends React.PureComponent {
 
   render () {
     const { open } = this.state;
-    let { highlight, title, icon } = this.props;
+    let { highlight, title, icon, disabled } = this.props;
 
     if (!icon) icon = 'ellipsis-h';
 
@@ -56,11 +58,12 @@ export default class ComposeDropdown extends React.PureComponent {
       <div ref={this.setRef} className={`advanced-options-dropdown ${open ?  'open' : ''} ${highlight ? 'active' : ''} `}>
         <div className='advanced-options-dropdown__value'>
           <IconButton
-            className='advanced-options-dropdown__value'
+            className={'inverted'}
             title={title}
             icon={icon} active={open || highlight}
             size={18}
             style={iconStyle}
+            disabled={disabled}
             onClick={this.onToggleDropdown}
           />
         </div>

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 {
         </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'>

app/javascript/mastodon/features/compose/components/doodle_button.js

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

app/javascript/mastodon/features/compose/containers/doodle_button_container.js

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

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