hamptonmoore
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rework actions modal to bring it closer to upstream and fix modal stacking issue

signup-info-prompt
Claire 2022-02-09 14:39:12 +01:00
parent bc2eaf3581
commit e1a4590bca
6 changed files with 149 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/javascript/flavours/glitch/containers/dropdown_menu_container.js
View File

@ -14,12 +14,7 @@ const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({
onOpen(id, onItemClick, dropdownPlacement, keyboard) { onOpen(id, onItemClick, dropdownPlacement, keyboard) {
dispatch(isUserTouching() ? openModal('ACTIONS', { dispatch(isUserTouching() ? openModal('ACTIONS', {
status, status,
actions: items.map( actions: items,
(item, i) => item ? {
...item,
name: `${item.text}-${i}`,
} : null
),
onClick: onItemClick, onClick: onItemClick,
}) : openDropdownMenu(id, dropdownPlacement, keyboard, scrollKey)); }) : openDropdownMenu(id, dropdownPlacement, keyboard, scrollKey));
}, },

72
app/javascript/flavours/glitch/features/compose/components/dropdown.js
View File

@ -21,10 +21,9 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
icon: PropTypes.string, icon: PropTypes.string,
items: PropTypes.arrayOf(PropTypes.shape({ items: PropTypes.arrayOf(PropTypes.shape({
icon: PropTypes.string, icon: PropTypes.string,
meta: PropTypes.node, meta: PropTypes.string,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
on: PropTypes.bool, text: PropTypes.string,
text: PropTypes.node,
})).isRequired, })).isRequired,
onModalOpen: PropTypes.func, onModalOpen: PropTypes.func,
onModalClose: PropTypes.func, onModalClose: PropTypes.func,
@ -32,10 +31,15 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
value: PropTypes.string, value: PropTypes.string,
onChange: PropTypes.func, onChange: PropTypes.func,
container: PropTypes.func, container: PropTypes.func,
renderItemContents: PropTypes.func,
closeOnChange: PropTypes.bool,
};
static defaultProps = {
closeOnChange: true,
}; };
state = { state = {
needsModalUpdate: false,
open: false, open: false,
openedViaKeyboard: undefined, openedViaKeyboard: undefined,
placement: 'bottom', placement: 'bottom',
@ -106,6 +110,23 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
this.setState({ open: false }); this.setState({ open: false });
} }
handleItemClick = (e) => {
const {
items,
onChange,
onModalClose,
closeOnChange,
} = this.props;
const i = Number(e.currentTarget.getAttribute('data-index'));
const { name } = this.props.items[i];
e.preventDefault(); // Prevents focus from changing
if (closeOnChange) onModalClose();
onChange(name);
};
// Creates an action modal object. // Creates an action modal object.
handleMakeModal = () => { handleMakeModal = () => {
const component = this; const component = this;
@ -124,6 +145,8 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
// The object. // The object.
return { return {
renderItemContents: this.props.renderItemContents,
onClick: this.handleItemClick,
actions: items.map( actions: items.map(
({ ({
name, name,
@ -132,48 +155,11 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
...rest, ...rest,
active: value && name === value, active: value && name === value,
name, name,
onClick (e) {
e.preventDefault(); // Prevents focus from changing
onModalClose();
onChange(name);
},
onPassiveClick (e) {
e.preventDefault(); // Prevents focus from changing
onChange(name);
component.setState({ needsModalUpdate: true });
},
}) })
), ),
}; };
} }
// If our modal is open and our props update, we need to also update
// the modal.
handleUpdate = () => {
const { onModalOpen } = this.props;
const { needsModalUpdate } = this.state;
// Gets our modal object.
const modal = this.handleMakeModal();
// Reopens the modal with the new object.
if (needsModalUpdate && modal && onModalOpen) {
onModalOpen(modal);
}
}
// Updates our modal as necessary.
componentDidUpdate (prevProps) {
const { items } = this.props;
const { needsModalUpdate } = this.state;
if (needsModalUpdate && items.find(
(item, i) => item.on !== prevProps.items[i].on
)) {
this.handleUpdate();
this.setState({ needsModalUpdate: false });
}
}
// Rendering. // Rendering.
render () { render () {
const { const {
@ -185,6 +171,8 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
onChange, onChange,
value, value,
container, container,
renderItemContents,
closeOnChange,
} = this.props; } = this.props;
const { open, placement } = this.state; const { open, placement } = this.state;
const computedClass = classNames('composer--options--dropdown', { const computedClass = classNames('composer--options--dropdown', {
@ -225,10 +213,12 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
> >
<DropdownMenu <DropdownMenu
items={items} items={items}
renderItemContents={renderItemContents}
onChange={onChange} onChange={onChange}
onClose={this.handleClose} onClose={this.handleClose}
value={value} value={value}
openedViaKeyboard={this.state.openedViaKeyboard} openedViaKeyboard={this.state.openedViaKeyboard}
closeOnChange={closeOnChange}
/> />
</Overlay> </Overlay>
</div> </div>

36
app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js
View File

@ -2,7 +2,6 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import spring from 'react-motion/lib/spring'; import spring from 'react-motion/lib/spring';
import Toggle from 'react-toggle';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import classNames from 'classnames'; import classNames from 'classnames';
@ -28,18 +27,20 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
icon: PropTypes.string, icon: PropTypes.string,
meta: PropTypes.node, meta: PropTypes.node,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
on: PropTypes.bool,
text: PropTypes.node, text: PropTypes.node,
})), })),
onChange: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
style: PropTypes.object, style: PropTypes.object,
value: PropTypes.string, value: PropTypes.string,
renderItemContents: PropTypes.func,
openedViaKeyboard: PropTypes.bool, openedViaKeyboard: PropTypes.bool,
closeOnChange: PropTypes.bool,
}; };
static defaultProps = { static defaultProps = {
style: {}, style: {},
closeOnChange: true,
}; };
state = { state = {
@ -83,12 +84,13 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
const { const {
onChange, onChange,
onClose, onClose,
closeOnChange,
items, items,
} = this.props; } = this.props;
const { on, name } = this.props.items[i]; const { name } = this.props.items[i];
e.preventDefault(); // Prevents change in focus on click e.preventDefault(); // Prevents change in focus on click
if ((on === null || typeof on === 'undefined')) { if (closeOnChange) {
onClose(); onClose();
} }
onChange(name); onChange(name);
@ -150,18 +152,25 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
} }
renderItem = (item, i) => { renderItem = (item, i) => {
const { name, icon, meta, on, text } = item; const { name, icon, meta, text } = item;
const active = (name === (this.props.value || this.state.value)); const active = (name === (this.props.value || this.state.value));
const computedClass = classNames('composer--options--dropdown--content--item', { active }); const computedClass = classNames('composer--options--dropdown--content--item', { active });
let prefix = null; let contents = this.props.renderItemContents && this.props.renderItemContents(item, i);
if (on !== null && typeof on !== 'undefined') { if (!contents) {
prefix = <Toggle checked={on} onChange={this.handleClick} />; contents = (
} else if (icon) { <React.Fragment>
prefix = <Icon className='icon' fixedWidth id={icon} /> {icon && <Icon className='icon' fixedWidth id={icon} />}
<div className='content'>
<strong>{text}</strong>
{meta}
</div>
</React.Fragment>
);
} }
return ( return (
@ -175,12 +184,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
data-index={i} data-index={i}
ref={active ? this.setFocusRef : null} ref={active ? this.setFocusRef : null}
> >
{prefix} {contents}
<div className='content'>
<strong>{text}</strong>
{meta}
</div>
</div> </div>
); );
} }

75
app/javascript/flavours/glitch/features/compose/components/options.js
View File

@ -2,8 +2,10 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; 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 spring from 'react-motion/lib/spring';
import Toggle from 'react-toggle';
import { connect } from 'react-redux';
// Components. // Components.
import IconButton from 'flavours/glitch/components/icon_button'; 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 (
<React.Fragment>
<Toggle checked={checked} onChange={this.handleChange} />
<div className='content'>
<strong>{text}</strong>
{meta}
</div>
</React.Fragment>
);
}
}
export default @injectIntl export default @injectIntl
class ComposerOptions extends ImmutablePureComponent { class ComposerOptions extends ImmutablePureComponent {
@ -141,6 +173,13 @@ class ComposerOptions extends ImmutablePureComponent {
this.fileElement = fileElement; this.fileElement = fileElement;
} }
renderToggleItemContents = (item, index) => {
const { onChangeAdvancedOption } = this.props;
const { name, meta, text } = item;
return <ToggleOption name={name} text={text} meta={meta} onChangeAdvancedOption={onChangeAdvancedOption} />;
};
// Rendering. // Rendering.
render () { render () {
const { const {
@ -152,7 +191,6 @@ class ComposerOptions extends ImmutablePureComponent {
hasMedia, hasMedia,
allowPoll, allowPoll,
hasPoll, hasPoll,
intl,
onChangeAdvancedOption, onChangeAdvancedOption,
onChangeContentType, onChangeContentType,
onChangeVisibility, onChangeVisibility,
@ -164,23 +202,24 @@ class ComposerOptions extends ImmutablePureComponent {
resetFileKey, resetFileKey,
spoiler, spoiler,
showContentTypeChoice, showContentTypeChoice,
intl: { formatMessage },
} = this.props; } = this.props;
const contentTypeItems = { const contentTypeItems = {
plain: { plain: {
icon: 'file-text', icon: 'file-text',
name: 'text/plain', name: 'text/plain',
text: <FormattedMessage {...messages.plain} />, text: formatMessage(messages.plain),
}, },
html: { html: {
icon: 'code', icon: 'code',
name: 'text/html', name: 'text/html',
text: <FormattedMessage {...messages.html} />, text: formatMessage(messages.html),
}, },
markdown: { markdown: {
icon: 'arrow-circle-down', icon: 'arrow-circle-down',
name: 'text/markdown', name: 'text/markdown',
text: <FormattedMessage {...messages.markdown} />, text: formatMessage(messages.markdown),
}, },
}; };
@ -204,18 +243,18 @@ class ComposerOptions extends ImmutablePureComponent {
{ {
icon: 'cloud-upload', icon: 'cloud-upload',
name: 'upload', name: 'upload',
text: <FormattedMessage {...messages.upload} />, text: formatMessage(messages.upload),
}, },
{ {
icon: 'paint-brush', icon: 'paint-brush',
name: 'doodle', name: 'doodle',
text: <FormattedMessage {...messages.doodle} />, text: formatMessage(messages.doodle),
}, },
]} ]}
onChange={this.handleClickAttach} onChange={this.handleClickAttach}
onModalClose={onModalClose} onModalClose={onModalClose}
onModalOpen={onModalOpen} onModalOpen={onModalOpen}
title={intl.formatMessage(messages.attach)} title={formatMessage(messages.attach)}
/> />
{!!pollLimits && ( {!!pollLimits && (
<IconButton <IconButton
@ -229,7 +268,7 @@ class ComposerOptions extends ImmutablePureComponent {
height: null, height: null,
lineHeight: null, lineHeight: null,
}} }}
title={intl.formatMessage(hasPoll ? messages.remove_poll : messages.add_poll)} title={formatMessage(hasPoll ? messages.remove_poll : messages.add_poll)}
/> />
)} )}
<hr /> <hr />
@ -252,7 +291,7 @@ class ComposerOptions extends ImmutablePureComponent {
onChange={onChangeContentType} onChange={onChangeContentType}
onModalClose={onModalClose} onModalClose={onModalClose}
onModalOpen={onModalOpen} onModalOpen={onModalOpen}
title={intl.formatMessage(messages.content_type)} title={formatMessage(messages.content_type)}
value={contentType} value={contentType}
/> />
)} )}
@ -262,7 +301,7 @@ class ComposerOptions extends ImmutablePureComponent {
ariaControls='glitch.composer.spoiler.input' ariaControls='glitch.composer.spoiler.input'
label='CW' label='CW'
onClick={onToggleSpoiler} onClick={onToggleSpoiler}
title={intl.formatMessage(messages.spoiler)} title={formatMessage(messages.spoiler)}
/> />
)} )}
<Dropdown <Dropdown
@ -271,22 +310,22 @@ class ComposerOptions extends ImmutablePureComponent {
icon='ellipsis-h' icon='ellipsis-h'
items={advancedOptions ? [ items={advancedOptions ? [
{ {
meta: <FormattedMessage {...messages.local_only_long} />, meta: formatMessage(messages.local_only_long),
name: 'do_not_federate', name: 'do_not_federate',
on: advancedOptions.get('do_not_federate'), text: formatMessage(messages.local_only_short),
text: <FormattedMessage {...messages.local_only_short} />,
}, },
{ {
meta: <FormattedMessage {...messages.threaded_mode_long} />, meta: formatMessage(messages.threaded_mode_long),
name: 'threaded_mode', name: 'threaded_mode',
on: advancedOptions.get('threaded_mode'), text: formatMessage(messages.threaded_mode_short),
text: <FormattedMessage {...messages.threaded_mode_short} />,
}, },
] : null} ] : null}
onChange={onChangeAdvancedOption} onChange={onChangeAdvancedOption}
renderItemContents={this.renderToggleItemContents}
onModalClose={onModalClose} onModalClose={onModalClose}
onModalOpen={onModalOpen} onModalOpen={onModalOpen}
title={intl.formatMessage(messages.advanced_options_icon_title)} title={formatMessage(messages.advanced_options_icon_title)}
closeOnChange={false}
/> />
</div> </div>
); );

65
app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js
View File

@ -5,42 +5,15 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
import Dropdown from './dropdown'; import Dropdown from './dropdown';
const messages = defineMessages({ const messages = defineMessages({
change_privacy: { public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
defaultMessage: 'Adjust status privacy', public_long: { id: 'privacy.public.long', defaultMessage: 'Visible for all, shown in public timelines' },
id: 'privacy.change', unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
}, unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Visible for all, but not in public timelines' },
direct_long: { private_short: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
defaultMessage: 'Visible for mentioned users only', private_long: { id: 'privacy.private.long', defaultMessage: 'Visible for followers only' },
id: 'privacy.direct.long', direct_short: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
}, direct_long: { id: 'privacy.direct.long', defaultMessage: 'Visible for mentioned users only' },
direct_short: { change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' },
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 export default @injectIntl
@ -58,34 +31,34 @@ class PrivacyDropdown extends React.PureComponent {
}; };
render () { render () {
const { value, onChange, onModalOpen, onModalClose, disabled, noDirect, container, intl } = this.props; const { value, onChange, onModalOpen, onModalClose, disabled, noDirect, container, intl: { formatMessage } } = this.props;
// We predefine our privacy items so that we can easily pick the // We predefine our privacy items so that we can easily pick the
// dropdown icon later. // dropdown icon later.
const privacyItems = { const privacyItems = {
direct: { direct: {
icon: 'envelope', icon: 'envelope',
meta: <FormattedMessage {...messages.direct_long} />, meta: formatMessage(messages.direct_long),
name: 'direct', name: 'direct',
text: <FormattedMessage {...messages.direct_short} />, text: formatMessage(messages.direct_short),
}, },
private: { private: {
icon: 'lock', icon: 'lock',
meta: <FormattedMessage {...messages.private_long} />, meta: formatMessage(messages.private_long),
name: 'private', name: 'private',
text: <FormattedMessage {...messages.private_short} />, text: formatMessage(messages.private_short),
}, },
public: { public: {
icon: 'globe', icon: 'globe',
meta: <FormattedMessage {...messages.public_long} />, meta: formatMessage(messages.public_long),
name: 'public', name: 'public',
text: <FormattedMessage {...messages.public_short} />, text: formatMessage(messages.public_short),
}, },
unlisted: { unlisted: {
icon: 'unlock', icon: 'unlock',
meta: <FormattedMessage {...messages.unlisted_long} />, meta: formatMessage(messages.unlisted_long),
name: 'unlisted', name: 'unlisted',
text: <FormattedMessage {...messages.unlisted_short} />, text: formatMessage(messages.unlisted_short),
}, },
}; };
@ -103,7 +76,7 @@ class PrivacyDropdown extends React.PureComponent {
onChange={onChange} onChange={onChange}
onModalClose={onModalClose} onModalClose={onModalClose}
onModalOpen={onModalOpen} onModalOpen={onModalOpen}
title={intl.formatMessage(messages.change_privacy)} title={formatMessage(messages.change_privacy)}
container={container} container={container}
value={value} value={value}
/> />

59
app/javascript/flavours/glitch/features/ui/components/actions_modal.js
View File

@ -7,8 +7,7 @@ import Avatar from 'flavours/glitch/components/avatar';
import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp'; import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
import DisplayName from 'flavours/glitch/components/display_name'; import DisplayName from 'flavours/glitch/components/display_name';
import classNames from 'classnames'; import classNames from 'classnames';
import Icon from 'flavours/glitch/components/icon'; import IconButton from 'flavours/glitch/components/icon_button';
import Toggle from 'react-toggle';
export default class ActionsModal extends ImmutablePureComponent { export default class ActionsModal extends ImmutablePureComponent {
@ -19,12 +18,11 @@ export default class ActionsModal extends ImmutablePureComponent {
active: PropTypes.bool, active: PropTypes.bool,
href: PropTypes.string, href: PropTypes.string,
icon: PropTypes.string, icon: PropTypes.string,
meta: PropTypes.node, meta: PropTypes.string,
name: PropTypes.string, name: PropTypes.string,
on: PropTypes.bool, text: PropTypes.string,
onPassiveClick: PropTypes.func,
text: PropTypes.node,
})), })),
renderItemContents: PropTypes.func,
}; };
renderAction = (action, i) => { renderAction = (action, i) => {
@ -32,40 +30,25 @@ export default class ActionsModal extends ImmutablePureComponent {
return <li key={`sep-${i}`} className='dropdown-menu__separator' />; return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
} }
const { const { icon = null, text, meta = null, active = false, href = '#' } = action;
active, let contents = this.props.renderItemContents && this.props.renderItemContents(action, i);
href,
icon, if (!contents) {
meta, contents = (
name, <React.Fragment>
on, {icon && <IconButton title={text} icon={icon} role='presentation' tabIndex='-1' inverted />}
onClick, <div>
onPassiveClick, <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>
text, <div>{meta}</div>
} = action; </div>
</React.Fragment>
);
}
return ( return (
<li key={name || i}> <li key={`${text}-${i}`}>
<a href={href} target='_blank' rel='noopener noreferrer' onClick={on !== null && typeof on !== 'undefined' && onPassiveClick || onClick || this.props.onClick} data-index={i} className={classNames('link', { active })}> <a href={href} target='_blank' rel='noopener noreferrer' onClick={this.props.onClick} data-index={i} className={classNames('link', { active })}>
{on !== null && typeof on !== 'undefined' && ( {contents}
<Toggle
checked={on}
onChange={onPassiveClick || onClick}
/>
)}
{icon && (
<Icon
className='icon'
fixedWidth
id={icon}
/>
)}
{meta ? (
<div>
<strong>{text}</strong>
{meta}
</div>
) : <div>{text}</div>}
</a> </a>
</li> </li>
); );