diff options
Diffstat (limited to 'app/javascript/flavours/glitch')
-rw-r--r-- | app/javascript/flavours/glitch/features/compose/components/options.js | 76 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js | 108 |
2 files changed, 110 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 && ( 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: <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 items = [privacyItems.public, privacyItems.unlisted, privacyItems.private, privacyItems.direct]; + + return ( + <Dropdown + disabled={disabled} + icon={(privacyItems[value] || {}).icon} + items={items} + onChange={onChange} + onModalClose={onModalClose} + onModalOpen={onModalOpen} + title={intl.formatMessage(messages.change_privacy)} + value={value} + /> + ); + } + +} |