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

Profile navigation improvements See merge request soapbox-pub/soapbox-fe!802
2021-10-19 21:23:32 +00:00 · 2021-10-19 21:23:32 +00:00 · 4fd9c90e69
commit 4fd9c90e69
--- a/app/soapbox/components/sub_navigation.js
+++ b/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 });
--- a/app/soapbox/features/account_timeline/components/column_settings.js
+++ b/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__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 className='column-settings'>
+        <div className='column-settings__header'>
+          <h1 className='column-settings__title'>
+            <FormattedMessage id='account.column_settings.title' defaultMessage='Account timeline settings' />
+          </h1>
+          <div className='column-settings__close'>
+            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
+          </div>
+        </div>
+
+        <div className='column-settings__content'>
+          <div className='column-settings__description'>
+            <FormattedMessage id='account.column_settings.description' defaultMessage='These settings apply to all account timelines.' />
+          </div>
+
+          <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>
    );
--- a/app/soapbox/features/account_timeline/index.js
+++ b/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}
--- a/app/soapbox/features/ui/components/tabs_bar.js
+++ b/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,
  };
 };

--- a/app/styles/components/account-header.scss
+++ b/app/styles/components/account-header.scss
@ -335,3 +335,9 @@
    }
  }
 }
+
+@media (min-width: 896px) {
+  .account-timeline .sub-navigation {
+    top: 134px;
+  }
+}
--- a/app/styles/components/columns.scss
+++ b/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);
+}
--- a/app/styles/components/icon.scss
+++ b/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);
-        stroke: var(--primary-text-color);
+        fill: currentColor;
+        stroke: currentColor;
      }
    }
  }
--- a/app/styles/components/tabs-bar.scss
+++ b/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;
-
-    & > span { display: none; }
+    display: none;
  }

  > span {
    font-size: 15px;
    line-height: 50px;
    margin-left: 4px;
+    display: none;
+  }
+
+  & + & {
+    margin-left: 20px;
  }

  &--search {
@ -199,28 +204,12 @@
    }
  }

-  i.fa {
-    font-size: 14px;
-    transform: translate(-1px, -1px);
-    transition: 0.1s;
+  .svg-icon {
+    width: 22px;
+    height: 22px;

-    @media screen and (max-width: 895px) {
-      font-size: 20px;
-    }
-
-    &.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;
+    svg.icon-tabler {
+      stroke-width: 1.5px;
    }
  }

@ -244,8 +233,8 @@
    height: 15px;
    border-radius: 999px;
    z-index: -1;
-    width: calc(100% + 20px);
-    margin-left: -12px;
+    width: calc(100% + 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;
+}
--- a/app/styles/ui.scss
+++ b/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) {