From 31d148588737e5e5dc8aada7913884f226831fd1 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 21 Jan 2018 13:20:20 +0100 Subject: [PATCH] Display number of follow requests in getting started menu, and (#6313) if notifications column is not mounted, also display number of unread notifications there. --- .../features/getting_started/index.js | 37 +++++++++++++++++-- .../features/ui/components/column_link.js | 7 +++- .../styles/mastodon/components.scss | 11 ++++++ 3 files changed, 50 insertions(+), 5 deletions(-) diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js index ee789e1809..3a875169e7 100644 --- a/app/javascript/mastodon/features/getting_started/index.js +++ b/app/javascript/mastodon/features/getting_started/index.js @@ -8,6 +8,8 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { me } from '../../initial_state'; +import { fetchFollowRequests } from '../../actions/accounts'; +import { List as ImmutableList } from 'immutable'; const messages = defineMessages({ heading: { id: 'getting_started.heading', defaultMessage: 'Getting started' }, @@ -32,9 +34,25 @@ const messages = defineMessages({ const mapStateToProps = state => ({ myAccount: state.getIn(['accounts', me]), columns: state.getIn(['settings', 'columns']), + unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, + unreadNotifications: state.getIn(['notifications', 'unread']), }); -@connect(mapStateToProps) +const mapDispatchToProps = dispatch => ({ + fetchFollowRequests: () => dispatch(fetchFollowRequests()), +}); + +const badgeDisplay = (number, limit) => { + if (number === 0) { + return undefined; + } else if (limit && number >= limit) { + return `${limit}+`; + } else { + return number; + } +}; + +@connect(mapStateToProps, mapDispatchToProps) @injectIntl export default class GettingStarted extends ImmutablePureComponent { @@ -43,10 +61,21 @@ export default class GettingStarted extends ImmutablePureComponent { myAccount: ImmutablePropTypes.map.isRequired, columns: ImmutablePropTypes.list, multiColumn: PropTypes.bool, + fetchFollowRequests: PropTypes.func.isRequired, + unreadFollowRequests: PropTypes.number, + unreadNotifications: PropTypes.number, }; + componentDidMount () { + const { myAccount, fetchFollowRequests } = this.props; + + if (myAccount.get('locked')) { + fetchFollowRequests(); + } + } + render () { - const { intl, myAccount, columns, multiColumn } = this.props; + const { intl, myAccount, columns, multiColumn, unreadFollowRequests, unreadNotifications } = this.props; const navItems = []; @@ -56,7 +85,7 @@ export default class GettingStarted extends ImmutablePureComponent { } if (!columns.find(item => item.get('id') === 'NOTIFICATIONS')) { - navItems.push(); + navItems.push(); } if (!columns.find(item => item.get('id') === 'COMMUNITY')) { @@ -74,7 +103,7 @@ export default class GettingStarted extends ImmutablePureComponent { ); if (myAccount.get('locked')) { - navItems.push(); + navItems.push(); } if (multiColumn) { diff --git a/app/javascript/mastodon/features/ui/components/column_link.js b/app/javascript/mastodon/features/ui/components/column_link.js index a906162135..25c2d1cf86 100644 --- a/app/javascript/mastodon/features/ui/components/column_link.js +++ b/app/javascript/mastodon/features/ui/components/column_link.js @@ -2,12 +2,15 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; -const ColumnLink = ({ icon, text, to, href, method }) => { +const ColumnLink = ({ icon, text, to, href, method, badge }) => { + const badgeElement = typeof badge !== 'undefined' ? {badge} : null; + if (href) { return ( {text} + {badgeElement} ); } else { @@ -15,6 +18,7 @@ const ColumnLink = ({ icon, text, to, href, method }) => { {text} + {badgeElement} ); } @@ -26,6 +30,7 @@ ColumnLink.propTypes = { to: PropTypes.string, href: PropTypes.string, method: PropTypes.string, + badge: PropTypes.node, }; export default ColumnLink; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 4a9a379a8e..55cb40c320 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2070,6 +2070,17 @@ margin-right: 5px; } +.column-link__badge { + display: inline-block; + border-radius: 4px; + font-size: 12px; + line-height: 19px; + font-weight: 500; + background: $ui-base-color; + padding: 4px 8px; + margin: -6px 10px; +} + .column-subheading { background: $ui-base-color; color: $ui-base-lighter-color;