mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next-layout' into 'next'

Browse Source 
Layout: make all UI routes have a static left sidebar

See merge request soapbox-pub/soapbox-fe!1274
next
Alex Gleason 2 years ago
parent 23d4e70aba 3d0e9200c2
commit 735b5932a2
9 changed files with 43 additions and 72 deletions
Show Stats Download Patch File Download Diff File

18
app/soapbox/features/ui/index.tsx
Unescape View File

@ -13,7 +13,9 @@ import { fetchCustomEmojis } from 'soapbox/actions/custom_emojis';
import { fetchMarker } from 'soapbox/actions/markers';
import { register as registerPushNotifications } from 'soapbox/actions/push_notifications';
import Icon from 'soapbox/components/icon';
import SidebarNavigation from 'soapbox/components/sidebar-navigation';
import ThumbNavigation from 'soapbox/components/thumb_navigation';
import { Layout } from 'soapbox/components/ui';
import { useAppSelector, useOwnAccount, useSoapboxConfig, useFeatures } from 'soapbox/hooks';
import AdminPage from 'soapbox/pages/admin_page';
import DefaultPage from 'soapbox/pages/default_page';
@ -26,6 +28,7 @@ import RemoteInstancePage from 'soapbox/pages/remote_instance_page';
import StatusPage from 'soapbox/pages/status_page';
import { getAccessToken } from 'soapbox/utils/auth';
import { getVapidKey } from 'soapbox/utils/auth';
import { isStandalone } from 'soapbox/utils/state';
import { fetchFollowRequests } from '../../actions/accounts';
import { fetchReports, fetchUsers, fetchConfig } from '../../actions/admin';
@ -170,7 +173,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
// Ex: use /login instead of /auth, but redirect /auth to /login
return (
<Switch>
<WrappedRoute path='/login/external' component={ExternalLogin} publicRoute exact />
<WrappedRoute path='/login/external' page={EmptyPage} component={ExternalLogin} content={children} publicRoute exact />
<WrappedRoute path='/email-confirmation' page={EmptyPage} component={EmailConfirmation} publicRoute exact />
<WrappedRoute path='/logout' page={EmptyPage} component={LogoutPage} publicRoute exact />
@ -344,6 +347,7 @@ const UI: React.FC = ({ children }) => {
const dropdownMenuIsOpen = useAppSelector(state => state.dropdown_menu.get('openId') !== null);
const accessToken = useAppSelector(state => getAccessToken(state));
const streamingUrl = useAppSelector(state => state.instance.urls.get('streaming_api'));
const standalone = useAppSelector(isStandalone);
const handleDragEnter = (e: DragEvent) => {
e.preventDefault();
@ -647,9 +651,15 @@ const UI: React.FC = ({ children }) => {
<div className='z-10 flex flex-col'>
<Navbar />
<SwitchingColumnsArea>
{children}
</SwitchingColumnsArea>
<Layout>
<Layout.Sidebar>
{!standalone && <SidebarNavigation />}
</Layout.Sidebar>
<SwitchingColumnsArea>
{children}
</SwitchingColumnsArea>
</Layout>
{me && floatingActionButton}

33
app/soapbox/features/ui/util/react_router_helpers.tsx
Unescape View File

@ -1,6 +1,7 @@
import React from 'react';
import { Redirect, Route, useHistory, RouteProps, RouteComponentProps, match as MatchType } from 'react-router-dom';
import { Layout } from 'soapbox/components/ui';
import { useOwnAccount, useSettings } from 'soapbox/hooks';
import BundleColumnError from '../components/bundle_column_error';
@ -75,29 +76,19 @@ const WrappedRoute: React.FC<IWrappedRoute> = ({
);
};
const renderLoading = () => {
return (
<ColumnsArea layout={layout}>
<ColumnLoading />
</ColumnsArea>
);
};
const renderWithLayout = (children: JSX.Element) => (
<>
<Layout.Main>
{children}
</Layout.Main>
const renderForbidden = () => {
return (
<ColumnsArea layout={layout}>
<ColumnForbidden />
</ColumnsArea>
);
};
<Layout.Aside />
</>
);
const renderError = (props: any) => {
return (
<ColumnsArea layout={layout}>
<BundleColumnError {...props} />
</ColumnsArea>
);
};
const renderLoading = () => renderWithLayout(<ColumnLoading />);
const renderForbidden = () => renderWithLayout(<ColumnForbidden />);
const renderError = (props: any) => renderWithLayout(<BundleColumnError {...props} />);
const loginRedirect = () => {
const actualUrl = encodeURIComponent(`${history.location.pathname}${history.location.search}`);

9
app/soapbox/pages/admin_page.tsx
Unescape View File

@ -1,6 +1,5 @@
import React from 'react';
import SidebarNavigation from 'soapbox/components/sidebar-navigation';
import { Layout } from 'soapbox/components/ui';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import {
@ -11,11 +10,7 @@ import LinkFooter from '../features/ui/components/link_footer';
const AdminPage: React.FC = ({ children }) => {
return (
<Layout>
<Layout.Sidebar>
<SidebarNavigation />
</Layout.Sidebar>
<>
<Layout.Main>
{children}
</Layout.Main>
@ -27,7 +22,7 @@ const AdminPage: React.FC = ({ children }) => {
<LinkFooter />
</Layout.Aside>
</Layout>
</>
);
};

13
app/soapbox/pages/default_page.tsx
Unescape View File

@ -1,6 +1,5 @@
import React from 'react';
import SidebarNavigation from 'soapbox/components/sidebar-navigation';
import LinkFooter from 'soapbox/features/ui/components/link_footer';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import {
@ -9,25 +8,23 @@ import {
SignUpPanel,
} from 'soapbox/features/ui/util/async-components';
import { useAppSelector, useFeatures } from 'soapbox/hooks';
import { isStandalone } from 'soapbox/utils/state';
import { Layout } from '../components/ui';
const DefaultPage: React.FC = ({ children }) => {
const me = useAppSelector(state => state.me);
const standalone = useAppSelector(isStandalone);
const features = useFeatures();
return (
<Layout>
<Layout.Sidebar>
<SidebarNavigation />
</Layout.Sidebar>
<>
<Layout.Main>
{children}
</Layout.Main>
<Layout.Aside>
{!me && (
{!me && !standalone && (
<BundleContainer fetchComponent={SignUpPanel}>
{Component => <Component key='sign-up-panel' />}
</BundleContainer>
@ -44,7 +41,7 @@ const DefaultPage: React.FC = ({ children }) => {
)}
<LinkFooter key='link-footer' />
</Layout.Aside>
</Layout>
</>
);
};

6
app/soapbox/pages/empty_page.tsx
Unescape View File

@ -4,15 +4,13 @@ import { Layout } from '../components/ui';
const EmptyPage: React.FC = ({ children }) => {
return (
<Layout>
<Layout.Sidebar />
<>
<Layout.Main>
{children}
</Layout.Main>
<Layout.Aside />
</Layout>
</>
);
};

9
app/soapbox/pages/home_page.tsx
Unescape View File

@ -1,7 +1,6 @@
import React, { useRef } from 'react';
import { Link } from 'react-router-dom';
import SidebarNavigation from 'soapbox/components/sidebar-navigation';
import LinkFooter from 'soapbox/features/ui/components/link_footer';
import {
WhoToFollowPanel,
@ -35,11 +34,7 @@ const HomePage: React.FC = ({ children }) => {
const acct = account ? account.acct : '';
return (
<Layout>
<Layout.Sidebar>
<SidebarNavigation />
</Layout.Sidebar>
<>
<Layout.Main className='divide-y divide-gray-200 divide-solid sm:divide-none'>
{me && (
<Card variant='rounded' ref={composeBlock}>
@ -99,7 +94,7 @@ const HomePage: React.FC = ({ children }) => {
)}
<LinkFooter key='link-footer' />
</Layout.Aside>
</Layout>
</>
);
};

9
app/soapbox/pages/profile_page.js
Unescape View File

@ -6,7 +6,6 @@ import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { Redirect, withRouter } from 'react-router-dom';
import SidebarNavigation from 'soapbox/components/sidebar-navigation';
import LinkFooter from 'soapbox/features/ui/components/link_footer';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import {
@ -127,11 +126,7 @@ class ProfilePage extends ImmutablePureComponent {
}
return (
<Layout>
<Layout.Sidebar>
<SidebarNavigation />
</Layout.Sidebar>
<>
<Layout.Main>
<Column label={account ? `@${getAcct(account, displayFqn)}` : null} withHeader={false}>
<div className='space-y-4'>
@ -171,7 +166,7 @@ class ProfilePage extends ImmutablePureComponent {
)}
<LinkFooter key='link-footer' />
</Layout.Aside>
</Layout>
</>
);
}

9
app/soapbox/pages/remote_instance_page.js
Unescape View File

@ -2,7 +2,6 @@ import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import SidebarNavigation from 'soapbox/components/sidebar-navigation';
import LinkFooter from 'soapbox/features/ui/components/link_footer';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import {
@ -32,11 +31,7 @@ class RemoteInstancePage extends ImmutablePureComponent {
const { children, params: { instance: host }, disclosed, isAdmin } = this.props;
return (
<Layout>
<Layout.Sidebar>
<SidebarNavigation />
</Layout.Sidebar>
<>
<Layout.Main>
{children}
</Layout.Main>
@ -55,7 +50,7 @@ class RemoteInstancePage extends ImmutablePureComponent {
)}
<LinkFooter key='link-footer' />
</Layout.Aside>
</Layout>
</>
);
}

9
app/soapbox/pages/status_page.js
Unescape View File

@ -2,7 +2,6 @@ import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import SidebarNavigation from 'soapbox/components/sidebar-navigation';
import LinkFooter from 'soapbox/features/ui/components/link_footer';
import {
WhoToFollowPanel,
@ -33,11 +32,7 @@ class StatusPage extends ImmutablePureComponent {
const { me, children, showTrendsPanel, showWhoToFollowPanel } = this.props;
return (
<Layout>
<Layout.Sidebar>
<SidebarNavigation />
</Layout.Sidebar>
<>
<Layout.Main>
{children}
</Layout.Main>
@ -60,7 +55,7 @@ class StatusPage extends ImmutablePureComponent {
)}
<LinkFooter key='link-footer' />
</Layout.Aside>
</Layout>
</>
);
}

Write Preview
Loading…
Cancel
Save