Add preference and logout

app/javascript/mastodon/features/ui/components/columns_area.js

@@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import ReactSwipeableViews from 'react-swipeable-views';
-import TabsBar, { links, getIndex, getLink } from './tabs_bar';
+import TabsBar, { getSwipeableIndex, getSwipeableLink } from './tabs_bar';
 import { Link } from 'react-router-dom';
 
 import { disableSwiping, place_tab_bar_at_bottom } from 'mastodon/initial_state';
@@ -75,6 +75,7 @@ class ColumnsArea extends ImmutablePureComponent {
     isModalOpen: PropTypes.bool.isRequired,
     singleColumn: PropTypes.bool,
     children: PropTypes.node,
+    links: PropTypes.node,
   };
 
    // Corresponds to (max-width: 600px + (285px * 1) + (10px * 1)) in SCSS
@@ -86,7 +87,7 @@ class ColumnsArea extends ImmutablePureComponent {
   }
 
   componentWillReceiveProps() {
-    if (typeof this.pendingIndex !== 'number' && this.lastIndex !== getIndex(this.context.router.history.location.pathname)) {
+    if (typeof this.pendingIndex !== 'number' && this.lastIndex !== getSwipeableIndex(this.context.router.history.location.pathname)) {
       this.setState({ shouldAnimate: false });
     }
   }
@@ -105,7 +106,7 @@ class ColumnsArea extends ImmutablePureComponent {
       this.setState({ renderComposePanel: !this.mediaQuery.matches });
     }
 
-    this.lastIndex   = getIndex(this.context.router.history.location.pathname);
+    this.lastIndex   = getSwipeableIndex(this.context.router.history.location.pathname);
     this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
 
     this.setState({ shouldAnimate: true });
@@ -122,7 +123,7 @@ class ColumnsArea extends ImmutablePureComponent {
       this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false);
     }
 
-    const newIndex = getIndex(this.context.router.history.location.pathname);
+    const newIndex = getSwipeableIndex(this.context.router.history.location.pathname);
 
     if (this.lastIndex !== newIndex) {
       this.lastIndex = newIndex;
@@ -158,7 +159,7 @@ class ColumnsArea extends ImmutablePureComponent {
   handleSwipe = (index) => {
     this.pendingIndex = index;
 
-    const nextLinkTranslationId = links[index].props['data-preview-title-id'];
+    const nextLinkTranslationId = this.props.links[index].props['data-preview-title-id'];
     const currentLinkSelector = '.tabs-bar__link.active';
     const nextLinkSelector = `.tabs-bar__link[data-preview-title-id="${nextLinkTranslationId}"]`;
 
@@ -168,14 +169,14 @@ class ColumnsArea extends ImmutablePureComponent {
     document.querySelector(nextLinkSelector).classList.add('active');
 
     if (!this.state.shouldAnimate && typeof this.pendingIndex === 'number') {
-      this.context.router.history.push(getLink(this.pendingIndex));
+      this.context.router.history.push(getSwipeableLink(this.pendingIndex));
       this.pendingIndex = null;
     }
   }
 
   handleAnimationEnd = () => {
     if (typeof this.pendingIndex === 'number') {
-      this.context.router.history.push(getLink(this.pendingIndex));
+      this.context.router.history.push(getSwipeableLink(this.pendingIndex));
       this.pendingIndex = null;
     }
   }
@@ -193,7 +194,7 @@ class ColumnsArea extends ImmutablePureComponent {
   }
 
   renderView = (link, index) => {
-    const columnIndex = getIndex(this.context.router.history.location.pathname);
+    const columnIndex = getSwipeableIndex(this.context.router.history.location.pathname);
     const title = this.props.intl.formatMessage({ id: link.props['data-preview-title-id'] });
     const icon = link.props['data-preview-icon'];
 
@@ -217,10 +218,10 @@ class ColumnsArea extends ImmutablePureComponent {
   }
 
   render () {
-    const { columns, children, singleColumn, isModalOpen, intl } = this.props;
+    const { columns, children, singleColumn, isModalOpen, links, intl } = this.props;
     const { shouldAnimate, renderComposePanel } = this.state;
 
-    const columnIndex = getIndex(this.context.router.history.location.pathname);
+    const columnIndex = getSwipeableIndex(this.context.router.history.location.pathname);
 
     if (singleColumn) {
       const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/statuses/new' className={classNames('floating-action-button', { 'bottom-bar': place_tab_bar_at_bottom })} aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' /></Link>;

app/javascript/mastodon/features/ui/components/tabs_bar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { NavLink, withRouter } from 'react-router-dom';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { debounce } from 'lodash';
+import { debounce, memoize } from 'lodash';
 import { isUserTouching } from '../../../is_mobile';
 import Icon from 'mastodon/components/icon';
 import NotificationsCounterIcon from './notifications_counter_icon';
@@ -15,9 +15,23 @@ export const links = [
   <NavLink className='tabs-bar__link' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon id='globe' fixedWidth /><span className='tabs-bar__link__full-label'><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></span><span className='tabs-bar__link__short-label'><FormattedMessage id='navigation_bar.short.public_timeline' defaultMessage='FTL' /></span></NavLink>,
   <NavLink className='tabs-bar__link' exact to='/lists' data-preview-title-id='column.lists' data-preview-icon='list-ul' ><Icon id='list-ul' fixedWidth /><span className='tabs-bar__link__full-label'><FormattedMessage id='tabs_bar.lists' defaultMessage='Lists' /></span><span className='tabs-bar__link__short-label'><FormattedMessage id='navigation_bar.short.lists' defaultMessage='List' /></span></NavLink>,
   <NavLink className='tabs-bar__link optional' to='/search' data-preview-title-id='tabs_bar.search' data-preview-icon='bell' ><Icon id='search' fixedWidth /><span className='tabs-bar__link__full-label'><FormattedMessage id='tabs_bar.search' defaultMessage='Search' /></span><span className='tabs-bar__link__short-label'><FormattedMessage id='navigation_bar.short.search' defaultMessage='Search' /></span></NavLink>,
+  // <a className='tabs-bar__external-link' href='/settings/preferences' to='/settings/preferences' data-preview-title-id='navigation_bar.preferences' data-preview-icon='cog' ><Icon id='cog' fixedWidth /><span className='tabs-bar__link__full-label'><FormattedMessage id='navigation_bar.preferences' defaultMessage='Preferences' /></span><span className='tabs-bar__link__short-label'><FormattedMessage id='navigation_bar.short.preferences' defaultMessage='Pref.' /></span></a>,
+  // <a className='tabs-bar__external-link' href='/auth/sign_out' to='/auth/sign_out' data-method='delete' data-preview-title-id='navigation_bar.logout' data-preview-icon='sign-out' ><Icon id='sign-out' fixedWidth /><span className='tabs-bar__link__full-label'><FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' /></span><span className='tabs-bar__link__short-label'><FormattedMessage id='navigation_bar.short.logout' defaultMessage='Logout' /></span></a>,
   <NavLink className='tabs-bar__link hamburger' to='/getting-started' data-preview-title-id='getting_started.heading' data-preview-icon='bars' ><Icon id='bars' fixedWidth /></NavLink>,
 ];
 
+export const getSwipeableLinks = memoize(() => {
+  return links.filter(link => link.props.className.split(/\s+/).includes('tabs-bar__link'));
+});
+
+export function getSwipeableIndex (path) {
+  return getSwipeableLinks().findIndex(link => link.props.to === path);
+}
+
+export function getSwipeableLink (index) {
+  return getSwipeableLinks()[index].props.to;
+}
+
 export function getIndex (path) {
   return links.findIndex(link => link.props.to === path);
 }
@@ -77,7 +91,7 @@ class TabsBar extends React.PureComponent {
     return (
       <div className='tabs-bar__wrapper'>
         <nav className={classNames('tabs-bar', { 'bottom-bar': place_tab_bar_at_bottom })} ref={this.setRef}>
-          {links.map(link => React.cloneElement(link, { key: link.props.to, className: classNames(link.props.className, { 'short-label': show_tab_bar_label }), onClick: this.handleClick, 'aria-label': formatMessage({ id: link.props['data-preview-title-id'] }) }))}
+          {links.map(link => React.cloneElement(link, { key: link.props.to, className: classNames(link.props.className, { 'short-label': show_tab_bar_label }), onClick: link.props.href ? null : this.handleClick, 'aria-label': formatMessage({ id: link.props['data-preview-title-id'] }) }))}
         </nav>
 
         <div id='tabs-bar__portal' />

app/javascript/mastodon/features/ui/containers/columns_area_container.js

@@ -1,9 +1,11 @@
 import { connect } from 'react-redux';
 import ColumnsArea from '../components/columns_area';
+import { getSwipeableLinks } from '../components/tabs_bar';
 
 const mapStateToProps = state => ({
   columns: state.getIn(['settings', 'columns']),
   isModalOpen: !!state.get('modal').modalType,
+  links: getSwipeableLinks(),
 });
 
 export default connect(mapStateToProps, null, null, { forwardRef: true })(ColumnsArea);

app/javascript/styles/mastodon/components.scss

@@ -2165,6 +2165,10 @@ a.account__display-name {
   .tabs-bar {
     margin-bottom: 0;
 
+    &.bottom-bar {
+      border-top: 1px solid lighten($ui-base-color, 8%);
+    }
+
     @media screen and (max-width: 600px + (285px * 2) + (10px * 2)) {
       &.bottom-bar {
         position: fixed;
@@ -2312,12 +2316,19 @@ a.account__display-name {
   background: lighten($ui-base-color, 8%);
   flex: 0 0 auto;
   overflow-y: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
-.tabs-bar__link {
+.tabs-bar__link,
+.tabs-bar__external-link {
   display: block;
-  flex: 1 1 auto;
+  flex: 1 0 auto;
-  min-width: 40px;
+  min-width: 50px;
   color: $primary-text-color;
   text-decoration: none;
   text-align: center;
@@ -2363,11 +2374,12 @@ a.account__display-name {
 
 @media screen and (max-width: 600px - 1px) {
   .tabs-bar {
-    .tabs-bar__link {
+    .tabs-bar__link,
+    .tabs-bar__external-link {
       &,
       &.hamburger,
       &.hamburger.short-label {
-        padding: 15px 10px 13px;
+        padding: 15px 0 13px;
       }
 
       &.hamburger.short-label {
@@ -2380,7 +2392,7 @@ a.account__display-name {
         padding: 0;
 
         i {
-          margin: 10px 5px 0;
+          margin: 10px 0 0;
         }
 
         .tabs-bar__link__short-label {
@@ -2410,7 +2422,10 @@ a.account__display-name {
 
 @media screen and (min-width: 600px) {
   .tabs-bar {
-    .tabs-bar__link {
+    white-space: nowrap;
+
+    .tabs-bar__link,
+    .tabs-bar__external-link {
       &,
       &.hamburger {
         padding: 15px 10px 13px;
@@ -2433,7 +2448,8 @@ a.account__display-name {
   }
 
   .tabs-bar.bottom-bar {
-    .tabs-bar__link {
+    .tabs-bar__link,
+    .tabs-bar__external-link {
       &,
       &.hamburger {
         padding-bottom: calc(env(safe-area-inset-bottom) + 13px);
@@ -2450,6 +2466,7 @@ a.account__display-name {
 
   &.bottom-bar {
     padding-bottom: 48px;
+    padding-bottom: calc(env(safe-area-inset-bottom) + 48px);
   }
 
   .column,
@@ -2649,7 +2666,8 @@ a.account__display-name {
 
 @media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
   .floating-action-button,
-  .tabs-bar__link.optional {
+  .tabs-bar__link.optional,
+  .tabs-bar__external-link.optional {
     display: none;
   }