moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Mastodon compatibility routes, expose /conversations, display Messages tab for Mastodon

This commit is contained in:
Alex Gleason 2021-10-05 17:07:00 -05:00
parent 468119fe3c
commit a1512316d8
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
4 changed files with 98 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
app/soapbox/components/primary_navigation.js
View File

@ -26,7 +26,7 @@ const mapStateToProps = state => {
chatsCount: state.get('chats').reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0), chatsCount: state.get('chats').reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),
dashboardCount: reportsCount + approvalCount, dashboardCount: reportsCount + approvalCount,
features: getFeatures(instance), features: getFeatures(instance),
siteTitle: state.getIn(['instance', 'title']), instance,
}; };
}; };
@ -45,12 +45,12 @@ class PrimaryNavigation extends React.PureComponent {
notificationCount: PropTypes.number, notificationCount: PropTypes.number,
chatsCount: PropTypes.number, chatsCount: PropTypes.number,
features: PropTypes.object.isRequired, features: PropTypes.object.isRequired,
siteTitle: PropTypes.string,
location: PropTypes.object, location: PropTypes.object,
instance: ImmutablePropTypes.map.isRequired,
}; };
render() { render() {
const { account, features, notificationCount, chatsCount, dashboardCount, siteTitle, location } = this.props; const { account, features, notificationCount, chatsCount, dashboardCount, location, instance } = this.props;
return ( return (
<div className='column-header__wrapper primary-navigation__wrapper'> <div className='column-header__wrapper primary-navigation__wrapper'>
@ -60,14 +60,37 @@ class PrimaryNavigation extends React.PureComponent {
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
</NavLink> </NavLink>
{account && <NavLink key='notifications' className='btn grouped' to='/notifications' data-preview-title-id='column.notifications'> {account && (
<IconWithCounter <NavLink key='notifications' className='btn grouped' to='/notifications' data-preview-title-id='column.notifications'>
src={notificationCount > 0 ? require('@tabler/icons/icons/bell-ringing-2.svg') : require('@tabler/icons/icons/bell.svg')} <IconWithCounter
className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/notifications' })} src={notificationCount > 0 ? require('@tabler/icons/icons/bell-ringing-2.svg') : require('@tabler/icons/icons/bell.svg')}
count={notificationCount} className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/notifications' })}
/> count={notificationCount}
<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /> />
</NavLink>} <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
</NavLink>
)}
{account && (
features.chats ? (
<NavLink key='chats' className='btn grouped' 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}
/>
<FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' />
</NavLink>
) : (
<NavLink to='/messages' className='btn grouped'>
<Icon
src={require('@tabler/icons/icons/mail.svg')}
className={classNames('primary-navigation__icon', { 'svg-icon--active': ['/messages', '/conversations'].includes(location.pathname) })}
/>
<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />
</NavLink>
)
)}
<NavLink key='search' className='btn grouped' to='/search'> <NavLink key='search' className='btn grouped' to='/search'>
<Icon <Icon
@ -77,23 +100,23 @@ class PrimaryNavigation extends React.PureComponent {
<FormattedMessage id='navigation.search' defaultMessage='Search' /> <FormattedMessage id='navigation.search' defaultMessage='Search' />
</NavLink> </NavLink>
{(features.chats && account) && <NavLink key='chats' className='btn grouped' to='/chats' data-preview-title-id='column.chats'> {(account && isStaff(account)) && (
<IconWithCounter <NavLink key='dashboard' className='btn grouped' to='/admin' data-preview-title-id='tabs_bar.dashboard'>
src={require('@tabler/icons/icons/messages.svg')} <IconWithCounter
className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/chats' })} src={location.pathname.startsWith('/admin') ? require('icons/dashboard-filled.svg') : require('@tabler/icons/icons/dashboard.svg')}
count={chatsCount} className='primary-navigation__icon'
/> count={dashboardCount}
<FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' /> />
</NavLink>} <FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />
</NavLink>
)}
{(account && isStaff(account)) && <NavLink key='dashboard' className='btn grouped' to='/admin' data-preview-title-id='tabs_bar.dashboard'> {(account && instance.get('invites_enabled')) && (
<IconWithCounter <a href='/invites' className='btn grouped'>
src={location.pathname.startsWith('/admin') ? require('icons/dashboard-filled.svg') : require('@tabler/icons/icons/dashboard.svg')} <Icon src={require('@tabler/icons/icons/mailbox.svg')} className='primary-navigation__icon' />
className='primary-navigation__icon' <FormattedMessage id='navigation.invites' defaultMessage='Invites' />
count={dashboardCount} </a>
/> )}
<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />
</NavLink>}
<hr /> <hr />
@ -103,7 +126,7 @@ class PrimaryNavigation extends React.PureComponent {
src={require('@tabler/icons/icons/users.svg')} src={require('@tabler/icons/icons/users.svg')}
className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/timeline/local' })} className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/timeline/local' })}
/> />
{siteTitle} {instance.get('title')}
</NavLink> </NavLink>
) : ( ) : (
<NavLink to='/timeline/local' className='btn grouped'> <NavLink to='/timeline/local' className='btn grouped'>
@ -112,10 +135,12 @@ class PrimaryNavigation extends React.PureComponent {
</NavLink> </NavLink>
)} )}
{features.federating && <NavLink to='/timeline/fediverse' className='btn grouped'> {features.federating && (
<Icon src={require('icons/fediverse.svg')} className='column-header__icon' /> <NavLink to='/timeline/fediverse' className='btn grouped'>
<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' /> <Icon src={require('icons/fediverse.svg')} className='column-header__icon' />
</NavLink>} <FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />
</NavLink>
)}
</h1> </h1>
</div> </div>
); );

34
app/soapbox/components/thumb_navigation.js
View File

@ -66,17 +66,29 @@ class ThumbNavigation extends React.PureComponent {
</NavLink> </NavLink>
)} )}
{(features.chats && account) && ( {account && (
<NavLink to='/chats' className='thumb-navigation__link'> features.chats ? (
<IconWithCounter <NavLink to='/chats' className='thumb-navigation__link'>
src={require('@tabler/icons/icons/messages.svg')} <IconWithCounter
className={classNames({ 'svg-icon--active': location.pathname === '/chats' })} src={require('@tabler/icons/icons/messages.svg')}
count={chatsCount} className={classNames({ 'svg-icon--active': location.pathname === '/chats' })}
/> count={chatsCount}
<span> />
<FormattedMessage id='navigation.chats' defaultMessage='Chats' /> <span>
</span> <FormattedMessage id='navigation.chats' defaultMessage='Chats' />
</NavLink> </span>
</NavLink>
) : (
<NavLink to='/messages' className='thumb-navigation__link'>
<Icon
src={require('@tabler/icons/icons/mail.svg')}
className={classNames({ 'svg-icon--active': ['/messages', '/conversations'].includes(location.pathname) })}
/>
<span>
<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />
</span>
</NavLink>
)
)} )}
<NavLink to='/search' className='thumb-navigation__link'> <NavLink to='/search' className='thumb-navigation__link'>

9
app/soapbox/features/ui/index.js
View File

@ -58,6 +58,7 @@ import {
Reactions, Reactions,
// Favourites, // Favourites,
DirectTimeline, DirectTimeline,
Conversations,
HashtagTimeline, HashtagTimeline,
Notifications, Notifications,
FollowRequests, FollowRequests,
@ -219,6 +220,7 @@ class SwitchingColumnsArea extends React.PureComponent {
<WrappedRoute path='/timeline/local' exact page={HomePage} component={CommunityTimeline} content={children} publicRoute /> <WrappedRoute path='/timeline/local' exact page={HomePage} component={CommunityTimeline} content={children} publicRoute />
<WrappedRoute path='/timeline/fediverse' exact page={HomePage} component={PublicTimeline} content={children} publicRoute /> <WrappedRoute path='/timeline/fediverse' exact page={HomePage} component={PublicTimeline} content={children} publicRoute />
<WrappedRoute path='/timeline/:instance' exact page={RemoteInstancePage} component={RemoteTimeline} content={children} /> <WrappedRoute path='/timeline/:instance' exact page={RemoteInstancePage} component={RemoteTimeline} content={children} />
<WrappedRoute path='/conversations' page={DefaultPage} component={Conversations} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
<WrappedRoute path='/messages' page={DefaultPage} component={DirectTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} /> <WrappedRoute path='/messages' page={DefaultPage} component={DirectTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
{/* {/*
@ -236,14 +238,20 @@ class SwitchingColumnsArea extends React.PureComponent {
<Redirect from='/web/:path1/:path2/:path3' to='/:path1/:path2/:path3' /> <Redirect from='/web/:path1/:path2/:path3' to='/:path1/:path2/:path3' />
<Redirect from='/web/:path1/:path2' to='/:path1/:path2' /> <Redirect from='/web/:path1/:path2' to='/:path1/:path2' />
<Redirect from='/web/:path' to='/:path' /> <Redirect from='/web/:path' to='/:path' />
<Redirect from='/statuses/new' to='/' />
<Redirect from='/timelines/home' to='/' /> <Redirect from='/timelines/home' to='/' />
<Redirect from='/timelines/public/local' to='/timeline/local' />
<Redirect from='/timelines/public' to='/timeline/fediverse' />
<Redirect from='/timelines/direct' to='/messages' />
<Redirect from='/main/all' to='/timeline/fediverse' /> <Redirect from='/main/all' to='/timeline/fediverse' />
<Redirect from='/main/public' to='/timeline/local' /> <Redirect from='/main/public' to='/timeline/local' />
<Redirect from='/main/friends' to='/' /> <Redirect from='/main/friends' to='/' />
<Redirect from='/tag/:id' to='/tags/:id' /> <Redirect from='/tag/:id' to='/tags/:id' />
<Redirect from='/user-settings' to='/settings/profile' /> <Redirect from='/user-settings' to='/settings/profile' />
<WrappedRoute path='/notice/:statusId' publicRoute exact page={DefaultPage} component={Status} content={children} /> <WrappedRoute path='/notice/:statusId' publicRoute exact page={DefaultPage} component={Status} content={children} />
<Redirect from='/users/:username/chats' to='/chats' />
<Redirect from='/users/:username' to='/@:username' /> <Redirect from='/users/:username' to='/@:username' />
<Redirect from='/terms' to='/about' />
<Redirect from='/home' to='/' /> <Redirect from='/home' to='/' />
{/* Soapbox Legacy redirects */} {/* Soapbox Legacy redirects */}
@ -286,6 +294,7 @@ class SwitchingColumnsArea extends React.PureComponent {
<WrappedRoute path='/scheduled_statuses' page={DefaultPage} component={ScheduledStatuses} content={children} /> <WrappedRoute path='/scheduled_statuses' page={DefaultPage} component={ScheduledStatuses} content={children} />
<Redirect from='/registration/:token' to='/invite/:token' /> <Redirect from='/registration/:token' to='/invite/:token' />
<Redirect from='/registration' to='/' />
<WrappedRoute path='/invite/:token' component={RegisterInvite} content={children} publicRoute /> <WrappedRoute path='/invite/:token' component={RegisterInvite} content={children} publicRoute />
<Redirect exact from='/settings' to='/settings/preferences' /> <Redirect exact from='/settings' to='/settings/preferences' />

9
app/styles/components/icon.scss
View File

@ -29,6 +29,15 @@
fill: var(--primary-text-color); fill: var(--primary-text-color);
} }
} }
svg.icon-tabler-mail {
stroke: var(--background-color);
rect {
fill: var(--primary-text-color);
stroke: var(--primary-text-color);
}
}
} }
} }