Improvements to the single column layout (#10835)
* Improvements to the single column layout - Add follows and followers link to the right panel - Increase margins around separators in right panel - Add follow requests link with counter when account is locked to right panel * Redirect from getting started to home when navigation panel is visiblemaster
parent
a472190729
commit
0e445ebb13
@ -0,0 +1,20 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import Icon from 'mastodon/components/icon'; |
||||
|
||||
const formatNumber = num => num > 40 ? '40+' : num; |
||||
|
||||
const IconWithBadge = ({ id, count, className }) => ( |
||||
<i className='icon-with-badge'> |
||||
<Icon id={id} fixedWidth className={className} /> |
||||
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>} |
||||
</i> |
||||
); |
||||
|
||||
IconWithBadge.propTypes = { |
||||
id: PropTypes.string.isRequired, |
||||
count: PropTypes.number.isRequired, |
||||
className: PropTypes.string, |
||||
}; |
||||
|
||||
export default IconWithBadge; |
@ -0,0 +1,44 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { fetchFollowRequests } from 'mastodon/actions/accounts'; |
||||
import { connect } from 'react-redux'; |
||||
import { NavLink, withRouter } from 'react-router-dom'; |
||||
import IconWithBadge from 'mastodon/components/icon_with_badge'; |
||||
import { me } from 'mastodon/initial_state'; |
||||
import { List as ImmutableList } from 'immutable'; |
||||
import { FormattedMessage } from 'react-intl'; |
||||
|
||||
const mapStateToProps = state => ({ |
||||
locked: state.getIn(['accounts', me, 'locked']), |
||||
count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, |
||||
}); |
||||
|
||||
export default @withRouter |
||||
@connect(mapStateToProps) |
||||
class FollowRequestsNavLink extends React.Component { |
||||
|
||||
static propTypes = { |
||||
dispatch: PropTypes.func.isRequired, |
||||
locked: PropTypes.bool, |
||||
count: PropTypes.number.isRequired, |
||||
}; |
||||
|
||||
componentDidMount () { |
||||
const { dispatch, locked } = this.props; |
||||
|
||||
if (locked) { |
||||
dispatch(fetchFollowRequests()); |
||||
} |
||||
} |
||||
|
||||
render () { |
||||
const { locked, count } = this.props; |
||||
|
||||
if (!locked || count === 0) { |
||||
return null; |
||||
} |
||||
|
||||
return <NavLink className='column-link column-link--transparent' to='/follow_requests'><IconWithBadge className='column-link__icon' id='user-plus' count={count} /><FormattedMessage id='navigation_bar.follow_requests' defaultMessage='Follow requests' /></NavLink>; |
||||
} |
||||
|
||||
} |
@ -1,24 +1,9 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { connect } from 'react-redux'; |
||||
import Icon from 'mastodon/components/icon'; |
||||
import IconWithBadge from 'mastodon/components/icon_with_badge'; |
||||
|
||||
const mapStateToProps = state => ({ |
||||
count: state.getIn(['notifications', 'unread']), |
||||
id: 'bell', |
||||
}); |
||||
|
||||
const formatNumber = num => num > 99 ? '99+' : num; |
||||
|
||||
const NotificationsCounterIcon = ({ count, className }) => ( |
||||
<i className='icon-with-badge'> |
||||
<Icon id='bell' fixedWidth className={className} /> |
||||
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>} |
||||
</i> |
||||
); |
||||
|
||||
NotificationsCounterIcon.propTypes = { |
||||
count: PropTypes.number.isRequired, |
||||
className: PropTypes.string, |
||||
}; |
||||
|
||||
export default connect(mapStateToProps)(NotificationsCounterIcon); |
||||
export default connect(mapStateToProps)(IconWithBadge); |
||||
|
Loading…
Reference in new issue