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 0000000000..0039ba52fe
--- /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 =
;
+ return
+
+
+
+
+ {open && dropdownItems}
+
+
;
+ }
+}
\ 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 f7eeedc69f..88ba0347a1 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 {
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 0000000000..921436f665
--- /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 ac72f37c5a..4a1969afdb 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;