The beginnings of an advanced options dropdown

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import IconButton from '../../../components/icon_button';
+
+export default class AdvancedOptionsDropdown extends React.PureComponent {
+  onToggleDropdown = () => {
+      this.setState({ open: !this.state.open });
+  };
+
+  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);
+  }
+
+  state = {
+    open: false,
+  };
+
+  setRef = (c) => {
+    this.node = c;
+  }
+
+  render () {
+    const { open } = this.state;
+    const dropdownItems = <div role='button' className='advanced-options-dropdown__option'>
+      <div className='advanced-options-dropdown__option__content'>test</div>
+    </div>;
+    return <div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'active' : ''}`}>
+      <div className='advanced-options-dropdown__value'>
+        <IconButton className='advanced-options-dropdown__value'
+          icon='ellipsis-h' active={open}
+          size={18} inverted
+          onClick={this.onToggleDropdown} />
+      </div>
+      <div className='advanced-options-dropdown__dropdown'>
+        {open && dropdownItems}
+      </div>
+    </div>;
+  }
+}

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

@@ -11,6 +11,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import Collapsable from '../../../components/collapsable';
 import SpoilerButtonContainer from '../containers/spoiler_button_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
+import AdvancedOptionsContainer from '../containers/advanced_options_container';
 import SensitiveButtonContainer from '../containers/sensitive_button_container';
 import EmojiPickerDropdown from './emoji_picker_dropdown';
 import UploadFormContainer from '../containers/upload_form_container';
@@ -192,6 +193,7 @@ export default class ComposeForm extends ImmutablePureComponent {
           <div className='compose-form__buttons'>
             <UploadButtonContainer />
             <PrivacyDropdownContainer />
+            <AdvancedOptionsContainer />
             <SensitiveButtonContainer />
             <SpoilerButtonContainer />
           </div>

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

@@ -0,0 +1,3 @@
+import AdvancedOptionsDropdown from '../components/advanced_options_dropdown';
+
+export default AdvancedOptionsDropdown;