Refactor privacy dropdown to have an interface closer to upstream's

1 files changed, 2 insertions, 74 deletions

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: <FormattedMessage {...messages.direct_long} />,
-        name: 'direct',
-        text: <FormattedMessage {...messages.direct_short} />,
-      },
-      private: {
-        icon: 'lock',
-        meta: <FormattedMessage {...messages.private_long} />,
-        name: 'private',
-        text: <FormattedMessage {...messages.private_short} />,
-      },
-      public: {
-        icon: 'globe',
-        meta: <FormattedMessage {...messages.public_long} />,
-        name: 'public',
-        text: <FormattedMessage {...messages.public_short} />,
-      },
-      unlisted: {
-        icon: 'unlock',
-        meta: <FormattedMessage {...messages.unlisted_long} />,
-        name: 'unlisted',
-        text: <FormattedMessage {...messages.unlisted_short} />,
-      },
-    };
-
     const contentTypeItems = {
       plain: {
         icon: 'file-text',
@@ -297,19 +233,11 @@ class ComposerOptions extends ImmutablePureComponent {
           />
         )}
         <hr />
-        <Dropdown
+        <PrivacyDropdown
           disabled={disabled}
-          icon={(privacyItems[privacy] || {}).icon}
-          items={[
-            privacyItems.public,
-            privacyItems.unlisted,
-            privacyItems.private,
-            privacyItems.direct,
-          ]}
           onChange={onChangeVisibility}
           onModalClose={onModalClose}
           onModalOpen={onModalOpen}
-          title={intl.formatMessage(messages.change_privacy)}
           value={privacy}
         />
         {showContentTypeChoice && (