Compare commits
2 Commits
shrike
...
feat/001/n
| Author | SHA1 | Date |
|---|---|---|
 Ruby Tartakovsky
|
e1c224da0a | |
|
Ruby Tartakovsky
|
f729c8ee71 |
|
|
@ -27,8 +27,10 @@ import BundleColumnError from './bundle_column_error';
|
|||
import { ColumnLoading } from './column_loading';
|
||||
import ComposePanel from './compose_panel';
|
||||
import DrawerLoading from './drawer_loading';
|
||||
import HeaderNavigation from './header_navigation';
|
||||
import NavigationPanel from './navigation_panel';
|
||||
|
||||
|
||||
const componentMap = {
|
||||
'COMPOSE': Compose,
|
||||
'HOME': HomeTimeline,
|
||||
|
|
@ -151,6 +153,11 @@ export default class ColumnsArea extends ImmutablePureComponent {
|
|||
|
||||
if (singleColumn) {
|
||||
return (
|
||||
<div className='columns-area__layout'>
|
||||
<div className='columns-area__header'>
|
||||
<HeaderNavigation onOpenSettings={openSettings} />
|
||||
</div>
|
||||
|
||||
<div className='columns-area__panels'>
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
|
|
@ -169,6 +176,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import { openModal } from 'flavours/glitch/actions/modal';
|
|||
import { fetchServer } from 'flavours/glitch/actions/server';
|
||||
import { Avatar } from 'flavours/glitch/components/avatar';
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
import { WordmarkLogo, SymbolLogo } from 'flavours/glitch/components/logo';
|
||||
import { Permalink } from 'flavours/glitch/components/permalink';
|
||||
import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
|
||||
import { registrationsOpen, me, sso_redirect } from 'flavours/glitch/initial_state';
|
||||
|
|
@ -66,6 +65,7 @@ class Header extends PureComponent {
|
|||
if (signedIn) {
|
||||
content = (
|
||||
<>
|
||||
|
||||
{location.pathname !== '/search' && <Link to='/search' className='button button-secondary' aria-label={intl.formatMessage(messages.search)}><Icon id='search' icon={SearchIcon} /></Link>}
|
||||
{location.pathname !== '/publish' && <Link to='/publish' className='button button-secondary'><FormattedMessage id='compose_form.publish_form' defaultMessage='New post' /></Link>}
|
||||
<Account />
|
||||
|
|
@ -105,11 +105,6 @@ class Header extends PureComponent {
|
|||
|
||||
return (
|
||||
<div className='ui__header'>
|
||||
<Link to='/' className='ui__header__logo'>
|
||||
<WordmarkLogo />
|
||||
<SymbolLogo />
|
||||
</Link>
|
||||
|
||||
<div className='ui__header__links'>
|
||||
{content}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
import PropTypes from 'prop-types';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import { useRouteMatch, NavLink } from 'react-router-dom';
|
||||
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
|
||||
const HeaderNavLink = ({ icon, activeIcon, iconComponent, activeIconComponent, text, to, onClick, href, method, badge, transparent, ...other }) => {
|
||||
const match = useRouteMatch(to);
|
||||
const className = classNames('header-nav-link', { 'header-nav-link--transparent': transparent });
|
||||
const badgeElement = typeof badge !== 'undefined' ? <span className='header-nav-link__badge'>{badge}</span> : null;
|
||||
const iconElement = (typeof icon === 'string' || iconComponent) ? <Icon id={icon} icon={iconComponent} className='header-nav-link__icon' /> : icon;
|
||||
const activeIconElement = activeIcon ?? (activeIconComponent ? <Icon id={icon} icon={activeIconComponent} className='header-nav-link__icon' /> : iconElement);
|
||||
const active = match?.isExact;
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
<a href={href} className={className} data-method={method} title={text} {...other}>
|
||||
{active ? activeIconElement : iconElement}
|
||||
{badgeElement}
|
||||
</a>
|
||||
);
|
||||
} else if (to) {
|
||||
return (
|
||||
<NavLink to={to} className={className} title={text} exact {...other}>
|
||||
{active ? activeIconElement : iconElement}
|
||||
{badgeElement}
|
||||
</NavLink>
|
||||
);
|
||||
} else {
|
||||
const handleOnClick = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return onClick(e);
|
||||
};
|
||||
return (
|
||||
// eslint-disable-next-line jsx-a11y/anchor-is-valid -- intentional to have the same look and feel as other menu items
|
||||
<a href='#' onClick={onClick && handleOnClick} className={className} title={text} {...other} tabIndex={0}>
|
||||
{iconElement}
|
||||
{badgeElement}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
HeaderNavLink.propTypes = {
|
||||
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
|
||||
iconComponent: PropTypes.func,
|
||||
activeIcon: PropTypes.node,
|
||||
activeIconComponent: PropTypes.func,
|
||||
text: PropTypes.string.isRequired,
|
||||
to: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
href: PropTypes.string,
|
||||
method: PropTypes.string,
|
||||
badge: PropTypes.node,
|
||||
transparent: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default HeaderNavLink;
|
||||
|
|
@ -0,0 +1,271 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import { Component, useEffect } from 'react';
|
||||
|
||||
import { defineMessages, injectIntl, useIntl, FormattedMessage} from 'react-intl';
|
||||
|
||||
import { useSelector, useDispatch, connect } from 'react-redux';
|
||||
|
||||
|
||||
import BookmarksActiveIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
|
||||
import BookmarksIcon from '@/material-icons/400-24px/bookmarks.svg?react';
|
||||
import ModerationIcon from '@/material-icons/400-24px/gavel.svg?react';
|
||||
import HomeActiveIcon from '@/material-icons/400-24px/home-fill.svg?react';
|
||||
import HomeIcon from '@/material-icons/400-24px/home.svg?react';
|
||||
import ListAltActiveIcon from '@/material-icons/400-24px/list_alt-fill.svg?react';
|
||||
import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
|
||||
import MailActiveIcon from '@/material-icons/400-24px/mail-fill.svg?react';
|
||||
import MailIcon from '@/material-icons/400-24px/mail.svg?react';
|
||||
import AdministrationIcon from '@/material-icons/400-24px/manufacturing.svg?react';
|
||||
import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
|
||||
import NotificationsActiveIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
|
||||
import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react';
|
||||
import PersonAddActiveIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
|
||||
import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
|
||||
import PublicIcon from '@/material-icons/400-24px/public.svg?react';
|
||||
import SearchIcon from '@/material-icons/400-24px/search.svg?react';
|
||||
import SettingsIcon from '@/material-icons/400-24px/settings.svg?react';
|
||||
import StarActiveIcon from '@/material-icons/400-24px/star-fill.svg?react';
|
||||
import StarIcon from '@/material-icons/400-24px/star.svg?react';
|
||||
import { fetchFollowRequests } from 'flavours/glitch/actions/accounts';
|
||||
import { Avatar } from 'flavours/glitch/components/avatar';
|
||||
import { CollapseButton } from 'flavours/glitch/components/collapse_button';
|
||||
import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge';
|
||||
import { Permalink } from 'flavours/glitch/components/permalink';
|
||||
import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
|
||||
import { timelinePreview, registrationsOpen, me, sso_redirect } from 'flavours/glitch/initial_state';
|
||||
import { transientSingleColumn } from 'flavours/glitch/is_mobile';
|
||||
import { canManageReports, canViewAdminDashboard } from 'flavours/glitch/permissions';
|
||||
import { selectUnreadNotificationGroupsCount } from 'flavours/glitch/selectors/notifications';
|
||||
import { selectUseGroupedNotifications } from 'flavours/glitch/selectors/settings';
|
||||
import { preferencesLink } from 'flavours/glitch/utils/backend_links';
|
||||
|
||||
import DisabledAccountBanner from './disabled_account_banner';
|
||||
import HeaderNavLink from './header_nav_link';
|
||||
import { ListPanel } from './list_panel';
|
||||
import SignInBanner from './sign_in_banner';
|
||||
|
||||
const messages = defineMessages({
|
||||
home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
|
||||
notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
|
||||
explore: { id: 'explore.title', defaultMessage: 'Explore' },
|
||||
firehose: { id: 'column.firehose', defaultMessage: 'Live feeds' },
|
||||
direct: { id: 'navigation_bar.direct', defaultMessage: 'Private mentions' },
|
||||
favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favorites' },
|
||||
bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
|
||||
lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
|
||||
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
|
||||
administration: { id: 'navigation_bar.administration', defaultMessage: 'Administration' },
|
||||
moderation: { id: 'navigation_bar.moderation', defaultMessage: 'Moderation' },
|
||||
followsAndFollowers: { id: 'navigation_bar.follows_and_followers', defaultMessage: 'Follows and followers' },
|
||||
about: { id: 'navigation_bar.about', defaultMessage: 'About' },
|
||||
search: { id: 'navigation_bar.search', defaultMessage: 'Search' },
|
||||
advancedInterface: { id: 'navigation_bar.advanced_interface', defaultMessage: 'Open in advanced web interface' },
|
||||
openedInClassicInterface: { id: 'navigation_bar.opened_in_classic_interface', defaultMessage: 'Posts, accounts, and other specific pages are opened by default in the classic web interface.' },
|
||||
app_settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' },
|
||||
followRequests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
|
||||
});
|
||||
|
||||
const NotificationsLink = () => {
|
||||
const optedInGroupedNotifications = useSelector(selectUseGroupedNotifications);
|
||||
const count = useSelector(state => state.getIn(['local_settings', 'notifications', 'tab_badge']) ? state.getIn(['notifications', 'unread']) : 0);
|
||||
const intl = useIntl();
|
||||
|
||||
const newCount = useSelector(selectUnreadNotificationGroupsCount);
|
||||
|
||||
return (
|
||||
<HeaderNavLink
|
||||
key='notifications'
|
||||
transparent
|
||||
to='/notifications'
|
||||
icon={<IconWithBadge id='bell' icon={NotificationsIcon} count={optedInGroupedNotifications ? newCount : count} className='column-link__icon' />}
|
||||
activeIcon={<IconWithBadge id='bell' icon={NotificationsActiveIcon} count={optedInGroupedNotifications ? newCount : count} className='column-link__icon' />}
|
||||
text={intl.formatMessage(messages.notifications)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const FollowRequestsLink = () => {
|
||||
const count = useSelector(state => state.getIn(['user_lists', 'follow_requests', 'items'])?.size ?? 0);
|
||||
const intl = useIntl();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(fetchFollowRequests());
|
||||
}, [dispatch]);
|
||||
|
||||
if (count === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<HeaderNavLink
|
||||
transparent
|
||||
to='/follow_requests'
|
||||
icon={<IconWithBadge id='user-plus' icon={PersonAddIcon} count={count} className='column-link__icon' />}
|
||||
activeIcon={<IconWithBadge id='user-plus' icon={PersonAddActiveIcon} count={count} className='column-link__icon' />}
|
||||
text={intl.formatMessage(messages.followRequests)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const Account = connect(state => ({
|
||||
account: state.getIn(['accounts', me]),
|
||||
}))(({ account }) => (
|
||||
<Permalink href={account.get('url')} to={`/@${account.get('acct')}`} title={account.get('acct')}>
|
||||
<Avatar account={account} size={35} />
|
||||
</Permalink>
|
||||
));
|
||||
|
||||
|
||||
class HeaderNavigation extends Component {
|
||||
static propTypes = {
|
||||
identity: identityContextPropShape,
|
||||
intl: PropTypes.object.isRequired,
|
||||
onOpenSettings: PropTypes.func,
|
||||
location: PropTypes.object,
|
||||
openClosedRegistrationsModal: PropTypes.func,
|
||||
signupUrl: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
isFirehoseActive = (match, location) => {
|
||||
return match || location.pathname.startsWith('/public');
|
||||
};
|
||||
|
||||
state = {
|
||||
collapsed: true,
|
||||
animating: false
|
||||
};
|
||||
|
||||
handleToggleClick = (e) => {
|
||||
e.stopPropagation();
|
||||
this.setState(function(state) {
|
||||
return {
|
||||
collapsed: !state.collapsed,
|
||||
animating: true
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
handleTransitionEnd = () => {
|
||||
this.setState({
|
||||
animating: false
|
||||
});
|
||||
};
|
||||
|
||||
render () {
|
||||
const { intl, onOpenSettings, location, openClosedRegistrationsModal, signupUrl } = this.props;
|
||||
const { signedIn, disabledAccountId, permissions } = this.props.identity;
|
||||
|
||||
let banner = undefined;
|
||||
|
||||
let content;
|
||||
|
||||
if (signedIn) {
|
||||
content = (
|
||||
<Account />
|
||||
);
|
||||
} else {
|
||||
|
||||
if (sso_redirect) {
|
||||
content = (
|
||||
<a href={sso_redirect} data-method='post' className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.sso_redirect' defaultMessage='Login or Register' /></a>
|
||||
);
|
||||
} else {
|
||||
let signupButton;
|
||||
|
||||
if (registrationsOpen) {
|
||||
signupButton = (
|
||||
<a href={signupUrl} className='button'>
|
||||
<FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
signupButton = (
|
||||
<button className='button' onClick={openClosedRegistrationsModal}>
|
||||
<FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
content = (
|
||||
<>
|
||||
{signupButton}
|
||||
<a href='/auth/sign_in' className='button button-tertiary'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if(transientSingleColumn)
|
||||
banner = (<div className='switch-to-advanced'>
|
||||
{intl.formatMessage(messages.openedInClassicInterface)}
|
||||
{" "}
|
||||
<a href={`/deck${location.pathname}`} className='switch-to-advanced__toggle'>
|
||||
{intl.formatMessage(messages.advancedInterface)}
|
||||
</a>
|
||||
</div>);
|
||||
|
||||
return (
|
||||
<div className='header-navigation-panel'>
|
||||
{banner &&
|
||||
<div className='header-navigation-panel__banner'>
|
||||
{banner}
|
||||
</div>
|
||||
}
|
||||
|
||||
{content}
|
||||
|
||||
{signedIn && (
|
||||
<>
|
||||
<HeaderNavLink transparent to='/home' icon='home' iconComponent={HomeIcon} activeIconComponent={HomeActiveIcon} text={intl.formatMessage(messages.home)} />
|
||||
<NotificationsLink />
|
||||
<FollowRequestsLink />
|
||||
</>
|
||||
)}
|
||||
|
||||
<HeaderNavLink transparent to='/search' icon='search' iconComponent={SearchIcon} text={intl.formatMessage(messages.search)} />
|
||||
|
||||
{(signedIn || timelinePreview) && (
|
||||
<HeaderNavLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='globe' iconComponent={PublicIcon} text={intl.formatMessage(messages.firehose)} />
|
||||
)}
|
||||
|
||||
{!signedIn && (
|
||||
<div className='header-navigation-panel__sign-in-banner'>
|
||||
{ disabledAccountId ? <DisabledAccountBanner /> : <SignInBanner /> }
|
||||
</div>
|
||||
)}
|
||||
|
||||
<CollapseButton collapsed={this.state.collapsed} setCollapsed={this.handleToggleClick} />
|
||||
|
||||
<ul className={'header-dropdown ' + this.state.collapsed ? 'visible' : 'hidden' } onTransitionEnd={this.handleTransitionEnd}>
|
||||
{(!this.state.collapsed || this.state.animating) && (
|
||||
<>
|
||||
{signedIn && (
|
||||
<>
|
||||
<li> <HeaderNavLink transparent to='/conversations' icon='at' iconComponent={MailIcon} activeIconComponent={MailActiveIcon} text={intl.formatMessage(messages.direct)} /> </li>
|
||||
|
||||
<li> <HeaderNavLink transparent to='/bookmarks' icon='bookmarks' iconComponent={BookmarksIcon} activeIconComponent={BookmarksActiveIcon} text={intl.formatMessage(messages.bookmarks)} /> </li>
|
||||
<li> <HeaderNavLink transparent to='/favourites' icon='star' iconComponent={StarIcon} activeIconComponent={StarActiveIcon} text={intl.formatMessage(messages.favourites)} /> </li>
|
||||
<li> <HeaderNavLink transparent to='/lists' icon='list-ul' iconComponent={ListAltIcon} activeIconComponent={ListAltActiveIcon} text={intl.formatMessage(messages.lists)} /> </li>
|
||||
|
||||
<li> <HeaderNavLink transparent onClick={onOpenSettings} icon='cogs' iconComponent={AdministrationIcon} text={intl.formatMessage(messages.app_settings)} /> </li>
|
||||
|
||||
{canManageReports(permissions) && <li> <HeaderNavLink transparent href='/admin/reports' icon='flag' iconComponent={ModerationIcon} text={intl.formatMessage(messages.moderation)} /> </li>}
|
||||
{canViewAdminDashboard(permissions) && <li> <HeaderNavLink transparent href='/admin/dashboard' icon='tachometer' iconComponent={AdministrationIcon} text={intl.formatMessage(messages.administration)} /> </li>}
|
||||
</>
|
||||
)}
|
||||
{!!preferencesLink && <li> <HeaderNavLink transparent href={preferencesLink} icon='cog' iconComponent={SettingsIcon} text={intl.formatMessage(messages.preferences)} /> </li>}
|
||||
<li> <HeaderNavLink transparent to='/about' icon='ellipsis-h' iconComponent={MoreHorizIcon} text={intl.formatMessage(messages.about)} /> </li>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
|
||||
{signedIn && (
|
||||
<ListPanel />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default injectIntl(withIdentity(HeaderNavigation));
|
||||
|
|
@ -3147,11 +3147,23 @@ $ui-header-logo-wordmark-width: 99px;
|
|||
|
||||
.layout-single-column {
|
||||
.ui__header {
|
||||
display: flex;
|
||||
// lol turn this shit off
|
||||
display: none;
|
||||
background: var(--background-color);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.header-dropdown {
|
||||
display: none;
|
||||
top: -100%;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.header-dropdown.visible {
|
||||
display: block;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.column > .scrollable,
|
||||
.tabs-bar__wrapper .column-header,
|
||||
.tabs-bar__wrapper .column-back-button {
|
||||
|
|
|
|||
Loading…
Reference in New Issue