Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-14 16:28:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] refactor: Use new main menu as "Getting started" column in Advanced Web UI

Browse Source 
Port d28a4428b5 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2025-06-23 11:59:47 +02:00
committed by Claire
parent d8b0beb70d
commit c6a99eaf5b
10 changed files with 244 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/javascript/flavours/glitch/features/compose/index.tsx
View File

@@ -24,33 +24,28 @@ import { Icon } from 'flavours/glitch/components/icon';
import glitchedElephant1 from 'flavours/glitch/images/mbstobon-ui-0.png';
import glitchedElephant2 from 'flavours/glitch/images/mbstobon-ui-1.png';
import glitchedElephant3 from 'flavours/glitch/images/mbstobon-ui-2.png';
import { mascot } from 'flavours/glitch/initial_state';
import { mascot, reduceMotion } from 'flavours/glitch/initial_state';
import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
import { messages as navbarMessages } from '../ui/components/navigation_bar';
import { Search } from './components/search';
import ComposeFormContainer from './containers/compose_form_container';
const messages = defineMessages({
start: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' },
notifications: {
id: 'tabs_bar.notifications',
defaultMessage: 'Notifications',
live_feed_public: {
id: 'navigation_bar.live_feed_public',
defaultMessage: 'Live feed (public)',
},
public: {
id: 'navigation_bar.public_timeline',
defaultMessage: 'Federated timeline',
},
community: {
id: 'navigation_bar.community_timeline',
defaultMessage: 'Local timeline',
live_feed_local: {
id: 'navigation_bar.live_feed_local',
defaultMessage: 'Live feed (local)',
},
settings: {
id: 'navigation_bar.app_settings',
defaultMessage: 'App settings',
},
logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new post' },
});
type ColumnMap = ImmutableMap<'id' | 'uuid' | 'params', string>;
@@ -127,19 +122,27 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
elephantUIPlane,
][elefriend];
const scrollNavbarIntoView = useCallback(() => {
const navbar = document.querySelector('.navigation-panel');
navbar?.scrollIntoView({
behavior: reduceMotion ? 'auto' : 'smooth',
});
}, []);
if (multiColumn) {
return (
<div
className='drawer'
role='region'
aria-label={intl.formatMessage(messages.compose)}
aria-label={intl.formatMessage(navbarMessages.publish)}
>
<nav className='drawer__header'>
<Link
to='/getting-started'
className='drawer__tab'
title={intl.formatMessage(messages.start)}
aria-label={intl.formatMessage(messages.start)}
title={intl.formatMessage(navbarMessages.menu)}
aria-label={intl.formatMessage(navbarMessages.menu)}
onClick={scrollNavbarIntoView}
>
<Icon id='bars' icon={MenuIcon} />
</Link>
@@ -147,8 +150,8 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
<Link
to='/home'
className='drawer__tab'
title={intl.formatMessage(messages.home_timeline)}
aria-label={intl.formatMessage(messages.home_timeline)}
title={intl.formatMessage(navbarMessages.home)}
aria-label={intl.formatMessage(navbarMessages.home)}
>
<Icon id='home' icon={HomeIcon} />
</Link>
@@ -157,8 +160,8 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
<Link
to='/notifications'
className='drawer__tab'
title={intl.formatMessage(messages.notifications)}
aria-label={intl.formatMessage(messages.notifications)}
title={intl.formatMessage(navbarMessages.notifications)}
aria-label={intl.formatMessage(navbarMessages.notifications)}
>
<span className='icon-badge-wrapper'>
<Icon id='bell' icon={NotificationsIcon} />
@@ -172,8 +175,8 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
<Link
to='/public/local'
className='drawer__tab'
title={intl.formatMessage(messages.community)}
aria-label={intl.formatMessage(messages.community)}
title={intl.formatMessage(messages.live_feed_local)}
aria-label={intl.formatMessage(messages.live_feed_local)}
>
<Icon id='users' icon={PeopleIcon} />
</Link>
@@ -182,8 +185,8 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
<Link
to='/public'
className='drawer__tab'
title={intl.formatMessage(messages.public)}
aria-label={intl.formatMessage(messages.public)}
title={intl.formatMessage(messages.live_feed_public)}
aria-label={intl.formatMessage(messages.live_feed_public)}
>
<Icon id='globe' icon={PublicIcon} />
</Link>
@@ -230,12 +233,12 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
return (
<Column
bindToDocument={!multiColumn}
label={intl.formatMessage(messages.compose)}
label={intl.formatMessage(navbarMessages.publish)}
>
<ColumnHeader
icon='pencil'
iconComponent={EditIcon}
title={intl.formatMessage(messages.compose)}
title={intl.formatMessage(navbarMessages.publish)}
multiColumn={multiColumn}
showBackButton
/>

224
app/javascript/flavours/glitch/features/getting_started/index.jsx
View File

@@ -1,224 +0,0 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import { createSelector } from '@reduxjs/toolkit';
import { List as ImmutableList } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
import ExploreIcon from '@/material-icons/400-24px/explore.svg?react';
import ModerationIcon from '@/material-icons/400-24px/gavel.svg?react';
import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
import MailIcon from '@/material-icons/400-24px/mail.svg?react';
import AdministrationIcon from '@/material-icons/400-24px/manufacturing.svg?react';
import MenuIcon from '@/material-icons/400-24px/menu.svg?react';
import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react';
import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
import PublicIcon from '@/material-icons/400-24px/public.svg?react';
import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react';
import { fetchFollowRequests } from 'flavours/glitch/actions/accounts';
import { fetchLists } from 'flavours/glitch/actions/lists';
import { openModal } from 'flavours/glitch/actions/modal';
import Column from 'flavours/glitch/features/ui/components/column';
import { LinkFooter } from 'flavours/glitch/features/ui/components/link_footer';
import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
import { canManageReports, canViewAdminDashboard } from 'flavours/glitch/permissions';
import { preferencesLink } from 'flavours/glitch/utils/backend_links';
import { me, showTrends } from '../../initial_state';
import { NavigationBar } from '../compose/components/navigation_bar';
import { ColumnLink } from '../ui/components/column_link';
import ColumnSubheading from '../ui/components/column_subheading';
import { Trends } from 'flavours/glitch/features/navigation_panel/components/trends';
const messages = defineMessages({
heading: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' },
notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
public_timeline: { id: 'navigation_bar.public_timeline', defaultMessage: 'Federated timeline' },
navigation_subheading: { id: 'column_subheading.navigation', defaultMessage: 'Navigation' },
settings_subheading: { id: 'column_subheading.settings', defaultMessage: 'Settings' },
community_timeline: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
explore: { id: 'navigation_bar.explore', defaultMessage: 'Explore' },
direct: { id: 'navigation_bar.direct', defaultMessage: 'Private mentions' },
bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
administration: { id: 'navigation_bar.administration', defaultMessage: 'Administration' },
moderation: { id: 'navigation_bar.moderation', defaultMessage: 'Moderation' },
settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' },
follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
keyboard_shortcuts: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Keyboard shortcuts' },
lists_subheading: { id: 'column_subheading.lists', defaultMessage: 'Lists' },
misc: { id: 'navigation_bar.misc', defaultMessage: 'Misc' },
menu: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
});
const makeMapStateToProps = () => {
const getOrderedLists = createSelector([state => state.get('lists')], lists => {
if (!lists) {
return lists;
}
return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
});
const mapStateToProps = state => ({
lists: getOrderedLists(state),
myAccount: state.getIn(['accounts', me]),
columns: state.getIn(['settings', 'columns']),
unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
unreadNotifications: state.getIn(['notifications', 'unread']),
});
return mapStateToProps;
};
const mapDispatchToProps = dispatch => ({
fetchFollowRequests: () => dispatch(fetchFollowRequests()),
fetchLists: () => dispatch(fetchLists()),
openSettings: () => dispatch(openModal({
modalType: 'SETTINGS',
modalProps: {},
})),
});
const badgeDisplay = (number, limit) => {
if (number === 0) {
return undefined;
} else if (limit && number >= limit) {
return `${limit}+`;
} else {
return number;
}
};
class GettingStarted extends ImmutablePureComponent {
static propTypes = {
identity: identityContextPropShape,
intl: PropTypes.object.isRequired,
myAccount: ImmutablePropTypes.record,
columns: ImmutablePropTypes.list,
multiColumn: PropTypes.bool,
fetchFollowRequests: PropTypes.func.isRequired,
unreadFollowRequests: PropTypes.number,
unreadNotifications: PropTypes.number,
lists: ImmutablePropTypes.list,
fetchLists: PropTypes.func.isRequired,
openSettings: PropTypes.func.isRequired,
};
UNSAFE_componentWillMount () {
this.props.fetchLists();
}
componentDidMount () {
const { fetchFollowRequests } = this.props;
const { signedIn } = this.props.identity;
if (!signedIn) {
return;
}
fetchFollowRequests();
}
render () {
const { intl, myAccount, columns, multiColumn, unreadFollowRequests, unreadNotifications, lists, openSettings } = this.props;
const { signedIn, permissions } = this.props.identity;
const navItems = [];
let listItems = [];
if (multiColumn) {
if (signedIn && !columns.find(item => item.get('id') === 'HOME')) {
navItems.push(<ColumnLink key='home' icon='home' iconComponent={HomeIcon} text={intl.formatMessage(messages.home_timeline)} to='/home' />);
}
if (!columns.find(item => item.get('id') === 'NOTIFICATIONS')) {
navItems.push(<ColumnLink key='notifications' icon='bell' iconComponent={NotificationsIcon} text={intl.formatMessage(messages.notifications)} badge={badgeDisplay(unreadNotifications)} to='/notifications' />);
}
if (!columns.find(item => item.get('id') === 'COMMUNITY')) {
navItems.push(<ColumnLink key='community_timeline' icon='users' iconComponent={PeopleIcon} text={intl.formatMessage(messages.community_timeline)} to='/public/local' />);
}
if (!columns.find(item => item.get('id') === 'PUBLIC')) {
navItems.push(<ColumnLink key='public_timeline' icon='globe' iconComponent={PublicIcon} text={intl.formatMessage(messages.public_timeline)} to='/public' />);
}
}
if (showTrends) {
navItems.push(<ColumnLink key='explore' icon='explore' iconComponent={ExploreIcon} text={intl.formatMessage(messages.explore)} to='/explore' />);
}
if (signedIn) {
if (!multiColumn || !columns.find(item => item.get('id') === 'DIRECT')) {
navItems.push(<ColumnLink key='conversations' icon='envelope' iconComponent={MailIcon} text={intl.formatMessage(messages.direct)} to='/conversations' />);
}
if (!multiColumn || !columns.find(item => item.get('id') === 'BOOKMARKS')) {
navItems.push(<ColumnLink key='bookmarks' icon='bookmark' iconComponent={BookmarksIcon} text={intl.formatMessage(messages.bookmarks)} to='/bookmarks' />);
}
if (myAccount.get('locked') || unreadFollowRequests > 0) {
navItems.push(<ColumnLink key='follow_requests' icon='user-plus' iconComponent={PersonAddIcon} text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
}
navItems.push(<ColumnLink key='getting_started' icon='ellipsis-h' iconComponent={MoreHorizIcon} text={intl.formatMessage(messages.misc)} to='/getting-started-misc' />);
listItems = listItems.concat([
<div key='9'>
<ColumnLink key='lists' icon='bars' iconComponent={ListAltIcon} text={intl.formatMessage(messages.lists)} to='/lists' />
{lists.filter(list => !columns.find(item => item.get('id') === 'LIST' && item.getIn(['params', 'id']) === list.get('id'))).map(list =>
<ColumnLink key={`list-${list.get('id')}`} to={`/lists/${list.get('id')}`} icon='list-ul' iconComponent={ListAltIcon} text={list.get('title')} />,
)}
</div>,
]);
}
return (
<Column bindToDocument={!multiColumn} icon='bars' iconComponent={MenuIcon} heading={intl.formatMessage(messages.heading)} label={intl.formatMessage(messages.menu)} hideHeadingOnMobile>
<div className='scrollable optionally-scrollable'>
<div className='getting-started__wrapper'>
{!multiColumn && signedIn && <NavigationBar account={myAccount} />}
{multiColumn && <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} />}
{navItems}
{signedIn && (
<>
<ColumnSubheading text={intl.formatMessage(messages.lists_subheading)} />
{listItems}
<ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} />
{ preferencesLink !== undefined && <ColumnLink icon='cog' iconComponent={SettingsIcon} text={intl.formatMessage(messages.preferences)} href={preferencesLink} /> }
<ColumnLink icon='cogs' iconComponent={AdministrationIcon} text={intl.formatMessage(messages.settings)} onClick={openSettings} />
{canManageReports(permissions) && <ColumnLink key='moderation' href='/admin/reports' icon='flag' iconComponent={ModerationIcon} text={intl.formatMessage(messages.moderation)} />}
{canViewAdminDashboard(permissions) && <ColumnLink key='administration' href='/admin/dashboard' icon='tachometer' iconComponent={AdministrationIcon} text={intl.formatMessage(messages.administration)} />}
</>
)}
</div>
<LinkFooter multiColumn />
</div>
{(multiColumn && showTrends) && <Trends />}
<Helmet>
<title>{intl.formatMessage(messages.menu)}</title>
<meta name='robots' content='noindex' />
</Helmet>
</Column>
);
}
}
export default withIdentity(connect(makeMapStateToProps, mapDispatchToProps)(injectIntl(GettingStarted)));

32
app/javascript/flavours/glitch/features/getting_started/index.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { useIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Column } from 'flavours/glitch/components/column';
import { NavigationPanel } from '../navigation_panel';
import { LinkFooter } from '../ui/components/link_footer';
const GettingStarted: React.FC = () => {
const intl = useIntl();
return (
<Column>
<NavigationPanel multiColumn />
<LinkFooter multiColumn />
<Helmet>
<title>
{intl.formatMessage({
id: 'getting_started.heading',
defaultMessage: 'Getting started',
})}
</title>
<meta name='robots' content='noindex' />
</Helmet>
</Column>
);
};
// eslint-disable-next-line import/no-default-export
export default GettingStarted;

59
app/javascript/flavours/glitch/features/getting_started_misc/index.jsx
View File

@@ -1,59 +0,0 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import BlockIcon from '@/material-icons/400-24px/block.svg?react';
import InfoIcon from '@/material-icons/400-24px/info.svg?react';
import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
import Column from 'flavours/glitch/features/ui/components/column';
import { ColumnLink } from 'flavours/glitch/features/ui/components/column_link';
import ColumnSubheading from 'flavours/glitch/features/ui/components/column_subheading';
import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
const messages = defineMessages({
heading: { id: 'column.heading', defaultMessage: 'Misc' },
subheading: { id: 'column.subheading', defaultMessage: 'Miscellaneous options' },
favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favorites' },
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Blocked domains' },
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned posts' },
keyboard_shortcuts: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Keyboard shortcuts' },
});
class GettingStartedMisc extends ImmutablePureComponent {
static propTypes = {
identity: identityContextPropShape,
intl: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
};
render () {
const { intl } = this.props;
const { signedIn } = this.props.identity;
return (
<Column icon='ellipsis-h' iconComponent={MoreHorizIcon} heading={intl.formatMessage(messages.heading)} alwaysShowBackButton>
<div className='scrollable'>
<ColumnSubheading text={intl.formatMessage(messages.subheading)} />
{signedIn && (<ColumnLink key='favourites' icon='star' iconComponent={StarIcon} text={intl.formatMessage(messages.favourites)} to='/favourites' />)}
{signedIn && (<ColumnLink key='pinned' icon='thumb-tack' iconComponent={PushPinIcon} text={intl.formatMessage(messages.pins)} to='/pinned' />)}
{signedIn && (<ColumnLink key='mutes' icon='volume-off' iconComponent={VolumeOffIcon} text={intl.formatMessage(messages.mutes)} to='/mutes' />)}
{signedIn && (<ColumnLink key='blocks' icon='ban' iconComponent={BlockIcon} text={intl.formatMessage(messages.blocks)} to='/blocks' />)}
{signedIn && (<ColumnLink key='domain_blocks' icon='minus-circle' iconComponent={BlockIcon} text={intl.formatMessage(messages.domain_blocks)} to='/domain_blocks' />)}
<ColumnLink key='shortcuts' icon='question' iconComponent={InfoIcon} text={intl.formatMessage(messages.keyboard_shortcuts)} to='/keyboard-shortcuts' />
</div>
</Column>
);
}
}
export default connect()(withIdentity(injectIntl(GettingStartedMisc)));

257
app/javascript/flavours/glitch/features/navigation_panel/index.tsx
View File

@@ -203,113 +203,14 @@ const isFirehoseActive = (
const MENU_WIDTH = 284;
export const NavigationPanel: React.FC = () => {
export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
multiColumn = false,
}) => {
const intl = useIntl();
const { signedIn, disabledAccountId } = useIdentity();
const open = useAppSelector((state) => state.navigation.open);
const dispatch = useAppDispatch();
const openable = useBreakpoint('openable');
const showSearch = useBreakpoint('full');
const location = useLocation();
const overlayRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
dispatch(closeNavigation());
}, [dispatch, location]);
useEffect(() => {
const handleDocumentClick = (e: MouseEvent) => {
if (overlayRef.current && e.target === overlayRef.current) {
dispatch(closeNavigation());
}
};
const handleDocumentKeyUp = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
dispatch(closeNavigation());
}
};
document.addEventListener('click', handleDocumentClick);
document.addEventListener('keyup', handleDocumentKeyUp);
return () => {
document.removeEventListener('click', handleDocumentClick);
document.removeEventListener('keyup', handleDocumentKeyUp);
};
}, [dispatch]);
const isLtrDir = getComputedStyle(document.body).direction !== 'rtl';
const OPEN_MENU_OFFSET = isLtrDir ? MENU_WIDTH : -MENU_WIDTH;
const [{ x }, spring] = useSpring(
() => ({
x: open ? 0 : OPEN_MENU_OFFSET,
onRest: {
x({ value }: { value: number }) {
if (value === 0) {
dispatch(openNavigation());
} else if (isLtrDir ? value > 0 : value < 0) {
dispatch(closeNavigation());
}
},
},
}),
[open],
);
const bind = useDrag(
({
last,
offset: [xOffset],
velocity: [xVelocity],
direction: [xDirection],
cancel,
}) => {
const logicalXDirection = isLtrDir ? xDirection : -xDirection;
const logicalXOffset = isLtrDir ? xOffset : -xOffset;
const hasReachedDragThreshold = logicalXOffset < -70;
if (hasReachedDragThreshold) {
cancel();
}
if (last) {
const isAboveOpenThreshold = logicalXOffset > MENU_WIDTH / 2;
const isQuickFlick = xVelocity > 0.5 && logicalXDirection > 0;
if (isAboveOpenThreshold || isQuickFlick) {
void spring.start({ x: OPEN_MENU_OFFSET });
} else {
void spring.start({ x: 0 });
}
} else {
void spring.start({ x: xOffset, immediate: true });
}
},
{
from: () => [x.get(), 0],
filterTaps: true,
bounds: isLtrDir ? { left: 0 } : { right: 0 },
rubberband: true,
},
);
const previouslyFocusedElementRef = useRef<HTMLElement | null>();
useEffect(() => {
if (open) {
const firstLink = document.querySelector<HTMLAnchorElement>(
'.navigation-panel__menu .column-link',
);
previouslyFocusedElementRef.current =
document.activeElement as HTMLElement;
firstLink?.focus();
} else {
previouslyFocusedElementRef.current?.focus();
}
}, [open]);
const showSearch = useBreakpoint('full') && !multiColumn;
const dispatch = useAppDispatch();
let banner: React.ReactNode;
@@ -342,31 +243,18 @@ export const NavigationPanel: React.FC = () => {
[dispatch],
);
const showOverlay = openable && open;
return (
<div
className={classNames(
'columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational',
{ 'columns-area__panels__pane--overlay': showOverlay },
)}
ref={overlayRef}
>
<animated.div
className='columns-area__panels__pane__inner'
{...bind()}
style={openable ? { x } : undefined}
>
<div className='navigation-panel'>
{showSearch && <Search singleColumn />}
<ProfileCard />
{!multiColumn && <ProfileCard />}
{banner && <div className='navigation-panel__banner'>{banner}</div>}
<div className='navigation-panel__menu'>
{signedIn && (
<>
{!multiColumn && (
<ColumnLink
to='/publish'
icon='plus'
@@ -375,6 +263,7 @@ export const NavigationPanel: React.FC = () => {
text={intl.formatMessage(messages.compose)}
className='button navigation-panel__compose-button'
/>
)}
<ColumnLink
transparent
to='/home'
@@ -478,11 +367,7 @@ export const NavigationPanel: React.FC = () => {
<div className='navigation-panel__sign-in-banner'>
<hr />
{disabledAccountId ? (
<DisabledAccountBanner />
) : (
<SignInBanner />
)}
{disabledAccountId ? <DisabledAccountBanner /> : <SignInBanner />}
</div>
)}
</div>
@@ -491,6 +376,130 @@ export const NavigationPanel: React.FC = () => {
<Trends />
</div>
);
};
export const CollapsibleNavigationPanel: React.FC = () => {
const open = useAppSelector((state) => state.navigation.open);
const dispatch = useAppDispatch();
const openable = useBreakpoint('openable');
const location = useLocation();
const overlayRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
dispatch(closeNavigation());
}, [dispatch, location]);
useEffect(() => {
const handleDocumentClick = (e: MouseEvent) => {
if (overlayRef.current && e.target === overlayRef.current) {
dispatch(closeNavigation());
}
};
const handleDocumentKeyUp = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
dispatch(closeNavigation());
}
};
document.addEventListener('click', handleDocumentClick);
document.addEventListener('keyup', handleDocumentKeyUp);
return () => {
document.removeEventListener('click', handleDocumentClick);
document.removeEventListener('keyup', handleDocumentKeyUp);
};
}, [dispatch]);
const isLtrDir = getComputedStyle(document.body).direction !== 'rtl';
const OPEN_MENU_OFFSET = isLtrDir ? MENU_WIDTH : -MENU_WIDTH;
const [{ x }, spring] = useSpring(
() => ({
x: open ? 0 : OPEN_MENU_OFFSET,
onRest: {
x({ value }: { value: number }) {
if (value === 0) {
dispatch(openNavigation());
} else if (isLtrDir ? value > 0 : value < 0) {
dispatch(closeNavigation());
}
},
},
}),
[open],
);
const bind = useDrag(
({
last,
offset: [xOffset],
velocity: [xVelocity],
direction: [xDirection],
cancel,
}) => {
const logicalXDirection = isLtrDir ? xDirection : -xDirection;
const logicalXOffset = isLtrDir ? xOffset : -xOffset;
const hasReachedDragThreshold = logicalXOffset < -70;
if (hasReachedDragThreshold) {
cancel();
}
if (last) {
const isAboveOpenThreshold = logicalXOffset > MENU_WIDTH / 2;
const isQuickFlick = xVelocity > 0.5 && logicalXDirection > 0;
if (isAboveOpenThreshold || isQuickFlick) {
void spring.start({ x: OPEN_MENU_OFFSET });
} else {
void spring.start({ x: 0 });
}
} else {
void spring.start({ x: xOffset, immediate: true });
}
},
{
from: () => [x.get(), 0],
filterTaps: true,
bounds: isLtrDir ? { left: 0 } : { right: 0 },
rubberband: true,
},
);
const previouslyFocusedElementRef = useRef<HTMLElement | null>();
useEffect(() => {
if (open) {
const firstLink = document.querySelector<HTMLAnchorElement>(
'.navigation-panel__menu .column-link',
);
previouslyFocusedElementRef.current =
document.activeElement as HTMLElement;
firstLink?.focus();
} else {
previouslyFocusedElementRef.current?.focus();
}
}, [open]);
const showOverlay = openable && open;
return (
<div
className={classNames(
'columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational',
{ 'columns-area__panels__pane--overlay': showOverlay },
)}
ref={overlayRef}
>
<animated.div
className='columns-area__panels__pane__inner'
{...bind()}
style={openable ? { x } : undefined}
>
<NavigationPanel />
</animated.div>
</div>
);

4
app/javascript/flavours/glitch/features/ui/components/columns_area.jsx
View File

@@ -25,7 +25,7 @@ import BundleColumnError from './bundle_column_error';
import { ColumnLoading } from './column_loading';
import { ComposePanel, RedirectToMobileComposeIfNeeded } from './compose_panel';
import DrawerLoading from './drawer_loading';
import { NavigationPanel } from 'flavours/glitch/features/navigation_panel';
import { CollapsibleNavigationPanel } from 'flavours/glitch/features/navigation_panel';
const componentMap = {
'COMPOSE': Compose,
@@ -133,7 +133,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
<div className='columns-area columns-area--mobile'>{children}</div>
</div>
<NavigationPanel />
<CollapsibleNavigationPanel />
</div>
);
}

2
app/javascript/flavours/glitch/features/ui/components/navigation_bar.tsx
View File

@@ -22,7 +22,7 @@ import { registrationsOpen, sso_redirect } from 'flavours/glitch/initial_state';
import { selectUnreadNotificationGroupsCount } from 'flavours/glitch/selectors/notifications';
import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
const messages = defineMessages({
export const messages = defineMessages({
home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
search: { id: 'tabs_bar.search', defaultMessage: 'Search' },
publish: { id: 'tabs_bar.publish', defaultMessage: 'New Post' },

13
app/javascript/flavours/glitch/features/ui/index.jsx
View File

@@ -69,7 +69,6 @@ import {
DomainBlocks,
Mutes,
PinnedStatuses,
GettingStartedMisc,
Directory,
OnboardingProfile,
OnboardingFollows,
@@ -152,13 +151,8 @@ class SwitchingColumnsArea extends PureComponent {
};
UNSAFE_componentWillMount () {
if (this.props.singleColumn) {
document.body.classList.toggle('layout-single-column', true);
document.body.classList.toggle('layout-multiple-columns', false);
} else {
document.body.classList.toggle('layout-single-column', false);
document.body.classList.toggle('layout-multiple-columns', true);
}
document.body.classList.toggle('layout-single-column', this.props.singleColumn);
document.body.classList.toggle('layout-multiple-columns', !this.props.singleColumn);
}
componentDidUpdate (prevProps) {
@@ -210,8 +204,8 @@ class SwitchingColumnsArea extends PureComponent {
{singleColumn ? <Redirect from='/deck' to='/home' exact /> : null}
{singleColumn && pathName.startsWith('/deck/') ? <Redirect from={pathName} to={{...this.props.location, pathname: pathName.slice(5)}} /> : null}
{/* Redirect old bookmarks (without /deck) with home-like routes to the advanced interface */}
{!singleColumn && pathName === '/getting-started' ? <Redirect from='/getting-started' to='/deck/getting-started' exact /> : null}
{!singleColumn && pathName === '/home' ? <Redirect from='/home' to='/deck/getting-started' exact /> : null}
{pathName === '/getting-started' ? <Redirect from='/getting-started' to={singleColumn ? '/home' : '/deck/getting-started'} exact /> : null}
<WrappedRoute path='/getting-started' component={GettingStarted} content={children} />
<WrappedRoute path='/keyboard-shortcuts' component={KeyboardShortcuts} content={children} />
@@ -271,7 +265,6 @@ class SwitchingColumnsArea extends PureComponent {
<WrappedRoute path='/followed_tags' component={FollowedTags} content={children} />
<WrappedRoute path='/mutes' component={Mutes} content={children} />
<WrappedRoute path='/lists' component={Lists} content={children} />
<WrappedRoute path='/getting-started-misc' component={GettingStartedMisc} content={children} />
<Route component={BundleColumnError} />
</WrappedSwitch>

4
app/javascript/flavours/glitch/features/ui/util/async-components.js
View File

@@ -50,10 +50,6 @@ export function GettingStarted () {
return import('../../getting_started');
}
export function GettingStartedMisc () {
return import('../../getting_started_misc');
}
export function KeyboardShortcuts () {
return import('../../keyboard_shortcuts');
}

6
app/javascript/flavours/glitch/locales/en.json
View File

@@ -6,12 +6,8 @@
"account.view_full_profile": "View full profile",
"boost_modal.missing_description": "This toot contains some media without description",
"column.favourited_by": "Favourited by",
"column.heading": "Misc",
"column.reblogged_by": "Boosted by",
"column.subheading": "Miscellaneous options",
"column_header.profile": "Profile",
"column_subheading.lists": "Lists",
"column_subheading.navigation": "Navigation",
"community.column_settings.allow_local_only": "Show local-only toots",
"compose.attach.doodle": "Draw something",
"compose.change_federation": "Change federation settings",
@@ -45,8 +41,6 @@
"keyboard_shortcuts.secondary_toot": "to send toot using secondary privacy setting",
"moved_to_warning": "This account is marked as moved to {moved_to_link}, and may thus not accept new follows.",
"navigation_bar.app_settings": "App settings",
"navigation_bar.keyboard_shortcuts": "Keyboard shortcuts",
"navigation_bar.misc": "Misc",
"notifications.column_settings.filter_bar.show_bar": "Show filter bar",
"settings.always_show_spoilers_field": "Always enable the Content Warning field",
"settings.close": "Close",