Remove the secondary header and update the appbar instead.

master
Tom Hacohen 6 years ago
parent cf435118d4
commit 8f13da7a39

@ -23,7 +23,6 @@ import SideMenu from './SideMenu';
import LoginGate from './LoginGate';
import { RouteResolver } from './routes';
import * as C from './constants';
import * as store from './store';
import * as actions from './store/actions';
@ -41,6 +40,11 @@ const muiTheme = createMuiTheme({
}
});
export let appBarPortals = {
'title': null as Element | null,
'buttons': null as Element | null,
};
export const routeResolver = new RouteResolver({
home: '',
pim: {
@ -127,11 +131,9 @@ const AppBarWitHistory = withRouter(
}
</div>
<div style={{ flexGrow: 1, fontSize: '1.25em' }}>
{C.appName}
</div>
<div style={{ flexGrow: 1, fontSize: '1.25em' }} id="appbar-title" />
<div style={{ marginRight: -12 }}>
<div style={{ marginRight: -12 }} id="appbar-buttons">
{iconElementRight}
</div>
</Toolbar>

@ -8,10 +8,9 @@ import Contact from '../components/Contact';
import Calendar from '../components/Calendar';
import Event from '../components/Event';
import AppBarOverride from '../widgets/AppBarOverride';
import Container from '../widgets/Container';
import SecondaryHeader from '../components/SecondaryHeader';
import JournalEntries from '../components/JournalEntries';
import journalView from './journalView';
@ -88,7 +87,7 @@ class Journal extends React.PureComponent<PropsTypeInner> {
return (
<React.Fragment>
<SecondaryHeader>{collectionInfo.displayName}</SecondaryHeader>
<AppBarOverride title={collectionInfo.displayName} />
<Tabs
fullWidth={true}
style={{ backgroundColor: theme.palette.primary.main }}

@ -8,6 +8,7 @@ import { createSelector } from 'reselect';
import { routeResolver } from './App';
import AppBarOverride from './widgets/AppBarOverride';
import LoadingIndicator from './widgets/LoadingIndicator';
import PrettyError from './widgets/PrettyError';
@ -194,24 +195,30 @@ class SyncGate extends React.PureComponent<PropsTypeInner> {
<Route
path={routeResolver.getRoute('pim')}
render={({match, history}) => (
<>
<AppBarOverride title="EteSync" />
<PimRouter
etesync={this.props.etesync}
userInfo={this.props.userInfo.value!}
syncInfo={journalMap}
history={history}
/>
</>
)}
/>
<Route
path={routeResolver.getRoute('journals')}
exact={true}
render={({ history }) => (
<>
<AppBarOverride title="Journals" />
<Journals
userInfo={this.props.userInfo.value!}
etesync={this.props.etesync}
journals={journals}
history={history}
/>
</>
)}
/>
<Route

@ -1,23 +0,0 @@
import * as React from 'react';
import { Theme, withTheme } from '@material-ui/core/styles';
export default withTheme()((props: {children: React.ReactNode | React.ReactNode[], theme: Theme}) => {
const style = {
header: {
backgroundColor: props.theme.palette.primary.main,
color: props.theme.palette.primary.contrastText,
padding: 15,
textAlign: 'center' as any,
},
headerText: {
margin: 0,
},
};
return (
<div style={style.header}>
<h2 style={style.headerText}>{props.children}</h2>
</div>
);
});

@ -0,0 +1,20 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default (props: {title: string, children?: React.ReactNode | React.ReactNode[]}) => {
const titleEl = document.querySelector('#appbar-title');
const buttonsEl = document.querySelector('#appbar-buttons');
return (
<>
{titleEl && ReactDOM.createPortal(
<span>{props.title}</span>,
titleEl
)}
{buttonsEl && props.children && ReactDOM.createPortal(
props.children,
buttonsEl
)}
</>
);
};
Loading…
Cancel
Save