The beginnings of an advanced options dropdown

4 files changed, 128 insertions, 0 deletions

diff --git a/app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js b/app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js
new file mode 100644
index 000000000..0039ba52f
--- /dev/null
+++ b/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>;
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js
index f7eeedc69..88ba0347a 100644
--- a/app/javascript/mastodon/features/compose/components/compose_form.js
+++ b/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>
diff --git a/app/javascript/mastodon/features/compose/containers/advanced_options_container.js b/app/javascript/mastodon/features/compose/containers/advanced_options_container.js
new file mode 100644
index 000000000..921436f66
--- /dev/null
+++ b/app/javascript/mastodon/features/compose/containers/advanced_options_container.js
@@ -0,0 +1,3 @@
+import AdvancedOptionsDropdown from '../components/advanced_options_dropdown';
+
+export default AdvancedOptionsDropdown;
\ No newline at end of file
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index ac72f37c5..4a1969afd 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -2876,6 +2876,79 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
+.advanced-options-dropdown {
+  position: relative;
+}
+
+.advanced-options-dropdown__dropdown {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 27px;
+  width: 230px;
+  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__icon {
+  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.active {
+  .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;
   margin-bottom: 10px;