From e1a4590bcae65275304046e8887f70592196c003 Mon Sep 17 00:00:00 2001 From: Claire Date: Wed, 9 Feb 2022 14:39:12 +0100 Subject: Rework actions modal to bring it closer to upstream and fix modal stacking issue --- .../glitch/features/compose/components/options.js | 75 ++++++++++++++++------ 1 file changed, 57 insertions(+), 18 deletions(-) (limited to 'app/javascript/flavours/glitch/features/compose/components/options.js') diff --git a/app/javascript/flavours/glitch/features/compose/components/options.js b/app/javascript/flavours/glitch/features/compose/components/options.js index f9212bbae..d30fb2a98 100644 --- a/app/javascript/flavours/glitch/features/compose/components/options.js +++ b/app/javascript/flavours/glitch/features/compose/components/options.js @@ -2,8 +2,10 @@ import PropTypes from 'prop-types'; import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; +import { defineMessages, injectIntl } from 'react-intl'; import spring from 'react-motion/lib/spring'; +import Toggle from 'react-toggle'; +import { connect } from 'react-redux'; // Components. import IconButton from 'flavours/glitch/components/icon_button'; @@ -80,6 +82,36 @@ const messages = defineMessages({ }, }); +@connect((state, { name }) => ({ checked: state.getIn(['compose', 'advanced_options', name]) })) +class ToggleOption extends ImmutablePureComponent { + + static propTypes = { + name: PropTypes.string.isRequired, + checked: PropTypes.bool, + onChangeAdvancedOption: PropTypes.func.isRequired, + }; + + handleChange = () => { + this.props.onChangeAdvancedOption(this.props.name); + }; + + render() { + const { name, meta, text, checked } = this.props; + + return ( + + + +
+ {text} + {meta} +
+ + ); + } + +} + export default @injectIntl class ComposerOptions extends ImmutablePureComponent { @@ -141,6 +173,13 @@ class ComposerOptions extends ImmutablePureComponent { this.fileElement = fileElement; } + renderToggleItemContents = (item, index) => { + const { onChangeAdvancedOption } = this.props; + const { name, meta, text } = item; + + return ; + }; + // Rendering. render () { const { @@ -152,7 +191,6 @@ class ComposerOptions extends ImmutablePureComponent { hasMedia, allowPoll, hasPoll, - intl, onChangeAdvancedOption, onChangeContentType, onChangeVisibility, @@ -164,23 +202,24 @@ class ComposerOptions extends ImmutablePureComponent { resetFileKey, spoiler, showContentTypeChoice, + intl: { formatMessage }, } = this.props; const contentTypeItems = { plain: { icon: 'file-text', name: 'text/plain', - text: , + text: formatMessage(messages.plain), }, html: { icon: 'code', name: 'text/html', - text: , + text: formatMessage(messages.html), }, markdown: { icon: 'arrow-circle-down', name: 'text/markdown', - text: , + text: formatMessage(messages.markdown), }, }; @@ -204,18 +243,18 @@ class ComposerOptions extends ImmutablePureComponent { { icon: 'cloud-upload', name: 'upload', - text: , + text: formatMessage(messages.upload), }, { icon: 'paint-brush', name: 'doodle', - text: , + text: formatMessage(messages.doodle), }, ]} onChange={this.handleClickAttach} onModalClose={onModalClose} onModalOpen={onModalOpen} - title={intl.formatMessage(messages.attach)} + title={formatMessage(messages.attach)} /> {!!pollLimits && ( )}
@@ -252,7 +291,7 @@ class ComposerOptions extends ImmutablePureComponent { onChange={onChangeContentType} onModalClose={onModalClose} onModalOpen={onModalOpen} - title={intl.formatMessage(messages.content_type)} + title={formatMessage(messages.content_type)} value={contentType} /> )} @@ -262,7 +301,7 @@ class ComposerOptions extends ImmutablePureComponent { ariaControls='glitch.composer.spoiler.input' label='CW' onClick={onToggleSpoiler} - title={intl.formatMessage(messages.spoiler)} + title={formatMessage(messages.spoiler)} /> )} , + meta: formatMessage(messages.local_only_long), name: 'do_not_federate', - on: advancedOptions.get('do_not_federate'), - text: , + text: formatMessage(messages.local_only_short), }, { - meta: , + meta: formatMessage(messages.threaded_mode_long), name: 'threaded_mode', - on: advancedOptions.get('threaded_mode'), - text: , + text: formatMessage(messages.threaded_mode_short), }, ] : null} onChange={onChangeAdvancedOption} + renderItemContents={this.renderToggleItemContents} onModalClose={onModalClose} onModalOpen={onModalOpen} - title={intl.formatMessage(messages.advanced_options_icon_title)} + title={formatMessage(messages.advanced_options_icon_title)} + closeOnChange={false} /> ); -- cgit From 0bb3d445ab0167ac33bd804333c7f9741c7526ae Mon Sep 17 00:00:00 2001 From: Claire Date: Wed, 9 Feb 2022 17:15:36 +0100 Subject: Please Codeclimate --- .../flavours/glitch/features/compose/components/dropdown.js | 3 +-- app/javascript/flavours/glitch/features/compose/components/options.js | 4 ++-- .../flavours/glitch/features/compose/components/privacy_dropdown.js | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) (limited to 'app/javascript/flavours/glitch/features/compose/components/options.js') diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown.js b/app/javascript/flavours/glitch/features/compose/components/dropdown.js index 4708e2ece..9f70d6b79 100644 --- a/app/javascript/flavours/glitch/features/compose/components/dropdown.js +++ b/app/javascript/flavours/glitch/features/compose/components/dropdown.js @@ -120,7 +120,7 @@ export default class ComposerOptionsDropdown extends React.PureComponent { const i = Number(e.currentTarget.getAttribute('data-index')); - const { name } = this.props.items[i]; + const { name } = items[i]; e.preventDefault(); // Prevents focus from changing if (closeOnChange) onModalClose(); @@ -129,7 +129,6 @@ export default class ComposerOptionsDropdown extends React.PureComponent { // Creates an action modal object. handleMakeModal = () => { - const component = this; const { items, onChange, diff --git a/app/javascript/flavours/glitch/features/compose/components/options.js b/app/javascript/flavours/glitch/features/compose/components/options.js index d30fb2a98..085da18ea 100644 --- a/app/javascript/flavours/glitch/features/compose/components/options.js +++ b/app/javascript/flavours/glitch/features/compose/components/options.js @@ -96,7 +96,7 @@ class ToggleOption extends ImmutablePureComponent { }; render() { - const { name, meta, text, checked } = this.props; + const { meta, text, checked } = this.props; return ( @@ -173,7 +173,7 @@ class ComposerOptions extends ImmutablePureComponent { this.fileElement = fileElement; } - renderToggleItemContents = (item, index) => { + renderToggleItemContents = (item) => { const { onChangeAdvancedOption } = this.props; const { name, meta, text } = item; diff --git a/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js b/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js index 4113e4061..3bf25b3a4 100644 --- a/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js +++ b/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; +import { defineMessages, injectIntl } from 'react-intl'; import Dropdown from './dropdown'; const messages = defineMessages({ -- cgit