Merge branch 'profile-page-nav' into 'develop'

Profile navigation improvements

See merge request soapbox-pub/soapbox-fe!802

app/soapbox/components/sub_navigation.js

@@ -73,9 +73,9 @@ class SubNavigation extends React.PureComponent {
 
   handleScroll = throttle(() => {
     if (this.node) {
-      const { top } = this.node.getBoundingClientRect();
+      const { offsetTop } = this.node;
 
-      if (top <= 50) {
+      if (offsetTop > 0) {
         this.setState({ scrolled: true });
       } else {
         this.setState({ scrolled: false });

app/soapbox/features/account_timeline/components/column_settings.js

@@ -1,38 +1,59 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
+import IconButton from 'soapbox/components/icon_button';
 import SettingToggle from '../../notifications/components/setting_toggle';
 
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+});
+
 export default @injectIntl
 class ColumnSettings extends React.PureComponent {
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
     settings: ImmutablePropTypes.map.isRequired,
     onChange: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
   };
 
   render() {
-    const { settings, onChange } = this.props;
+    const { intl, settings, onChange, onClose } = this.props;
 
     return (
-      <div>
+      <div className='column-settings'>
-        <div className='column-settings__row'>
+        <div className='column-settings__header'>
-          <SettingToggle
+          <h1 className='column-settings__title'>
-            prefix='account_timeline'
+            <FormattedMessage id='account.column_settings.title' defaultMessage='Account timeline settings' />
-            settings={settings}
+          </h1>
-            settingPath={['shows', 'pinned']}
+          <div className='column-settings__close'>
-            onChange={onChange}
+            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
-            label={<FormattedMessage id='account_timeline.column_settings.show_pinned' defaultMessage='Show pinned posts' />}
+          </div>
-          />
+        </div>
-          <SettingToggle
+
-            prefix='account_timeline'
+        <div className='column-settings__content'>
-            settings={settings}
+          <div className='column-settings__description'>
-            settingPath={['shows', 'reblog']}
+            <FormattedMessage id='account.column_settings.description' defaultMessage='These settings apply to all account timelines.' />
-            onChange={onChange}
+          </div>
-            label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reposts' />}
+
-          />
+          <div className='column-settings__row'>
+            <SettingToggle
+              prefix='account_timeline'
+              settings={settings}
+              settingPath={['shows', 'pinned']}
+              onChange={onChange}
+              label={<FormattedMessage id='account_timeline.column_settings.show_pinned' defaultMessage='Show pinned posts' />}
+            />
+            <SettingToggle
+              prefix='account_timeline'
+              settings={settings}
+              settingPath={['shows', 'reblog']}
+              onChange={onChange}
+              label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reposts' />}
+            />
+          </div>
         </div>
       </div>
     );

app/soapbox/features/account_timeline/index.js

@@ -8,7 +8,8 @@ import Icon from 'soapbox/components/icon';
 import StatusList from '../../components/status_list';
 import LoadingIndicator from '../../components/loading_indicator';
 import Column from '../ui/components/column';
-import ColumnSettingsContainer from './containers/column_settings_container';
+// import ColumnSettingsContainer from './containers/column_settings_container';
+import SubNavigation from 'soapbox/components/sub_navigation';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
@@ -19,7 +20,6 @@ import { fetchPatronAccount } from '../../actions/patron';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { getSettings } from 'soapbox/actions/settings';
 import { makeGetStatusIds, findAccountByUsername } from 'soapbox/selectors';
-import classNames from 'classnames';
 
 const makeMapStateToProps = () => {
   const getStatusIds = makeGetStatusIds();
@@ -146,7 +146,6 @@ class AccountTimeline extends ImmutablePureComponent {
 
   render() {
     const { statusIds, featuredStatusIds, isLoading, hasMore, isBlocked, isAccount, accountId, unavailable, accountUsername } = this.props;
-    const { collapsed, animating } = this.state;
 
     if (!isAccount && accountId !== -1) {
       return (
@@ -176,7 +175,8 @@ class AccountTimeline extends ImmutablePureComponent {
     }
 
     return (
-      <Column transparent>
+      <Column className='account-timeline' transparent>
+        <SubNavigation message={`@${accountUsername}`} /*settings={ColumnSettingsContainer}*/ />
         <div className='account__section-headline'>
           <NavLink exact to={`/@${accountUsername}`}>
             <FormattedMessage id='account.posts' defaultMessage='Posts' />
@@ -193,11 +193,6 @@ class AccountTimeline extends ImmutablePureComponent {
             </button>
           </div>
         </div>
-        <div className={classNames('column-header__collapsible', { collapsed, animating })} onTransitionEnd={this.handleTransitionEnd}>
-          <div className='column-header__collapsible-inner'>
-            {(!collapsed || animating) && <ColumnSettingsContainer />}
-          </div>
-        </div>
         <StatusList
           scrollKey='account_timeline'
           statusIds={statusIds}

app/soapbox/features/ui/components/tabs_bar.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { Link, withRouter } from 'react-router-dom';
+import { Link, NavLink, withRouter } from 'react-router-dom';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
+import IconWithCounter from 'soapbox/components/icon_with_counter';
 import SearchContainer from 'soapbox/features/compose/containers/search_container';
 import Avatar from '../../../components/avatar';
 import Icon from 'soapbox/components/icon';
@@ -13,6 +14,8 @@ import { openModal } from '../../../actions/modal';
 import { openSidebar } from '../../../actions/sidebar';
 import ThemeToggle from '../../ui/components/theme_toggle_container';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import { isStaff } from 'soapbox/utils/accounts';
+import { getFeatures } from 'soapbox/utils/features';
 
 const messages = defineMessages({
   post: { id: 'tabs_bar.post', defaultMessage: 'Post' },
@@ -27,6 +30,10 @@ class TabsBar extends React.PureComponent {
     onOpenSidebar: PropTypes.func.isRequired,
     logo: PropTypes.string,
     account: ImmutablePropTypes.map,
+    features: PropTypes.object.isRequired,
+    dashboardCount: PropTypes.number,
+    notificationCount: PropTypes.number,
+    chatsCount: PropTypes.number,
   }
 
   state = {
@@ -47,7 +54,7 @@ class TabsBar extends React.PureComponent {
   }
 
   render() {
-    const { account, logo, onOpenCompose, onOpenSidebar, intl } = this.props;
+    const { intl, account, logo, onOpenCompose, onOpenSidebar, features, dashboardCount, notificationCount, chatsCount } = this.props;
     const { collapsed } = this.state;
 
     const classes = classNames('tabs-bar', {
@@ -75,8 +82,42 @@ class TabsBar extends React.PureComponent {
             </div>
           </div>
           <div className='tabs-bar__split tabs-bar__split--right'>
-            {account &&
+            {account ? (
               <>
+                <NavLink key='notifications' className='tabs-bar__link' to='/notifications' data-preview-title-id='column.notifications'>
+                  <IconWithCounter
+                    src={require('@tabler/icons/icons/bell.svg')}
+                    className={classNames('primary-navigation__icon', {
+                      'svg-icon--active': location.pathname === '/notifications',
+                      'svg-icon--unread': notificationCount > 0,
+                    })}
+                    count={notificationCount}
+                  />
+                  <span><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></span>
+                </NavLink>
+
+                {features.chats && (
+                  <NavLink key='chats' className='tabs-bar__link' to='/chats' data-preview-title-id='column.chats'>
+                    <IconWithCounter
+                      src={require('@tabler/icons/icons/messages.svg')}
+                      className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/chats' })}
+                      count={chatsCount}
+                    />
+                    <span><FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' /></span>
+                  </NavLink>
+                )}
+
+                {isStaff(account) && (
+                  <NavLink key='dashboard' className='tabs-bar__link' to='/admin' data-preview-title-id='tabs_bar.dashboard'>
+                    <IconWithCounter
+                      src={location.pathname.startsWith('/admin') ? require('icons/dashboard-filled.svg') : require('@tabler/icons/icons/dashboard.svg')}
+                      className='primary-navigation__icon'
+                      count={dashboardCount}
+                    />
+                    <span><FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' /></span>
+                  </NavLink>
+                )}
+
                 <ThemeToggle />
                 <div className='tabs-bar__profile'>
                   <Avatar account={account} />
@@ -87,9 +128,7 @@ class TabsBar extends React.PureComponent {
                   <span>{intl.formatMessage(messages.post)}</span>
                 </button>
               </>
-            }
+            ) : (
-            {
-              !account &&
               <div className='flex'>
                 <Link className='tabs-bar__button button' to='/auth/sign_in'>
                   <FormattedMessage id='account.login' defaultMessage='Log In' />
@@ -98,7 +137,7 @@ class TabsBar extends React.PureComponent {
                   <FormattedMessage id='account.register' defaultMessage='Sign up' />
                 </Link>
               </div>
-            }
+            )}
           </div>
         </div>
       </nav>
@@ -109,10 +148,17 @@ class TabsBar extends React.PureComponent {
 
 const mapStateToProps = state => {
   const me = state.get('me');
+  const reportsCount = state.getIn(['admin', 'openReports']).count();
+  const approvalCount = state.getIn(['admin', 'awaitingApproval']).count();
+  const instance = state.get('instance');
 
   return {
     account: state.getIn(['accounts', me]),
     logo: getSoapboxConfig(state).get('logo'),
+    features: getFeatures(instance),
+    notificationCount: state.getIn(['notifications', 'unread']),
+    chatsCount: state.get('chats').reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),
+    dashboardCount: reportsCount + approvalCount,
   };
 };
 

app/styles/components/account-header.scss

@@ -335,3 +335,9 @@
     }
   }
 }
+
+@media (min-width: 896px) {
+  .account-timeline .sub-navigation {
+    top: 134px;
+  }
+}

app/styles/components/columns.scss

@@ -625,6 +625,12 @@
     overflow-y: auto;
   }
 
+  &__description {
+    font-size: 14px;
+    margin: 5px 0 15px;
+    color: var(--primary-text-color--faint);
+  }
+
   &__close {
     display: flex;
     align-items: center;
@@ -949,3 +955,7 @@
 .column .explanation-box {
   background: var(--foreground-color);
 }
+
+.sub-navigation + .account__section-headline {
+  background: var(--foreground-color);
+}

app/styles/components/icon.scss

@@ -25,14 +25,14 @@
     svg.icon-tabler-bell,
     svg.icon-tabler-messages {
       path:nth-child(2) {
-        fill: var(--primary-text-color);
+        fill: currentColor;
       }
     }
 
     svg.icon-tabler-users {
       circle,
       circle + path {
-        fill: var(--primary-text-color);
+        fill: currentColor;
       }
     }
 
@@ -40,8 +40,8 @@
       stroke: var(--background-color);
 
       rect {
-        fill: var(--primary-text-color);
+        fill: currentColor;
-        stroke: var(--primary-text-color);
+        stroke: currentColor;
       }
     }
   }

app/styles/components/tabs-bar.scss

@@ -8,7 +8,7 @@
   width: 100%;
   position: sticky;
   top: 0;
-  z-index: 1000;
+  z-index: 1100;
   transition: transform 0.2s ease;
 
   &--collapsed {
@@ -142,11 +142,13 @@
   }
 
   .theme-toggle {
-    @media screen and (max-width: $nav-breakpoint-3) { display: none; }
+    margin-left: 20px;
+
+    @media screen and (max-width: $nav-breakpoint-3) {
+      display: none;
+    }
 
     .setting-toggle {
-      margin-left: 10px;
-
       .react-toggle-track {
         background-color: var(--foreground-color);
       }
@@ -168,7 +170,6 @@
 .tabs-bar__link {
   display: flex;
   flex: 1 1 auto;
-  margin: 0 20px 0 0;
   color: #fff;
   text-decoration: none;
   position: relative;
@@ -183,14 +184,18 @@
     width: 36px;
     margin: 4px 4px 0 0;
     justify-content: center;
-
+    display: none;
-    & > span { display: none; }
   }
 
   > span {
     font-size: 15px;
     line-height: 50px;
     margin-left: 4px;
+    display: none;
+  }
+
+  & + & {
+    margin-left: 20px;
   }
 
   &--search {
@@ -199,28 +204,12 @@
     }
   }
 
-  i.fa {
+  .svg-icon {
-    font-size: 14px;
+    width: 22px;
-    transform: translate(-1px, -1px);
+    height: 22px;
-    transition: 0.1s;
 
-    @media screen and (max-width: 895px) {
+    svg.icon-tabler {
-      font-size: 20px;
+      stroke-width: 1.5px;
-    }
-
-    &.fa-home {
-      font-size: 18px;
-      transform: translate(-1px, -2px);
-
-      @media screen and (max-width: 895px) {
-        font-size: 26px;
-      }
-    }
-  }
-
-  .icon-with-counter__counter {
-    @media screen and (min-width: 896px) {
-      left: 5px;
     }
   }
 
@@ -244,8 +233,8 @@
     height: 15px;
     border-radius: 999px;
     z-index: -1;
-    width: calc(100% + 20px);
+    width: calc(100% + 12px);
-    margin-left: -12px;
+    margin-left: -9px;
 
     @media screen and (max-width: 895px) {
       height: 0;
@@ -339,3 +328,7 @@
     }
   }
 }
+
+.tabs-bar__link + .tabs-bar__profile {
+  margin-left: 20px;
+}

app/styles/ui.scss

@@ -346,10 +346,11 @@
     width: 100%;
 
     &__top {
+      @include standard-panel-shadow;
       display: flex;
       width: 100%;
       height: auto;
-      z-index: 105;
+      z-index: 1000;
       background: var(--foreground-color);
 
       @media (min-width: 896px) {