forked from mastodon/mastodon
-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improvements to the single column layout (mastodon#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 visible
- Loading branch information
1 parent
36dac67
commit 0768944
Showing
8 changed files
with
85 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 44 additions & 0 deletions
44
app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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>; | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 3 additions & 18 deletions
21
app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); |