Update doodlebox and compose form button layout

app/javascript/mastodon/features/compose/components/attach_options.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 './compose_dropdown'; 
+import { uploadCompose } from '../../../actions/compose'; 
+import ImmutablePropTypes from 'react-immutable-proptypes'; 
+import ImmutablePureComponent from 'react-immutable-pure-component'; 
+import { openModal } from '../../../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> 
+    ); 
+  } 
+ 
+} 

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

@@ -0,0 +1,76 @@
+//  Package imports  // 
+import React from 'react'; 
+import PropTypes from 'prop-types'; 
+ 
+//  Mastodon imports  // 
+import IconButton from '../../../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> 
+    ); 
+  }
+}

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 SpoilerButtonContainer from '../containers/spoiler_button_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
@@ -18,6 +16,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 './attach_options';
 
 const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
 
@@ -204,10 +203,10 @@ export default class ComposeForm extends ImmutablePureComponent {
 
         <div className='compose-form__buttons-wrapper'>
           <div className='compose-form__buttons'>
-            <UploadButtonContainer />
+            <ComposeAttachOptions />
-            <DoodleButtonContainer />
-            <PrivacyDropdownContainer />
             <SensitiveButtonContainer />
+            <div className='compose-form__buttons-separator' /> 
+            <PrivacyDropdownContainer />
             <SpoilerButtonContainer />
           </div>
           <div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div>

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

@@ -383,6 +383,14 @@
     padding: 10px;
     cursor: pointer;
     border-radius: 4px;
+.compose-form__buttons-separator { 
+  border-left: 1px solid #c3c3c3; 
+  margin: 0 3px; 
+} 
+
+.compose-form__upload-button-icon {
+  line-height: 27px;
+}
 
     &:hover,
     &:focus,
@@ -3404,6 +3412,78 @@ a.status-card {
   }
 }
 
+.advanced-options-dropdown {
+  position: relative;
+}
+
+.advanced-options-dropdown__dropdown {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 27px;
+  width: 210px;
+  background: $simple-background-color;
+  border-radius: 0 4px 4px;
+  z-index: 2;
+  overflow: hidden;
+}
+
+.advanced-options-dropdown__option {
+  color: $ui-base-color;
+  padding: 10px;
+  cursor: pointer;
+  display: flex;
+
+  &:hover,
+  &.active {
+    background: $ui-highlight-color;
+    color: $primary-text-color;
+
+    .advanced-options-dropdown__option__content {
+      color: $primary-text-color;
+
+      strong {
+        color: $primary-text-color;
+      }
+    }
+  }
+
+  &.active:hover {
+    background: lighten($ui-highlight-color, 4%);
+  }
+}
+
+.advanced-options-dropdown__option__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+}
+
+.advanced-options-dropdown__option__content {
+  flex: 1 1 auto;
+  color: darken($ui-primary-color, 24%);
+
+  strong {
+    font-weight: 500;
+    display: block;
+    color: $ui-base-color;
+  }
+}
+
+.advanced-options-dropdown.open {
+  .advanced-options-dropdown__value {
+    background: $simple-background-color;
+    border-radius: 4px 4px 0 0;
+    box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
+  }
+
+  .advanced-options-dropdown__dropdown {
+    display: block;
+    box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
+  }
+}
+
 .search {
   position: relative;
 }