[Glitch] Improvements to the single column layout

Port 0e445ebb13 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

app/javascript/flavours/glitch/actions/compose.js

@@ -68,7 +68,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) {

app/javascript/flavours/glitch/components/icon_with_badge.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'flavours/glitch/components/icon';
+
+const formatNumber = num => num > 40 ? '40+' : num;
+
+const IconWithBadge = ({ id, count, className }) => (
+  <i className='icon-with-badge'>
+    <Icon icon={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;

app/javascript/flavours/glitch/features/follow_requests/index.js

@@ -59,7 +59,7 @@ export default class FollowRequests extends ImmutablePureComponent {
     }
 
     return (
-      <Column name='follow-requests' icon='users' heading={intl.formatMessage(messages.heading)}>
+      <Column name='follow-requests' icon='user-plus' heading={intl.formatMessage(messages.heading)}>
         <ColumnBackButtonSlim />
 
         <ScrollContainer scrollKey='follow_requests' shouldUpdateScroll={this.shouldUpdateScroll}>

app/javascript/flavours/glitch/features/getting_started/index.js

@@ -73,9 +73,15 @@ const badgeDisplay = (number, limit) => {
   }
 };
 
-@connect(makeMapStateToProps, mapDispatchToProps)
+const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
+
+ export default @connect(makeMapStateToProps, mapDispatchToProps)
  @injectIntl
-export default class GettingStarted extends ImmutablePureComponent {
+ class GettingStarted extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object.isRequired,
+  };
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
@@ -97,6 +103,11 @@ export default 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();
     }
@@ -135,7 +146,7 @@ export default class GettingStarted extends ImmutablePureComponent {
     }
 
     if (myAccount.get('locked')) {
-      navItems.push(<ColumnLink key='6' icon='users' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
+      navItems.push(<ColumnLink key='6' icon='user-plus' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
     }
 
     navItems.push(<ColumnLink key='7' icon='ellipsis-h' text={intl.formatMessage(messages.misc)} to='/getting-started-misc' />);

app/javascript/flavours/glitch/features/ui/components/follow_requests_nav_link.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { fetchFollowRequests } from 'flavours/glitch/actions/accounts';
+import { connect } from 'react-redux';
+import { NavLink, withRouter } from 'react-router-dom';
+import IconWithBadge from 'flavours/glitch/components/icon_with_badge';
+import { me } from 'flavours/glitch/util/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>;
+  }
+
+}

app/javascript/flavours/glitch/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;
     }
 

app/javascript/flavours/glitch/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 'flavours/glitch/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' icon='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' icon='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' icon='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' icon='envelope' fixedWidth /><FormattedMessage id='navigation_bar.direct' defaultMessage='Direct messages' /></NavLink>

app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js

@@ -1,26 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import Icon from 'flavours/glitch/components/icon';
+import IconWithBadge from 'flavours/glitch/components/icon';
 
 const mapStateToProps = state => ({
-  count: state.getIn(['notifications', 'unread']),
-  showBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']),
+  count: state.getIn(['local_settings', 'notifications', 'tab_badge']) ? state.getIn(['notifications', 'unread']) : 0,
+  icon: 'bell',
 });
 
-const formatNumber = num => num > 99 ? '99+' : num;
-
-const NotificationsCounterIcon = ({ count, className, showBadge }) => (
-  <i className='icon-with-badge'>
-    <Icon icon='bell' fixedWidth className={className} />
-    {showBadge && count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
-  </i>
-);
-
-NotificationsCounterIcon.propTypes = {
-  count: PropTypes.number.isRequired,
-  showBadge: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-export default connect(mapStateToProps)(NotificationsCounterIcon);
+export default connect(mapStateToProps)(IconWithBadge);