From 0e445ebb1392c8dbce320509d219f16c7c221406 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 26 May 2019 02:55:37 +0200
Subject: [PATCH] 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 visible
---
app/javascript/mastodon/actions/compose.js | 2 +-
.../mastodon/components/icon_with_badge.js | 20 +++++++++
.../features/follow_requests/index.js | 2 +-
.../features/getting_started/index.js | 13 +++++-
.../ui/components/follow_requests_nav_link.js | 44 +++++++++++++++++++
.../features/ui/components/list_panel.js | 4 +-
.../ui/components/navigation_panel.js | 2 +
.../components/notifications_counter_icon.js | 21 ++-------
8 files changed, 85 insertions(+), 23 deletions(-)
create mode 100644 app/javascript/mastodon/components/icon_with_badge.js
create mode 100644 app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js
diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js
index 33e6313640..300fb48a99 100644
--- a/app/javascript/mastodon/actions/compose.js
+++ b/app/javascript/mastodon/actions/compose.js
@@ -63,7 +63,7 @@ const messages = defineMessages({
uploadErrorPoll: { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' },
});
-const COMPOSE_PANEL_BREAKPOINT = 600 + (285 * 1) + (10 * 3);
+const COMPOSE_PANEL_BREAKPOINT = 600 + (285 * 1) + (10 * 1);
export const ensureComposeIsVisible = (getState, routerHistory) => {
if (!getState().getIn(['compose', 'mounted']) && window.innerWidth < COMPOSE_PANEL_BREAKPOINT) {
diff --git a/app/javascript/mastodon/components/icon_with_badge.js b/app/javascript/mastodon/components/icon_with_badge.js
new file mode 100644
index 0000000000..7851eb4be9
--- /dev/null
+++ b/app/javascript/mastodon/components/icon_with_badge.js
@@ -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;
diff --git a/app/javascript/mastodon/features/follow_requests/index.js b/app/javascript/mastodon/features/follow_requests/index.js
index 3871e0e5d1..44624cb406 100644
--- a/app/javascript/mastodon/features/follow_requests/index.js
+++ b/app/javascript/mastodon/features/follow_requests/index.js
@@ -56,7 +56,7 @@ class FollowRequests extends ImmutablePureComponent {
const emptyMessage = <FormattedMessage id='empty_column.follow_requests' defaultMessage="You don't have any follow requests yet. When you receive one, it will show up here." />;
return (
- <Column icon='users' heading={intl.formatMessage(messages.heading)}>
+ <Column icon='user-plus' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollableList
scrollKey='follow_requests'
diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js
index cb3efb57bc..bafcc275b0 100644
--- a/app/javascript/mastodon/features/getting_started/index.js
+++ b/app/javascript/mastodon/features/getting_started/index.js
@@ -55,10 +55,16 @@ const badgeDisplay = (number, limit) => {
}
};
+const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
+
export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class GettingStarted extends ImmutablePureComponent {
+ static contextTypes = {
+ router: PropTypes.object.isRequired,
+ };
+
static propTypes = {
intl: PropTypes.object.isRequired,
myAccount: ImmutablePropTypes.map.isRequired,
@@ -72,6 +78,11 @@ class GettingStarted extends ImmutablePureComponent {
componentDidMount () {
const { myAccount, fetchFollowRequests } = this.props;
+ if (window.innerWidth >= NAVIGATION_PANEL_BREAKPOINT) {
+ this.context.router.history.replace('/timelines/home');
+ return;
+ }
+
if (myAccount.get('locked')) {
fetchFollowRequests();
}
@@ -123,7 +134,7 @@ class GettingStarted extends ImmutablePureComponent {
height += 48*3;
if (myAccount.get('locked')) {
- navItems.push(<ColumnLink key={i++} icon='users' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
+ navItems.push(<ColumnLink key={i++} icon='user-plus' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
height += 48;
}
diff --git a/app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js b/app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js
new file mode 100644
index 0000000000..90c953893a
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js
@@ -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>;
+ }
+
+}
diff --git a/app/javascript/mastodon/features/ui/components/list_panel.js b/app/javascript/mastodon/features/ui/components/list_panel.js
index 9a52c1b10c..1f7ec683a7 100644
--- a/app/javascript/mastodon/features/ui/components/list_panel.js
+++ b/app/javascript/mastodon/features/ui/components/list_panel.js
@@ -13,7 +13,7 @@ const getOrderedLists = createSelector([state => state.get('lists')], lists => {
return lists;
}
- return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
+ return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title'))).take(4);
});
const mapStateToProps = state => ({
@@ -37,7 +37,7 @@ class ListPanel extends ImmutablePureComponent {
render () {
const { lists } = this.props;
- if (!lists) {
+ if (!lists || lists.isEmpty()) {
return null;
}
diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js
index e2d962c630..1fd28c63ad 100644
--- a/app/javascript/mastodon/features/ui/components/navigation_panel.js
+++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js
@@ -3,12 +3,14 @@ import { NavLink, withRouter } from 'react-router-dom';
import { FormattedMessage } from 'react-intl';
import Icon from 'mastodon/components/icon';
import NotificationsCounterIcon from './notifications_counter_icon';
+import FollowRequestsNavLink from './follow_requests_nav_link';
import ListPanel from './list_panel';
const NavigationPanel = () => (
<div className='navigation-panel'>
<NavLink className='column-link column-link--transparent' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><Icon className='column-link__icon' id='home' fixedWidth /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>
<NavLink className='column-link column-link--transparent' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><NotificationsCounterIcon className='column-link__icon' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>
+ <FollowRequestsNavLink />
<NavLink className='column-link column-link--transparent' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><Icon className='column-link__icon' id='users' fixedWidth /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>
<NavLink className='column-link column-link--transparent' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon className='column-link__icon' id='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>
<NavLink className='column-link column-link--transparent' to='/timelines/direct'><Icon className='column-link__icon' id='envelope' fixedWidth /><FormattedMessage id='navigation_bar.direct' defaultMessage='Direct messages' /></NavLink>
diff --git a/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js b/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
index 9673c57fef..da553cd9f0 100644
--- a/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
+++ b/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
@@ -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);
--
GitLab