diff options
author | Sorin Davidoi <sorin.davidoi@gmail.com> | 2017-07-27 22:31:59 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-07-27 22:31:59 +0200 |
commit | 50d38d7605b8998463b1428b8da886f33e0714da (patch) | |
tree | 48a1ec50e87d7746e437a10729660bedd2c048ff /app/javascript/mastodon/features/ui/components/actions_modal.js | |
parent | aa803153e2161f4462d9d26ecd021fe0d2396cc5 (diff) |
fix(dropdown_menu): Open as modal on mobile (#4295)
* fix(dropdown_menu): Open as modal on mobile * fix(dropdown_menu): Open modal on touch * fix(dropdown_menu): Show status * fix(dropdown_menu): Max dimensions and reduce padding * chore(dropdown_menu): Test new functionality * refactor: Use DropdownMenuContainer instead of DropdownMenu * feat(privacy_dropdown): Open as modal on touch devices * feat(modal_root): Do not load actions-modal async
Diffstat (limited to 'app/javascript/mastodon/features/ui/components/actions_modal.js')
-rw-r--r-- | app/javascript/mastodon/features/ui/components/actions_modal.js | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/app/javascript/mastodon/features/ui/components/actions_modal.js b/app/javascript/mastodon/features/ui/components/actions_modal.js new file mode 100644 index 000000000..0fc2560ff --- /dev/null +++ b/app/javascript/mastodon/features/ui/components/actions_modal.js @@ -0,0 +1,72 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import StatusContent from '../../../components/status_content'; +import Avatar from '../../../components/avatar'; +import RelativeTimestamp from '../../../components/relative_timestamp'; +import DisplayName from '../../../components/display_name'; +import IconButton from '../../../components/icon_button'; + +export default class ReportModal extends ImmutablePureComponent { + + static propTypes = { + actions: PropTypes.array, + onClick: PropTypes.func, + intl: PropTypes.object.isRequired, + }; + + renderAction = (action, i) => { + if (action === null) { + return <li key={`sep-${i}`} className='dropdown__sep' />; + } + + const { icon = null, text, meta = null, active = false, href = '#' } = action; + + return ( + <li key={`${text}-${i}`}> + <a href={href} target='_blank' rel='noopener' onClick={this.props.onClick} data-index={i} className={active && 'active'}> + {icon && <IconButton title={text} icon={icon} />} + <div> + <div>{text}</div> + <div>{meta}</div> + </div> + </a> + </li> + ); + } + + render () { + const status = this.props.status && ( + <div className='status light'> + <div className='boost-modal__status-header'> + <div className='boost-modal__status-time'> + <a href={this.props.status.get('url')} className='status__relative-time' target='_blank' rel='noopener'> + <RelativeTimestamp timestamp={this.props.status.get('created_at')} /> + </a> + </div> + + <a href={this.props.status.getIn(['account', 'url'])} className='status__display-name'> + <div className='status__avatar'> + <Avatar src={this.props.status.getIn(['account', 'avatar'])} staticSrc={this.props.status.getIn(['account', 'avatar_static'])} size={48} /> + </div> + + <DisplayName account={this.props.status.get('account')} /> + </a> + </div> + + <StatusContent status={this.props.status} /> + </div> + ); + + return ( + <div className='modal-root__modal actions-modal'> + {status} + + <ul> + {this.props.actions.map(this.renderAction)} + </ul> + </div> + ); + } + +} |