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 asyncmaster
parent
aa803153e2
commit
50d38d7605
@ -0,0 +1,16 @@ |
||||
import { openModal, closeModal } from '../actions/modal'; |
||||
import { connect } from 'react-redux'; |
||||
import DropdownMenu from '../components/dropdown_menu'; |
||||
import { isUserTouching } from '../is_mobile'; |
||||
|
||||
const mapStateToProps = state => ({ |
||||
isModalOpen: state.get('modal').modalType === 'ACTIONS', |
||||
}); |
||||
|
||||
const mapDispatchToProps = dispatch => ({ |
||||
isUserTouching, |
||||
onModalOpen: props => dispatch(openModal('ACTIONS', props)), |
||||
onModalClose: () => dispatch(closeModal()), |
||||
}); |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(DropdownMenu); |
@ -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> |
||||
); |
||||
} |
||||
|
||||
} |
Loading…
Reference in new issue