diff --git a/app/javascript/flavours/glitch/features/compose/components/options.js b/app/javascript/flavours/glitch/features/compose/components/options.js
index 9e332aabd..f9212bbae 100644
--- a/app/javascript/flavours/glitch/features/compose/components/options.js
+++ b/app/javascript/flavours/glitch/features/compose/components/options.js
@@ -9,6 +9,7 @@ import spring from 'react-motion/lib/spring';
import IconButton from 'flavours/glitch/components/icon_button';
import TextIconButton from './text_icon_button';
import Dropdown from './dropdown';
+import PrivacyDropdown from './privacy_dropdown';
import ImmutablePureComponent from 'react-immutable-pure-component';
// Utils.
@@ -25,22 +26,10 @@ const messages = defineMessages({
defaultMessage: 'Attach...',
id: 'compose.attach',
},
- change_privacy: {
- defaultMessage: 'Adjust status privacy',
- id: 'privacy.change',
- },
content_type: {
defaultMessage: 'Content type',
id: 'content-type.change',
},
- direct_long: {
- defaultMessage: 'Visible for mentioned users only',
- id: 'privacy.direct.long',
- },
- direct_short: {
- defaultMessage: 'Direct',
- id: 'privacy.direct.short',
- },
doodle: {
defaultMessage: 'Draw something',
id: 'compose.attach.doodle',
@@ -65,22 +54,6 @@ const messages = defineMessages({
defaultMessage: 'Plain text',
id: 'compose.content-type.plain',
},
- private_long: {
- defaultMessage: 'Visible for followers only',
- id: 'privacy.private.long',
- },
- private_short: {
- defaultMessage: 'Followers-only',
- id: 'privacy.private.short',
- },
- public_long: {
- defaultMessage: 'Visible for all, shown in public timelines',
- id: 'privacy.public.long',
- },
- public_short: {
- defaultMessage: 'Public',
- id: 'privacy.public.short',
- },
spoiler: {
defaultMessage: 'Hide text behind warning',
id: 'compose_form.spoiler',
@@ -93,14 +66,6 @@ const messages = defineMessages({
defaultMessage: 'Threaded mode',
id: 'advanced_options.threaded_mode.short',
},
- unlisted_long: {
- defaultMessage: 'Visible for all, but not in public timelines',
- id: 'privacy.unlisted.long',
- },
- unlisted_short: {
- defaultMessage: 'Unlisted',
- id: 'privacy.unlisted.short',
- },
upload: {
defaultMessage: 'Upload a file',
id: 'compose.attach.upload',
@@ -201,35 +166,6 @@ class ComposerOptions extends ImmutablePureComponent {
showContentTypeChoice,
} = this.props;
- // We predefine our privacy items so that we can easily pick the
- // dropdown icon later.
- const privacyItems = {
- direct: {
- icon: 'envelope',
- meta: ,
- name: 'direct',
- text: ,
- },
- private: {
- icon: 'lock',
- meta: ,
- name: 'private',
- text: ,
- },
- public: {
- icon: 'globe',
- meta: ,
- name: 'public',
- text: ,
- },
- unlisted: {
- icon: 'unlock',
- meta: ,
- name: 'unlisted',
- text: ,
- },
- };
-
const contentTypeItems = {
plain: {
icon: 'file-text',
@@ -297,19 +233,11 @@ class ComposerOptions extends ImmutablePureComponent {
/>
)}
-
{showContentTypeChoice && (
diff --git a/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js b/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js
new file mode 100644
index 000000000..ec8d1378e
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js
@@ -0,0 +1,108 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import Dropdown from './dropdown';
+
+const messages = defineMessages({
+ change_privacy: {
+ defaultMessage: 'Adjust status privacy',
+ id: 'privacy.change',
+ },
+ direct_long: {
+ defaultMessage: 'Visible for mentioned users only',
+ id: 'privacy.direct.long',
+ },
+ direct_short: {
+ defaultMessage: 'Direct',
+ id: 'privacy.direct.short',
+ },
+ private_long: {
+ defaultMessage: 'Visible for followers only',
+ id: 'privacy.private.long',
+ },
+ private_short: {
+ defaultMessage: 'Followers-only',
+ id: 'privacy.private.short',
+ },
+ public_long: {
+ defaultMessage: 'Visible for all, shown in public timelines',
+ id: 'privacy.public.long',
+ },
+ public_short: {
+ defaultMessage: 'Public',
+ id: 'privacy.public.short',
+ },
+ unlisted_long: {
+ defaultMessage: 'Visible for all, but not in public timelines',
+ id: 'privacy.unlisted.long',
+ },
+ unlisted_short: {
+ defaultMessage: 'Unlisted',
+ id: 'privacy.unlisted.short',
+ },
+});
+
+export default @injectIntl
+class PrivacyDropdown extends React.PureComponent {
+
+ static propTypes = {
+ isUserTouching: PropTypes.func,
+ onModalOpen: PropTypes.func,
+ onModalClose: PropTypes.func,
+ value: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+ noDirect: PropTypes.bool,
+ container: PropTypes.func,
+ intl: PropTypes.object.isRequired,
+ };
+
+ render () {
+ const { value, onChange, onModalOpen, onModalClose, disabled, intl } = this.props;
+
+ // We predefine our privacy items so that we can easily pick the
+ // dropdown icon later.
+ const privacyItems = {
+ direct: {
+ icon: 'envelope',
+ meta: ,
+ name: 'direct',
+ text: ,
+ },
+ private: {
+ icon: 'lock',
+ meta: ,
+ name: 'private',
+ text: ,
+ },
+ public: {
+ icon: 'globe',
+ meta: ,
+ name: 'public',
+ text: ,
+ },
+ unlisted: {
+ icon: 'unlock',
+ meta: ,
+ name: 'unlisted',
+ text: ,
+ },
+ };
+
+ const items = [privacyItems.public, privacyItems.unlisted, privacyItems.private, privacyItems.direct];
+
+ return (
+
+ );
+ }
+
+}