Fix privacy dropdown in boost modal on mobile (#1967)

Fixes #1965
This commit is contained in:
Claire 2022-11-22 11:26:14 +01:00 committed by GitHub
parent bdc61d467d
commit 43dbc62568
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 46 additions and 40 deletions

View file

@ -356,10 +356,8 @@ class ComposeForm extends ImmutablePureComponent {
<OptionsContainer
advancedOptions={advancedOptions}
disabled={isSubmitting}
onChangeVisibility={onChangeVisibility}
onToggleSpoiler={spoilersAlwaysOn ? null : onChangeSpoilerness}
onUpload={onPaste}
privacy={privacy}
isEditing={isEditing}
sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)}
spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler}

View file

@ -9,13 +9,13 @@ import IconButton from 'flavours/glitch/components/icon_button';
import DropdownMenu from './dropdown_menu';
// Utils.
import { isUserTouching } from 'flavours/glitch/is_mobile';
import { assignHandlers } from 'flavours/glitch/utils/react_helpers';
// The component.
export default class ComposerOptionsDropdown extends React.PureComponent {
static propTypes = {
isUserTouching: PropTypes.func,
disabled: PropTypes.bool,
icon: PropTypes.string,
items: PropTypes.arrayOf(PropTypes.shape({
@ -49,7 +49,7 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
const { onModalOpen } = this.props;
const { open } = this.state;
if (isUserTouching()) {
if (this.props.isUserTouching && this.props.isUserTouching()) {
if (this.state.open) {
this.props.onModalClose();
} else {

View file

@ -10,8 +10,8 @@ import { connect } from 'react-redux';
// Components.
import IconButton from 'flavours/glitch/components/icon_button';
import TextIconButton from './text_icon_button';
import Dropdown from './dropdown';
import PrivacyDropdown from './privacy_dropdown';
import DropdownContainer from '../containers/dropdown_container';
import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
import LanguageDropdown from '../containers/language_dropdown_container';
import ImmutablePureComponent from 'react-immutable-pure-component';
@ -126,15 +126,11 @@ class ComposerOptions extends ImmutablePureComponent {
hasPoll: PropTypes.bool,
intl: PropTypes.object.isRequired,
onChangeAdvancedOption: PropTypes.func,
onChangeVisibility: PropTypes.func,
onChangeContentType: PropTypes.func,
onTogglePoll: PropTypes.func,
onDoodleOpen: PropTypes.func,
onModalClose: PropTypes.func,
onModalOpen: PropTypes.func,
onToggleSpoiler: PropTypes.func,
onUpload: PropTypes.func,
privacy: PropTypes.string,
contentType: PropTypes.string,
resetFileKey: PropTypes.number,
spoiler: PropTypes.bool,
@ -195,12 +191,8 @@ class ComposerOptions extends ImmutablePureComponent {
hasPoll,
onChangeAdvancedOption,
onChangeContentType,
onChangeVisibility,
onTogglePoll,
onModalClose,
onModalOpen,
onToggleSpoiler,
privacy,
resetFileKey,
spoiler,
showContentTypeChoice,
@ -239,7 +231,7 @@ class ComposerOptions extends ImmutablePureComponent {
multiple
style={{ display: 'none' }}
/>
<Dropdown
<DropdownContainer
disabled={disabled || !allowMedia}
icon='paperclip'
items={[
@ -255,8 +247,6 @@ class ComposerOptions extends ImmutablePureComponent {
},
]}
onChange={this.handleClickAttach}
onModalClose={onModalClose}
onModalOpen={onModalOpen}
title={formatMessage(messages.attach)}
/>
{!!pollLimits && (
@ -275,15 +265,9 @@ class ComposerOptions extends ImmutablePureComponent {
/>
)}
<hr />
<PrivacyDropdown
disabled={disabled || isEditing}
onChange={onChangeVisibility}
onModalClose={onModalClose}
onModalOpen={onModalOpen}
value={privacy}
/>
<PrivacyDropdownContainer disabled={disabled || isEditing} />
{showContentTypeChoice && (
<Dropdown
<DropdownContainer
disabled={disabled}
icon={(contentTypeItems[contentType.split('/')[1]] || {}).icon}
items={[
@ -292,8 +276,6 @@ class ComposerOptions extends ImmutablePureComponent {
contentTypeItems.markdown,
]}
onChange={onChangeContentType}
onModalClose={onModalClose}
onModalOpen={onModalOpen}
title={formatMessage(messages.content_type)}
value={contentType}
/>
@ -308,7 +290,7 @@ class ComposerOptions extends ImmutablePureComponent {
/>
)}
<LanguageDropdown />
<Dropdown
<DropdownContainer
disabled={disabled || isEditing}
icon='ellipsis-h'
items={advancedOptions ? [
@ -325,8 +307,6 @@ class ComposerOptions extends ImmutablePureComponent {
] : null}
onChange={onChangeAdvancedOption}
renderItemContents={this.renderToggleItemContents}
onModalClose={onModalClose}
onModalOpen={onModalOpen}
title={formatMessage(messages.advanced_options_icon_title)}
closeOnChange={false}
/>

View file

@ -32,7 +32,7 @@ class PrivacyDropdown extends React.PureComponent {
};
render () {
const { value, onChange, onModalOpen, onModalClose, disabled, noDirect, container, intl: { formatMessage } } = this.props;
const { value, onChange, onModalOpen, onModalClose, disabled, noDirect, container, isUserTouching, intl: { formatMessage } } = this.props;
// We predefine our privacy items so that we can easily pick the
// dropdown icon later.
@ -75,6 +75,7 @@ class PrivacyDropdown extends React.PureComponent {
icon={(privacyItems[value] || {}).icon}
items={items}
onChange={onChange}
isUserTouching={isUserTouching}
onModalClose={onModalClose}
onModalOpen={onModalOpen}
title={formatMessage(messages.change_privacy)}

View file

@ -0,0 +1,12 @@
import { connect } from 'react-redux';
import { isUserTouching } from 'flavours/glitch/is_mobile';
import { openModal, closeModal } from 'flavours/glitch/actions/modal';
import Dropdown from '../components/dropdown';
const mapDispatchToProps = dispatch => ({
isUserTouching,
onModalOpen: props => dispatch(openModal('ACTIONS', props)),
onModalClose: () => dispatch(closeModal()),
});
export default connect(null, mapDispatchToProps)(Dropdown);

View file

@ -6,7 +6,7 @@ import {
addPoll,
removePoll,
} from 'flavours/glitch/actions/compose';
import { closeModal, openModal } from 'flavours/glitch/actions/modal';
import { openModal } from 'flavours/glitch/actions/modal';
function mapStateToProps (state) {
const spoilersAlwaysOn = state.getIn(['local_settings', 'always_show_spoilers_field']);
@ -48,14 +48,6 @@ const mapDispatchToProps = (dispatch) => ({
onDoodleOpen() {
dispatch(openModal('DOODLE', { noEsc: true }));
},
onModalClose() {
dispatch(closeModal());
},
onModalOpen(props) {
dispatch(openModal('ACTIONS', props));
},
});
export default connect(mapStateToProps, mapDispatchToProps)(Options);

View file

@ -0,0 +1,23 @@
import { connect } from 'react-redux';
import PrivacyDropdown from '../components/privacy_dropdown';
import { changeComposeVisibility } from 'flavours/glitch/actions/compose';
import { openModal, closeModal } from 'flavours/glitch/actions/modal';
import { isUserTouching } from 'flavours/glitch/is_mobile';
const mapStateToProps = state => ({
value: state.getIn(['compose', 'privacy']),
});
const mapDispatchToProps = dispatch => ({
onChange (value) {
dispatch(changeComposeVisibility(value));
},
isUserTouching,
onModalOpen: props => dispatch(openModal('ACTIONS', props)),
onModalClose: () => dispatch(closeModal()),
});
export default connect(mapStateToProps, mapDispatchToProps)(PrivacyDropdown);