Skip to content

Commit 0768944

Browse files
Gargronhiyuki2578
Gargron
authored and
hiyuki2578
committed
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
1 parent 36dac67 commit 0768944

8 files changed

Lines changed: 85 additions & 23 deletions

File tree

‎app/javascript/mastodon/actions/compose.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const messages = defineMessages({
6363
uploadErrorPoll: { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' },
6464
});
6565

66-
const COMPOSE_PANEL_BREAKPOINT = 600 + (285 * 1) + (10 * 3);
66+
const COMPOSE_PANEL_BREAKPOINT = 600 + (285 * 1) + (10 * 1);
6767

6868
export const ensureComposeIsVisible = (getState, routerHistory) => {
6969
if (!getState().getIn(['compose', 'mounted']) && window.innerWidth < COMPOSE_PANEL_BREAKPOINT) {

‎app/javascript/mastodon/components/icon_with_badge.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import Icon from 'mastodon/components/icon';
4+
5+
const formatNumber = num => num > 40 ? '40+' : num;
6+
7+
const IconWithBadge = ({ id, count, className }) => (
8+
<i className='icon-with-badge'>
9+
<Icon id={id} fixedWidth className={className} />
10+
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
11+
</i>
12+
);
13+
14+
IconWithBadge.propTypes = {
15+
id: PropTypes.string.isRequired,
16+
count: PropTypes.number.isRequired,
17+
className: PropTypes.string,
18+
};
19+
20+
export default IconWithBadge;

‎app/javascript/mastodon/features/follow_requests/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ class FollowRequests extends ImmutablePureComponent {
5656
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." />;
5757

5858
return (
59-
<Column icon='users' heading={intl.formatMessage(messages.heading)}>
59+
<Column icon='user-plus' heading={intl.formatMessage(messages.heading)}>
6060
<ColumnBackButtonSlim />
6161
<ScrollableList
6262
scrollKey='follow_requests'

‎app/javascript/mastodon/features/getting_started/index.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,16 @@ const badgeDisplay = (number, limit) => {
5555
}
5656
};
5757

58+
const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
59+
5860
export default @connect(mapStateToProps, mapDispatchToProps)
5961
@injectIntl
6062
class GettingStarted extends ImmutablePureComponent {
6163

64+
static contextTypes = {
65+
router: PropTypes.object.isRequired,
66+
};
67+
6268
static propTypes = {
6369
intl: PropTypes.object.isRequired,
6470
myAccount: ImmutablePropTypes.map.isRequired,
@@ -72,6 +78,11 @@ class GettingStarted extends ImmutablePureComponent {
7278
componentDidMount () {
7379
const { myAccount, fetchFollowRequests } = this.props;
7480

81+
if (window.innerWidth >= NAVIGATION_PANEL_BREAKPOINT) {
82+
this.context.router.history.replace('/timelines/home');
83+
return;
84+
}
85+
7586
if (myAccount.get('locked')) {
7687
fetchFollowRequests();
7788
}
@@ -123,7 +134,7 @@ class GettingStarted extends ImmutablePureComponent {
123134
height += 48*3;
124135

125136
if (myAccount.get('locked')) {
126-
navItems.push(<ColumnLink key={i++} icon='users' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
137+
navItems.push(<ColumnLink key={i++} icon='user-plus' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
127138
height += 48;
128139
}
129140

‎app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { fetchFollowRequests } from 'mastodon/actions/accounts';
4+
import { connect } from 'react-redux';
5+
import { NavLink, withRouter } from 'react-router-dom';
6+
import IconWithBadge from 'mastodon/components/icon_with_badge';
7+
import { me } from 'mastodon/initial_state';
8+
import { List as ImmutableList } from 'immutable';
9+
import { FormattedMessage } from 'react-intl';
10+
11+
const mapStateToProps = state => ({
12+
locked: state.getIn(['accounts', me, 'locked']),
13+
count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
14+
});
15+
16+
export default @withRouter
17+
@connect(mapStateToProps)
18+
class FollowRequestsNavLink extends React.Component {
19+
20+
static propTypes = {
21+
dispatch: PropTypes.func.isRequired,
22+
locked: PropTypes.bool,
23+
count: PropTypes.number.isRequired,
24+
};
25+
26+
componentDidMount () {
27+
const { dispatch, locked } = this.props;
28+
29+
if (locked) {
30+
dispatch(fetchFollowRequests());
31+
}
32+
}
33+
34+
render () {
35+
const { locked, count } = this.props;
36+
37+
if (!locked || count === 0) {
38+
return null;
39+
}
40+
41+
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>;
42+
}
43+
44+
}

‎app/javascript/mastodon/features/ui/components/list_panel.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const getOrderedLists = createSelector([state => state.get('lists')], lists => {
1313
return lists;
1414
}
1515

16-
return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
16+
return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title'))).take(4);
1717
});
1818

1919
const mapStateToProps = state => ({
@@ -37,7 +37,7 @@ class ListPanel extends ImmutablePureComponent {
3737
render () {
3838
const { lists } = this.props;
3939

40-
if (!lists) {
40+
if (!lists || lists.isEmpty()) {
4141
return null;
4242
}
4343

‎app/javascript/mastodon/features/ui/components/navigation_panel.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ import { NavLink, withRouter } from 'react-router-dom';
33
import { FormattedMessage } from 'react-intl';
44
import Icon from 'mastodon/components/icon';
55
import NotificationsCounterIcon from './notifications_counter_icon';
6+
import FollowRequestsNavLink from './follow_requests_nav_link';
67
import ListPanel from './list_panel';
78

89
const NavigationPanel = () => (
910
<div className='navigation-panel'>
1011
<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>
1112
<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>
13+
<FollowRequestsNavLink />
1214
<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>
1315
<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>
1416
<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>

‎app/javascript/mastodon/features/ui/components/notifications_counter_icon.js‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,9 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
31
import { connect } from 'react-redux';
4-
import Icon from 'mastodon/components/icon';
2+
import IconWithBadge from 'mastodon/components/icon_with_badge';
53

64
const mapStateToProps = state => ({
75
count: state.getIn(['notifications', 'unread']),
6+
id: 'bell',
87
});
98

10-
const formatNumber = num => num > 99 ? '99+' : num;
11-
12-
const NotificationsCounterIcon = ({ count, className }) => (
13-
<i className='icon-with-badge'>
14-
<Icon id='bell' fixedWidth className={className} />
15-
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
16-
</i>
17-
);
18-
19-
NotificationsCounterIcon.propTypes = {
20-
count: PropTypes.number.isRequired,
21-
className: PropTypes.string,
22-
};
23-
24-
export default connect(mapStateToProps)(NotificationsCounterIcon);
9+
export default connect(mapStateToProps)(IconWithBadge);

0 commit comments

Comments
 (0)
⚡