Gut the TabsBar

profile-avatar-switcher
Alex Gleason 2021-09-12 18:51:39 -05:00
rodzic 9a33215528
commit 1ea45f7cdb
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
4 zmienionych plików z 72 dodań i 84 usunięć

Wyświetl plik

@ -1,13 +1,47 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { NavLink, withRouter } from 'react-router-dom';
import { FormattedMessage } from 'react-intl';
import Icon from 'soapbox/components/icon';
import IconWithCounter from 'soapbox/components/icon_with_counter';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import { isStaff } from 'soapbox/utils/accounts';
import { getFeatures } from 'soapbox/utils/features';
export default
@withRouter
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'),
notificationCount: state.getIn(['notifications', 'unread']),
chatsCount: state.get('chats').reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),
dashboardCount: reportsCount + approvalCount,
features: getFeatures(instance),
};
};
export default @withRouter
@connect(mapStateToProps)
class ThumbNavigation extends React.PureComponent {
static propTypes = {
logo: PropTypes.string,
account: ImmutablePropTypes.map,
dashboardCount: PropTypes.number,
notificationCount: PropTypes.number,
chatsCount: PropTypes.number,
features: PropTypes.object.isRequired,
}
render() {
const { account, dashboardCount, features } = this.props;
return (
<div className='thumb-navigation'>
<NavLink to='/' exact className='thumb-navigation__link'>
@ -17,6 +51,24 @@ class ThumbNavigation extends React.PureComponent {
</span>
</NavLink>
{account && (
<NavLink to='/notifications' className='thumb-navigation__link'>
<Icon id='bell' />
<span>
<FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />
</span>
</NavLink>
)}
{(features.chats && account) && (
<NavLink to='/chats' className='thumb-navigation__link'>
<Icon id='comment' />
<span>
<FormattedMessage id='navigation.chats' defaultMessage='Chats' />
</span>
</NavLink>
)}
<NavLink to='/search' className='thumb-navigation__link'>
<Icon id='search' />
<span>
@ -24,19 +76,14 @@ class ThumbNavigation extends React.PureComponent {
</span>
</NavLink>
<NavLink to='/notifications' className='thumb-navigation__link'>
<Icon id='bell' />
<span>
<FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />
</span>
</NavLink>
<NavLink to='/chats' className='thumb-navigation__link'>
<Icon id='comment' />
<span>
<FormattedMessage id='navigation.chats' defaultMessage='Chats' />
</span>
</NavLink>
{(account && isStaff(account)) && (
<NavLink key='dashboard' to='/admin' className='thumb-navigation__link'>
<IconWithCounter icon='tachometer' count={dashboardCount} />
<span>
<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />
</span>
</NavLink>
)}
</div>
);
}

Wyświetl plik

@ -1,20 +1,17 @@
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Link, NavLink, withRouter } from 'react-router-dom';
import { Link, 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 ProfileDropdown from './profile_dropdown';
import { openModal } from '../../../actions/modal';
import { openSidebar } from '../../../actions/sidebar';
import Icon from '../../../components/icon';
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({
@ -30,10 +27,6 @@ class TabsBar extends React.PureComponent {
onOpenSidebar: PropTypes.func.isRequired,
logo: PropTypes.string,
account: ImmutablePropTypes.map,
dashboardCount: PropTypes.number,
notificationCount: PropTypes.number,
chatsCount: PropTypes.number,
features: PropTypes.object.isRequired,
}
state = {
@ -53,58 +46,8 @@ class TabsBar extends React.PureComponent {
return pathname === '/' || pathname.startsWith('/timeline/');
}
getNavLinks() {
const { intl: { formatMessage }, logo, account, dashboardCount, notificationCount, chatsCount, features } = this.props;
const links = [];
if (logo) {
links.push(
<Link key='logo' className='tabs-bar__link--logo' to='/' data-preview-title-id='column.home'>
<img alt='Logo' src={logo} />
<span><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
</Link>);
}
links.push(
<NavLink key='home' className='tabs-bar__link' exact to='/' data-preview-title-id='column.home' isActive={this.isHomeActive}>
<Icon id='home' />
<span><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
</NavLink>);
if (account) {
links.push(
<NavLink key='notifications' className='tabs-bar__link' to='/notifications' data-preview-title-id='column.notifications'>
<IconWithCounter icon='bell' count={notificationCount} />
<span><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></span>
</NavLink>);
}
if (features.chats && account) {
links.push(
<NavLink key='chats' className='tabs-bar__link tabs-bar__link--chats' to='/chats' data-preview-title-id='column.chats'>
<IconWithCounter icon='comment' count={chatsCount} />
<span><FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' /></span>
</NavLink>);
}
if (account && isStaff(account)) {
links.push(
<NavLink key='dashboard' className='tabs-bar__link' to='/admin' data-preview-title-id='tabs_bar.dashboard'>
<IconWithCounter icon='tachometer' count={dashboardCount} />
<span><FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' /></span>
</NavLink>);
}
links.push(
<NavLink key='search' className='tabs-bar__link tabs-bar__link--search' to='/search' data-preview-title-id='tabs_bar.search'>
<Icon id='search' />
<span><FormattedMessage id='tabs_bar.search' defaultMessage='Search' /></span>
</NavLink>,
);
return links.map((link) =>
React.cloneElement(link, {
'aria-label': formatMessage({
id: link.props['data-preview-title-id'],
}),
}));
}
render() {
const { account, onOpenCompose, onOpenSidebar, intl } = this.props;
const { account, logo, onOpenCompose, onOpenSidebar, intl } = this.props;
const { collapsed } = this.state;
const classes = classNames('tabs-bar', {
@ -115,7 +58,12 @@ class TabsBar extends React.PureComponent {
<nav className={classes} ref={this.setRef}>
<div className='tabs-bar__container'>
<div className='tabs-bar__split tabs-bar__split--left'>
{this.getNavLinks()}
{logo && (
<Link key='logo' className='tabs-bar__link--logo' to='/' data-preview-title-id='column.home'>
<img alt='Logo' src={logo} />
<span><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
</Link>
)}
</div>
<div className='tabs-bar__split tabs-bar__split--right'>
<div className='tabs-bar__search-container'>
@ -155,17 +103,10 @@ 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'),
notificationCount: state.getIn(['notifications', 'unread']),
chatsCount: state.get('chats').reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),
dashboardCount: reportsCount + approvalCount,
features: getFeatures(instance),
};
};

Wyświetl plik

@ -163,7 +163,7 @@
}
.search-popout-container {
width: 251px;
width: 351px;
@media screen and (max-width: $nav-breakpoint-2) { width: 100%; }
}

Wyświetl plik

@ -46,7 +46,7 @@
&__search-container {
display: block;
width: 251px;
width: 351px;
@media screen and (max-width: 895px) {
display: none;